mirror of https://github.com/grafana/grafana
Marcus Efraimsson
7 years ago
commit
979f2d79fb
@ -1,236 +0,0 @@ |
||||
define([ |
||||
'lodash', |
||||
'jquery', |
||||
'../core_module', |
||||
], |
||||
function (_, $, coreModule) { |
||||
'use strict'; |
||||
|
||||
coreModule.default.directive('dropdownTypeahead', function($compile) { |
||||
|
||||
var inputTemplate = '<input type="text"'+ |
||||
' class="gf-form-input input-medium tight-form-input"' + |
||||
' spellcheck="false" style="display:none"></input>'; |
||||
|
||||
var buttonTemplate = '<a class="gf-form-label tight-form-func dropdown-toggle"' + |
||||
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' + |
||||
' data-placement="top"><i class="fa fa-plus"></i></a>'; |
||||
|
||||
return { |
||||
scope: { |
||||
menuItems: "=dropdownTypeahead", |
||||
dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect", |
||||
model: '=ngModel' |
||||
}, |
||||
link: function($scope, elem, attrs) { |
||||
var $input = $(inputTemplate); |
||||
var $button = $(buttonTemplate); |
||||
$input.appendTo(elem); |
||||
$button.appendTo(elem); |
||||
|
||||
if (attrs.linkText) { |
||||
$button.html(attrs.linkText); |
||||
} |
||||
|
||||
if (attrs.ngModel) { |
||||
$scope.$watch('model', function(newValue) { |
||||
_.each($scope.menuItems, function(item) { |
||||
_.each(item.submenu, function(subItem) { |
||||
if (subItem.value === newValue) { |
||||
$button.html(subItem.text); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) { |
||||
if (!value.submenu) { |
||||
value.click = 'menuItemSelected(' + index + ')'; |
||||
memo.push(value.text); |
||||
} else { |
||||
_.each(value.submenu, function(item, subIndex) { |
||||
item.click = 'menuItemSelected(' + index + ',' + subIndex + ')'; |
||||
memo.push(value.text + ' ' + item.text); |
||||
}); |
||||
} |
||||
return memo; |
||||
}, []); |
||||
|
||||
$scope.menuItemSelected = function(index, subIndex) { |
||||
var menuItem = $scope.menuItems[index]; |
||||
var payload = {$item: menuItem}; |
||||
if (menuItem.submenu && subIndex !== void 0) { |
||||
payload.$subItem = menuItem.submenu[subIndex]; |
||||
} |
||||
$scope.dropdownTypeaheadOnSelect(payload); |
||||
}; |
||||
|
||||
$input.attr('data-provide', 'typeahead'); |
||||
$input.typeahead({ |
||||
source: typeaheadValues, |
||||
minLength: 1, |
||||
items: 10, |
||||
updater: function (value) { |
||||
var result = {}; |
||||
_.each($scope.menuItems, function(menuItem) { |
||||
_.each(menuItem.submenu, function(submenuItem) { |
||||
if (value === (menuItem.text + ' ' + submenuItem.text)) { |
||||
result.$subItem = submenuItem; |
||||
result.$item = menuItem; |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
if (result.$item) { |
||||
$scope.$apply(function() { |
||||
$scope.dropdownTypeaheadOnSelect(result); |
||||
}); |
||||
} |
||||
|
||||
$input.trigger('blur'); |
||||
return ''; |
||||
} |
||||
}); |
||||
|
||||
$button.click(function() { |
||||
$button.hide(); |
||||
$input.show(); |
||||
$input.focus(); |
||||
}); |
||||
|
||||
$input.keyup(function() { |
||||
elem.toggleClass('open', $input.val() === ''); |
||||
}); |
||||
|
||||
$input.blur(function() { |
||||
$input.hide(); |
||||
$input.val(''); |
||||
$button.show(); |
||||
$button.focus(); |
||||
// clicking the function dropdown menu won't
|
||||
// work if you remove class at once
|
||||
setTimeout(function() { |
||||
elem.removeClass('open'); |
||||
}, 200); |
||||
}); |
||||
|
||||
$compile(elem.contents())($scope); |
||||
} |
||||
}; |
||||
}); |
||||
|
||||
coreModule.default.directive('dropdownTypeahead2', function($compile) { |
||||
|
||||
var inputTemplate = '<input type="text"'+ |
||||
' class="gf-form-input"' + |
||||
' spellcheck="false" style="display:none"></input>'; |
||||
|
||||
var buttonTemplate = '<a class="gf-form-input dropdown-toggle"' + |
||||
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' + |
||||
' data-placement="top"><i class="fa fa-plus"></i></a>'; |
||||
|
||||
return { |
||||
scope: { |
||||
menuItems: "=dropdownTypeahead2", |
||||
dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect", |
||||
model: '=ngModel' |
||||
}, |
||||
link: function($scope, elem, attrs) { |
||||
var $input = $(inputTemplate); |
||||
var $button = $(buttonTemplate); |
||||
$input.appendTo(elem); |
||||
$button.appendTo(elem); |
||||
|
||||
if (attrs.linkText) { |
||||
$button.html(attrs.linkText); |
||||
} |
||||
|
||||
if (attrs.ngModel) { |
||||
$scope.$watch('model', function(newValue) { |
||||
_.each($scope.menuItems, function(item) { |
||||
_.each(item.submenu, function(subItem) { |
||||
if (subItem.value === newValue) { |
||||
$button.html(subItem.text); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) { |
||||
if (!value.submenu) { |
||||
value.click = 'menuItemSelected(' + index + ')'; |
||||
memo.push(value.text); |
||||
} else { |
||||
_.each(value.submenu, function(item, subIndex) { |
||||
item.click = 'menuItemSelected(' + index + ',' + subIndex + ')'; |
||||
memo.push(value.text + ' ' + item.text); |
||||
}); |
||||
} |
||||
return memo; |
||||
}, []); |
||||
|
||||
$scope.menuItemSelected = function(index, subIndex) { |
||||
var menuItem = $scope.menuItems[index]; |
||||
var payload = {$item: menuItem}; |
||||
if (menuItem.submenu && subIndex !== void 0) { |
||||
payload.$subItem = menuItem.submenu[subIndex]; |
||||
} |
||||
$scope.dropdownTypeaheadOnSelect(payload); |
||||
}; |
||||
|
||||
$input.attr('data-provide', 'typeahead'); |
||||
$input.typeahead({ |
||||
source: typeaheadValues, |
||||
minLength: 1, |
||||
items: 10, |
||||
updater: function (value) { |
||||
var result = {}; |
||||
_.each($scope.menuItems, function(menuItem) { |
||||
_.each(menuItem.submenu, function(submenuItem) { |
||||
if (value === (menuItem.text + ' ' + submenuItem.text)) { |
||||
result.$subItem = submenuItem; |
||||
result.$item = menuItem; |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
if (result.$item) { |
||||
$scope.$apply(function() { |
||||
$scope.dropdownTypeaheadOnSelect(result); |
||||
}); |
||||
} |
||||
|
||||
$input.trigger('blur'); |
||||
return ''; |
||||
} |
||||
}); |
||||
|
||||
$button.click(function() { |
||||
$button.hide(); |
||||
$input.show(); |
||||
$input.focus(); |
||||
}); |
||||
|
||||
$input.keyup(function() { |
||||
elem.toggleClass('open', $input.val() === ''); |
||||
}); |
||||
|
||||
$input.blur(function() { |
||||
$input.hide(); |
||||
$input.val(''); |
||||
$button.show(); |
||||
$button.focus(); |
||||
// clicking the function dropdown menu won't
|
||||
// work if you remove class at once
|
||||
setTimeout(function() { |
||||
elem.removeClass('open'); |
||||
}, 200); |
||||
}); |
||||
|
||||
$compile(elem.contents())($scope); |
||||
} |
||||
}; |
||||
}); |
||||
}); |
||||
@ -0,0 +1,244 @@ |
||||
import _ from 'lodash'; |
||||
import $ from 'jquery'; |
||||
import coreModule from '../core_module'; |
||||
|
||||
/** @ngInject */ |
||||
export function dropdownTypeahead($compile) { |
||||
let inputTemplate = |
||||
'<input type="text"' + |
||||
' class="gf-form-input input-medium tight-form-input"' + |
||||
' spellcheck="false" style="display:none"></input>'; |
||||
|
||||
let buttonTemplate = |
||||
'<a class="gf-form-label tight-form-func dropdown-toggle"' + |
||||
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' + |
||||
' data-placement="top"><i class="fa fa-plus"></i></a>'; |
||||
|
||||
return { |
||||
scope: { |
||||
menuItems: '=dropdownTypeahead', |
||||
dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect', |
||||
model: '=ngModel', |
||||
}, |
||||
link: function($scope, elem, attrs) { |
||||
let $input = $(inputTemplate); |
||||
let $button = $(buttonTemplate); |
||||
$input.appendTo(elem); |
||||
$button.appendTo(elem); |
||||
|
||||
if (attrs.linkText) { |
||||
$button.html(attrs.linkText); |
||||
} |
||||
|
||||
if (attrs.ngModel) { |
||||
$scope.$watch('model', function(newValue) { |
||||
_.each($scope.menuItems, function(item) { |
||||
_.each(item.submenu, function(subItem) { |
||||
if (subItem.value === newValue) { |
||||
$button.html(subItem.text); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
let typeaheadValues = _.reduce( |
||||
$scope.menuItems, |
||||
function(memo, value, index) { |
||||
if (!value.submenu) { |
||||
value.click = 'menuItemSelected(' + index + ')'; |
||||
memo.push(value.text); |
||||
} else { |
||||
_.each(value.submenu, function(item, subIndex) { |
||||
item.click = 'menuItemSelected(' + index + ',' + subIndex + ')'; |
||||
memo.push(value.text + ' ' + item.text); |
||||
}); |
||||
} |
||||
return memo; |
||||
}, |
||||
[] |
||||
); |
||||
|
||||
$scope.menuItemSelected = function(index, subIndex) { |
||||
let menuItem = $scope.menuItems[index]; |
||||
let payload: any = { $item: menuItem }; |
||||
if (menuItem.submenu && subIndex !== void 0) { |
||||
payload.$subItem = menuItem.submenu[subIndex]; |
||||
} |
||||
$scope.dropdownTypeaheadOnSelect(payload); |
||||
}; |
||||
|
||||
$input.attr('data-provide', 'typeahead'); |
||||
$input.typeahead({ |
||||
source: typeaheadValues, |
||||
minLength: 1, |
||||
items: 10, |
||||
updater: function(value) { |
||||
let result: any = {}; |
||||
_.each($scope.menuItems, function(menuItem) { |
||||
_.each(menuItem.submenu, function(submenuItem) { |
||||
if (value === menuItem.text + ' ' + submenuItem.text) { |
||||
result.$subItem = submenuItem; |
||||
result.$item = menuItem; |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
if (result.$item) { |
||||
$scope.$apply(function() { |
||||
$scope.dropdownTypeaheadOnSelect(result); |
||||
}); |
||||
} |
||||
|
||||
$input.trigger('blur'); |
||||
return ''; |
||||
}, |
||||
}); |
||||
|
||||
$button.click(function() { |
||||
$button.hide(); |
||||
$input.show(); |
||||
$input.focus(); |
||||
}); |
||||
|
||||
$input.keyup(function() { |
||||
elem.toggleClass('open', $input.val() === ''); |
||||
}); |
||||
|
||||
$input.blur(function() { |
||||
$input.hide(); |
||||
$input.val(''); |
||||
$button.show(); |
||||
$button.focus(); |
||||
// clicking the function dropdown menu won't
|
||||
// work if you remove class at once
|
||||
setTimeout(function() { |
||||
elem.removeClass('open'); |
||||
}, 200); |
||||
}); |
||||
|
||||
$compile(elem.contents())($scope); |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
/** @ngInject */ |
||||
export function dropdownTypeahead2($compile) { |
||||
let inputTemplate = |
||||
'<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>'; |
||||
|
||||
let buttonTemplate = |
||||
'<a class="gf-form-input dropdown-toggle"' + |
||||
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' + |
||||
' data-placement="top"><i class="fa fa-plus"></i></a>'; |
||||
|
||||
return { |
||||
scope: { |
||||
menuItems: '=dropdownTypeahead2', |
||||
dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect', |
||||
model: '=ngModel', |
||||
}, |
||||
link: function($scope, elem, attrs) { |
||||
let $input = $(inputTemplate); |
||||
let $button = $(buttonTemplate); |
||||
$input.appendTo(elem); |
||||
$button.appendTo(elem); |
||||
|
||||
if (attrs.linkText) { |
||||
$button.html(attrs.linkText); |
||||
} |
||||
|
||||
if (attrs.ngModel) { |
||||
$scope.$watch('model', function(newValue) { |
||||
_.each($scope.menuItems, function(item) { |
||||
_.each(item.submenu, function(subItem) { |
||||
if (subItem.value === newValue) { |
||||
$button.html(subItem.text); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
let typeaheadValues = _.reduce( |
||||
$scope.menuItems, |
||||
function(memo, value, index) { |
||||
if (!value.submenu) { |
||||
value.click = 'menuItemSelected(' + index + ')'; |
||||
memo.push(value.text); |
||||
} else { |
||||
_.each(value.submenu, function(item, subIndex) { |
||||
item.click = 'menuItemSelected(' + index + ',' + subIndex + ')'; |
||||
memo.push(value.text + ' ' + item.text); |
||||
}); |
||||
} |
||||
return memo; |
||||
}, |
||||
[] |
||||
); |
||||
|
||||
$scope.menuItemSelected = function(index, subIndex) { |
||||
let menuItem = $scope.menuItems[index]; |
||||
let payload: any = { $item: menuItem }; |
||||
if (menuItem.submenu && subIndex !== void 0) { |
||||
payload.$subItem = menuItem.submenu[subIndex]; |
||||
} |
||||
$scope.dropdownTypeaheadOnSelect(payload); |
||||
}; |
||||
|
||||
$input.attr('data-provide', 'typeahead'); |
||||
$input.typeahead({ |
||||
source: typeaheadValues, |
||||
minLength: 1, |
||||
items: 10, |
||||
updater: function(value) { |
||||
let result: any = {}; |
||||
_.each($scope.menuItems, function(menuItem) { |
||||
_.each(menuItem.submenu, function(submenuItem) { |
||||
if (value === menuItem.text + ' ' + submenuItem.text) { |
||||
result.$subItem = submenuItem; |
||||
result.$item = menuItem; |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
if (result.$item) { |
||||
$scope.$apply(function() { |
||||
$scope.dropdownTypeaheadOnSelect(result); |
||||
}); |
||||
} |
||||
|
||||
$input.trigger('blur'); |
||||
return ''; |
||||
}, |
||||
}); |
||||
|
||||
$button.click(function() { |
||||
$button.hide(); |
||||
$input.show(); |
||||
$input.focus(); |
||||
}); |
||||
|
||||
$input.keyup(function() { |
||||
elem.toggleClass('open', $input.val() === ''); |
||||
}); |
||||
|
||||
$input.blur(function() { |
||||
$input.hide(); |
||||
$input.val(''); |
||||
$button.show(); |
||||
$button.focus(); |
||||
// clicking the function dropdown menu won't
|
||||
// work if you remove class at once
|
||||
setTimeout(function() { |
||||
elem.removeClass('open'); |
||||
}, 200); |
||||
}); |
||||
|
||||
$compile(elem.contents())($scope); |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('dropdownTypeahead', dropdownTypeahead); |
||||
coreModule.directive('dropdownTypeahead2', dropdownTypeahead2); |
||||
Loading…
Reference in new issue