New features: Reverse the position of the boxes. Added a callback on the moved options. Added the possibility to disable both boxes or any of then

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - 0.10
+  - 11.4.0

README.md

@@ -66,6 +66,9 @@ 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
 
 ### Methods
 
@@ -103,7 +106,9 @@ 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.
+- `setCallbackReove(function)` to execute a function when removing options as non-selected.
+- `setReversedBoxes(true/false)` to swap the position of the boxes (selected to Left).
 Furthermore, you can call:
 
 - `refresh()` or `trigger` the `bootstrapDualListbox.refresh` event to update the plugin element UI.
@@ -242,4 +247,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.
-```
+```

demo/index.html

@@ -69,7 +69,7 @@ <h2>Example with custom settings</h2>
   selectedListLabel: 'Selected',
   preserveSelectionOnMove: 'moved',
   moveOnSelect: false,
-  nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
+  nonSelectedFilter: 'ion ([7-9]|[1][0-2])',
 });</pre>
   </div>
   <div class="col-md-7">
@@ -101,7 +101,13 @@ <h2>Example with custom settings</h2>
         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}));
+        }
       });
     </script>
   </div>
@@ -283,6 +289,42 @@ <h2>Settings</h2>
       removeall event.
     </td>
   </tr>
+  <tr>
+    <td><code>reversedBoxes</code></td>
+    <td><code><strong>false</strong></code>: set this to <code>true</code> to swap the positions of the selected boxes.
+    </td>
+  </tr>
+  <tr>
+    <td><code>callbackMove</code></td>
+    <td><code><strong>null</strong></code>: set this to <code>function(item)</code> to execute a callback function after
+      moving options. The item attribute is a array collection of the moved options
+    </td>
+  </tr>
+  <tr>
+    <td><code>callbackRemove</code></td>
+    <td><code><strong>null</strong></code>: set this to <code>function(item)</code> to execute a callback function after
+      removing options. The item attribute is a array collection of the moved options
+    </td>
+  </tr>
+  <tr>
+    <td><code>disabled</code></td>
+    <td><code><strong>null</strong></code>: set this to <code>true</code> to avoid the options to be moved/removed. Set this to
+       <code>false</code> to enable it again. 
+      This also disables the associated <code>select</code> and overrides the disabledMove and disabledRemove options when setted to true or false.
+    </td>
+  </tr>
+  <tr>
+    <td><code>disabledMove</code></td>
+    <td><code><strong>null</strong></code>: set this to <code>true</code> to avoid the options to be moved. Set this to 
+      <code>false</code> to enable it again.
+    </td>
+  </tr>
+  <tr>
+    <td><code>disabledRemove</code></td>
+    <td><code><strong>null</strong></code>: set this to <code>true</code> to avoid the options to be removed. Set this to
+       <code>false</code> to enable it again.
+    </td>
+  </tr>
   </tbody>
 </table>
 
@@ -420,5 +462,29 @@ <h2>Methods</h2>
     <td><code>setEventRemoveAllOverride(value, refresh)</code></td>
     <td>change the <code>eventRemoveAllOverride</code> parameter.</td>
   </tr>
+  <tr>
+    <td><code>setReversedBoxes</code></td>
+    <td>change the <code>reversedBoxes</code> parameter.</td>
+  </tr>
+  <tr>
+    <td><code>setCallbackMove</code></td>
+    <td>change the <code>callbackMove</code> parameter.</td>
+  </tr>
+  <tr>
+    <td><code>setCallbackRemove</code></td>
+    <td>change the <code>callbackRemove</code> parameter.</td>
+  </tr>
+  <tr>
+    <td><code>setDisabled</code></td>
+    <td>change the <code>disabled</code> parameter.</td>
+  </tr>
+  <tr>
+    <td><code>setDisabledMove</code></td>
+    <td>change the <code>disabledMove</code> parameter.</td>
+  </tr>
+  <tr>
+    <td><code>setDisabledRemove</code></td>
+    <td>change the <code>disabledRemove</code> parameter.</td>
+  </tr>
   </tbody>
 </table>

desktop.ini

@@ -0,0 +1,4 @@
+[ViewState]
+Mode=
+Vid=
+FolderType=Documents

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;
     },