aurelia-bootstrap-tagsinput - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/amd/abp-tags-input.js

@@ -148,3 +148,6 @@ define(['exports', 'aurelia-framework', 'jquery', './picker-global-options', 'bootstrap-tagsinput/dist/bootstrap-tagsinput'], function (exports, _aureliaFramework, _jquery, _pickerGlobalOptions) {
       this.domElm.on('itemAdded', function (e) {
-        _this2.value = _this2.domElm.tagsinput('items');
+        if (!e.options || !e.options.preventRefresh) {
+          _this2.suppressValueChanged = true;
+          _this2.value = _this2.domElm.tagsinput('items');
+        }
         if (typeof _this2.onItemAdded === 'function') {
@@ -168,3 +171,6 @@ _this2.onItemAdded(e);
       this.domElm.on('itemRemoved', function (e) {
-        _this2.value = _this2.domElm.tagsinput('items');
+        if (!e.options || !e.options.preventRefresh) {
+          _this2.suppressValueChanged = true;
+          _this2.value = _this2.domElm.tagsinput('items');
+        }
         if (typeof _this2.onItemRemoved === 'function') {
@@ -207,2 +213,3 @@ _this2.onItemRemoved(e);
         removeAll: function removeAll() {
+          _this3.suppressValueChanged = true;
           _this3.domElm.tagsinput('removeAll');
@@ -218,4 +225,44 @@ _this3.value = _this3.domElm.tagsinput('items');
       this.domElm.tagsinput('destroy');
+      this.subscription.dispose();
     };
 
+    AbpTagsInputCustomElement.prototype.areEqualArray = function areEqualArray(arr1, arr2) {
+      if (arr1 === null && arr2 === null) {
+        return true;
+      }
+      if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
+        return false;
+      }
+      for (var i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i]) {
+          return false;
+        }
+      }
+      return true;
+    };
+
+    AbpTagsInputCustomElement.prototype.valueChanged = function valueChanged(newValue, oldValue) {
+      var _this4 = this;
+
+      var newValueSplit = typeof newValue === 'string' ? newValue.split(',') : newValue;
+      var oldValueSplit = typeof oldValue === 'string' ? oldValue.split(',') : oldValue;
+
+      if (newValue && this.domElm && newValue !== oldValue && !this.areEqualArray(newValueSplit, oldValueSplit)) {
+        if (this.suppressValueChanged) {
+          this.suppressValueChanged = false;
+          return;
+        }
+        if (!this.suppressValueChanged) {
+          this.domElm.tagsinput('removeAll');
+          if (Array.isArray(newValue)) {
+            newValue.forEach(function (value) {
+              return _this4.domElm.tagsinput('add', value, { preventRefresh: true });
+            });
+          } else {
+            this.domElm.tagsinput('add', newValue, { preventRefresh: true });
+          }
+        }
+      }
+    };
+
     return AbpTagsInputCustomElement;
@@ -222,0 +269,0 @@ }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'element', [_dec2], {

dist/commonjs/abp-tags-input.js

@@ -147,3 +147,6 @@ 'use strict';
     this.domElm.on('itemAdded', function (e) {
-      _this2.value = _this2.domElm.tagsinput('items');
+      if (!e.options || !e.options.preventRefresh) {
+        _this2.suppressValueChanged = true;
+        _this2.value = _this2.domElm.tagsinput('items');
+      }
       if (typeof _this2.onItemAdded === 'function') {
@@ -167,3 +170,6 @@ _this2.onItemAdded(e);
     this.domElm.on('itemRemoved', function (e) {
-      _this2.value = _this2.domElm.tagsinput('items');
+      if (!e.options || !e.options.preventRefresh) {
+        _this2.suppressValueChanged = true;
+        _this2.value = _this2.domElm.tagsinput('items');
+      }
       if (typeof _this2.onItemRemoved === 'function') {
@@ -206,2 +212,3 @@ _this2.onItemRemoved(e);
       removeAll: function removeAll() {
+        _this3.suppressValueChanged = true;
         _this3.domElm.tagsinput('removeAll');
@@ -217,4 +224,44 @@ _this3.value = _this3.domElm.tagsinput('items');
     this.domElm.tagsinput('destroy');
+    this.subscription.dispose();
   };
 
+  AbpTagsInputCustomElement.prototype.areEqualArray = function areEqualArray(arr1, arr2) {
+    if (arr1 === null && arr2 === null) {
+      return true;
+    }
+    if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
+      return false;
+    }
+    for (var i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  AbpTagsInputCustomElement.prototype.valueChanged = function valueChanged(newValue, oldValue) {
+    var _this4 = this;
+
+    var newValueSplit = typeof newValue === 'string' ? newValue.split(',') : newValue;
+    var oldValueSplit = typeof oldValue === 'string' ? oldValue.split(',') : oldValue;
+
+    if (newValue && this.domElm && newValue !== oldValue && !this.areEqualArray(newValueSplit, oldValueSplit)) {
+      if (this.suppressValueChanged) {
+        this.suppressValueChanged = false;
+        return;
+      }
+      if (!this.suppressValueChanged) {
+        this.domElm.tagsinput('removeAll');
+        if (Array.isArray(newValue)) {
+          newValue.forEach(function (value) {
+            return _this4.domElm.tagsinput('add', value, { preventRefresh: true });
+          });
+        } else {
+          this.domElm.tagsinput('add', newValue, { preventRefresh: true });
+        }
+      }
+    }
+  };
+
   return AbpTagsInputCustomElement;
@@ -221,0 +268,0 @@ }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'element', [_dec2], {

dist/es2015/abp-tags-input.js

@@ -124,3 +124,6 @@ var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10;
     this.domElm.on('itemAdded', e => {
-      this.value = this.domElm.tagsinput('items');
+      if (!e.options || !e.options.preventRefresh) {
+        this.suppressValueChanged = true;
+        this.value = this.domElm.tagsinput('items');
+      }
       if (typeof this.onItemAdded === 'function') {
@@ -144,3 +147,6 @@ this.onItemAdded(e);
     this.domElm.on('itemRemoved', e => {
-      this.value = this.domElm.tagsinput('items');
+      if (!e.options || !e.options.preventRefresh) {
+        this.suppressValueChanged = true;
+        this.value = this.domElm.tagsinput('items');
+      }
       if (typeof this.onItemRemoved === 'function') {
@@ -171,2 +177,3 @@ this.onItemRemoved(e);
       removeAll: () => {
+        this.suppressValueChanged = true;
         this.domElm.tagsinput('removeAll');
@@ -182,3 +189,39 @@ this.value = this.domElm.tagsinput('items');
     this.domElm.tagsinput('destroy');
+    this.subscription.dispose();
   }
+
+  areEqualArray(arr1, arr2) {
+    if (arr1 === null && arr2 === null) {
+      return true;
+    }
+    if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
+      return false;
+    }
+    for (let i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  valueChanged(newValue, oldValue) {
+    let newValueSplit = typeof newValue === 'string' ? newValue.split(',') : newValue;
+    let oldValueSplit = typeof oldValue === 'string' ? oldValue.split(',') : oldValue;
+
+    if (newValue && this.domElm && newValue !== oldValue && !this.areEqualArray(newValueSplit, oldValueSplit)) {
+      if (this.suppressValueChanged) {
+        this.suppressValueChanged = false;
+        return;
+      }
+      if (!this.suppressValueChanged) {
+        this.domElm.tagsinput('removeAll');
+        if (Array.isArray(newValue)) {
+          newValue.forEach(value => this.domElm.tagsinput('add', value, { preventRefresh: true }));
+        } else {
+          this.domElm.tagsinput('add', newValue, { preventRefresh: true });
+        }
+      }
+    }
+  }
 }, (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'element', [_dec2], {
@@ -185,0 +228,0 @@ enumerable: true,

dist/system/abp-tags-input.js

@@ -150,3 +150,6 @@ 'use strict';
           this.domElm.on('itemAdded', function (e) {
-            _this2.value = _this2.domElm.tagsinput('items');
+            if (!e.options || !e.options.preventRefresh) {
+              _this2.suppressValueChanged = true;
+              _this2.value = _this2.domElm.tagsinput('items');
+            }
             if (typeof _this2.onItemAdded === 'function') {
@@ -170,3 +173,6 @@ _this2.onItemAdded(e);
           this.domElm.on('itemRemoved', function (e) {
-            _this2.value = _this2.domElm.tagsinput('items');
+            if (!e.options || !e.options.preventRefresh) {
+              _this2.suppressValueChanged = true;
+              _this2.value = _this2.domElm.tagsinput('items');
+            }
             if (typeof _this2.onItemRemoved === 'function') {
@@ -209,2 +215,3 @@ _this2.onItemRemoved(e);
             removeAll: function removeAll() {
+              _this3.suppressValueChanged = true;
               _this3.domElm.tagsinput('removeAll');
@@ -220,4 +227,44 @@ _this3.value = _this3.domElm.tagsinput('items');
           this.domElm.tagsinput('destroy');
+          this.subscription.dispose();
         };
 
+        AbpTagsInputCustomElement.prototype.areEqualArray = function areEqualArray(arr1, arr2) {
+          if (arr1 === null && arr2 === null) {
+            return true;
+          }
+          if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
+            return false;
+          }
+          for (var i = 0; i < arr1.length; i++) {
+            if (arr1[i] !== arr2[i]) {
+              return false;
+            }
+          }
+          return true;
+        };
+
+        AbpTagsInputCustomElement.prototype.valueChanged = function valueChanged(newValue, oldValue) {
+          var _this4 = this;
+
+          var newValueSplit = typeof newValue === 'string' ? newValue.split(',') : newValue;
+          var oldValueSplit = typeof oldValue === 'string' ? oldValue.split(',') : oldValue;
+
+          if (newValue && this.domElm && newValue !== oldValue && !this.areEqualArray(newValueSplit, oldValueSplit)) {
+            if (this.suppressValueChanged) {
+              this.suppressValueChanged = false;
+              return;
+            }
+            if (!this.suppressValueChanged) {
+              this.domElm.tagsinput('removeAll');
+              if (Array.isArray(newValue)) {
+                newValue.forEach(function (value) {
+                  return _this4.domElm.tagsinput('add', value, { preventRefresh: true });
+                });
+              } else {
+                this.domElm.tagsinput('add', newValue, { preventRefresh: true });
+              }
+            }
+          }
+        };
+
         return AbpTagsInputCustomElement;
@@ -224,0 +271,0 @@ }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'element', [_dec2], {

package.json

 {
   "name": "aurelia-bootstrap-tagsinput",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "An Aurelia Custom Element for the 3rd party addon [Bootstrap Tags Input]",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -204,2 +204,2 @@ # Aurelia-Bootstrap-Tagsinput
 ## Use it, like it? 
-You like and use an Aurelia-Bootstrap-Plugin, please click on the :star: and spead the word.
+You like and use an `Aurelia-Bootstrap-Plugins`, please click on the :star: and spread the word.

src/abp-tags-input.js

@@ -29,2 +29,3 @@ import {inject, bindable, bindingMode, DOM} from 'aurelia-framework';
   options = {};
+  suppressValueChanged;
 
@@ -90,3 +91,7 @@ constructor(elm) {
     this.domElm.on('itemAdded', (e) => {
-      this.value = this.domElm.tagsinput('items');
+      // refresh the value attribute (except when we explicitly don't want it)
+      if (!e.options || !e.options.preventRefresh) {
+        this.suppressValueChanged = true;
+        this.value = this.domElm.tagsinput('items');
+      }
       if (typeof this.onItemAdded === 'function') {
@@ -110,3 +115,7 @@ this.onItemAdded(e);
     this.domElm.on('itemRemoved', (e) => {
-      this.value = this.domElm.tagsinput('items');
+      // refresh the value attribute (except when we explicitly don't want it)
+      if (!e.options || !e.options.preventRefresh) {
+        this.suppressValueChanged = true;
+        this.value = this.domElm.tagsinput('items');
+      }
       if (typeof this.onItemRemoved === 'function') {
@@ -143,2 +152,3 @@ this.onItemRemoved(e);
       removeAll: () => {
+        this.suppressValueChanged = true;
         this.domElm.tagsinput('removeAll');
@@ -154,3 +164,53 @@ this.value = this.domElm.tagsinput('items');
     this.domElm.tagsinput('destroy');
+    this.subscription.dispose();
   }
+
+  /** A simple array compare */
+  areEqualArray(arr1, arr2) {
+    if (arr1 === null && arr2 === null) {
+      return true;
+    }
+    if (!Array.isArray(arr1) || !Array.isArray(arr2) || (arr1.length !== arr2.length)) {
+      return false;
+    }
+    for (let i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * because of a bug which still has an open issue on Github for the `refresh` not working correctly
+   * https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/98
+   * we need to `removeAll` and then loop on each new item to add them back as new tag
+   * however we want to avoid recursive call on valueChanged by using preventRefresh flag & comparing split values
+   * @param newValue
+   * @param oldValue
+   */
+  valueChanged(newValue, oldValue) {
+    // tagsinput deals with the values as csv, while the value could also be an array of values
+    // let's make them all on the same type as array of string which will be easier to deal with
+    let newValueSplit = (typeof newValue === 'string') ? newValue.split(',') : newValue;
+    let oldValueSplit = (typeof oldValue === 'string') ? oldValue.split(',') : oldValue;
+
+    // check the newValue vs oldValue but also the split result
+    // because in some cases we might have tagsinput saying the value is "tag1, tag2" while the newValue is ["tag1", "tag2"]
+    // which are equivalent and so we check that too
+    if (newValue && this.domElm && (newValue !== oldValue) && !this.areEqualArray(newValueSplit, oldValueSplit)) {
+      if (this.suppressValueChanged) {
+        this.suppressValueChanged = false;
+        return;
+      }
+      if (!this.suppressValueChanged) {
+        this.domElm.tagsinput('removeAll');
+        if (Array.isArray(newValue)) {
+          newValue.forEach(value => this.domElm.tagsinput('add', value, {preventRefresh: true}));
+        } else {
+          this.domElm.tagsinput('add', newValue, {preventRefresh: true});
+        }
+      }
+    }
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

275376

3.45%

Lines of code

1714

15.19%

No dependency changes