From 312bff513c1cc845d8b504efaa6682cdbae482be Mon Sep 17 00:00:00 2001 From: Berkan Dirim Date: Fri, 3 Feb 2017 16:10:45 +0300 Subject: [PATCH] Version 0.2.0 // added height, truncate and customClass --- README.md | 51 +++++++++++++++++++------------- bower.json | 2 +- demo/index.html | 14 ++++----- dist/jquery.listswap.css | 19 ++++++++++-- dist/jquery.listswap.css.map | 2 +- dist/jquery.listswap.js | 47 ++++++++++++++++------------- dist/jquery.listswap.min.css | 2 +- dist/jquery.listswap.min.css.map | 2 +- dist/jquery.listswap.min.js | 2 +- dist/jquery.listswap.min.js.map | 2 +- lib/_jquery-listswap.scss | 19 ++++++++++-- lib/jquery.listswap.js | 47 ++++++++++++++++------------- package.json | 2 +- 13 files changed, 128 insertions(+), 83 deletions(-) diff --git a/README.md b/README.md index 28743af..bd2e2ca 100644 --- a/README.md +++ b/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 \ No newline at end of file diff --git a/bower.json b/bower.json index dc7afc5..b7932ce 100644 --- a/bower.json +++ b/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": [ diff --git a/demo/index.html b/demo/index.html index 2e8dc37..4907c55 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,7 +29,7 @@ ' + + '' + '' + ''; - 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() { diff --git a/dist/jquery.listswap.min.css b/dist/jquery.listswap.min.css index 02bbb52..f1dd3e4 100644 --- a/dist/jquery.listswap.min.css +++ b/dist/jquery.listswap.min.css @@ -1,2 +1,2 @@ -[class^="listswap-"],input{box-sizing:border-box}.listswap-wrap{width:100%}.listswap-wrap:after{content:'';display:table;clear:both}.listswap-hidden{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0, 0, 0, 0);clip-path:inset(0 0 0 0)}.listswap-list{width:40%;min-height:200px;float:left;border:1px solid #ccc;border-radius:4px;list-style:none;padding-left:0}.listswap-list li{padding:4px 8px}.listswap-list li:hover{background-color:lightyellow}li.listswap-selected,li.listswap-selected:hover{background-color:#87cefa}.listswap-controls{float:left;width:20%;list-style:none;padding-left:0;padding-top:20px}.listswap-controls li{margin:10px;padding:4px 8px;background-color:#ddd;border-radius:4px;text-align:center;cursor:pointer;transition:background-color ease-in 200ms}.listswap-controls li:hover{background-color:#c4c4c4}.listswap-add:after{content:'\00a0\2192'}.listswap-remove:before{content:'\2190\00a0'}.listswap-search{position:relative;padding:4px}.listswap-search input{width:100%;padding:6px 4px}.listswap-search input:focus{outline:1px solid lightskyblue}.listswap-search .clear{display:block;margin:7px 12px;position:absolute;right:0;top:0;cursor:pointer;color:#ccc}.listswap-search .clear:before{content:"\00d7"} +[class^="listswap-"],input{box-sizing:border-box}.listswap-wrap{width:100%}.listswap-wrap:after{content:'';display:table;clear:both}.listswap-hidden{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0, 0, 0, 0);clip-path:inset(0 0 0 0)}.listswap-list-wrap{margin:1em auto;width:40%;float:left;border:1px solid #ccc;border-radius:4px}.listswap-list{margin:0;padding-left:0;overflow-y:auto;min-height:100px;list-style:none}.listswap-list li{padding:4px 8px}.listswap-list li:hover{cursor:pointer;background-color:lightyellow}li.listswap-selected,li.listswap-selected:hover{background-color:#87cefa}.listswap-controls{float:left;width:20%;list-style:none;padding-left:0;padding-top:20px}.listswap-controls li{margin:10px;padding:4px 8px;background-color:#ddd;border-radius:4px;text-align:center;cursor:pointer;transition:background-color ease-in 200ms}.listswap-controls li:hover{background-color:#c4c4c4}.listswap-add:after{content:'\00a0\2192'}.listswap-remove:before{content:'\2190\00a0'}.listswap-search{position:relative;padding:4px}.listswap-search input{width:100%;padding:6px 4px}.listswap-search input:focus{outline:1px solid lightskyblue}.listswap-search .clear{display:block;margin:7px 12px;position:absolute;right:0;top:0;cursor:pointer;color:#ccc}.listswap-search .clear:before{content:"\00d7"}.listswap-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /*# sourceMappingURL=jquery.listswap.min.css.map */ diff --git a/dist/jquery.listswap.min.css.map b/dist/jquery.listswap.min.css.map index 3b68638..acc833d 100644 --- a/dist/jquery.listswap.min.css.map +++ b/dist/jquery.listswap.min.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAcA,0BAAgC,CAC5B,UAAU,CAAE,UAAU,CAG1B,cAAiB,CACb,KAAK,CAAE,IAAI,CACX,oBAAQ,CACJ,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CAInB,gBAAmB,CACf,QAAQ,CAAE,QAAQ,CAClB,QAAQ,CAAE,MAAM,CAChB,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,CAAC,CACV,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,gBAAgB,CACtB,SAAS,CAAE,cAAc,CAG7B,cAAiB,CACb,KAAK,CAAE,GAAG,CACV,UAAU,CAAE,KAAK,CACjB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,cAAiB,CACzB,aAAa,CApCR,GAAG,CAqCR,UAAU,CAAE,IAAI,CAChB,YAAY,CAAE,CAAC,CACf,iBAAG,CACC,OAAO,CAAE,OAAO,CAChB,uBAAQ,CACJ,gBAAgB,CAAE,WAAW,CAMrC,+CAAW,CACP,gBAAgB,CAlDb,OAAY,CAsDvB,kBAAqB,CACjB,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,GAAG,CACV,UAAU,CAAE,IAAI,CAChB,YAAY,CAAE,CAAC,CACf,WAAW,CAAE,IAAI,CACjB,qBAAG,CACC,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,OAAO,CAChB,gBAAgB,CAhEf,IAAI,CAiEL,aAAa,CA/DZ,GAAG,CAgEJ,UAAU,CAAE,MAAM,CAClB,MAAM,CAAE,OAAO,CACf,UAAU,CAAE,8BAA8B,CAC1C,2BAAQ,CACJ,gBAAgB,CAAE,OAAoB,CAM9C,mBAAQ,CACJ,OAAO,CAAE,YAAY,CAKzB,uBAAS,CACL,OAAO,CAAE,YAAY,CAI7B,gBAAmB,CACf,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,GAAG,CACZ,sBAAM,CACF,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,OAAO,CAChB,4BAAQ,CACJ,OAAO,CAAE,sBAAsB,CAGvC,uBAAO,CACH,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,QAAQ,CAChB,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,CAAC,CACR,GAAG,CAAE,CAAC,CACN,MAAM,CAAC,OAAO,CACd,KAAK,CAAE,IAAI,CACX,8BAAS,CACL,OAAO,CAAC,OAAO", +"mappings": "AAcA,0BAAgC,CAC5B,UAAU,CAAE,UAAU,CAG1B,cAAiB,CACb,KAAK,CAAE,IAAI,CACX,oBAAQ,CACJ,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CAInB,gBAAmB,CACf,QAAQ,CAAE,QAAQ,CAClB,QAAQ,CAAE,MAAM,CAChB,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,CAAC,CACV,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,gBAAgB,CACtB,SAAS,CAAE,cAAc,CAG7B,mBAAsB,CAClB,MAAM,CAAE,QAAQ,CAChB,KAAK,CAAE,GAAG,CACV,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,cAAiB,CACzB,aAAa,CApCR,GAAG,CAuCZ,cAAiB,CACb,MAAM,CAAE,CAAC,CACT,YAAY,CAAE,CAAC,CACf,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,KAAK,CACjB,UAAU,CAAE,IAAI,CAChB,iBAAG,CACC,OAAO,CAAE,OAAO,CAChB,uBAAQ,CACJ,MAAM,CAAE,OAAO,CACf,gBAAgB,CAAE,WAAW,CAMrC,+CAAW,CACP,gBAAgB,CAzDb,OAAY,CA6DvB,kBAAqB,CACjB,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,GAAG,CACV,UAAU,CAAE,IAAI,CAChB,YAAY,CAAE,CAAC,CACf,WAAW,CAAE,IAAI,CACjB,qBAAG,CACC,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,OAAO,CAChB,gBAAgB,CAvEf,IAAI,CAwEL,aAAa,CAtEZ,GAAG,CAuEJ,UAAU,CAAE,MAAM,CAClB,MAAM,CAAE,OAAO,CACf,UAAU,CAAE,8BAA8B,CAC1C,2BAAQ,CACJ,gBAAgB,CAAE,OAAoB,CAM9C,mBAAQ,CACJ,OAAO,CAAE,YAAY,CAKzB,uBAAS,CACL,OAAO,CAAE,YAAY,CAI7B,gBAAmB,CACf,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,GAAG,CACZ,sBAAM,CACF,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,OAAO,CAChB,4BAAQ,CACJ,OAAO,CAAE,sBAAsB,CAGvC,uBAAO,CACH,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,QAAQ,CAChB,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,CAAC,CACR,GAAG,CAAE,CAAC,CACN,MAAM,CAAC,OAAO,CACd,KAAK,CAAE,IAAI,CACX,8BAAS,CACL,OAAO,CAAC,OAAO,CAK3B,kBAAqB,CACjB,WAAW,CAAE,MAAM,CACnB,QAAQ,CAAE,MAAM,CAChB,aAAa,CAAE,QAAQ", "sources": ["../lib/_jquery-listswap.scss"], "names": [], "file": "jquery.listswap.min.css" diff --git a/dist/jquery.listswap.min.js b/dist/jquery.listswap.min.js index ccaaec0..66812af 100644 --- a/dist/jquery.listswap.min.js +++ b/dist/jquery.listswap.min.js @@ -1,2 +1,2 @@ -!function(a,b,c,d){"use strict";function e(b,c){this.element=b,this.options=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="listSwap",g={truncate:!1,height:null,isScroll:!1,labelAdd:"Add",labelRemove:"Remove",addClass:null,rtl:!1},h=f.toLowerCase(),i={ready:h+"-ready",wrap:h+"-wrap",hidden:h+"-hidden",list:h+"-list",selected:h+"-selected",controls:h+"-controls",add:h+"-add",remove:h+"-remove",option:h+"-option",search:h+"-search"},j={ready:"ready."+f,click:"click."+f,select:"select."+f},k=1;e.prototype={init:function(){var a=this.element[0],b=this.element[1],c=h+"_"+k;this.setLayout(this.element,a,b,this.options),this.bindUIActions(this.element,a,b,c),k++},setLayout:function(b,c,d,e){b.wrapAll('
'),b.addClass(i.hidden),a("#"+h+"_"+k).append(''),this.createList(c,a("#src_list_"+k)),this.createList(d,a("#dest_list_"+k)),this.setSearch(c,a("#src_list_"+k)),this.setSearch(d,a("#dest_list_"+k)),this.searchFilter("#src_list_"+k),this.searchFilter("#dest_list_"+k)},bindUIActions:function(b,c,d,e){var f=this,g=a("#"+e),h="."+i.option,k=g.find("."+i.controls+" li");g.on(j.click,h,function(){a(this).toggleClass(i.selected)}),k.on(j.click,function(){f.moveOption(b,c,d,e,this)})},createList:function(b,c){a(b).find("option").each(function(){var b=a(this).attr("value"),d=a(this).text();c.append('
  • '+d+"
    • ")})},moveOption:function(b,c,d,e,f){var g=a(f).closest("ul").attr("data-instance"),h="#src_list_",j="#dest_list_",k=d;a(f).hasClass(i.remove)&&(j=[h,h=j][0],k=c),a(h+g+" ."+i.selected).each(function(){a(this).remove(),a(j+g).append(a(this).removeClass(i.selected));var b=a('option[value="'+a(this).attr("data-value")+'"]');b.remove(),a(k).append(b)})},setSearch:function(b,c){if(a(b).attr("data-search")){var d='
    ';c.prepend(d)}},searchFilter:function(b){var c=this;a(b+" #searchList").keyup(function(){c.removeSelection(b);var d=a(this).val().toString().toLowerCase();a(b+" > li").each(function(){var b=a(this).text().toString().toLowerCase();b.indexOf(d)!=-1?a(this).show():a(this).hide()})}),c.clearButton(b)},removeSelection:function(b){a(b+" li."+i.option).each(function(){a(this).hasClass(i.selected)&&a(this).removeClass(i.selected)})},clearButton:function(b){a(b+" ."+i.search+" .clear").click(function(){a(b+" ."+i.search+" #searchList").val(""),a(b+" ."+i.search+" #searchList").focus(),a(b+" > li").each(function(){a(this).show()})})}},a.fn[f]=function(b){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}}(jQuery,window,document); +!function(a,b,c,d){"use strict";function e(b,c){this.element=b,this.options=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="listSwap",g={truncate:!1,height:null,labelAdd:"",labelRemove:"",customClass:""},h=f.toLowerCase(),i={ready:h+"-ready",wrap:h+"-wrap",listWrap:h+"-list-wrap",hidden:h+"-hidden",list:h+"-list",selected:h+"-selected",controls:h+"-controls",add:h+"-add",remove:h+"-remove",option:h+"-option",search:h+"-search",searchBox:h+"-searchbox",truncate:""},j={ready:"ready."+f,click:"click."+f,select:"select."+f},k=1;e.prototype={init:function(){var a=this.element[0],b=this.element[1],c=h+"_"+k;this.setLayout(this.element,a,b,this.options),this.bindUIActions(this.element,a,b,c),k++},setLayout:function(b,c,d,e){b.wrapAll('
    '),b.addClass(i.hidden),a("#"+h+"_"+k).append('
      • '+e.labelAdd+'
      • '+e.labelRemove+'
        '),this.createList(c,a("#src_list_"+k)),this.createList(d,a("#dest_list_"+k)),this.setSearch(c,a("#src_list_"+k)),this.setSearch(d,a("#dest_list_"+k)),this.searchFilter("#src_list_"+k),this.searchFilter("#dest_list_"+k)},bindUIActions:function(b,c,d,e){var f=this,g=a("#"+e),h="."+i.option,k=g.find("."+i.controls+" li");g.on(j.click,h,function(){a(this).toggleClass(i.selected)}),k.on(j.click,function(){f.moveOption(b,c,d,e,this)})},createList:function(b,c){var d=this;a(b).find("option").each(function(){var b=a(this).attr("value"),e=a(this).text();d.options.truncate&&(i.truncate=" "+h+"-truncate"),c.append('
      • '+e+"
        • "),d.options.height&&c.css("height",d.options.height)})},moveOption:function(b,c,d,e,f){var g=a(f).closest("ul").attr("data-instance"),h="#src_list_",j="#dest_list_",k=d;a(f).hasClass(i.remove)&&(j=[h,h=j][0],k=c),a(h+g+" ."+i.selected).each(function(){a(this).remove(),a(j+g).append(a(this).removeClass(i.selected));var b=a('option[value="'+a(this).attr("data-value")+'"]');b.remove(),a(k).append(b)})},setSearch:function(b,c){if(a(b).attr("data-search")){var d='
        ';c.parent().prepend(d)}},searchFilter:function(b){var c=this;a(b).prev("."+i.search).find("."+i.searchBox).keyup(function(){c.removeSelection(b);var d=a(this).val().toString().toLowerCase();a(b+" > li").each(function(){var b=a(this).text().toString().toLowerCase();b.indexOf(d)!=-1?a(this).show():a(this).hide()})}),c.clearButton(b)},removeSelection:function(b){a(b+" li."+i.option).each(function(){a(this).hasClass(i.selected)&&a(this).removeClass(i.selected)})},clearButton:function(b){a(b+" ."+i.search+" .clear").click(function(){a(b+" ."+i.search+" #searchList").val(""),a(b+" ."+i.search+" #searchList").focus(),a(b+" > li").each(function(){a(this).show()})})}},a.fn[f]=function(b){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}}(jQuery,window,document); //# sourceMappingURL=jquery.listswap.min.js.map \ No newline at end of file diff --git a/dist/jquery.listswap.min.js.map b/dist/jquery.listswap.min.js.map index 722b50c..655bb54 100644 --- a/dist/jquery.listswap.min.js.map +++ b/dist/jquery.listswap.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["../lib/jquery.listswap.js"],"names":["$","window","document","undefined","ListSwap","element","options","this","extend","defaults","_defaults","_name","pluginName","init","truncate","height","isScroll","labelAdd","labelRemove","addClass","rtl","prefix","toLowerCase","classes","ready","wrap","hidden","list","selected","controls","add","remove","option","search","events","click","select","instance","prototype","source","destination","setLayout","bindUIActions","el","src","dest","wrapAll","append","createList","setSearch","searchFilter","_this","$wrap","listOption","$button","find","on","toggleClass","moveOption","each","value","attr","text","button","currentInstance","closest","from","to","hasClass","removeClass","$option","searchData","prepend","selector","keyup","removeSelection","val","toString","indexOf","show","hide","clearButton","focus","fn","data","jQuery"],"mappings":"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","file":"jquery.listswap.min.js"} \ No newline at end of file +{"version":3,"sources":["../lib/jquery.listswap.js"],"names":["$","window","document","undefined","ListSwap","element","options","this","extend","defaults","_defaults","_name","pluginName","init","truncate","height","labelAdd","labelRemove","customClass","prefix","toLowerCase","classes","ready","wrap","listWrap","hidden","list","selected","controls","add","remove","option","search","searchBox","events","click","select","instance","prototype","source","destination","setLayout","bindUIActions","el","src","dest","wrapAll","addClass","append","createList","setSearch","searchFilter","_this","$wrap","listOption","$button","find","on","toggleClass","moveOption","each","value","attr","text","css","button","currentInstance","closest","from","to","hasClass","removeClass","$option","searchData","parent","prepend","selector","prev","keyup","removeSelection","val","toString","indexOf","show","hide","clearButton","focus","fn","data","jQuery"],"mappings":"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","file":"jquery.listswap.min.js"} \ No newline at end of file diff --git a/lib/_jquery-listswap.scss b/lib/_jquery-listswap.scss index 697f287..47b32e0 100644 --- a/lib/_jquery-listswap.scss +++ b/lib/_jquery-listswap.scss @@ -37,17 +37,24 @@ $radius: 4px; clip-path: inset(0 0 0 0); } -.#{$prefix}-list { +.#{$prefix}-list-wrap { + margin: 1em auto; width: 40%; - min-height: 200px; float: left; border: 1px solid $border; border-radius: $radius; - list-style: none; +} + +.#{$prefix}-list { + margin: 0; padding-left: 0; + overflow-y: auto; + min-height: 100px; + list-style: none; li { padding: 4px 8px; &:hover { + cursor: pointer; background-color: lightyellow; } } @@ -113,4 +120,10 @@ li.#{$prefix}-selected { content:"\00d7"; } } +} + +.#{$prefix}-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/lib/jquery.listswap.js b/lib/jquery.listswap.js index c5ad33e..4926e14 100644 --- a/lib/jquery.listswap.js +++ b/lib/jquery.listswap.js @@ -13,16 +13,15 @@ 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', @@ -30,7 +29,9 @@ 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('
        '); + el.wrapAll('
        '); el.addClass(classes.hidden); $('#' + prefix + '_' + instance).append('' + - '
          ' + + '
          ' + + '
            ' + + '
            ' + '
              ' + '
            • ' + ' ' + @@ -86,7 +83,9 @@ ' ' + options.labelRemove + '' + '
              • ' + '
            ' + - '
              ' + '
              ' + + '
                ' + + '
                ' ); 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('
              • ' + text + '
                • '); + if (_this.options.truncate) { + classes.truncate = ' ' + prefix + '-truncate'; + } + list.append('
              • ' + text + '
                • '); + 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 = '
                ' + - '' + + '' + '' + '
                '; - 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() { diff --git a/package.json b/package.json index 0009814..d6d8730 100644 --- a/package.json +++ b/package.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.", "repository": { "type": "git",