├── LICENSE
├── README.md
└── dist
    ├── dual-list-box.min.js
    └── dual-list-box.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Geodan B.V. (Alex van den Hoogen)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bootstrap Dual List Box
 2 | 
 3 | ## Synopsis
 4 | 
 5 | Bootstrap Dual List Box is a dual list box implementation especially designed for Bootstrap and jQuery. This control is
 6 | quite easy for users to understand and use. Also it is possible to work with very large multi-selects without confusing
 7 | the user.
 8 | 
 9 | ## Usage
10 | 
11 | First off you should create a simple `<select id="some-name">` tag. After which you can initialize the dual list box
12 | as a jQuery plugin like so: `$('some-name').DualListBox();`. There are also some options associated with this plugin.
13 | 
14 | ## Options / API
15 | 
16 | There are currently two ways to use this component. First up is by using html5 `data-*` attributes embedded in the
17 | select tag, but you can also provide a Javascript Object. The variable names are the same all around and can be even
18 | mixed and matched within the select or Javascript. The current options are: 
19 | 
20 | | Option       | Type    | Default    | Description |
21 | | ------------ | ------- | ---------- | ----------- |
22 | | `json`       | Boolean | true       | Whether to download the data via a JSON request.  |
23 | | `uri`        | URI     | local.json | The relative or absolute URI where to receive the data from. | 
24 | | `value`      | String  | id         | This determines what JSON field is handled as the value. |
25 | | `text`       | String  | name       | This determines what JSON field is handled as the text. | 
26 | | `title`      | String  | Example    | The title of the control. |
27 | | `horizontal` | Boolean | false      | Whether the control is lay out horizontal or vertical. |
28 | | `timeout`    | UInt    | 500        | Timeout when to start searching with the filter. |
29 | | `textLength` | UInt    | 45         | Maximum text length of when the element should contain title-attributes. |
30 | | `moveAllBtn` | Boolean | true       | Whether to display the move all button (from left to right or vice-versa). |
31 | | `maxAllBtn`  | UInt    | 500        | Integer to determine from which length to display the warning message below. |
32 | | `warning`    | String  | <...>      | Warning message that is displayed when trying to move large amounts of elements. |
33 | 
34 | ## [Demo](http://geodan.github.io/duallistbox/index.html)
35 | 
36 | Small demo that shows the functionality of the plugin. 
37 | 
38 | ## Installation
39 | 
40 | Copy the `dual-list-box.js` file to a directory in your project and reference it via Javascript. After which it should
41 | be available as a jQuery plugin. 
42 | 
43 | ## Tested compatibility
44 | 
45 | Currently the plugin is confirmed working in:
46 | 
47 | * Internet Explorer 9+
48 | * Mozilla Firefox (latest)
49 | * Google Chrome (latest)
50 | 
51 | Other browsers are currently untested, but should work when they are compatible with jQuery. 
52 | 
53 | ## License
54 | 
55 | ```
56 | The MIT License (MIT)
57 | 
58 | Copyright (c) 2014 Geodan B.V. (Alex van den Hoogen)
59 | 
60 | Permission is hereby granted, free of charge, to any person obtaining a copy
61 | of this software and associated documentation files (the "Software"), to deal
62 | in the Software without restriction, including without limitation the rights
63 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
64 | copies of the Software, and to permit persons to whom the Software is
65 | furnished to do so, subject to the following conditions:
66 | 
67 | The above copyright notice and this permission notice shall be included in all
68 | copies or substantial portions of the Software.
69 | 
70 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
71 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
72 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
73 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
74 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
75 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
76 | SOFTWARE.
77 | ```


--------------------------------------------------------------------------------
/dist/dual-list-box.min.js:
--------------------------------------------------------------------------------
1 | (function($){$.fn.DualListBox=function(paramOptions,selected){return this.each(function(){var defaults={element:$(this).context,uri:"local.json",value:"id",text:"name",title:"Example",json:true,timeout:500,horizontal:false,textLength:45,moveAllBtn:true,maxAllBtn:500,selectClass:"form-control",warning:"Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive."};var htmlOptions={element:$(this).context,uri:$(this).data("source"),value:$(this).data("value"),text:$(this).data("text"),title:$(this).data("title"),json:$(this).data("json"),timeout:$(this).data("timeout"),horizontal:$(this).data("horizontal"),textLength:$(this).data("textLength"),moveAllBtn:$(this).data("moveAllBtn"),maxAllBtn:$(this).data("maxAllBtn"),selectClass:$(this).data("selectClass")};var options=$.extend({},defaults,htmlOptions,paramOptions);$.each(options,function(i,item){if(item===undefined||item===null){throw"DualListBox: "+i+" is undefined."}});options["parent"]="dual-list-box-"+options.title;options["parentElement"]="#"+options.parent;selected=$.extend([{}],selected);if(options.json){addElementsViaJSON(options,selected)}else{construct(options)}})};function addElementsViaJSON(options,selected){var multipleTextFields=false;if(options.text.indexOf(":")>-1){var textToUse=options.text.split(":");if(textToUse.length>1){multipleTextFields=true}}$.getJSON(options.uri,function(json){$.each(json,function(key,item){var text="";if(multipleTextFields){textToUse.forEach(function(entry){text+=item[entry]+" "})}else{text=item[options.text]}$("<option>",{value:item[options.value],text:text,selected:selected.some(function(e){return e[options.value]===item[options.value]})===true}).appendTo(options.element)});construct(options)})}function addListeners(options){var unselected=$(options.parentElement+" .unselected");var selected=$(options.parentElement+" .selected");$(options.parentElement).find("button").bind("click",function(){switch($(this).data("type")){case"str":unselected.find("option:selected").appendTo(selected);$(this).prop("disabled",true);break;case"atr":if(unselected.find("option").length>=options.maxAllBtn&&confirm(options.warning)||unselected.find("option").length<options.maxAllBtn){unselected.find("option").each(function(){if($(this).isVisible()){$(this).remove().appendTo(selected)}})}break;case"stl":selected.find("option:selected").remove().appendTo(unselected);$(this).prop("disabled",true);break;case"atl":if(selected.find("option").length>=options.maxAllBtn&&confirm(options.warning)||selected.find("option").length<options.maxAllBtn){selected.find("option").each(function(){if($(this).isVisible()){$(this).remove().appendTo(unselected)}})}break;default:break}unselected.filterByText($(options.parentElement+" .filter-unselected"),options.timeout,options.parentElement).scrollTop(0).sortOptions();selected.filterByText($(options.parentElement+" .filter-selected"),options.timeout,options.parentElement).scrollTop(0).sortOptions();handleMovement(options)});$(options.parentElement).closest("form").submit(function(){selected.find("option").prop("selected",true)});$(options.parentElement).find('input[type="text"]').keypress(function(e){if(e.which===13){event.preventDefault()}});selected.filterByText($(options.parentElement+" .filter-selected"),options.timeout,options.parentElement).scrollTop(0).sortOptions();unselected.filterByText($(options.parentElement+" .filter-unselected"),options.timeout,options.parentElement).scrollTop(0).sortOptions()}function construct(options){createDualListBox(options);parseStubListBox(options);addListeners(options)}function countElements(parentElement){var countUnselected=0,countSelected=0;$(parentElement+" .unselected").find("option").each(function(){if($(this).isVisible()){countUnselected++}});$(parentElement+" .selected").find("option").each(function(){if($(this).isVisible()){countSelected++}});$(parentElement+" .unselected-count").text(countUnselected);$(parentElement+" .selected-count").text(countSelected);toggleButtons(parentElement)}function createDualListBox(options){$(options.element).parent().attr("id",options.parent);$(options.parentElement).addClass("row").append((options.horizontal==false?'   <div class="col-md-5">':'   <div class="col-md-6">')+'       <h4><span class="unselected-title"></span> <small>- showing <span class="unselected-count"></span></small></h4>'+'       <input class="filter form-control filter-unselected" type="text" placeholder="Filter" style="margin-bottom: 5px;">'+(options.horizontal==false?"":createHorizontalButtons(1,options.moveAllBtn))+'       <select class="unselected '+options.selectClass+'" style="height: 200px; width: 100%;" multiple></select>'+"   </div>"+(options.horizontal==false?createVerticalButtons(options.moveAllBtn):"")+(options.horizontal==false?'   <div class="col-md-5">':'   <div class="col-md-6">')+'       <h4><span class="selected-title"></span> <small>- showing <span class="selected-count"></span></small></h4>'+'       <input class="filter form-control filter-selected" type="text" placeholder="Filter" style="margin-bottom: 5px;">'+(options.horizontal==false?"":createHorizontalButtons(2,options.moveAllBtn))+'       <select class="selected '+options.selectClass+'" style="height: 200px; width: 100%;" multiple></select>'+"   </div>");$(options.parentElement+" .selected").prop("name",$(options.element).prop("name"));$(options.parentElement+" .unselected-title").text("Available "+options.title);$(options.parentElement+" .selected-title").text("Selected "+options.title)}function createHorizontalButtons(number,copyAllBtn){if(number==1){return(copyAllBtn?'       <button type="button" class="btn btn-default atr" data-type="atr" style="margin-bottom: 5px;"><span class="glyphicon glyphicon-list"></span> <span class="glyphicon glyphicon-chevron-right"></span></button>':"")+'       <button type="button" class="btn btn-default '+(copyAllBtn?"pull-right col-md-6":"col-md-12")+' str" data-type="str" style="margin-bottom: 5px;" disabled><span class="glyphicon glyphicon-chevron-right"></span></button>'}else{return'       <button type="button" class="btn btn-default '+(copyAllBtn?"col-md-6":"col-md-12")+' stl" data-type="stl" style="margin-bottom: 5px;" disabled><span class="glyphicon glyphicon-chevron-left"></span></button>'+(copyAllBtn?'       <button type="button" class="btn btn-default col-md-6 pull-right atl" data-type="atl" style="margin-bottom: 5px;"><span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-list"></span></button>':"")}}function createVerticalButtons(copyAllBtn){return'   <div class="col-md-2 center-block" style="margin-top: '+(copyAllBtn?"80px":"130px")+'">'+(copyAllBtn?'       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 atr" data-type="atr" style="margin-bottom: 10px;"><span class="glyphicon glyphicon-list"></span> <span class="glyphicon glyphicon-chevron-right"></span></button>':"")+'       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 str" data-type="str" style="margin-bottom: 20px;" disabled><span class="glyphicon glyphicon-chevron-right"></span></button>'+'       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 stl" data-type="stl" style="margin-bottom: 10px;" disabled><span class="glyphicon glyphicon-chevron-left"></span></button>'+(copyAllBtn?'       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 atl" data-type="atl" style="margin-bottom: 10px;"><span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-list"></span></button>':"")+"   </div>"}function handleMovement(options){$(options.parentElement+" .unselected").find("option:selected").prop("selected",false);$(options.parentElement+" .selected").find("option:selected").prop("selected",false);$(options.parentElement+" .filter").val("");$(options.parentElement+" select").find("option").each(function(){$(this).show()});countElements(options.parentElement)}function parseStubListBox(options){var textIsTooLong=false;$(options.element).find("option").text(function(i,text){$(this).data("title",text);if(text.length>options.textLength){textIsTooLong=true;return text.substr(0,options.textLength)+"..."}}).each(function(){if(textIsTooLong){$(this).prop("title",$(this).data("title"))}if($(this).is(":selected")){$(this).appendTo(options.parentElement+" .selected")}else{$(this).appendTo(options.parentElement+" .unselected")}});$(options.element).remove();handleMovement(options)}function toggleButtons(parentElement){$(parentElement+" .unselected").change(function(){$(parentElement+" .str").prop("disabled",false)});$(parentElement+" .selected").change(function(){$(parentElement+" .stl").prop("disabled",false)});if($(parentElement+" .unselected").has("option").length==0){$(parentElement+" .atr").prop("disabled",true);$(parentElement+" .str").prop("disabled",true)}else{$(parentElement+" .atr").prop("disabled",false)}if($(parentElement+" .selected").has("option").length==0){$(parentElement+" .atl").prop("disabled",true);$(parentElement+" .stl").prop("disabled",true)}else{$(parentElement+" .atl").prop("disabled",false)}}$.fn.filterByText=function(textBox,timeout,parentElement){return this.each(function(){var select=this;var options=[];$(select).find("option").each(function(){options.push({value:$(this).val(),text:$(this).text()})});$(select).data("options",options);$(textBox).bind("change keyup",function(){delay(function(){var options=$(select).data("options");var search=$.trim($(textBox).val());var regex=new RegExp(search,"gi");$.each(options,function(i){if(options[i].text.match(regex)===null){$(select).find($('option[value="'+options[i].value+'"]')).hide()}else{$(select).find($('option[value="'+options[i].value+'"]')).show()}});countElements(parentElement)},timeout)})})};$.fn.isVisible=function(){return!($(this).css("visibility")=="hidden"||$(this).css("display")=="none")};$.fn.sortOptions=function(){return this.each(function(){$(this).append($(this).find("option").remove().sort(function(a,b){var at=$(a).text(),bt=$(b).text();return at>bt?1:at<bt?-1:0}))})};var delay=function(){var timer=0;return function(callback,ms){clearTimeout(timer);timer=setTimeout(callback,ms)}}()})(jQuery);


--------------------------------------------------------------------------------
/dist/dual-list-box.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * jQuery DualListBox plugin with Bootstrap styling v1.0
  3 |  * http://www.geodan.nl
  4 |  *
  5 |  * Copyright (c) 2014 Geodan B.V.
  6 |  * Created by: Alex van den Hoogen
  7 |  *
  8 |  * Usage:
  9 |  *   Create a <select> and apply this script to that select via jQuery like so:
 10 |  *   $('select').DualListBox(); - the DualListBox will than be created for you.
 11 |  *
 12 |  *   Options and parameters can be provided through html5 data-* attributes or
 13 |  *   via a provided JavaScript object. Optionally already selected items can
 14 |  *   also be provided and this script can download the JSON to fill the
 15 |  *   DualListBox when a valid URI is provided.
 16 |  *
 17 |  *   See the default parameters (below) for a complete list of options.
 18 |  */
 19 | 
 20 | (function($) {
 21 |     /** Initializes the DualListBox code as jQuery plugin. */
 22 |     $.fn.DualListBox = function(paramOptions, selected) {
 23 |         return this.each(function () {
 24 |             var defaults = {
 25 |                 element:    $(this).context,    // Select element which creates this dual list box.
 26 |                 uri:        'local.json',       // JSON file that can be opened for the data.
 27 |                 value:      'id',               // Value that is assigned to the value field in the option.
 28 |                 text:       'name',             // Text that is assigned to the option field.
 29 |                 title:      'Example',          // Title of the dual list box.
 30 |                 json:       true,               // Whether to retrieve the data through JSON.
 31 |                 timeout:    500,                // Timeout for when a filter search is started.
 32 |                 horizontal: false,              // Whether to layout the dual list box as horizontal or vertical.
 33 |                 textLength: 45,                 // Maximum text length that is displayed in the select.
 34 |                 moveAllBtn: true,               // Whether the append all button is available.
 35 |                 maxAllBtn:  500,                // Maximum size of list in which the all button works without warning. See below.
 36 |                 selectClass:'form-control',
 37 |                 warning:    'Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive.'
 38 |             };
 39 | 
 40 |             var htmlOptions = {
 41 |                 element:    $(this).context,
 42 |                 uri:        $(this).data('source'),
 43 |                 value:      $(this).data('value'),
 44 |                 text:       $(this).data('text'),
 45 |                 title:      $(this).data('title'),
 46 |                 json:       $(this).data('json'),
 47 |                 timeout:    $(this).data('timeout'),
 48 |                 horizontal: $(this).data('horizontal'),
 49 |                 textLength: $(this).data('textLength'),
 50 |                 moveAllBtn: $(this).data('moveAllBtn'),
 51 |                 maxAllBtn:  $(this).data('maxAllBtn'),
 52 |                 selectClass:$(this).data('selectClass')
 53 |             };
 54 | 
 55 |             var options = $.extend({}, defaults, htmlOptions, paramOptions);
 56 | 
 57 |             $.each(options, function(i, item) {
 58 |                 if (item === undefined || item === null) { throw 'DualListBox: ' + i + ' is undefined.'; }
 59 |             });
 60 | 
 61 |             options['parent'] = 'dual-list-box-' + options.title;
 62 |             options['parentElement'] = '#' + options.parent;
 63 | 
 64 |             selected = $.extend([{}], selected);
 65 | 
 66 |             if (options.json) {
 67 |                 addElementsViaJSON(options, selected);
 68 |             } else {
 69 |                 construct(options);
 70 |             }
 71 |         })
 72 |     };
 73 | 
 74 |     /** Retrieves all the option elements through a JSON request. */
 75 |     function addElementsViaJSON(options, selected) {
 76 |         var multipleTextFields = false;
 77 | 
 78 |         if (options.text.indexOf(':') > -1) {
 79 |             var textToUse = options.text.split(':');
 80 | 
 81 |             if (textToUse.length > 1) {
 82 |                 multipleTextFields = true;
 83 |             }
 84 |         }
 85 | 
 86 |         $.getJSON(options.uri, function(json) {
 87 |             $.each(json, function(key, item) {
 88 |                 var text = '';
 89 | 
 90 |                 if (multipleTextFields) {
 91 |                     textToUse.forEach(function (entry) { text += item[entry] + ' '; });
 92 |                 } else {
 93 |                     text = item[options.text];
 94 |                 }
 95 | 
 96 |                 $('<option>', {
 97 |                     value: item[options.value],
 98 |                     text: text,
 99 |                     selected: (selected.some(function (e) { return e[options.value] === item[options.value] }) === true)
100 |                 }).appendTo(options.element);
101 |             });
102 | 
103 |             construct(options);
104 |         });
105 |     }
106 | 
107 |     /** Adds the event listeners to the buttons and filters. */
108 |     function addListeners(options) {
109 |         var unselected = $(options.parentElement + ' .unselected');
110 |         var selected = $(options.parentElement + ' .selected');
111 | 
112 |         $(options.parentElement).find('button').bind('click', function() {
113 |             switch ($(this).data('type')) {
114 |                 case 'str': /* Selected to the right. */
115 |                     unselected.find('option:selected').appendTo(selected);
116 |                     $(this).prop('disabled', true);
117 |                     break;
118 |                 case 'atr': /* All to the right. */
119 |                     if (unselected.find('option').length >= options.maxAllBtn && confirm(options.warning) ||
120 |                         unselected.find('option').length < options.maxAllBtn) {
121 |                         unselected.find('option').each(function () {
122 |                             if ($(this).isVisible()) {
123 |                                 $(this).remove().appendTo(selected);
124 |                             }
125 |                         });
126 |                     }
127 |                     break;
128 |                 case 'stl': /* Selected to the left. */
129 |                     selected.find('option:selected').remove().appendTo(unselected);
130 |                     $(this).prop('disabled', true);
131 |                     break;
132 |                 case 'atl': /* All to the left. */
133 |                     if (selected.find('option').length >= options.maxAllBtn && confirm(options.warning) ||
134 |                         selected.find('option').length < options.maxAllBtn) {
135 |                         selected.find('option').each(function () {
136 |                             if ($(this).isVisible()) {
137 |                                 $(this).remove().appendTo(unselected);
138 |                             }
139 |                         });
140 |                     }
141 |                     break;
142 |                 default: break;
143 |             }
144 | 
145 |             unselected.filterByText($(options.parentElement + ' .filter-unselected'), options.timeout, options.parentElement).scrollTop(0).sortOptions();
146 |             selected.filterByText($(options.parentElement + ' .filter-selected'), options.timeout, options.parentElement).scrollTop(0).sortOptions();
147 | 
148 |             handleMovement(options);
149 |         });
150 | 
151 |         $(options.parentElement).closest('form').submit(function() {
152 |             selected.find('option').prop('selected', true);
153 |         });
154 | 
155 |         $(options.parentElement).find('input[type="text"]').keypress(function(e) {
156 |             if (e.which === 13) {
157 |                 event.preventDefault();
158 |             }
159 |         });
160 | 
161 |         selected.filterByText($(options.parentElement + ' .filter-selected'), options.timeout, options.parentElement).scrollTop(0).sortOptions();
162 |         unselected.filterByText($(options.parentElement + ' .filter-unselected'), options.timeout, options.parentElement).scrollTop(0).sortOptions();
163 |     }
164 | 
165 |     /** Constructs the jQuery plugin after the elements have been retrieved. */
166 |     function construct(options) {
167 |         createDualListBox(options);
168 |         parseStubListBox(options);
169 |         addListeners(options);
170 |     }
171 | 
172 |     /** Counts the elements per list box/select and shows it. */
173 |     function countElements(parentElement) {
174 |         var countUnselected = 0, countSelected = 0;
175 | 
176 |         $(parentElement + ' .unselected').find('option').each(function() { if ($(this).isVisible()) { countUnselected++; } });
177 |         $(parentElement + ' .selected').find('option').each(function() { if ($(this).isVisible()) { countSelected++ } });
178 | 
179 |         $(parentElement + ' .unselected-count').text(countUnselected);
180 |         $(parentElement + ' .selected-count').text(countSelected);
181 | 
182 |         toggleButtons(parentElement);
183 |     }
184 | 
185 |     /** Creates a new dual list box with the right buttons and filter. */
186 |     function createDualListBox(options) {
187 |         $(options.element).parent().attr('id', options.parent);
188 | 
189 |         $(options.parentElement).addClass('row').append(
190 |                 (options.horizontal == false ? '   <div class="col-md-5">' : '   <div class="col-md-6">') +
191 |                 '       <h4><span class="unselected-title"></span> <small>- showing <span class="unselected-count"></span></small></h4>' +
192 |                 '       <input class="filter form-control filter-unselected" type="text" placeholder="Filter" style="margin-bottom: 5px;">' +
193 |                 (options.horizontal == false ? '' : createHorizontalButtons(1, options.moveAllBtn)) +
194 |                 '       <select class="unselected ' + options.selectClass + '" style="height: 200px; width: 100%;" multiple></select>' +
195 |                 '   </div>' +
196 |                 (options.horizontal == false ? createVerticalButtons(options.moveAllBtn) : '') +
197 |                 (options.horizontal == false ? '   <div class="col-md-5">' : '   <div class="col-md-6">') +
198 |                 '       <h4><span class="selected-title"></span> <small>- showing <span class="selected-count"></span></small></h4>' +
199 |                 '       <input class="filter form-control filter-selected" type="text" placeholder="Filter" style="margin-bottom: 5px;">' +
200 |                 (options.horizontal == false ? '' : createHorizontalButtons(2, options.moveAllBtn)) +
201 |                 '       <select class="selected ' + options.selectClass + '" style="height: 200px; width: 100%;" multiple></select>' +
202 |                 '   </div>');
203 | 
204 |         $(options.parentElement + ' .selected').prop('name', $(options.element).prop('name'));
205 |         $(options.parentElement + ' .unselected-title').text('Available ' + options.title);
206 |         $(options.parentElement + ' .selected-title').text('Selected ' + options.title);
207 |     }
208 | 
209 |     /** Creates the buttons when the dual list box is set in horizontal mode. */
210 |     function createHorizontalButtons(number, copyAllBtn) {
211 |         if (number == 1) {
212 |             return (copyAllBtn ? '       <button type="button" class="btn btn-default atr" data-type="atr" style="margin-bottom: 5px;"><span class="glyphicon glyphicon-list"></span> <span class="glyphicon glyphicon-chevron-right"></span></button>': '') +
213 |                 '       <button type="button" class="btn btn-default ' + (copyAllBtn ? 'pull-right col-md-6' : 'col-md-12') + ' str" data-type="str" style="margin-bottom: 5px;" disabled><span class="glyphicon glyphicon-chevron-right"></span></button>';
214 |         } else {
215 |             return '       <button type="button" class="btn btn-default ' + (copyAllBtn ? 'col-md-6' : 'col-md-12') + ' stl" data-type="stl" style="margin-bottom: 5px;" disabled><span class="glyphicon glyphicon-chevron-left"></span></button>' +
216 |                 (copyAllBtn ? '       <button type="button" class="btn btn-default col-md-6 pull-right atl" data-type="atl" style="margin-bottom: 5px;"><span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-list"></span></button>' : '');
217 |         }
218 |     }
219 | 
220 |     /** Creates the buttons when the dual list box is set in vertical mode. */
221 |     function createVerticalButtons(copyAllBtn) {
222 |         return '   <div class="col-md-2 center-block" style="margin-top: ' + (copyAllBtn ? '80px' : '130px') +'">' +
223 |             (copyAllBtn ? '       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 atr" data-type="atr" style="margin-bottom: 10px;"><span class="glyphicon glyphicon-list"></span> <span class="glyphicon glyphicon-chevron-right"></span></button>' : '') +
224 |             '       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 str" data-type="str" style="margin-bottom: 20px;" disabled><span class="glyphicon glyphicon-chevron-right"></span></button>' +
225 |             '       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 stl" data-type="stl" style="margin-bottom: 10px;" disabled><span class="glyphicon glyphicon-chevron-left"></span></button>' +
226 |             (copyAllBtn ? '       <button type="button" class="btn btn-default col-md-8 col-md-offset-2 atl" data-type="atl" style="margin-bottom: 10px;"><span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-list"></span></button>' : '') +
227 |             '   </div>';
228 |     }
229 | 
230 |     /** Specifically handles the movement when one or more elements are moved. */
231 |     function handleMovement(options) {
232 |         $(options.parentElement + ' .unselected').find('option:selected').prop('selected', false);
233 |         $(options.parentElement + ' .selected').find('option:selected').prop('selected', false);
234 | 
235 |         $(options.parentElement + ' .filter').val('');
236 |         $(options.parentElement + ' select').find('option').each(function() { $(this).show(); });
237 | 
238 |         countElements(options.parentElement);
239 |     }
240 | 
241 |     /** Parses the stub select / list box that is first created. */
242 |     function parseStubListBox(options) {
243 |         var textIsTooLong = false;
244 | 
245 |         $(options.element).find('option').text(function (i, text) {
246 |             $(this).data('title', text);
247 | 
248 |             if (text.length > options.textLength) {
249 |                 textIsTooLong = true;
250 |                 return text.substr(0, options.textLength) + '...';
251 |             }
252 |         }).each(function () {
253 |             if (textIsTooLong) {
254 |                 $(this).prop('title', $(this).data('title'));
255 |             }
256 | 
257 |             if ($(this).is(':selected')) {
258 |                 $(this).appendTo(options.parentElement + ' .selected');
259 |             } else {
260 |                 $(this).appendTo(options.parentElement + ' .unselected');
261 |             }
262 |         });
263 | 
264 |         $(options.element).remove();
265 |         handleMovement(options);
266 |     }
267 | 
268 |     /** Toggles the buttons based on the length of the selects. */
269 |     function toggleButtons(parentElement) {
270 |         $(parentElement + ' .unselected').change(function() {
271 |             $(parentElement + ' .str').prop('disabled', false);
272 |         });
273 | 
274 |         $(parentElement + ' .selected').change(function() {
275 |             $(parentElement + ' .stl').prop('disabled', false);
276 |         });
277 | 
278 |         if ($(parentElement + ' .unselected').has('option').length == 0) {
279 |             $(parentElement + ' .atr').prop('disabled', true);
280 |             $(parentElement + ' .str').prop('disabled', true);
281 |         } else {
282 |             $(parentElement + ' .atr').prop('disabled', false);
283 |         }
284 | 
285 |         if ($(parentElement + ' .selected').has('option').length == 0) {
286 |             $(parentElement + ' .atl').prop('disabled', true);
287 |             $(parentElement + ' .stl').prop('disabled', true);
288 |         } else {
289 |             $(parentElement + ' .atl').prop('disabled', false);
290 |         }
291 |     }
292 | 
293 |     /**
294 |      * Filters through the select boxes and hides when an element doesn't match.
295 |      *
296 |      * Original source: http://www.lessanvaezi.com/filter-select-list-options/
297 |      */
298 |     $.fn.filterByText = function(textBox, timeout, parentElement) {
299 |         return this.each(function() {
300 |             var select = this;
301 |             var options = [];
302 | 
303 |             $(select).find('option').each(function() {
304 |                 options.push({value: $(this).val(), text: $(this).text()});
305 |             });
306 | 
307 |             $(select).data('options', options);
308 | 
309 |             $(textBox).bind('change keyup', function() {
310 |                 delay(function() {
311 |                     var options = $(select).data('options');
312 |                     var search = $.trim($(textBox).val());
313 |                     var regex = new RegExp(search,'gi');
314 | 
315 |                     $.each(options, function(i) {
316 |                         if(options[i].text.match(regex) === null) {
317 |                             $(select).find($('option[value="' + options[i].value + '"]')).hide();
318 |                         } else {
319 |                             $(select).find($('option[value="' + options[i].value + '"]')).show();
320 |                         }
321 |                     });
322 | 
323 |                     countElements(parentElement);
324 |                 }, timeout);
325 |             });
326 |         });
327 |     };
328 | 
329 |     /** Checks whether or not an element is visible. The default jQuery implementation doesn't work. */
330 |     $.fn.isVisible = function() {
331 |         return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
332 |     };
333 | 
334 |     /** Sorts options in a select / list box. */
335 |     $.fn.sortOptions = function() {
336 |         return this.each(function() {
337 |             $(this).append($(this).find('option').remove().sort(function(a, b) {
338 |                 var at = $(a).text(), bt = $(b).text();
339 |                 return (at > bt) ? 1 : ((at < bt) ? -1 : 0);
340 |             }));
341 |         });
342 |     };
343 | 
344 |     /** Simple delay function that can wrap around an existing function and provides a callback. */
345 |     var delay = (function() {
346 |         var timer = 0;
347 |         return function (callback, ms) {
348 |             clearTimeout(timer);
349 |             timer = setTimeout(callback, ms);
350 |         };
351 |     })();
352 | })(jQuery);


--------------------------------------------------------------------------------