Merge pull request #79 from NextDom/develop

v4.3.0

3rdparty/bootstrap-tagsinput/bootstrap-tagsinput-angular.js

@@ -0,0 +1,87 @@
+angular.module('bootstrap-tagsinput', [])
+.directive('bootstrapTagsinput', [function() {
+
+  function getItemProperty(scope, property) {
+    if (!property)
+      return undefined;
+
+    if (angular.isFunction(scope.$parent[property]))
+      return scope.$parent[property];
+
+    return function(item) {
+      return item[property];
+    };
+  }
+
+  return {
+    restrict: 'EA',
+    scope: {
+      model: '=ngModel'
+    },
+    template: '<select multiple></select>',
+    replace: false,
+    link: function(scope, element, attrs) {
+      $(function() {
+        if (!angular.isArray(scope.model))
+          scope.model = [];
+
+        var select = $('select', element);
+        var typeaheadSourceArray = attrs.typeaheadSource ? attrs.typeaheadSource.split('.') : null;
+        var typeaheadSource = typeaheadSourceArray ?
+            (typeaheadSourceArray.length > 1 ?
+                scope.$parent[typeaheadSourceArray[0]][typeaheadSourceArray[1]]
+                : scope.$parent[typeaheadSourceArray[0]])
+            : null;
+
+        select.tagsinput(scope.$parent[attrs.options || ''] || {
+          typeahead : {
+            source   : angular.isFunction(typeaheadSource) ? typeaheadSource : null
+          },
+          itemValue: getItemProperty(scope, attrs.itemvalue),
+          itemText : getItemProperty(scope, attrs.itemtext),
+          confirmKeys : getItemProperty(scope, attrs.confirmkeys) ? JSON.parse(attrs.confirmkeys) : [13],
+          tagClass : angular.isFunction(scope.$parent[attrs.tagclass]) ? scope.$parent[attrs.tagclass] : function(item) { return attrs.tagclass; }
+        });
+
+        for (var i = 0; i < scope.model.length; i++) {
+          select.tagsinput('add', scope.model[i]);
+        }
+
+        select.on('itemAdded', function(event) {
+          if (scope.model.indexOf(event.item) === -1)
+            scope.model.push(event.item);
+        });
+
+        select.on('itemRemoved', function(event) {
+          var idx = scope.model.indexOf(event.item);
+          if (idx !== -1)
+            scope.model.splice(idx, 1);
+        });
+
+        // create a shallow copy of model's current state, needed to determine
+        // diff when model changes
+        var prev = scope.model.slice();
+        scope.$watch("model", function() {
+          var added = scope.model.filter(function(i) {return prev.indexOf(i) === -1;}),
+              removed = prev.filter(function(i) {return scope.model.indexOf(i) === -1;}),
+              i;
+
+          prev = scope.model.slice();
+
+          // Remove tags no longer in binded model
+          for (i = 0; i < removed.length; i++) {
+            select.tagsinput('remove', removed[i]);
+          }
+
+          // Refresh remaining tags
+          select.tagsinput('refresh');
+
+          // Add new items in model as tags
+          for (i = 0; i < added.length; i++) {
+            select.tagsinput('add', added[i]);
+          }
+        }, true);
+      });
+    }
+  };
+}]);

3rdparty/bootstrap-tagsinput/bootstrap-tagsinput.css

@@ -0,0 +1,55 @@
+.bootstrap-tagsinput {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  display: inline-block;
+  padding: 4px 6px;
+  color: #555;
+  vertical-align: middle;
+  border-radius: 4px;
+  max-width: 100%;
+  line-height: 22px;
+  cursor: text;
+}
+.bootstrap-tagsinput input {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0 6px;
+  margin: 0;
+  width: auto;
+  max-width: inherit;
+}
+.bootstrap-tagsinput.form-control input::-moz-placeholder {
+  color: #777;
+  opacity: 1;
+}
+.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput input:focus {
+  border: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput .tag {
+  margin-right: 2px;
+  color: white;
+}
+.bootstrap-tagsinput .tag [data-role="remove"] {
+  margin-left: 8px;
+  cursor: pointer;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+  content: "x";
+  padding: 0px 2px;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}