aurelia-bootstrap-tagsinput
Advanced tools
Comparing version 1.0.1 to 1.1.0
@@ -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], { |
@@ -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], { |
@@ -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, |
@@ -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], { |
{ | ||
"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": [ |
@@ -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. |
@@ -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}); | ||
} | ||
} | ||
} | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
275376
1714