|
|
@@ -4,87 +4,9 @@ define([
|
|
|
'lodash',
|
|
|
'jquery',
|
|
|
],
|
|
|
-function (angular, app, _, $) {
|
|
|
+function (angular, app, _) {
|
|
|
'use strict';
|
|
|
|
|
|
- angular
|
|
|
- .module('grafana.directives')
|
|
|
- .directive('templateParamSelector', function($compile) {
|
|
|
- var inputTemplate = '<input type="text" data-provide="typeahead" ' +
|
|
|
- ' class="tight-form-clear-input input-medium"' +
|
|
|
- ' spellcheck="false" style="display:none"></input>';
|
|
|
-
|
|
|
- var buttonTemplate = '<a class="tight-form-item tabindex="1">{{variable.current.text}} <i class="fa fa-caret-down"></i></a>';
|
|
|
-
|
|
|
- return {
|
|
|
- link: function($scope, elem) {
|
|
|
- var $input = $(inputTemplate);
|
|
|
- var $button = $(buttonTemplate);
|
|
|
- var variable = $scope.variable;
|
|
|
-
|
|
|
- $input.appendTo(elem);
|
|
|
- $button.appendTo(elem);
|
|
|
-
|
|
|
- function updateVariableValue(value) {
|
|
|
- $scope.$apply(function() {
|
|
|
- var selected = _.findWhere(variable.options, { text: value });
|
|
|
- if (!selected) {
|
|
|
- selected = { text: value, value: value };
|
|
|
- }
|
|
|
- $scope.setVariableValue($scope.variable, selected);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- $input.attr('data-provide', 'typeahead');
|
|
|
- $input.typeahead({
|
|
|
- minLength: 0,
|
|
|
- items: 1000,
|
|
|
- updater: function(value) {
|
|
|
- $input.val(value);
|
|
|
- $input.trigger('blur');
|
|
|
- return value;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- var typeahead = $input.data('typeahead');
|
|
|
- typeahead.lookup = function () {
|
|
|
- var options = _.map(variable.options, function(option) { return option.text; });
|
|
|
- this.query = this.$element.val() || '';
|
|
|
- return this.process(options);
|
|
|
- };
|
|
|
-
|
|
|
- $button.click(function() {
|
|
|
- $input.css('width', ($button.width() + 16) + 'px');
|
|
|
-
|
|
|
- $button.hide();
|
|
|
- $input.show();
|
|
|
- $input.focus();
|
|
|
-
|
|
|
- var typeahead = $input.data('typeahead');
|
|
|
- if (typeahead) {
|
|
|
- $input.val('');
|
|
|
- typeahead.lookup();
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- $input.blur(function() {
|
|
|
- if ($input.val() !== '') { updateVariableValue($input.val()); }
|
|
|
- $input.hide();
|
|
|
- $button.show();
|
|
|
- $button.focus();
|
|
|
- });
|
|
|
-
|
|
|
- $scope.$on('$destroy', function() {
|
|
|
- $button.unbind();
|
|
|
- typeahead.destroy();
|
|
|
- });
|
|
|
-
|
|
|
- $compile(elem.contents())($scope);
|
|
|
- }
|
|
|
- };
|
|
|
- });
|
|
|
-
|
|
|
angular
|
|
|
.module('grafana.directives')
|
|
|
.directive('variableValueSelect', function($compile, $window, $timeout) {
|
|
|
@@ -162,9 +84,9 @@ function (angular, app, _, $) {
|
|
|
|
|
|
scope.hide = function() {
|
|
|
scope.selectorOpen = false;
|
|
|
- if (scope.oldCurrentText !== variable.current.text) {
|
|
|
- scope.onUpdated();
|
|
|
- }
|
|
|
+ // if (scope.oldCurrentText !== variable.current.text) {
|
|
|
+ // scope.onUpdated();
|
|
|
+ // }
|
|
|
|
|
|
bodyEl.off('click', scope.bodyOnClick);
|
|
|
};
|