taginput: add tag input control for email aliases

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 = $('<span>' + newVal + '</span>').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: '<div class=\'tag-input-ctn\'><div class=\'input-tag\' data-ng-repeat="tag in tagArray()">{{tag}}<div class=\'delete-tag\' data-ng-click=\'deleteTag($index)\'>&times;</div></div><input type=\'text\' data-ng-style=\'{width: inputWidth}\' data-ng-model=\'tagText\' placeholder=\'{{placeholder}}\'/></div>'
+    };
+});

webadmin/src/theme.scss

@@ -1054,3 +1054,53 @@ $graphs-success-alt:    lighten(#27CE65, 20%);
         width: 200px;
     }
 }
+
+// ----------------------------
+// Tag Input
+// ----------------------------
+// https://codepen.io/webmatze/pen/isuHh
+
+.tag-input-ctn {
+    border: 1px solid #ccc;
+    padding: 2px 3px;
+    display: inline-block;
+    width: 500px;
+    border-radius: 3px;
+    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
+  
+    input {
+        display: inline-block;
+        float: left;
+        height: 18px;
+        padding: 0px;
+        font-size: 14px;
+        line-height: 18px;
+        color: black;
+        border: 0px;
+        margin: 2px;
+        &:focus {
+            outline: 0;
+            box-shadow: 0px;
+        }
+    }
+    .input-tag {
+        padding: 2px 4px;
+        line-height: 12px;
+        font-size: 11px;
+        background-color: #e3eaf6;
+        display: inline-block;
+        float: left;
+        border-radius: 2px;
+        margin: 2px 5px 2px 0px;
+        border: 1px solid #a9b6d2;
+        .delete-tag {
+            display: inline-block;
+            font-size: 12px;
+            cursor: pointer;
+            padding: 0px 2px;
+            &:hover {
+                background-color: #96b4d2;
+            }
+        }
+    }
+}

webadmin/src/views/users.html

@@ -122,6 +122,7 @@
                         <div class="form-group">
                             <input type="text" class="form-control" ng-model="useredit.aliases" name="aliases" placeholder="Separate aliases by comma">
                         </div>
+                        <tag-input placeholder='Separate aliases by comma' taglist='listtwo'></tag-input>
                     </div>
                     <br/>
                     <div class="form-group" ng-hide="isMe(useredit.userInfo)">