Version 0.2.0 // added height, truncate and customClass

README.md

@@ -5,24 +5,33 @@ This is a more modern fork of [listSwap plugin](https://github.com/phedde/listSw
 
 Note: this version is still in development.
 
-> ListSwap is a jQuery plugin that allows you to swap (add/remove) items between two drop-down lists.
->
->	- jQuery suppport: 1.3+
->	- Browser support: All major browsers, IE8+
->
-> Usage:
->
->	`$('#source, #destination').listSwap();`
->
-> Default Options:
->   ```
->	truncate : false, //Set to true to disable word wrap
->	height : null,	//Set custom height
->	is_scroll : false, //Show scroll
->	label_add : 'Add', //Set add label (Can bet set to empty)
->	label_remove : 'Remove', //Set remove label (Can bet set to empty)
->	add_class : null, //Custom class for styling
->	rtl : false, //RTL support
->   ```
-
-Original plugin demo http://phedde.github.io/listswap
+ListSwap is a jQuery plugin that allows you to swap (add/remove) items between two drop-down lists.
+
+- jQuery suppport: 1.3+
+- Browser support: All major browsers, IE8+
+
+Install with Bower
+------------------
+`$ bower install jquery.listswap`
+
+Usage
+-----
+`$('#source, #destination').listSwap();`
+
+Default Options
+---------------
+```
+truncate : false, // Set to true to disable word wrap
+height : null,  // Set custom height
+labelAdd : '', // Set add label (Empty by default)
+labelRemove : '', // Set remove label (Empty by default)
+customClass : '' // Custom class for styling	
+```
+
+**[Demo](http://dirim.co/jquery-listswap)**
+
+Roadmap
+-------
+- Add destroy method
+- Add update method
+- Add RTL support

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.listswap",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "ListSwap is a jQuery plugin that allows you to swap (add/remove) items between two drop-down lists.",
   "main": "",
   "authors": [

demo/index.html

@@ -29,7 +29,7 @@
     </select>
 
     <select id="source2">
-        <option value="option_2_1">Option 1</option>
+        <option value="option_2_1">This is a very very very loong, too long to be in one line Option 1</option>
         <option value="option_2_2">Why not option 2</option>
         <option value="option_2_3">Here's another option 3</option>
         <option value="option_2_4">What about option 4</option>
@@ -44,14 +44,14 @@
 <script src="../bower_components/jquery/dist/jquery.min.js"></script>
 <script src="../dist/jquery.listswap.min.js"></script>
 <script>
-    $('#source, #destination').listSwap({
-        truncate: true,
-        height: 135,
-        isScroll:true
-    });
+    $('#source, #destination').listSwap();
 
     $('#source2, #destination2').listSwap({
-
+        labelAdd: 'Add',
+        labelRemove: 'Remove',
+        truncate: true,
+        height: 135,
+        customClass: 'my-plugin-class'
     });
 
 </script>

dist/jquery.listswap.js

@@ -13,24 +13,25 @@
         defaults = {
             truncate: false,
             height: null,
-            isScroll: false,
-            labelAdd: 'Add',
-            labelRemove: 'Remove',
-            addClass: null,
-            rtl: false
+            labelAdd: '',
+            labelRemove: '',
+            customClass: ''
         },
         prefix = pluginName.toLowerCase(),
         classes = {
             ready: prefix + '-ready',
             wrap: prefix + '-wrap',
+            listWrap: prefix + '-list-wrap',
             hidden: prefix + '-hidden',
             list: prefix + '-list',
             selected: prefix + '-selected',
             controls: prefix + '-controls',
             add: prefix + '-add',
             remove: prefix + '-remove',
             option: prefix + '-option',
-            search: prefix + '-search'
+            search: prefix + '-search',
+            searchBox: prefix + '-searchbox',
+            truncate: ''
         },
         events = {
             ready: 'ready.' + pluginName,
@@ -41,15 +42,9 @@
         instance = 1
         ;
 
-    // The actual plugin constructor
     function ListSwap(element, options) {
         this.element = element;
-
-        // jQuery has an extend method that merges the
-        // contents of two or more objects, storing the
-        // result in the first object. The first object
-        // is generally empty because we don't want to alter
-        // the default options for future instances of the plugin
+
         this.options = $.extend({}, defaults, options);
 
         this._defaults = defaults;
@@ -72,10 +67,12 @@
         },
 
         setLayout: function(el, src, dest, options) {
-            el.wrapAll('<div id="' + prefix + '_' + instance + '" class="' + classes.wrap + '">');
+            el.wrapAll('<div id="' + prefix + '_' + instance + '" class="' + classes.wrap + ' ' + options.customClass + '">');
             el.addClass(classes.hidden);
             $('#' + prefix + '_' + instance).append('' +
-                '<ul id="src_list_' + instance + '" class="' + classes.list + '" data-instance="' + instance + '"></ul>' +
+                '<div class="' + classes.listWrap + '">' +
+                '   <ul id="src_list_' + instance + '" class="' + classes.list + '" data-instance="' + instance + '"></ul>' +
+                '</div>' + 
                 '<ul id="' + prefix + '_' + instance + '_controls' + '" class="' + classes.controls + '" data-instance="' + instance + '">' +
                 '   <li class="' + classes.add + '">' +
                 '       <span class="arrow"></span>' +
@@ -86,7 +83,9 @@
                 '       <span class="label">' + options.labelRemove + '</span>' +
                 '   </li>' +
                 '</ul>' +
-                '<ul id="dest_list_' + instance + '" class="' + classes.list + '" data-instance="' + instance + '"></ul>'
+                '<div class="' + classes.listWrap + '">' +
+                '   <ul id="dest_list_' + instance + '" class="' + classes.list + '" data-instance="' + instance + '"></ul>' +
+                '</div>'
             );
             this.createList(src, $('#src_list_' + instance));
             this.createList(dest, $('#dest_list_' + instance));
@@ -110,15 +109,21 @@
         },
 
         createList: function(select, list) {
+            var _this = this;
             $(select).find('option').each(function() {
                 var value = $(this).attr('value');
                 var text = $(this).text();
-                list.append('<li class="' + classes.option + '" data-value="' + value + '">' + text + '</li>');
+                if (_this.options.truncate) {
+                    classes.truncate = ' ' + prefix + '-truncate';
+                }
+                list.append('<li class="' + classes.option + classes.truncate + '" data-value="' + value + '">' + text + '</li>');
+                if (_this.options.height) {
+                    list.css('height', _this.options.height);
+                }
             });
         },
 
         moveOption: function(el, src, dest, wrap, button) {
-            var _this = this;
             var currentInstance = $(button).closest('ul').attr('data-instance');
             var from = '#src_list_',
                 to = '#dest_list_',
@@ -139,16 +144,16 @@
         setSearch: function(select, list) {
             if ($(select).attr('data-search')) {
                 var searchData = '<div class="' + classes.search + '">' +
-                    '<input type="text" placeholder="' + $(select).attr('data-search') + '" id="searchList" name="searchList" />' +
+                    '<input type="text" placeholder="' + $(select).attr('data-search') + '" class="' + classes.searchBox + '" />' +
                     '<span class="clear"></span>' +
                     '</div>';
-                list.prepend(searchData);
+                list.parent().prepend(searchData);
             }
         },
 
         searchFilter: function(selector) {
             var _this = this;
-            $(selector + ' #searchList').keyup(function() {
+            $(selector).prev('.' + classes.search).find('.' + classes.searchBox).keyup(function() {
                 _this.removeSelection(selector);
                 var val = $(this).val().toString().toLowerCase();
                 $(selector + ' > li').each(function() {