mirror of https://github.com/grafana/grafana
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