diff --git a/.travis.yml b/.travis.yml index 20fd86b..d75e42b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js node_js: - - 0.10 + - 11.4.0 diff --git a/README.md b/README.md index cd54f62..29c6ca2 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,12 @@ When calling `$("#element").bootstrapDualListbox()` you can pass a parameters ob - `iconsPrefix`, defaults to `oi`, set it to whichever prefix your icon family uses. - `iconMove`, defaults to `oi-arrow-thick-right`, sets the class for the move icon. - `iconRemove`, defaults to `oi-arrow-thick-left`, sets the class for the remove icon. +- `callbackMove`, defaults to null, set it to execute a function when moving(selecting) a option. Ex: function(items){ alert("Moved items: " + $.map(items,function(i){return i.text}));} +- `callbackRemove`, defaults to null, set it to execute a function when removing(selecting) a option. Ex: function(items){ alert("Removed items: " + $.map(items,function(i){return i.text}));} +- `reversedBoxes`, defaults to false, set it to true to swap the position of the boxes. +- `disabledMove(null/true/false)` use true to disable the checkbox or false to enable. It overrides the disabledMove or disabledRemove and this also disables the native select element. +- `disabledRemove(null/true/false)` use true to disable removing the options or false to enable. +- `disabled(null/true/false)` use true to disable the checkbox or false to enable. ### Methods @@ -103,7 +109,12 @@ Here are the available methods: - `setInfoTextFiltered(value, refresh)` to change the `infoTextFiltered` parameter. - `setInfoTextEmpty(value, refresh)` to change the `infoTextEmpty` parameter. - `setFilterOnValues(value, refresh)` to change the `filterOnValues` parameter. - +- `setCallbackMove(function)` to execute a function when moving options as selected. +- `setCallbackRemove(function)` to execute a function when removing options as non-selected. +- `setReversedBoxes(true/false)` to swap the position of the boxes (selected to Left). +- `setDisabledMove(null/true/false)` use true to disable the checkbox or false to enable. This also add the attribute "disabled" on the native select element. +- `setDisabledRemove(null/true/false)` use true to disable removing the options or false to enable. +- `setDisabled(null/true/false)` use true to disable the checkbox or false to enable. Furthermore, you can call: - `refresh()` or `trigger` the `bootstrapDualListbox.refresh` event to update the plugin element UI. @@ -242,4 +253,4 @@ Check [Release](https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/rele WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -``` \ No newline at end of file +``` diff --git a/demo/index.html b/demo/index.html index 4771101..c8490cb 100644 --- a/demo/index.html +++ b/demo/index.html @@ -69,7 +69,7 @@

Example with custom settings

selectedListLabel: 'Selected', preserveSelectionOnMove: 'moved', moveOnSelect: false, - nonSelectedFilter: 'ion ([7-9]|[1][0-2])' + nonSelectedFilter: 'ion ([7-9]|[1][0-2])', });
@@ -101,7 +101,13 @@

Example with custom settings

selectedListLabel: 'Selected', preserveSelectionOnMove: 'moved', moveOnSelect: false, - nonSelectedFilter: 'ion ([7-9]|[1][0-2])' + nonSelectedFilter: 'ion ([7-9]|[1][0-2])', + callbackMove: function(items){ + alert("Moved items: " + $.map(items,function(i){return i.text})); + }, + callbackRemove: function(items){ + alert("Removed items:" + $.map(items,function(i){return i.text})); + } });
@@ -283,6 +289,42 @@

Settings

removeall event. + + reversedBoxes + false: set this to true to swap the positions of the selected boxes. + + + + callbackMove + null: set this to function(item) to execute a callback function after + moving options. The item attribute is a array collection of the moved options + + + + callbackRemove + null: set this to function(item) to execute a callback function after + removing options. The item attribute is a array collection of the moved options + + + + disabled + null: set this to true to avoid the options to be moved/removed. Set this to + false to enable it again. + This also disables the associated select and overrides the disabledMove and disabledRemove options when setted to true or false. + + + + disabledMove + null: set this to true to avoid the options to be moved. Set this to + false to enable it again. + + + + disabledRemove + null: set this to true to avoid the options to be removed. Set this to + false to enable it again. + + @@ -420,5 +462,29 @@

Methods

setEventRemoveAllOverride(value, refresh) change the eventRemoveAllOverride parameter. + + setReversedBoxes + change the reversedBoxes parameter. + + + setCallbackMove + change the callbackMove parameter. + + + setCallbackRemove + change the callbackRemove parameter. + + + setDisabled + change the disabled parameter. + + + setDisabledMove + change the disabledMove parameter. + + + setDisabledRemove + change the disabledRemove parameter. + diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 0000000..ab17096 --- /dev/null +++ b/desktop.ini @@ -0,0 +1,4 @@ +[ViewState] +Mode= +Vid= +FolderType=Documents diff --git a/src/jquery.bootstrap-duallistbox.js b/src/jquery.bootstrap-duallistbox.js index 10b64a1..d6ff605 100644 --- a/src/jquery.bootstrap-duallistbox.js +++ b/src/jquery.bootstrap-duallistbox.js @@ -50,7 +50,13 @@ btnMoveText: '>', // string, sets the text for the "Move" button btnRemoveText: '<', // string, sets the text for the "Remove" button btnMoveAllText: '>>', // string, sets the text for the "Move All" button - btnRemoveAllText: '<<' // string, sets the text for the "Remove All" button + btnRemoveAllText: '<<', // string, sets the text for the "Remove All" button + reversedBoxes: false, // boolean, puts box1(non-selecetd) on the right and box2(selected) on the left + callbackMove: null, // function, execute a funtion on move a selection as selected. Uses the selected options to move as the last parameter + callbackRemove: null, // function, execute a funtion on remove a selection as selected. Uses the selected options to remove as the last parameter + disabled: null, // boolean or null, if true disable all the options to be changed, if false enable all selects (override disableMove and disableRemove) + disabledMove: null, // boolean or null, if true disable only not selected options to be selected + disabledRemove: null // boolean or null, if true disable only selected options to be not selected }, // Selections are invisible on android if the containing select is styled with CSS // http://code.google.com/p/android/issues/detail?id=16922 @@ -101,7 +107,7 @@ } function formatString(s, args) { - console.log(s, args); + //console.log(s, args); return s.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] !== 'undefined' ? args[number] : match; }); @@ -250,6 +256,7 @@ saveSelections(dualListbox, 1); } + var itemsToMove = dualListbox.elements.select1.find('option:selected'); dualListbox.elements.select1.find('option:selected').each(function(index, item) { var $item = $(item); if (!$item.data('filtered1')) { @@ -264,6 +271,10 @@ } else { sortOptions(dualListbox.elements.select2); } + + if (typeof(dualListbox.settings.callbackMove)==='function'){ + dualListbox.settings.callbackMove(itemsToMove); + } } function remove(dualListbox) { @@ -274,6 +285,7 @@ saveSelections(dualListbox, 2); } + var itemsToRemove = dualListbox.elements.select2.find('option:selected'); dualListbox.elements.select2.find('option:selected').each(function(index, item) { var $item = $(item); if (!$item.data('filtered2')) { @@ -287,6 +299,11 @@ if(dualListbox.settings.sortByInputOrder){ sortOptionsByInputOrder(dualListbox.elements.select2); } + + if (typeof(dualListbox.settings.callbackRemove) === 'function'){ + dualListbox.settings.callbackRemove(itemsToRemove); + } + } function moveAll(dualListbox) { @@ -297,6 +314,7 @@ saveSelections(dualListbox, 1); } + var itemsToMove = dualListbox.elements.select1.find('option'); dualListbox.element.find('option').each(function(index, item) { var $item = $(item); if (!$item.data('filtered1')) { @@ -308,6 +326,9 @@ refreshSelects(dualListbox); triggerChangeEvent(dualListbox); + if (typeof(dualListbox.settings.callbackMove)==='function'){ + dualListbox.settings.callbackMove(itemsToMove); + } } function removeAll(dualListbox) { @@ -318,6 +339,8 @@ saveSelections(dualListbox, 2); } + var itemsToRemove = dualListbox.elements.select2.find('option'); + dualListbox.element.find('option').each(function(index, item) { var $item = $(item); if (!$item.data('filtered2')) { @@ -328,6 +351,9 @@ refreshSelects(dualListbox); triggerChangeEvent(dualListbox); + if (typeof(dualListbox.settings.callbackRemove)==='function'){ + dualListbox.settings.callbackRemove(itemsToRemove); + } } function bindEvents(dualListbox) { @@ -468,6 +494,10 @@ this.setNonSelectedListLabel(this.settings.nonSelectedListLabel); this.setHelperSelectNamePostfix(this.settings.helperSelectNamePostfix); this.setSelectOrMinimalHeight(this.settings.selectorMinimalHeight); + this.setReversedBoxes(this.settings.reversedBoxes); + this.setDisabledMove(this.settings.disabledMove); + this.setDisabledRemove(this.settings.disabledRemove); + this.setDisabled(this.settings.disabled); updateSelectionStates(this); @@ -488,6 +518,9 @@ this.setBtnRemoveText(this.settings.btnRemoveText); this.setBtnMoveAllText(this.settings.btnMoveAllText); this.setBtnRemoveAllText(this.settings.btnRemoveAllText); + this.setCallbackMove(this.settings.callbackMove); + this.setCallbackRemove(this.settings.callbackRemove); + // Hide the original select this.element.hide(); @@ -811,6 +844,95 @@ } return this.element; }, + setReversedBoxes: function(value,refresh){ + this.settings.reversedBoxes = value; + if (value){ + if(!$(this.elements.box2).after().hasClass('box1')){ + classbox1 = $(this.elements.box1).find('.move i').attr('class'); + classbox2 = $(this.elements.box2).find('.remove i').attr('class'); + $(this.elements.box2).insertBefore($(this.elements.box1)); + $(this.elements.box2).find('.remove').insertAfter($(this.elements.box2).find('.removeall')); + $(this.elements.box2).find('.remove i, .removeall i').removeClass(classbox2).addClass(classbox1); + $(this.elements.box1).find('.move').insertBefore($(this.elements.box1).find('.moveall')); + $(this.elements.box1).find('.move i, moveall i').removeClass(classbox1).addClass(classbox2); + } + } + else{ + classbox1 = $(this.elements.box1).find('.move i').attr('class'); + classbox2 = $(this.elements.box2).find('.remove i').attr('class'); + if(!$(this.elements.box2).before().hasClass('box1')){ + $(this.elements.box1).insertBefore($(this.elements.box2)); + $(this.elements.box2).find('.removeall').insertAfter($(this.elements.box2).find('.remove')); + $(this.elements.box2).find('.remove i, removeall i').removeClass(classbox1).addClass(classbox2); + $(this.elements.box1).find('.moveall').insertBefore($(this.elements.box1).find('.move')); + $(this.elements.box1).find('.remove i, removeall i').removeClass(classbox2).addClass(classbox1); + } + } + if (refresh) { + refreshSelects(this); + } + return this.element; + }, + + setDisabled: function(value, refresh){ + if(value === true){ + $(this.elements.box1).attr('disabled','disabled').find('button,select').attr('disabled','disabled'); + $(this.elements.box2).attr('disabled','disabled').find('button,select').attr('disabled','disabled'); + $(this.elements.originalSelect).attr('disabled','disabled'); + } + if (value === false){ + $(this.elements.box1).removeAttr('disabled').find('button,select').removeAttr('disabled'); + $(this.elements.box2).removeAttr('disabled').find('button,select').removeAttr('disabled'); + $(this.elements.originalSelect).removeAttr('disabled','disabled'); + } + if (refresh) { + refreshSelects(this); + } + return this.element; + }, + + setDisabledMove: function(value, refresh){ + if(value === true){ + $(this.elements.box1).attr('disabled','disabled').find('button,select').attr('disabled','disabled'); + } + if(value === false){ + $(this.elements.box1).removeAttr('disabled').find('button,select').removeAttr('disabled'); + } + if (refresh) { + refreshSelects(this); + } + return this.element; + }, + + setDisabledRemove: function(value, refresh){ + if(value === true){ + $(this.elements.box2).attr('disabled','disabled').find('button,select').attr('disabled','disabled'); + } + if(value === false){ + $(this.elements.box2).removeAttr('disabled').find('button,select').removeAttr('disabled'); + } + if (refresh) { + refreshSelects(this); + } + return this.element; + }, + + setCallbackMove: function(value,refresh){ + this.settings.callbackMove = value; + if (refresh){ + refreshSelects(this); + } + return this.element; + }, + + setCallbackRemove: function(value,refresh){ + this.settings.callbackRemove = value; + if (refresh){ + refreshSelects(this); + } + return this.element; + }, + getContainer: function() { return this.container; },