src/main/resources/META-INF/resources/designer/lib/multiselect.js

   1 /**\r
   2  * Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect)\r
   3  *\r
   4  * Apache License, Version 2.0:\r
   5  * Copyright (c) 2012 - 2015 David Stutz\r
   6  *\r
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not\r
   8  * use this file except in compliance with the License. You may obtain a\r
   9  * copy of the License at http://www.apache.org/licenses/LICENSE-2.0\r
  10  *\r
  11  * Unless required by applicable law or agreed to in writing, software\r
  12  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT\r
  13  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\r
  14  * License for the specific language governing permissions and limitations\r
  15  * under the License.\r
  16  *\r
  17  * BSD 3-Clause License:\r
  18  * Copyright (c) 2012 - 2015 David Stutz\r
  19  * All rights reserved.\r
  20  *\r
  21  * Redistribution and use in source and binary forms, with or without\r
  22  * modification, are permitted provided that the following conditions are met:\r
  23  *    - Redistributions of source code must retain the above copyright notice,\r
  24  *      this list of conditions and the following disclaimer.\r
  25  *    - Redistributions in binary form must reproduce the above copyright notice,\r
  26  *      this list of conditions and the following disclaimer in the documentation\r
  27  *      and/or other materials provided with the distribution.\r
  28  *    - Neither the name of David Stutz nor the names of its contributors may be\r
  29  *      used to endorse or promote products derived from this software without\r
  30  *      specific prior written permission.\r
  31  *\r
  32  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"\r
  33  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,\r
  34  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\r
  35  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR\r
  36  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,\r
  37  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,\r
  38  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;\r
  39  * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,\r
  40  * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR\r
  41  * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF\r
  42  * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r
  43  */\r
  44 !function ($) {\r
  45     "use strict";// jshint ;_;\r
  46 \r
  47     if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {\r
  48         ko.bindingHandlers.multiselect = {\r
  49             after: ['options', 'value', 'selectedOptions', 'enable', 'disable'],\r
  50 \r
  51             init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {\r
  52                 var $element = $(element);\r
  53                 var config = ko.toJS(valueAccessor());\r
  54 \r
  55                 $element.multiselect(config);\r
  56 \r
  57                 if (allBindings.has('options')) {\r
  58                     var options = allBindings.get('options');\r
  59                     if (ko.isObservable(options)) {\r
  60                         ko.computed({\r
  61                             read: function() {\r
  62                                 options();\r
  63                                 setTimeout(function() {\r
  64                                     var ms = $element.data('multiselect');\r
  65                                     if (ms)\r
  66                                         ms.updateOriginalOptions();//Not sure how beneficial this is.\r
  67                                     $element.multiselect('rebuild');\r
  68                                 }, 1);\r
  69                             },\r
  70                             disposeWhenNodeIsRemoved: element\r
  71                         });\r
  72                     }\r
  73                 }\r
  74 \r
  75                 //value and selectedOptions are two-way, so these will be triggered even by our own actions.\r
  76                 //It needs some way to tell if they are triggered because of us or because of outside change.\r
  77                 //It doesn't loop but it's a waste of processing.\r
  78                 if (allBindings.has('value')) {\r
  79                     var value = allBindings.get('value');\r
  80                     if (ko.isObservable(value)) {\r
  81                         ko.computed({\r
  82                             read: function() {\r
  83                                 value();\r
  84                                 setTimeout(function() {\r
  85                                     $element.multiselect('refresh');\r
  86                                 }, 1);\r
  87                             },\r
  88                             disposeWhenNodeIsRemoved: element\r
  89                         }).extend({ rateLimit: 100, notifyWhenChangesStop: true });\r
  90                     }\r
  91                 }\r
  92 \r
  93                 //Switched from arrayChange subscription to general subscription using 'refresh'.\r
  94                 //Not sure performance is any better using 'select' and 'deselect'.\r
  95                 if (allBindings.has('selectedOptions')) {\r
  96                     var selectedOptions = allBindings.get('selectedOptions');\r
  97                     if (ko.isObservable(selectedOptions)) {\r
  98                         ko.computed({\r
  99                             read: function() {\r
 100                                 selectedOptions();\r
 101                                 setTimeout(function() {\r
 102                                     $element.multiselect('refresh');\r
 103                                 }, 1);\r
 104                             },\r
 105                             disposeWhenNodeIsRemoved: element\r
 106                         }).extend({ rateLimit: 100, notifyWhenChangesStop: true });\r
 107                     }\r
 108                 }\r
 109 \r
 110                 var setEnabled = function (enable) {\r
 111                     setTimeout(function () {\r
 112                         if (enable)\r
 113                             $element.multiselect('enable');\r
 114                         else\r
 115                             $element.multiselect('disable');\r
 116                     });\r
 117                 };\r
 118 \r
 119                 if (allBindings.has('enable')) {\r
 120                     var enable = allBindings.get('enable');\r
 121                     if (ko.isObservable(enable)) {\r
 122                         ko.computed({\r
 123                             read: function () {\r
 124                                 setEnabled(enable());\r
 125                             },\r
 126                             disposeWhenNodeIsRemoved: element\r
 127                         }).extend({ rateLimit: 100, notifyWhenChangesStop: true });\r
 128                     } else {\r
 129                         setEnabled(enable);\r
 130                     }\r
 131                 }\r
 132 \r
 133                 if (allBindings.has('disable')) {\r
 134                     var disable = allBindings.get('disable');\r
 135                     if (ko.isObservable(disable)) {\r
 136                         ko.computed({\r
 137                             read: function () {\r
 138                                 setEnabled(!disable());\r
 139                             },\r
 140                             disposeWhenNodeIsRemoved: element\r
 141                         }).extend({ rateLimit: 100, notifyWhenChangesStop: true });\r
 142                     } else {\r
 143                         setEnabled(!disable);\r
 144                     }\r
 145                 }\r
 146 \r
 147                 ko.utils.domNodeDisposal.addDisposeCallback(element, function() {\r
 148                     $element.multiselect('destroy');\r
 149                 });\r
 150             },\r
 151 \r
 152             update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {\r
 153                 var $element = $(element);\r
 154                 var config = ko.toJS(valueAccessor());\r
 155 \r
 156                 $element.multiselect('setOptions', config);\r
 157                 $element.multiselect('rebuild');\r
 158             }\r
 159         };\r
 160     }\r
 161 \r
 162     function forEach(array, callback) {\r
 163         for (var index = 0; index < array.length; ++index) {\r
 164             callback(array[index], index);\r
 165         }\r
 166     }\r
 167 \r
 168     /**\r
 169      * Constructor to create a new multiselect using the given select.\r
 170      *\r
 171      * @param {jQuery} select\r
 172      * @param {Object} options\r
 173      * @returns {Multiselect}\r
 174      */\r
 175     function Multiselect(select, options) {\r
 176 \r
 177         this.$select = $(select);\r
 178         this.options = this.mergeOptions($.extend({}, options, this.$select.data()));\r
 179 \r
 180         // Placeholder via data attributes\r
 181         if (this.$select.attr("data-placeholder")) {\r
 182             this.options.nonSelectedText = this.$select.data("placeholder");\r
 183         }\r
 184 \r
 185         // Initialization.\r
 186         // We have to clone to create a new reference.\r
 187         this.originalOptions = this.$select.clone()[0].options;\r
 188         this.query = '';\r
 189         this.searchTimeout = null;\r
 190         this.lastToggledInput = null;\r
 191 \r
 192         this.options.multiple = this.$select.attr('multiple') === "multiple";\r
 193         this.options.onChange = $.proxy(this.options.onChange, this);\r
 194         this.options.onSelectAll = $.proxy(this.options.onSelectAll, this);\r
 195         this.options.onDeselectAll = $.proxy(this.options.onDeselectAll, this);\r
 196         this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);\r
 197         this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);\r
 198         this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);\r
 199         this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);\r
 200         this.options.onInitialized = $.proxy(this.options.onInitialized, this);\r
 201         this.options.onFiltering = $.proxy(this.options.onFiltering, this);\r
 202 \r
 203         // Build select all if enabled.\r
 204         this.buildContainer();\r
 205         this.buildButton();\r
 206         this.buildDropdown();\r
 207         this.buildSelectAll();\r
 208         this.buildDropdownOptions();\r
 209         this.buildFilter();\r
 210 \r
 211         this.updateButtonText();\r
 212         this.updateSelectAll(true);\r
 213 \r
 214         if (this.options.enableClickableOptGroups && this.options.multiple) {\r
 215             this.updateOptGroups();\r
 216         }\r
 217 \r
 218         this.options.wasDisabled = this.$select.prop('disabled');\r
 219         if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {\r
 220             this.disable();\r
 221         }\r
 222 \r
 223         this.$select.wrap('<span class="multiselect-native-select" />').after(this.$container);\r
 224         this.options.onInitialized(this.$select, this.$container);\r
 225     }\r
 226 \r
 227     Multiselect.prototype = {\r
 228 \r
 229         defaults: {\r
 230             /**\r
 231              * Default text function will either print 'None selected' in case no\r
 232              * option is selected or a list of the selected options up to a length\r
 233              * of 3 selected options.\r
 234              *\r
 235              * @param {jQuery} options\r
 236              * @param {jQuery} select\r
 237              * @returns {String}\r
 238              */\r
 239             buttonText: function(options, select) {\r
 240                 if (this.disabledText.length > 0\r
 241                         && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty)))  {\r
 242 \r
 243                     return this.disabledText;\r
 244                 }\r
 245                 else if (options.length === 0) {\r
 246                     return this.nonSelectedText;\r
 247                 }\r
 248                 else if (this.allSelectedText\r
 249                         && options.length === $('option', $(select)).length\r
 250                         && $('option', $(select)).length !== 1\r
 251                         && this.multiple) {\r
 252 \r
 253                     if (this.selectAllNumber) {\r
 254                         return this.allSelectedText + ' (' + options.length + ')';\r
 255                     }\r
 256                     else {\r
 257                         return this.allSelectedText;\r
 258                     }\r
 259                 }\r
 260                 else if (options.length > this.numberDisplayed) {\r
 261                     return options.length + ' ' + this.nSelectedText;\r
 262                 }\r
 263                 else {\r
 264                     var selected = '';\r
 265                     var delimiter = this.delimiterText;\r
 266 \r
 267                     options.each(function() {\r
 268                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();\r
 269                         selected += label + delimiter;\r
 270                     });\r
 271 \r
 272                     return selected.substr(0, selected.length - this.delimiterText.length);\r
 273                 }\r
 274             },\r
 275             /**\r
 276              * Updates the title of the button similar to the buttonText function.\r
 277              *\r
 278              * @param {jQuery} options\r
 279              * @param {jQuery} select\r
 280              * @returns {@exp;selected@call;substr}\r
 281              */\r
 282             buttonTitle: function(options, select) {\r
 283                 if (options.length === 0) {\r
 284                     return this.nonSelectedText;\r
 285                 }\r
 286                 else {\r
 287                     var selected = '';\r
 288                     var delimiter = this.delimiterText;\r
 289 \r
 290                     options.each(function () {\r
 291                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();\r
 292                         selected += label + delimiter;\r
 293                     });\r
 294                     return selected.substr(0, selected.length - this.delimiterText.length);\r
 295                 }\r
 296             },\r
 297             checkboxName: function(option) {\r
 298                 return false; // no checkbox name\r
 299             },\r
 300             /**\r
 301              * Create a label.\r
 302              *\r
 303              * @param {jQuery} element\r
 304              * @returns {String}\r
 305              */\r
 306             optionLabel: function(element){\r
 307                 return $(element).attr('label') || $(element).text();\r
 308             },\r
 309             /**\r
 310              * Create a class.\r
 311              *\r
 312              * @param {jQuery} element\r
 313              * @returns {String}\r
 314              */\r
 315             optionClass: function(element) {\r
 316                 return $(element).attr('class') || '';\r
 317             },\r
 318             /**\r
 319              * Triggered on change of the multiselect.\r
 320              *\r
 321              * Not triggered when selecting/deselecting options manually.\r
 322              *\r
 323              * @param {jQuery} option\r
 324              * @param {Boolean} checked\r
 325              */\r
 326             onChange : function(option, checked) {\r
 327 \r
 328             },\r
 329             /**\r
 330              * Triggered when the dropdown is shown.\r
 331              *\r
 332              * @param {jQuery} event\r
 333              */\r
 334             onDropdownShow: function(event) {\r
 335 \r
 336             },\r
 337             /**\r
 338              * Triggered when the dropdown is hidden.\r
 339              *\r
 340              * @param {jQuery} event\r
 341              */\r
 342             onDropdownHide: function(event) {\r
 343 \r
 344             },\r
 345             /**\r
 346              * Triggered after the dropdown is shown.\r
 347              *\r
 348              * @param {jQuery} event\r
 349              */\r
 350             onDropdownShown: function(event) {\r
 351 \r
 352             },\r
 353             /**\r
 354              * Triggered after the dropdown is hidden.\r
 355              *\r
 356              * @param {jQuery} event\r
 357              */\r
 358             onDropdownHidden: function(event) {\r
 359 \r
 360             },\r
 361             /**\r
 362              * Triggered on select all.\r
 363              */\r
 364             onSelectAll: function() {\r
 365 \r
 366             },\r
 367             /**\r
 368              * Triggered on deselect all.\r
 369              */\r
 370             onDeselectAll: function() {\r
 371 \r
 372             },\r
 373             /**\r
 374              * Triggered after initializing.\r
 375              *\r
 376              * @param {jQuery} $select\r
 377              * @param {jQuery} $container\r
 378              */\r
 379             onInitialized: function($select, $container) {\r
 380 \r
 381             },\r
 382             /**\r
 383              * Triggered on filtering.\r
 384              *\r
 385              * @param {jQuery} $filter\r
 386              */\r
 387             onFiltering: function($filter) {\r
 388 \r
 389             },\r
 390             enableHTML: false,\r
 391             buttonClass: 'btn btn-default',\r
 392             inheritClass: false,\r
 393             buttonWidth: 'auto',\r
 394             buttonContainer: '<div class="btn-group" />',\r
 395             dropRight: false,\r
 396             dropUp: false,\r
 397             selectedClass: 'active',\r
 398             // Maximum height of the dropdown menu.\r
 399             // If maximum height is exceeded a scrollbar will be displayed.\r
 400             maxHeight: false,\r
 401             includeSelectAllOption: false,\r
 402             includeSelectAllIfMoreThan: 0,\r
 403             selectAllText: ' Select all',\r
 404             selectAllValue: 'multiselect-all',\r
 405             selectAllName: false,\r
 406             selectAllNumber: true,\r
 407             selectAllJustVisible: true,\r
 408             enableFiltering: false,\r
 409             enableCaseInsensitiveFiltering: false,\r
 410             enableFullValueFiltering: false,\r
 411             enableClickableOptGroups: false,\r
 412             enableCollapsibleOptGroups: false,\r
 413             filterPlaceholder: 'Search',\r
 414             // possible options: 'text', 'value', 'both'\r
 415             filterBehavior: 'text',\r
 416             includeFilterClearBtn: true,\r
 417             preventInputChangeEvent: false,\r
 418             nonSelectedText: 'None selected',\r
 419             nSelectedText: 'selected',\r
 420             allSelectedText: 'All selected',\r
 421             numberDisplayed: 3,\r
 422             disableIfEmpty: false,\r
 423             disabledText: '',\r
 424             delimiterText: ', ',\r
 425             templates: {\r
 426                 button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',\r
 427                 ul: '<ul class="multiselect-container dropdown-menu"></ul>',\r
 428                 filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',\r
 429                 filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',\r
 430                 li: '<li><a tabindex="0"><label></label></a></li>',\r
 431                 divider: '<li class="multiselect-item divider"></li>',\r
 432                 liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'\r
 433             }\r
 434         },\r
 435 \r
 436         constructor: Multiselect,\r
 437 \r
 438         /**\r
 439          * Builds the container of the multiselect.\r
 440          */\r
 441         buildContainer: function() {\r
 442             this.$container = $(this.options.buttonContainer);\r
 443             this.$container.on('show.bs.dropdown', this.options.onDropdownShow);\r
 444             this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);\r
 445             this.$container.on('shown.bs.dropdown', this.options.onDropdownShown);\r
 446             this.$container.on('hidden.bs.dropdown', this.options.onDropdownHidden);\r
 447         },\r
 448 \r
 449         /**\r
 450          * Builds the button of the multiselect.\r
 451          */\r
 452         buildButton: function() {\r
 453             this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);\r
 454             if (this.$select.attr('class') && this.options.inheritClass) {\r
 455                 this.$button.addClass(this.$select.attr('class'));\r
 456             }\r
 457             // Adopt active state.\r
 458             if (this.$select.prop('disabled')) {\r
 459                 this.disable();\r
 460             }\r
 461             else {\r
 462                 this.enable();\r
 463             }\r
 464 \r
 465             // Manually add button width if set.\r
 466             if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {\r
 467                 this.$button.css({\r
 468                     'width' : '100%', //this.options.buttonWidth,\r
 469                     'overflow' : 'hidden',\r
 470                     'text-overflow' : 'ellipsis'\r
 471                 });\r
 472                 this.$container.css({\r
 473                     'width': this.options.buttonWidth\r
 474                 });\r
 475             }\r
 476 \r
 477             // Keep the tab index from the select.\r
 478             var tabindex = this.$select.attr('tabindex');\r
 479             if (tabindex) {\r
 480                 this.$button.attr('tabindex', tabindex);\r
 481             }\r
 482 \r
 483             this.$container.prepend(this.$button);\r
 484         },\r
 485 \r
 486         /**\r
 487          * Builds the ul representing the dropdown menu.\r
 488          */\r
 489         buildDropdown: function() {\r
 490 \r
 491             // Build ul.\r
 492             this.$ul = $(this.options.templates.ul);\r
 493 \r
 494             if (this.options.dropRight) {\r
 495                 this.$ul.addClass('pull-right');\r
 496             }\r
 497 \r
 498             // Set max height of dropdown menu to activate auto scrollbar.\r
 499             if (this.options.maxHeight) {\r
 500                 // TODO: Add a class for this option to move the css declarations.\r
 501                 this.$ul.css({\r
 502                     'max-height': this.options.maxHeight + 'px',\r
 503                     'overflow-y': 'auto',\r
 504                     'overflow-x': 'hidden'\r
 505                 });\r
 506             }\r
 507 \r
 508             if (this.options.dropUp) {\r
 509 \r
 510                 var height = Math.min(this.options.maxHeight, $('option[data-role!="divider"]', this.$select).length*26 + $('option[data-role="divider"]', this.$select).length*19 + (this.options.includeSelectAllOption ? 26 : 0) + (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering ? 44 : 0));\r
 511                 var moveCalc = height + 34;\r
 512 \r
 513                 this.$ul.css({\r
 514                     'max-height': height + 'px',\r
 515                     'overflow-y': 'auto',\r
 516                     'overflow-x': 'hidden',\r
 517                     'margin-top': "-" + moveCalc + 'px'\r
 518                 });\r
 519             }\r
 520 \r
 521             this.$container.append(this.$ul);\r
 522         },\r
 523 \r
 524         /**\r
 525          * Build the dropdown options and binds all necessary events.\r
 526          *\r
 527          * Uses createDivider and createOptionValue to create the necessary options.\r
 528          */\r
 529         buildDropdownOptions: function() {\r
 530 \r
 531             this.$select.children().each($.proxy(function(index, element) {\r
 532 \r
 533                 var $element = $(element);\r
 534                 // Support optgroups and options without a group simultaneously.\r
 535                 var tag = $element.prop('tagName')\r
 536                     .toLowerCase();\r
 537 \r
 538                 if ($element.prop('value') === this.options.selectAllValue) {\r
 539                     return;\r
 540                 }\r
 541 \r
 542                 if (tag === 'optgroup') {\r
 543                     this.createOptgroup(element);\r
 544                 }\r
 545                 else if (tag === 'option') {\r
 546 \r
 547                     if ($element.data('role') === 'divider') {\r
 548                         this.createDivider();\r
 549                     }\r
 550                     else {\r
 551                         this.createOptionValue(element);\r
 552                     }\r
 553 \r
 554                 }\r
 555 \r
 556                 // Other illegal tags will be ignored.\r
 557             }, this));\r
 558 \r
 559             // Bind the change event on the dropdown elements.\r
 560             $('li:not(.multiselect-group) input', this.$ul).on('change', $.proxy(function(event) {\r
 561                 var $target = $(event.target);\r
 562 \r
 563                 var checked = $target.prop('checked') || false;\r
 564                 var isSelectAllOption = $target.val() === this.options.selectAllValue;\r
 565 \r
 566                 // Apply or unapply the configured selected class.\r
 567                 if (this.options.selectedClass) {\r
 568                     if (checked) {\r
 569                         $target.closest('li')\r
 570                             .addClass(this.options.selectedClass);\r
 571                     }\r
 572                     else {\r
 573                         $target.closest('li')\r
 574                             .removeClass(this.options.selectedClass);\r
 575                     }\r
 576                 }\r
 577 \r
 578                 // Get the corresponding option.\r
 579                 var value = $target.val();\r
 580                 var $option = this.getOptionByValue(value);\r
 581 \r
 582                 var $optionsNotThis = $('option', this.$select).not($option);\r
 583                 var $checkboxesNotThis = $('input', this.$container).not($target);\r
 584 \r
 585                 if (isSelectAllOption) {\r
 586 \r
 587                     if (checked) {\r
 588                         this.selectAll(this.options.selectAllJustVisible, true);\r
 589                     }\r
 590                     else {\r
 591                         this.deselectAll(this.options.selectAllJustVisible, true);\r
 592                     }\r
 593                 }\r
 594                 else {\r
 595                     if (checked) {\r
 596                         $option.prop('selected', true);\r
 597 \r
 598                         if (this.options.multiple) {\r
 599                             // Simply select additional option.\r
 600                             $option.prop('selected', true);\r
 601                         }\r
 602                         else {\r
 603                             // Unselect all other options and corresponding checkboxes.\r
 604                             if (this.options.selectedClass) {\r
 605                                 $($checkboxesNotThis).closest('li').removeClass(this.options.selectedClass);\r
 606                             }\r
 607 \r
 608                             $($checkboxesNotThis).prop('checked', false);\r
 609                             $optionsNotThis.prop('selected', false);\r
 610 \r
 611                             // It's a single selection, so close.\r
 612                             this.$button.click();\r
 613                         }\r
 614 \r
 615                         if (this.options.selectedClass === "active") {\r
 616                             $optionsNotThis.closest("a").css("outline", "");\r
 617                         }\r
 618                     }\r
 619                     else {\r
 620                         // Unselect option.\r
 621                         $option.prop('selected', false);\r
 622                     }\r
 623 \r
 624                     // To prevent select all from firing onChange: #575\r
 625                     this.options.onChange($option, checked);\r
 626 \r
 627                     // Do not update select all or optgroups on select all change!\r
 628                     this.updateSelectAll();\r
 629 \r
 630                     if (this.options.enableClickableOptGroups && this.options.multiple) {\r
 631                         this.updateOptGroups();\r
 632                     }\r
 633                 }\r
 634 \r
 635                 this.$select.change();\r
 636                 this.updateButtonText();\r
 637 \r
 638                 if(this.options.preventInputChangeEvent) {\r
 639                     return false;\r
 640                 }\r
 641             }, this));\r
 642 \r
 643             $('li a', this.$ul).on('mousedown', function(e) {\r
 644                 if (e.shiftKey) {\r
 645                     // Prevent selecting text by Shift+click\r
 646                     return false;\r
 647                 }\r
 648             });\r
 649 \r
 650             $('li a', this.$ul).on('touchstart click', $.proxy(function(event) {\r
 651                 event.stopPropagation();\r
 652 \r
 653                 var $target = $(event.target);\r
 654 \r
 655                 if (event.shiftKey && this.options.multiple) {\r
 656                     if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)\r
 657                         event.preventDefault();\r
 658                         $target = $target.find("input");\r
 659                         $target.prop("checked", !$target.prop("checked"));\r
 660                     }\r
 661                     var checked = $target.prop('checked') || false;\r
 662 \r
 663                     if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range\r
 664                         var from = $target.closest("li").index();\r
 665                         var to = this.lastToggledInput.closest("li").index();\r
 666 \r
 667                         if (from > to) { // Swap the indices\r
 668                             var tmp = to;\r
 669                             to = from;\r
 670                             from = tmp;\r
 671                         }\r
 672 \r
 673                         // Make sure we grab all elements since slice excludes the last index\r
 674                         ++to;\r
 675 \r
 676                         // Change the checkboxes and underlying options\r
 677                         var range = this.$ul.find("li").slice(from, to).find("input");\r
 678 \r
 679                         range.prop('checked', checked);\r
 680 \r
 681                         if (this.options.selectedClass) {\r
 682                             range.closest('li')\r
 683                                 .toggleClass(this.options.selectedClass, checked);\r
 684                         }\r
 685 \r
 686                         for (var i = 0, j = range.length; i < j; i++) {\r
 687                             var $checkbox = $(range[i]);\r
 688 \r
 689                             var $option = this.getOptionByValue($checkbox.val());\r
 690 \r
 691                             $option.prop('selected', checked);\r
 692                         }\r
 693                     }\r
 694 \r
 695                     // Trigger the select "change" event\r
 696                     $target.trigger("change");\r
 697                 }\r
 698 \r
 699                 // Remembers last clicked option\r
 700                 if($target.is("input") && !$target.closest("li").is(".multiselect-item")){\r
 701                     this.lastToggledInput = $target;\r
 702                 }\r
 703 \r
 704                 $target.blur();\r
 705             }, this));\r
 706 \r
 707             // Keyboard support.\r
 708             this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function(event) {\r
 709                 if ($('input[type="text"]', this.$container).is(':focus')) {\r
 710                     return;\r
 711                 }\r
 712 \r
 713                 if (event.keyCode === 9 && this.$container.hasClass('open')) {\r
 714                     this.$button.click();\r
 715                 }\r
 716                 else {\r
 717                     var $items = $(this.$container).find("li:not(.divider):not(.disabled) a").filter(":visible");\r
 718 \r
 719                     if (!$items.length) {\r
 720                         return;\r
 721                     }\r
 722 \r
 723                     var index = $items.index($items.filter(':focus'));\r
 724 \r
 725                     // Navigation up.\r
 726                     if (event.keyCode === 38 && index > 0) {\r
 727                         index--;\r
 728                     }\r
 729                     // Navigate down.\r
 730                     else if (event.keyCode === 40 && index < $items.length - 1) {\r
 731                         index++;\r
 732                     }\r
 733                     else if (!~index) {\r
 734                         index = 0;\r
 735                     }\r
 736 \r
 737                     var $current = $items.eq(index);\r
 738                     $current.focus();\r
 739 \r
 740                     if (event.keyCode === 32 || event.keyCode === 13) {\r
 741                         var $checkbox = $current.find('input');\r
 742 \r
 743                         $checkbox.prop("checked", !$checkbox.prop("checked"));\r
 744                         $checkbox.change();\r
 745                     }\r
 746 \r
 747                     event.stopPropagation();\r
 748                     event.preventDefault();\r
 749                 }\r
 750             }, this));\r
 751 \r
 752             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
 753                 $("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) {\r
 754                     event.stopPropagation();\r
 755 \r
 756                     var $target = $(event.target);\r
 757                     var checked = $target.prop('checked') || false;\r
 758 \r
 759                     var $li = $(event.target).closest('li');\r
 760                     var $group = $li.nextUntil("li.multiselect-group")\r
 761                         .not('.multiselect-filter-hidden')\r
 762                         .not('.disabled');\r
 763 \r
 764                     var $inputs = $group.find("input");\r
 765 \r
 766                     var values = [];\r
 767                     var $options = [];\r
 768 \r
 769                     if (this.options.selectedClass) {\r
 770                         if (checked) {\r
 771                             $li.addClass(this.options.selectedClass);\r
 772                         }\r
 773                         else {\r
 774                             $li.removeClass(this.options.selectedClass);\r
 775                         }\r
 776                     }\r
 777 \r
 778                     $.each($inputs, $.proxy(function(index, input) {\r
 779                         var value = $(input).val();\r
 780                         var $option = this.getOptionByValue(value);\r
 781 \r
 782                         if (checked) {\r
 783                             $(input).prop('checked', true);\r
 784                             $(input).closest('li')\r
 785                                 .addClass(this.options.selectedClass);\r
 786 \r
 787                             $option.prop('selected', true);\r
 788                         }\r
 789                         else {\r
 790                             $(input).prop('checked', false);\r
 791                             $(input).closest('li')\r
 792                                 .removeClass(this.options.selectedClass);\r
 793 \r
 794                             $option.prop('selected', false);\r
 795                         }\r
 796 \r
 797                         $options.push(this.getOptionByValue(value));\r
 798                     }, this))\r
 799 \r
 800                     // Cannot use select or deselect here because it would call updateOptGroups again.\r
 801 \r
 802                     this.options.onChange($options, checked);\r
 803 \r
 804                     this.updateButtonText();\r
 805                     this.updateSelectAll();\r
 806                 }, this));\r
 807             }\r
 808 \r
 809             if (this.options.enableCollapsibleOptGroups && this.options.multiple) {\r
 810                 $("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {\r
 811                     var $li = $(event.target).closest('li');\r
 812                     var $inputs = $li.nextUntil("li.multiselect-group")\r
 813                             .not('.multiselect-filter-hidden');\r
 814 \r
 815                     var visible = true;\r
 816                     $inputs.each(function() {\r
 817                         visible = visible && $(this).is(':visible');\r
 818                     });\r
 819 \r
 820                     if (visible) {\r
 821                         $inputs.hide()\r
 822                             .addClass('multiselect-collapsible-hidden');\r
 823                     }\r
 824                     else {\r
 825                         $inputs.show()\r
 826                             .removeClass('multiselect-collapsible-hidden');\r
 827                     }\r
 828                 }, this));\r
 829 \r
 830                 $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');\r
 831                 $("li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');\r
 832                 $("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');\r
 833             }\r
 834         },\r
 835 \r
 836         /**\r
 837          * Create an option using the given select option.\r
 838          *\r
 839          * @param {jQuery} element\r
 840          */\r
 841         createOptionValue: function(element) {\r
 842             var $element = $(element);\r
 843             if ($element.is(':selected')) {\r
 844                 $element.prop('selected', true);\r
 845             }\r
 846 \r
 847             // Support the label attribute on options.\r
 848             var label = this.options.optionLabel(element);\r
 849             var classes = this.options.optionClass(element);\r
 850             var value = $element.val();\r
 851             var inputType = this.options.multiple ? "checkbox" : "radio";\r
 852 \r
 853             var $li = $(this.options.templates.li);\r
 854             var $label = $('label', $li);\r
 855             $label.addClass(inputType);\r
 856             $li.addClass(classes);\r
 857 \r
 858             if (this.options.enableHTML) {\r
 859                 $label.html(" " + label);\r
 860             }\r
 861             else {\r
 862                 $label.text(" " + label);\r
 863             }\r
 864 \r
 865             var $checkbox = $('<input/>').attr('type', inputType);\r
 866 \r
 867             var name = this.options.checkboxName($element);\r
 868             if (name) {\r
 869                 $checkbox.attr('name', name);\r
 870             }\r
 871 \r
 872             $label.prepend($checkbox);\r
 873 \r
 874             var selected = $element.prop('selected') || false;\r
 875             $checkbox.val(value);\r
 876 \r
 877             if (value === this.options.selectAllValue) {\r
 878                 $li.addClass("multiselect-item multiselect-all");\r
 879                 $checkbox.parent().parent()\r
 880                     .addClass('multiselect-all');\r
 881             }\r
 882 \r
 883             $label.attr('title', $element.attr('title'));\r
 884 \r
 885             this.$ul.append($li);\r
 886 \r
 887             if ($element.is(':disabled')) {\r
 888                 $checkbox.attr('disabled', 'disabled')\r
 889                     .prop('disabled', true)\r
 890                     .closest('a')\r
 891                     .attr("tabindex", "-1")\r
 892                     .closest('li')\r
 893                     .addClass('disabled');\r
 894             }\r
 895 \r
 896             $checkbox.prop('checked', selected);\r
 897 \r
 898             if (selected && this.options.selectedClass) {\r
 899                 $checkbox.closest('li')\r
 900                     .addClass(this.options.selectedClass);\r
 901             }\r
 902         },\r
 903 \r
 904         /**\r
 905          * Creates a divider using the given select option.\r
 906          *\r
 907          * @param {jQuery} element\r
 908          */\r
 909         createDivider: function(element) {\r
 910             var $divider = $(this.options.templates.divider);\r
 911             this.$ul.append($divider);\r
 912         },\r
 913 \r
 914         /**\r
 915          * Creates an optgroup.\r
 916          *\r
 917          * @param {jQuery} group\r
 918          */\r
 919         createOptgroup: function(group) {\r
 920             var label = $(group).attr("label");\r
 921             var value = $(group).attr("value");\r
 922             var $li = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><label><b></b></label></a></li>');\r
 923 \r
 924             var classes = this.options.optionClass(group);\r
 925             $li.addClass(classes);\r
 926 \r
 927             if (this.options.enableHTML) {\r
 928                 $('label b', $li).html(" " + label);\r
 929             }\r
 930             else {\r
 931                 $('label b', $li).text(" " + label);\r
 932             }\r
 933 \r
 934             if (this.options.enableCollapsibleOptGroups && this.options.multiple) {\r
 935                 $('a', $li).append('<span class="caret-container"><b class="caret"></b></span>');\r
 936             }\r
 937 \r
 938             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
 939                 $('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>');\r
 940             }\r
 941 \r
 942             if ($(group).is(':disabled')) {\r
 943                 $li.addClass('disabled');\r
 944             }\r
 945 \r
 946             this.$ul.append($li);\r
 947 \r
 948             $("option", group).each($.proxy(function($, group) {\r
 949                 this.createOptionValue(group);\r
 950             }, this))\r
 951         },\r
 952 \r
 953         /**\r
 954          * Build the select all.\r
 955          *\r
 956          * Checks if a select all has already been created.\r
 957          */\r
 958         buildSelectAll: function() {\r
 959             if (typeof this.options.selectAllValue === 'number') {\r
 960                 this.options.selectAllValue = this.options.selectAllValue.toString();\r
 961             }\r
 962 \r
 963             var alreadyHasSelectAll = this.hasSelectAll();\r
 964 \r
 965             if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple\r
 966                     && $('option', this.$select).length > this.options.includeSelectAllIfMoreThan) {\r
 967 \r
 968                 // Check whether to add a divider after the select all.\r
 969                 if (this.options.includeSelectAllDivider) {\r
 970                     this.$ul.prepend($(this.options.templates.divider));\r
 971                 }\r
 972 \r
 973                 var $li = $(this.options.templates.li);\r
 974                 $('label', $li).addClass("checkbox");\r
 975 \r
 976                 if (this.options.enableHTML) {\r
 977                     $('label', $li).html(" " + this.options.selectAllText);\r
 978                 }\r
 979                 else {\r
 980                     $('label', $li).text(" " + this.options.selectAllText);\r
 981                 }\r
 982 \r
 983                 if (this.options.selectAllName) {\r
 984                     $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');\r
 985                 }\r
 986                 else {\r
 987                     $('label', $li).prepend('<input type="checkbox" />');\r
 988                 }\r
 989 \r
 990                 var $checkbox = $('input', $li);\r
 991                 $checkbox.val(this.options.selectAllValue);\r
 992 \r
 993                 $li.addClass("multiselect-item multiselect-all");\r
 994                 $checkbox.parent().parent()\r
 995                     .addClass('multiselect-all');\r
 996 \r
 997                 this.$ul.prepend($li);\r
 998 \r
 999                 $checkbox.prop('checked', false);\r
1000             }\r
1001         },\r
1002 \r
1003         /**\r
1004          * Builds the filter.\r
1005          */\r
1006         buildFilter: function() {\r
1007 \r
1008             // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength.\r
1009             if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) {\r
1010                 var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering);\r
1011 \r
1012                 if (this.$select.find('option').length >= enableFilterLength) {\r
1013 \r
1014                     this.$filter = $(this.options.templates.filter);\r
1015                     $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);\r
1016 \r
1017                     // Adds optional filter clear button\r
1018                     if(this.options.includeFilterClearBtn) {\r
1019                         var clearBtn = $(this.options.templates.filterClearBtn);\r
1020                         clearBtn.on('click', $.proxy(function(event){\r
1021                             clearTimeout(this.searchTimeout);\r
1022 \r
1023                             this.$filter.find('.multiselect-search').val('');\r
1024                             $('li', this.$ul).show().removeClass('multiselect-filter-hidden');\r
1025 \r
1026                             this.updateSelectAll();\r
1027 \r
1028                             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1029                                 this.updateOptGroups();\r
1030                             }\r
1031 \r
1032                         }, this));\r
1033                         this.$filter.find('.input-group').append(clearBtn);\r
1034                     }\r
1035 \r
1036                     this.$ul.prepend(this.$filter);\r
1037 \r
1038                     this.$filter.val(this.query).on('click', function(event) {\r
1039                         event.stopPropagation();\r
1040                     }).on('input keydown', $.proxy(function(event) {\r
1041                         // Cancel enter key default behaviour\r
1042                         if (event.which === 13) {\r
1043                           event.preventDefault();\r
1044                       }\r
1045 \r
1046                         // This is useful to catch "keydown" events after the browser has updated the control.\r
1047                         clearTimeout(this.searchTimeout);\r
1048 \r
1049                         this.searchTimeout = this.asyncFunction($.proxy(function() {\r
1050 \r
1051                             if (this.query !== event.target.value) {\r
1052                                 this.query = event.target.value;\r
1053 \r
1054                                 var currentGroup, currentGroupVisible;\r
1055                                 $.each($('li', this.$ul), $.proxy(function(index, element) {\r
1056                                     var value = $('input', element).length > 0 ? $('input', element).val() : "";\r
1057                                     var text = $('label', element).text();\r
1058 \r
1059                                     var filterCandidate = '';\r
1060                                     if ((this.options.filterBehavior === 'text')) {\r
1061                                         filterCandidate = text;\r
1062                                     }\r
1063                                     else if ((this.options.filterBehavior === 'value')) {\r
1064                                         filterCandidate = value;\r
1065                                     }\r
1066                                     else if (this.options.filterBehavior === 'both') {\r
1067                                         filterCandidate = text + '\n' + value;\r
1068                                     }\r
1069 \r
1070                                     if (value !== this.options.selectAllValue && text) {\r
1071 \r
1072                                         // By default lets assume that element is not\r
1073                                         // interesting for this search.\r
1074                                         var showElement = false;\r
1075 \r
1076                                         if (this.options.enableCaseInsensitiveFiltering) {\r
1077                                             filterCandidate = filterCandidate.toLowerCase();\r
1078                                             this.query = this.query.toLowerCase();\r
1079                                         }\r
1080 \r
1081                                         if (this.options.enableFullValueFiltering && this.options.filterBehavior !== 'both') {\r
1082                                             var valueToMatch = filterCandidate.trim().substring(0, this.query.length);\r
1083                                             if (this.query.indexOf(valueToMatch) > -1) {\r
1084                                                 showElement = true;\r
1085                                             }\r
1086                                         }\r
1087                                         else if (filterCandidate.indexOf(this.query) > -1) {\r
1088                                             showElement = true;\r
1089                                         }\r
1090 \r
1091                                         // Toggle current element (group or group item) according to showElement boolean.\r
1092                                         $(element).toggle(showElement)\r
1093                                             .toggleClass('multiselect-filter-hidden', !showElement);\r
1094 \r
1095                                         // Differentiate groups and group items.\r
1096                                         if ($(element).hasClass('multiselect-group')) {\r
1097                                             // Remember group status.\r
1098                                             currentGroup = element;\r
1099                                             currentGroupVisible = showElement;\r
1100                                         }\r
1101                                         else {\r
1102                                             // Show group name when at least one of its items is visible.\r
1103                                             if (showElement) {\r
1104                                                 $(currentGroup).show()\r
1105                                                     .removeClass('multiselect-filter-hidden');\r
1106                                             }\r
1107 \r
1108                                             // Show all group items when group name satisfies filter.\r
1109                                             if (!showElement && currentGroupVisible) {\r
1110                                                 $(element).show()\r
1111                                                     .removeClass('multiselect-filter-hidden');\r
1112                                             }\r
1113                                         }\r
1114                                     }\r
1115                                 }, this));\r
1116                             }\r
1117 \r
1118                             this.updateSelectAll();\r
1119 \r
1120                             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1121                                 this.updateOptGroups();\r
1122                             }\r
1123 \r
1124                             this.options.onFiltering(event.target);\r
1125 \r
1126                         }, this), 300, this);\r
1127                     }, this));\r
1128                 }\r
1129             }\r
1130         },\r
1131 \r
1132         /**\r
1133          * Unbinds the whole plugin.\r
1134          */\r
1135         destroy: function() {\r
1136             this.$container.remove();\r
1137             this.$select.show();\r
1138 \r
1139             // reset original state\r
1140             this.$select.prop('disabled', this.options.wasDisabled);\r
1141 \r
1142             this.$select.data('multiselect', null);\r
1143         },\r
1144 \r
1145         /**\r
1146          * Refreshs the multiselect based on the selected options of the select.\r
1147          */\r
1148         refresh: function () {\r
1149             var inputs = $.map($('li input', this.$ul), $);\r
1150 \r
1151             $('option', this.$select).each($.proxy(function (index, element) {\r
1152                 var $elem = $(element);\r
1153                 var value = $elem.val();\r
1154                 var $input;\r
1155                 for (var i = inputs.length; 0 < i--; /**/) {\r
1156                     if (value !== ($input = inputs[i]).val())\r
1157                         continue; // wrong li\r
1158 \r
1159                     if ($elem.is(':selected')) {\r
1160                         $input.prop('checked', true);\r
1161 \r
1162                         if (this.options.selectedClass) {\r
1163                             $input.closest('li')\r
1164                                 .addClass(this.options.selectedClass);\r
1165                         }\r
1166                     }\r
1167                     else {\r
1168                         $input.prop('checked', false);\r
1169 \r
1170                         if (this.options.selectedClass) {\r
1171                             $input.closest('li')\r
1172                                 .removeClass(this.options.selectedClass);\r
1173                         }\r
1174                     }\r
1175 \r
1176                     if ($elem.is(":disabled")) {\r
1177                         $input.attr('disabled', 'disabled')\r
1178                             .prop('disabled', true)\r
1179                             .closest('li')\r
1180                             .addClass('disabled');\r
1181                     }\r
1182                     else {\r
1183                         $input.prop('disabled', false)\r
1184                             .closest('li')\r
1185                             .removeClass('disabled');\r
1186                     }\r
1187                     break; // assumes unique values\r
1188                 }\r
1189             }, this));\r
1190 \r
1191             this.updateButtonText();\r
1192             this.updateSelectAll();\r
1193 \r
1194             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1195                 this.updateOptGroups();\r
1196             }\r
1197         },\r
1198 \r
1199         /**\r
1200          * Select all options of the given values.\r
1201          *\r
1202          * If triggerOnChange is set to true, the on change event is triggered if\r
1203          * and only if one value is passed.\r
1204          *\r
1205          * @param {Array} selectValues\r
1206          * @param {Boolean} triggerOnChange\r
1207          */\r
1208         select: function(selectValues, triggerOnChange) {\r
1209             if(!$.isArray(selectValues)) {\r
1210                 selectValues = [selectValues];\r
1211             }\r
1212 \r
1213             for (var i = 0; i < selectValues.length; i++) {\r
1214                 var value = selectValues[i];\r
1215 \r
1216                 if (value === null || value === undefined) {\r
1217                     continue;\r
1218                 }\r
1219 \r
1220                 var $option = this.getOptionByValue(value);\r
1221                 var $checkbox = this.getInputByValue(value);\r
1222 \r
1223                 if($option === undefined || $checkbox === undefined) {\r
1224                     continue;\r
1225                 }\r
1226 \r
1227                 if (!this.options.multiple) {\r
1228                     this.deselectAll(false);\r
1229                 }\r
1230 \r
1231                 if (this.options.selectedClass) {\r
1232                     $checkbox.closest('li')\r
1233                         .addClass(this.options.selectedClass);\r
1234                 }\r
1235 \r
1236                 $checkbox.prop('checked', true);\r
1237                 $option.prop('selected', true);\r
1238 \r
1239                 if (triggerOnChange) {\r
1240                     this.options.onChange($option, true);\r
1241                 }\r
1242             }\r
1243 \r
1244             this.updateButtonText();\r
1245             this.updateSelectAll();\r
1246 \r
1247             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1248                 this.updateOptGroups();\r
1249             }\r
1250         },\r
1251 \r
1252         /**\r
1253          * Clears all selected items.\r
1254          */\r
1255         clearSelection: function () {\r
1256             this.deselectAll(false);\r
1257             this.updateButtonText();\r
1258             this.updateSelectAll();\r
1259 \r
1260             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1261                 this.updateOptGroups();\r
1262             }\r
1263         },\r
1264 \r
1265         /**\r
1266          * Deselects all options of the given values.\r
1267          *\r
1268          * If triggerOnChange is set to true, the on change event is triggered, if\r
1269          * and only if one value is passed.\r
1270          *\r
1271          * @param {Array} deselectValues\r
1272          * @param {Boolean} triggerOnChange\r
1273          */\r
1274         deselect: function(deselectValues, triggerOnChange) {\r
1275             if(!$.isArray(deselectValues)) {\r
1276                 deselectValues = [deselectValues];\r
1277             }\r
1278 \r
1279             for (var i = 0; i < deselectValues.length; i++) {\r
1280                 var value = deselectValues[i];\r
1281 \r
1282                 if (value === null || value === undefined) {\r
1283                     continue;\r
1284                 }\r
1285 \r
1286                 var $option = this.getOptionByValue(value);\r
1287                 var $checkbox = this.getInputByValue(value);\r
1288 \r
1289                 if($option === undefined || $checkbox === undefined) {\r
1290                     continue;\r
1291                 }\r
1292 \r
1293                 if (this.options.selectedClass) {\r
1294                     $checkbox.closest('li')\r
1295                         .removeClass(this.options.selectedClass);\r
1296                 }\r
1297 \r
1298                 $checkbox.prop('checked', false);\r
1299                 $option.prop('selected', false);\r
1300 \r
1301                 if (triggerOnChange) {\r
1302                     this.options.onChange($option, false);\r
1303                 }\r
1304             }\r
1305 \r
1306             this.updateButtonText();\r
1307             this.updateSelectAll();\r
1308 \r
1309             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1310                 this.updateOptGroups();\r
1311             }\r
1312         },\r
1313 \r
1314         /**\r
1315          * Selects all enabled & visible options.\r
1316          *\r
1317          * If justVisible is true or not specified, only visible options are selected.\r
1318          *\r
1319          * @param {Boolean} justVisible\r
1320          * @param {Boolean} triggerOnSelectAll\r
1321          */\r
1322         selectAll: function (justVisible, triggerOnSelectAll) {\r
1323 \r
1324             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;\r
1325             var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);\r
1326             var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');\r
1327 \r
1328             if(justVisible) {\r
1329                 $('input:enabled' , visibleLis).prop('checked', true);\r
1330                 visibleLis.addClass(this.options.selectedClass);\r
1331 \r
1332                 $('input:enabled' , visibleLis).each($.proxy(function(index, element) {\r
1333                     var value = $(element).val();\r
1334                     var option = this.getOptionByValue(value);\r
1335                     $(option).prop('selected', true);\r
1336                 }, this));\r
1337             }\r
1338             else {\r
1339                 $('input:enabled' , allLis).prop('checked', true);\r
1340                 allLis.addClass(this.options.selectedClass);\r
1341 \r
1342                 $('input:enabled' , allLis).each($.proxy(function(index, element) {\r
1343                     var value = $(element).val();\r
1344                     var option = this.getOptionByValue(value);\r
1345                     $(option).prop('selected', true);\r
1346                 }, this));\r
1347             }\r
1348 \r
1349             $('li input[value="' + this.options.selectAllValue + '"]', this.$ul).prop('checked', true);\r
1350 \r
1351             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1352                 this.updateOptGroups();\r
1353             }\r
1354 \r
1355             if (triggerOnSelectAll) {\r
1356                 this.options.onSelectAll();\r
1357             }\r
1358         },\r
1359 \r
1360         /**\r
1361          * Deselects all options.\r
1362          *\r
1363          * If justVisible is true or not specified, only visible options are deselected.\r
1364          *\r
1365          * @param {Boolean} justVisible\r
1366          */\r
1367         deselectAll: function (justVisible, triggerOnDeselectAll) {\r
1368 \r
1369             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;\r
1370             var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);\r
1371             var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');\r
1372 \r
1373             if(justVisible) {\r
1374                 $('input[type="checkbox"]:enabled' , visibleLis).prop('checked', false);\r
1375                 visibleLis.removeClass(this.options.selectedClass);\r
1376 \r
1377                 $('input[type="checkbox"]:enabled' , visibleLis).each($.proxy(function(index, element) {\r
1378                     var value = $(element).val();\r
1379                     var option = this.getOptionByValue(value);\r
1380                     $(option).prop('selected', false);\r
1381                 }, this));\r
1382             }\r
1383             else {\r
1384                 $('input[type="checkbox"]:enabled' , allLis).prop('checked', false);\r
1385                 allLis.removeClass(this.options.selectedClass);\r
1386 \r
1387                 $('input[type="checkbox"]:enabled' , allLis).each($.proxy(function(index, element) {\r
1388                     var value = $(element).val();\r
1389                     var option = this.getOptionByValue(value);\r
1390                     $(option).prop('selected', false);\r
1391                 }, this));\r
1392             }\r
1393 \r
1394             $('li input[value="' + this.options.selectAllValue + '"]', this.$ul).prop('checked', false);\r
1395 \r
1396             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1397                 this.updateOptGroups();\r
1398             }\r
1399 \r
1400             if (triggerOnDeselectAll) {\r
1401                 this.options.onDeselectAll();\r
1402             }\r
1403         },\r
1404 \r
1405         /**\r
1406          * Rebuild the plugin.\r
1407          *\r
1408          * Rebuilds the dropdown, the filter and the select all option.\r
1409          */\r
1410         rebuild: function() {\r
1411             this.$ul.html('');\r
1412 \r
1413             // Important to distinguish between radios and checkboxes.\r
1414             this.options.multiple = this.$select.attr('multiple') === "multiple";\r
1415 \r
1416             this.buildSelectAll();\r
1417             this.buildDropdownOptions();\r
1418             this.buildFilter();\r
1419 \r
1420             this.updateButtonText();\r
1421             this.updateSelectAll(true);\r
1422 \r
1423             if (this.options.enableClickableOptGroups && this.options.multiple) {\r
1424                 this.updateOptGroups();\r
1425             }\r
1426 \r
1427             if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {\r
1428                 this.disable();\r
1429             }\r
1430             else {\r
1431                 this.enable();\r
1432             }\r
1433 \r
1434             if (this.options.dropRight) {\r
1435                 this.$ul.addClass('pull-right');\r
1436             }\r
1437         },\r
1438 \r
1439         /**\r
1440          * The provided data will be used to build the dropdown.\r
1441          */\r
1442         dataprovider: function(dataprovider) {\r
1443 \r
1444             var groupCounter = 0;\r
1445             var $select = this.$select.empty();\r
1446 \r
1447             $.each(dataprovider, function (index, option) {\r
1448                 var $tag;\r
1449 \r
1450                 if ($.isArray(option.children)) { // create optiongroup tag\r
1451                     groupCounter++;\r
1452 \r
1453                     $tag = $('<optgroup/>').attr({\r
1454                         label: option.label || 'Group ' + groupCounter,\r
1455                         disabled: !!option.disabled\r
1456                     });\r
1457 \r
1458                     forEach(option.children, function(subOption) { // add children option tags\r
1459                         var attributes = {\r
1460                             value: subOption.value,\r
1461                             label: subOption.label || subOption.value,\r
1462                             title: subOption.title,\r
1463                             selected: !!subOption.selected,\r
1464                             disabled: !!subOption.disabled\r
1465                         };\r
1466 \r
1467                         //Loop through attributes object and add key-value for each attribute\r
1468                        for (var key in subOption.attributes) {\r
1469                             attributes['data-' + key] = subOption.attributes[key];\r
1470                        }\r
1471                          //Append original attributes + new data attributes to option\r
1472                         $tag.append($('<option/>').attr(attributes));\r
1473                     });\r
1474                 }\r
1475                 else {\r
1476 \r
1477                     var attributes = {\r
1478                         'value': option.value,\r
1479                         'label': option.label || option.value,\r
1480                         'title': option.title,\r
1481                         'class': option.class,\r
1482                         'selected': !!option.selected,\r
1483                         'disabled': !!option.disabled\r
1484                     };\r
1485                     //Loop through attributes object and add key-value for each attribute\r
1486                     for (var key in option.attributes) {\r
1487                       attributes['data-' + key] = option.attributes[key];\r
1488                     }\r
1489                     //Append original attributes + new data attributes to option\r
1490                     $tag = $('<option/>').attr(attributes);\r
1491 \r
1492                     $tag.text(option.label || option.value);\r
1493                 }\r
1494 \r
1495                 $select.append($tag);\r
1496             });\r
1497 \r
1498             this.rebuild();\r
1499         },\r
1500 \r
1501         /**\r
1502          * Enable the multiselect.\r
1503          */\r
1504         enable: function() {\r
1505             this.$select.prop('disabled', false);\r
1506             this.$button.prop('disabled', false)\r
1507                 .removeClass('disabled');\r
1508         },\r
1509 \r
1510         /**\r
1511          * Disable the multiselect.\r
1512          */\r
1513         disable: function() {\r
1514             this.$select.prop('disabled', true);\r
1515             this.$button.prop('disabled', true)\r
1516                 .addClass('disabled');\r
1517         },\r
1518 \r
1519         /**\r
1520          * Set the options.\r
1521          *\r
1522          * @param {Array} options\r
1523          */\r
1524         setOptions: function(options) {\r
1525             this.options = this.mergeOptions(options);\r
1526         },\r
1527 \r
1528         /**\r
1529          * Merges the given options with the default options.\r
1530          *\r
1531          * @param {Array} options\r
1532          * @returns {Array}\r
1533          */\r
1534         mergeOptions: function(options) {\r
1535             return $.extend(true, {}, this.defaults, this.options, options);\r
1536         },\r
1537 \r
1538         /**\r
1539          * Checks whether a select all checkbox is present.\r
1540          *\r
1541          * @returns {Boolean}\r
1542          */\r
1543         hasSelectAll: function() {\r
1544             return $('li.multiselect-all', this.$ul).length > 0;\r
1545         },\r
1546 \r
1547         /**\r
1548          * Update opt groups.\r
1549          */\r
1550         updateOptGroups: function() {\r
1551             var $groups = $('li.multiselect-group', this.$ul)\r
1552             var selectedClass = this.options.selectedClass;\r
1553 \r
1554             $groups.each(function() {\r
1555                 var $options = $(this).nextUntil('li.multiselect-group')\r
1556                     .not('.multiselect-filter-hidden')\r
1557                     .not('.disabled');\r
1558 \r
1559                 var checked = true;\r
1560                 $options.each(function() {\r
1561                     var $input = $('input', this);\r
1562 \r
1563                     if (!$input.prop('checked')) {\r
1564                         checked = false;\r
1565                     }\r
1566                 });\r
1567 \r
1568                 if (selectedClass) {\r
1569                     if (checked) {\r
1570                         $(this).addClass(selectedClass);\r
1571                     }\r
1572                     else {\r
1573                         $(this).removeClass(selectedClass);\r
1574                     }\r
1575                 }\r
1576 \r
1577                 $('input', this).prop('checked', checked);\r
1578             });\r
1579         },\r
1580 \r
1581         /**\r
1582          * Updates the select all checkbox based on the currently displayed and selected checkboxes.\r
1583          */\r
1584         updateSelectAll: function(notTriggerOnSelectAll) {\r
1585             if (this.hasSelectAll()) {\r
1586                 var allBoxes = $("li:not(.multiselect-item):not(.multiselect-filter-hidden):not(.multiselect-group):not(.disabled) input:enabled", this.$ul);\r
1587                 var allBoxesLength = allBoxes.length;\r
1588                 var checkedBoxesLength = allBoxes.filter(":checked").length;\r
1589                 var selectAllLi  = $("li.multiselect-all", this.$ul);\r
1590                 var selectAllInput = selectAllLi.find("input");\r
1591 \r
1592                 if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {\r
1593                     selectAllInput.prop("checked", true);\r
1594                     selectAllLi.addClass(this.options.selectedClass);\r
1595                 }\r
1596                 else {\r
1597                     selectAllInput.prop("checked", false);\r
1598                     selectAllLi.removeClass(this.options.selectedClass);\r
1599                 }\r
1600             }\r
1601         },\r
1602 \r
1603         /**\r
1604          * Update the button text and its title based on the currently selected options.\r
1605          */\r
1606         updateButtonText: function() {\r
1607             var options = this.getSelected();\r
1608 \r
1609             // First update the displayed button text.\r
1610             if (this.options.enableHTML) {\r
1611                 $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));\r
1612             }\r
1613             else {\r
1614                 $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));\r
1615             }\r
1616 \r
1617             // Now update the title attribute of the button.\r
1618             $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));\r
1619         },\r
1620 \r
1621         /**\r
1622          * Get all selected options.\r
1623          *\r
1624          * @returns {jQUery}\r
1625          */\r
1626         getSelected: function() {\r
1627             return $('option', this.$select).filter(":selected");\r
1628         },\r
1629 \r
1630         /**\r
1631          * Gets a select option by its value.\r
1632          *\r
1633          * @param {String} value\r
1634          * @returns {jQuery}\r
1635          */\r
1636         getOptionByValue: function (value) {\r
1637 \r
1638             var options = $('option', this.$select);\r
1639             var valueToCompare = value.toString();\r
1640 \r
1641             for (var i = 0; i < options.length; i = i + 1) {\r
1642                 var option = options[i];\r
1643                 if (option.value === valueToCompare) {\r
1644                     return $(option);\r
1645                 }\r
1646             }\r
1647         },\r
1648 \r
1649         /**\r
1650          * Get the input (radio/checkbox) by its value.\r
1651          *\r
1652          * @param {String} value\r
1653          * @returns {jQuery}\r
1654          */\r
1655         getInputByValue: function (value) {\r
1656 \r
1657             var checkboxes = $('li input:not(.multiselect-search)', this.$ul);\r
1658             var valueToCompare = value.toString();\r
1659 \r
1660             for (var i = 0; i < checkboxes.length; i = i + 1) {\r
1661                 var checkbox = checkboxes[i];\r
1662                 if (checkbox.value === valueToCompare) {\r
1663                     return $(checkbox);\r
1664                 }\r
1665             }\r
1666         },\r
1667 \r
1668         /**\r
1669          * Used for knockout integration.\r
1670          */\r
1671         updateOriginalOptions: function() {\r
1672             this.originalOptions = this.$select.clone()[0].options;\r
1673         },\r
1674 \r
1675         asyncFunction: function(callback, timeout, self) {\r
1676             var args = Array.prototype.slice.call(arguments, 3);\r
1677             return setTimeout(function() {\r
1678                 callback.apply(self || window, args);\r
1679             }, timeout);\r
1680         },\r
1681 \r
1682         setAllSelectedText: function(allSelectedText) {\r
1683             this.options.allSelectedText = allSelectedText;\r
1684             this.updateButtonText();\r
1685         }\r
1686     };\r
1687 \r
1688     $.fn.multiselect = function(option, parameter, extraOptions) {\r
1689         return this.each(function() {\r
1690             var data = $(this).data('multiselect');\r
1691             var options = typeof option === 'object' && option;\r
1692 \r
1693             // Initialize the multiselect.\r
1694             if (!data) {\r
1695                 data = new Multiselect(this, options);\r
1696                 $(this).data('multiselect', data);\r
1697             }\r
1698 \r
1699             // Call multiselect method.\r
1700             if (typeof option === 'string') {\r
1701                 data[option](parameter, extraOptions);\r
1702 \r
1703                 if (option === 'destroy') {\r
1704                     $(this).data('multiselect', false);\r
1705                 }\r
1706             }\r
1707         });\r
1708     };\r
1709 \r
1710     $.fn.multiselect.Constructor = Multiselect;\r
1711 \r
1712     $(function() {\r
1713         $("select[data-role=multiselect]").multiselect();\r
1714     });\r
1715 \r
1716 }(window.jQuery);\r