diff --git a/webadmin/src/js/index.js b/webadmin/src/js/index.js index 75d234491..9813e7440 100644 --- a/webadmin/src/js/index.js +++ b/webadmin/src/js/index.js @@ -316,3 +316,118 @@ app.directive('ngClickSelect', function () { } }; }); + +// https://codepen.io/webmatze/pen/isuHh +app.directive('tagInput', function () { + return { + restrict: 'E', + scope: { + inputTags: '=taglist', + autocomplete: '=autocomplete' + }, + link: function ($scope, element, attrs) { + $scope.defaultWidth = 200; + $scope.tagText = ''; + $scope.placeholder = attrs.placeholder; + if ($scope.autocomplete) { + $scope.autocompleteFocus = function (event, ui) { + $(element).find('input').val(ui.item.value); + return false; + }; + $scope.autocompleteSelect = function (event, ui) { + $scope.$apply('tagText=\'' + ui.item.value + '\''); + $scope.$apply('addTag()'); + return false; + }; + $(element).find('input').autocomplete({ + minLength: 0, + source: function (request, response) { + var item; + return response(function () { + var i, len, ref, results; + ref = $scope.autocomplete; + results = []; + for (i = 0, len = ref.length; i < len; i++) { + if (window.CP.shouldStopExecution(1)) { + break; + } + item = ref[i]; + if (item.toLowerCase().indexOf(request.term.toLowerCase()) !== -1) { + results.push(item); + } + } + window.CP.exitedLoop(1); + return results; + }()); + }, + focus: function (event, ui) { + return $scope.autocompleteFocus(event, ui); + }, + select: function (event, ui) { + return $scope.autocompleteSelect(event, ui); + } + }); + } + $scope.tagArray = function () { + if ($scope.inputTags === undefined) { + return []; + } + return $scope.inputTags.split(',').filter(function (tag) { + return tag !== ''; + }); + }; + $scope.addTag = function () { + var tagArray; + if ($scope.tagText.length === 0) { + return; + } + tagArray = $scope.tagArray(); + tagArray.push($scope.tagText); + $scope.inputTags = tagArray.join(','); + return $scope.tagText = ''; + }; + $scope.deleteTag = function (key) { + var tagArray; + tagArray = $scope.tagArray(); + if (tagArray.length > 0 && $scope.tagText.length === 0 && key === undefined) { + tagArray.pop(); + } else { + if (key !== undefined) { + tagArray.splice(key, 1); + } + } + return $scope.inputTags = tagArray.join(','); + }; + $scope.$watch('tagText', function (newVal, oldVal) { + var tempEl; + if (!(newVal === oldVal && newVal === undefined)) { + tempEl = $('' + newVal + '').appendTo('body'); + $scope.inputWidth = tempEl.width() + 5; + if ($scope.inputWidth < $scope.defaultWidth) { + $scope.inputWidth = $scope.defaultWidth; + } + return tempEl.remove(); + } + }); + element.bind('keydown', function (e) { + var key; + key = e.which; + if (key === 9 || key === 13) { + e.preventDefault(); + } + if (key === 8) { + return $scope.$apply('deleteTag()'); + } + }); + return element.bind('keyup', function (e) { + var key; + key = e.which; + if (key === 9 || key === 13 || key === 188) { + e.preventDefault(); + return $scope.$apply('addTag()'); + } + }); + }, + template: '