https://textellent.com/wp-content/themes/textellent/vendors/multi-select/bootstrap-multiselect.js?ver=1.6

1/**
2 * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
3 *
4 * Apache License, Version 2.0:
5 * Copyright (c) 2012 - 2021 David Stutz
6 *
7 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
8 * use this file except in compliance with the License. You may obtain a
9 * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
10 *
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14 * License for the specific language governing permissions and limitations
15 * under the License.
16 *
17 * BSD 3-Clause License:
18 * Copyright (c) 2012 - 2021 David Stutz
19 * All rights reserved.
20 *
21 * Redistribution and use in source and binary forms, with or without
22 * modification, are permitted provided that the following conditions are met:
23 *    - Redistributions of source code must retain the above copyright notice,
24 *      this list of conditions and the following disclaimer.
25 *    - Redistributions in binary form must reproduce the above copyright notice,
26 *      this list of conditions and the following disclaimer in the documentation
27 *      and/or other materials provided with the distribution.
28 *    - Neither the name of David Stutz nor the names of its contributors may be
29 *      used to endorse or promote products derived from this software without
30 *      specific prior written permission.
31 *
32 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
33 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
34 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
35 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
36 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
37 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
38 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
39 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
40 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
41 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
42 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
43 */
44(function (root, factory) {
45    // check to see if 'knockout' AMD module is specified if using requirejs
46    if (typeof define === 'function' && define.amd &&
47        typeof require === 'function' && typeof require.specified === 'function' && require.specified('knockout')) {
48
49        // AMD. Register as an anonymous module.
50        define(['jquery', 'knockout'], factory);
51    } else {
52        // Browser globals
53        factory(root.jQuery, root.ko);
54    }
55})(this, function ($, ko) {
56    "use strict";// jshint ;_;
57
58    if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
59        ko.bindingHandlers.multiselect = {
60            after: ['options', 'value', 'selectedOptions', 'enable', 'disable'],
61
62            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
63                var $element = $(element);
64                var config = ko.toJS(valueAccessor());
65
66                $element.multiselect(config);
67
68                if (allBindings.has('options')) {
69                    var options = allBindings.get('options');
70                    if (ko.isObservable(options)) {
71                        ko.computed({
72                            read: function () {
73                                options();
74                                setTimeout(function () {
75                                    var ms = $element.data('multiselect');
76                                    if (ms)
77                                        ms.updateOriginalOptions();//Not sure how beneficial this is.
78                                    $element.multiselect('rebuild');
79                                }, 1);
80                            },
81                            disposeWhenNodeIsRemoved: element
82                        });
83                    }
84                }
85
86                //value and selectedOptions are two-way, so these will be triggered even by our own actions.
87                //It needs some way to tell if they are triggered because of us or because of outside change.
88                //It doesn't loop but it's a waste of processing.
89                if (allBindings.has('value')) {
90                    var value = allBindings.get('value');
91                    if (ko.isObservable(value)) {
92                        ko.computed({
93                            read: function () {
94                                value();
95                                setTimeout(function () {
96                                    $element.multiselect('refresh');
97                                }, 1);
98                            },
99                            disposeWhenNodeIsRemoved: element
100                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
101                    }
102                }
103
104                //Switched from arrayChange subscription to general subscription using 'refresh'.
105                //Not sure performance is any better using 'select' and 'deselect'.
106                if (allBindings.has('selectedOptions')) {
107                    var selectedOptions = allBindings.get('selectedOptions');
108                    if (ko.isObservable(selectedOptions)) {
109                        ko.computed({
110                            read: function () {
111                                selectedOptions();
112                                setTimeout(function () {
113                                    $element.multiselect('refresh');
114                                }, 1);
115                            },
116                            disposeWhenNodeIsRemoved: element
117                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
118                    }
119                }
120
121                var setEnabled = function (enable) {
122                    setTimeout(function () {
123                        if (enable)
124                            $element.multiselect('enable');
125                        else
126                            $element.multiselect('disable');
127                    });
128                };
129
130                if (allBindings.has('enable')) {
131                    var enable = allBindings.get('enable');
132                    if (ko.isObservable(enable)) {
133                        ko.computed({
134                            read: function () {
135                                setEnabled(enable());
136                            },
137                            disposeWhenNodeIsRemoved: element
138                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
139                    } else {
140                        setEnabled(enable);
141                    }
142                }
143
144                if (allBindings.has('disable')) {
145                    var disable = allBindings.get('disable');
146                    if (ko.isObservable(disable)) {
147                        ko.computed({
148                            read: function () {
149                                setEnabled(!disable());
150                            },
151                            disposeWhenNodeIsRemoved: element
152                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
153                    } else {
154                        setEnabled(!disable);
155                    }
156                }
157
158                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
159                    $element.multiselect('destroy');
160                });
161            },
162
163            update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
164                var $element = $(element);
165                var config = ko.toJS(valueAccessor());
166
167                $element.multiselect('setOptions', config);
168                $element.multiselect('rebuild');
169            }
170        };
171    }
172
173    function forEach(array, callback) {
174        for (var index = 0; index < array.length; ++index) {
175            callback(array[index], index);
176        }
177    }
178
179    /**
180     * Constructor to create a new multiselect using the given select.
181     *
182     * @param {jQuery} select
183     * @param {Object} options
184     * @returns {Multiselect}
185     */
186    function Multiselect(select, options) {
187
188        this.$select = $(select);
189        this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
190
191        // Placeholder via data attributes
192        if (this.$select.attr("data-placeholder")) {
193            this.options.nonSelectedText = this.$select.data("placeholder");
194        }
195
196        // Initialization.
197        // We have to clone to create a new reference.
198        this.originalOptions = this.$select.clone()[0].options;
199        this.query = '';
200        this.searchTimeout = null;
201        this.lastToggledInput = null;
202
203        this.options.multiple = this.$select.attr('multiple') === "multiple";
204        this.options.onChange = $.proxy(this.options.onChange, this);
205        this.options.onSelectAll = $.proxy(this.options.onSelectAll, this);
206        this.options.onDeselectAll = $.proxy(this.options.onDeselectAll, this);
207        this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);
208        this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);
209        this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
210        this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
211        this.options.onInitialized = $.proxy(this.options.onInitialized, this);
212        this.options.onFiltering = $.proxy(this.options.onFiltering, this);
213
214        // Build select all if enabled.
215        this.buildContainer();
216        this.buildButton();
217        this.buildDropdown();
218        this.buildReset();
219        this.buildSelectAll();
220        this.buildDropdownOptions();
221        this.buildFilter();
222        this.buildButtons();
223
224        this.updateButtonText();
225        this.updateSelectAll(true);
226
227        if (this.options.enableClickableOptGroups && this.options.multiple) {
228            this.updateOptGroups();
229        }
230
231        this.options.wasDisabled = this.$select.prop('disabled');
232        if (this.options.disableIfEmpty && $('option', this.$select).length <= 0 && !this.options.wasDisabled) {
233            this.disable(true);
234        }
235
236        this.$select.wrap('<span class="multiselect-native-select" />').after(this.$container);
237        this.$select.prop('tabindex', '-1');
238
239        if (this.options.widthSynchronizationMode !== 'never') {
240            this.synchronizeButtonAndPopupWidth();
241        }
242
243        this.options.onInitialized(this.$select, this.$container);
244    }
245
246    Multiselect.prototype = {
247
248        defaults: {
249            /**
250             * Default text function will either print 'None selected' in case no
251             * option is selected or a list of the selected options up to a length
252             * of 3 selected options.
253             *
254             * @param {jQuery} options
255             * @param {jQuery} select
256             * @returns {String}
257             */
258            buttonText: function (selectedOptions, select) {
259                if (this.disabledText.length > 0 && select.prop('disabled')) {
260                    return this.disabledText;
261                }
262                else if (selectedOptions.length === 0) {
263                    return this.nonSelectedText;
264                }
265                else if (this.allSelectedText
266                    && selectedOptions.length === $('option', $(select)).length
267                    && $('option', $(select)).length !== 1
268                    && this.multiple) {
269
270                    if (this.selectAllNumber) {
271                        return this.allSelectedText + ' (' + selectedOptions.length + ')';
272                    }
273                    else {
274                        return this.allSelectedText;
275                    }
276                }
277                else if (this.numberDisplayed != 0 && selectedOptions.length > this.numberDisplayed) {
278                    return selectedOptions.length + ' ' + this.nSelectedText;
279                }
280                else {
281                    var selected = '';
282                    var delimiter = this.delimiterText;
283
284                    selectedOptions.each(function () {
285                        var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
286                        selected += label + delimiter;
287                    });
288
289                    return selected.substr(0, selected.length - this.delimiterText.length);
290                }
291            },
292            /**
293             * Updates the title of the button similar to the buttonText function.
294             *
295             * @param {jQuery} options
296             * @param {jQuery} select
297             * @returns {@exp;selected@call;substr}
298             */
299            buttonTitle: function (options, select) {
300                if (options.length === 0) {
301                    return this.nonSelectedText;
302                }
303                else {
304                    var selected = '';
305                    var delimiter = this.delimiterText;
306
307                    options.each(function () {
308                        var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
309                        selected += label + delimiter;
310                    });
311                    return selected.substr(0, selected.length - this.delimiterText.length);
312                }
313            },
314            checkboxName: function (option) {
315                return false; // no checkbox name
316            },
317            /**
318             * Create a label.
319             *
320             * @param {jQuery} element
321             * @returns {String}
322             */
323            optionLabel: function (element) {
324                return $(element).attr('label') || $(element).text();
325            },
326            /**
327             * Create a class.
328             *
329             * @param {jQuery} element
330             * @returns {String}
331             */
332            optionClass: function (element) {
333                return $(element).attr('class') || '';
334            },
335            /**
336             * Triggered on change of the multiselect.
337             *
338             * Not triggered when selecting/deselecting options manually.
339             *
340             * @param {jQuery} option
341             * @param {Boolean} checked
342             */
343            onChange: function (option, checked) {
344
345            },
346            /**
347             * Triggered when the dropdown is shown.
348             *
349             * @param {jQuery} event
350             */
351            onDropdownShow: function (event) {
352
353            },
354            /**
355             * Triggered when the dropdown is hidden.
356             *
357             * @param {jQuery} event
358             */
359            onDropdownHide: function (event) {
360
361            },
362            /**
363             * Triggered after the dropdown is shown.
364             *
365             * @param {jQuery} event
366             */
367            onDropdownShown: function (event) {
368
369            },
370            /**
371             * Triggered after the dropdown is hidden.
372             *
373             * @param {jQuery} event
374             */
375            onDropdownHidden: function (event) {
376
377            },
378            /**
379             * Triggered on select all.
380             */
381            onSelectAll: function () {
382
383            },
384            /**
385             * Triggered on deselect all.
386             */
387            onDeselectAll: function () {
388
389            },
390            /**
391             * Triggered after initializing.
392             *
393             * @param {jQuery} $select
394             * @param {jQuery} $container
395             */
396            onInitialized: function ($select, $container) {
397
398            },
399            /**
400             * Triggered on filtering.
401             *
402             * @param {jQuery} $filter
403             */
404            onFiltering: function ($filter) {
405
406            },

446            resetText: 'Reset',
447            indentGroupOptions: true,
448            // possible options: 'never', 'always', 'ifPopupIsSmaller', 'ifPopupIsWider'
449            widthSynchronizationMode: 'never',
450            buttonTextAlignment: 'center',
451            enableResetButton: false,
452            templates: {
453                button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
454                popupContainer: '<div class="multiselect-container dropdown-menu"></div>',
455                filter: '<div class="multiselect-filter d-flex align-items-center"><i class="fas fa-sm fa-search text-muted"></i><input type="search" class="multiselect-search form-control" /></div>',
456                buttonGroup: '<div class="multiselect-buttons btn-group" style="display:flex;"></div>',
457                buttonGroupReset: '<button type="button" class="multiselect-reset btn btn-secondary btn-block"></button>',
458                option: '<button type="button" class="multiselect-option dropdown-item"></button>',
459                divider: '<div class="dropdown-divider"></div>',
460                optionGroup: '<button type="button" class="multiselect-group dropdown-item"></button>',
461                resetButton: '<div class="multiselect-reset text-center p-2"><button type="button" class="btn btn-sm btn-block btn-outline-secondary"></button></div>'
462            }
463        },
464
465        constructor: Multiselect,
466
467        /**
468         * Builds the container of the multiselect.
469         */
470        buildContainer: function () {
471            this.$container = $(this.options.buttonContainer);
472            if (this.options.widthSynchronizationMode !== 'never') {
473                this.$container.on('show.bs.dropdown', $.proxy(function () {
474                    // the width needs to be synchronized again in case the width of the button changed in between
475                    this.synchronizeButtonAndPopupWidth();
476                    this.options.onDropdownShow();
477                }, this));
478            }
479            else {
480                this.$container.on('show.bs.dropdown', this.options.onDropdownShow);
481            }
482            this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);
483            this.$container.on('shown.bs.dropdown', this.options.onDropdownShown);
484            this.$container.on('hidden.bs.dropdown', this.options.onDropdownHidden);
485        },
486
487        /**
488         * Builds the button of the multiselect.
489         */
490        buildButton: function () {
491            this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);
492            if (this.$select.attr('class') && this.options.inheritClass) {
493                this.$button.addClass(this.$select.attr('class'));
494            }
495            // Adopt active state.
496            if (this.$select.prop('disabled')) {
497                this.disable();
498            }
499            else {
500                this.enable();
501            }
502
503            // Manually add button width if set.
504            if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {
505                this.$button.css({
506                    'width': '100%' //this.options.buttonWidth,
507                });
508                this.$container.css({
509                    'width': this.options.buttonWidth
510                });
511            }
512
513            if (this.options.buttonTextAlignment) {
514                switch (this.options.buttonTextAlignment) {
515                    case 'left':
516                        this.$button.addClass('text-left');
517                        break;
518                    case 'center':
519                        this.$button.addClass('text-center');
520                        break;
521                    case 'right':
522                        this.$button.addClass('text-right');
523                        break;
524                }
525            }
526
527            // Keep the tab index from the select.
528            var tabindex = this.$select.attr('tabindex');
529            if (tabindex) {
530                this.$button.attr('tabindex', tabindex);
531            }
532
533            this.$container.prepend(this.$button);
534        },
535
536        /**
537         * Builds the popup container representing the dropdown menu.
538         */
539        buildDropdown: function () {
540
541            // Build popup container.
542            this.$popupContainer = $(this.options.templates.popupContainer);
543
544            if (this.options.dropRight) {
545                this.$container.addClass('dropright');
546            }
547            else if (this.options.dropUp) {
548                this.$container.addClass("dropup");
549            }
550
551            // Set max height of dropdown menu to activate auto scrollbar.
552            if (this.options.maxHeight) {
553                // TODO: Add a class for this option to move the css declarations.
554                this.$popupContainer.css({
555                    'max-height': this.options.maxHeight + 'px',
556                    'overflow-y': 'auto',
557                    'overflow-x': 'hidden'
558                });
559            }
560
561            if (this.options.widthSynchronizationMode !== 'never') {
562                this.$popupContainer.css('overflow-x', 'hidden');
563            }
564
565            this.$popupContainer.on("touchstart click", function (e) {
566                e.stopPropagation();
567            });
568
569            this.$container.append(this.$popupContainer);
570        },
571
572        synchronizeButtonAndPopupWidth: function () {
573            if (!this.$popupContainer || this.options.widthSynchronizationMode === 'never') {
574                return;
575            }
576
577            var buttonWidth = this.$button.outerWidth();
578            switch (this.options.widthSynchronizationMode) {
579                case 'always':
580                    this.$popupContainer.css('min-width', buttonWidth);
581                    this.$popupContainer.css('max-width', buttonWidth);
582                    break;
583                case 'ifPopupIsSmaller':
584                    this.$popupContainer.css('min-width', buttonWidth);
585                    break;
586                case 'ifPopupIsWider':
587                    this.$popupContainer.css('max-width', buttonWidth);
588                    break;
589            }
590        },
591
592        /**
593         * Build the dropdown options and binds all necessary events.
594         *
595         * Uses createDivider and createOptionValue to create the necessary options.
596         */
597        buildDropdownOptions: function () {
598
599            this.$select.children().each($.proxy(function (index, element) {
600
601                var $element = $(element);
602                // Support optgroups and options without a group simultaneously.
603                var tag = $element.prop('tagName')
604                    .toLowerCase();
605
606                if ($element.prop('value') === this.options.selectAllValue) {
607                    return;
608                }
609
610                if (tag === 'optgroup') {
611                    this.createOptgroup(element);
612                }
613                else if (tag === 'option') {
614
615                    if ($element.data('role') === 'divider') {
616                        this.createDivider();
617                    }
618                    else {
619                        this.createOptionValue(element, false);
620                    }
621
622                }
623
624                // Other illegal tags will be ignored.
625            }, this));
626
627            // Bind the change event on the dropdown elements.
628            $(this.$popupContainer).off('change', '> *:not(.multiselect-group) input[type="checkbox"], > *:not(.multiselect-group) input[type="radio"]');
629            $(this.$popupContainer).on('change', '> *:not(.multiselect-group) input[type="checkbox"], > *:not(.multiselect-group) input[type="radio"]', $.proxy(function (event) {
630                var $target = $(event.target);
631
632                var checked = $target.prop('checked') || false;
633                var isSelectAllOption = $target.val() === this.options.selectAllValue;
634
635                // Apply or unapply the configured selected class.
636                if (this.options.selectedClass) {
637                    if (checked) {
638                        $target.closest('.multiselect-option')
639                            .addClass(this.options.selectedClass);
640                    }
641                    else {
642                        $target.closest('.multiselect-option')
643                            .removeClass(this.options.selectedClass);
644                    }
645                }
646
647                // Get the corresponding option.
648                var value = $target.val();
649                var $option = this.getOptionByValue(value);
650
651                var $optionsNotThis = $('option', this.$select).not($option);
652                var $checkboxesNotThis = $('input', this.$container).not($target);
653
654                if (isSelectAllOption) {
655
656                    if (checked) {
657                        this.selectAll(this.options.selectAllJustVisible, true);
658                    }
659                    else {
660                        this.deselectAll(this.options.selectAllJustVisible, true);
661                    }
662                }
663                else {
664                    if (checked) {
665                        $option.prop('selected', true);
666
667                        if (this.options.multiple) {
668                            // Simply select additional option.
669                            $option.prop('selected', true);
670                        }
671                        else {
672                            // Unselect all other options and corresponding checkboxes.
673                            if (this.options.selectedClass) {
674                                $($checkboxesNotThis).closest('.dropdown-item').removeClass(this.options.selectedClass);
675                            }
676
677                            $($checkboxesNotThis).prop('checked', false);
678                            $optionsNotThis.prop('selected', false);
679
680                            // It's a single selection, so close.
681                            this.$button.click();
682                        }
683
684                        if (this.options.selectedClass === "active") {
685                            $optionsNotThis.closest(".dropdown-item").css("outline", "");
686                        }
687                    }
688                    else {
689                        // Unselect option.
690                        $option.prop('selected', false);
691                    }
692
693                    // To prevent select all from firing onChange: #575
694                    this.options.onChange($option, checked);
695
696                    // Do not update select all or optgroups on select all change!
697                    this.updateSelectAll();
698
699                    if (this.options.enableClickableOptGroups && this.options.multiple) {
700                        this.updateOptGroups();
701                    }
702                }
703
704                this.$select.change();
705                this.updateButtonText();
706
707                if (this.options.preventInputChangeEvent) {
708                    return false;
709                }
710            }, this));
711
712            $('.multiselect-option', this.$popupContainer).off('mousedown');
713            $('.multiselect-option', this.$popupContainer).on('mousedown', function (e) {
714                if (e.shiftKey) {
715                    // Prevent selecting text by Shift+click
716                    return false;
717                }
718            });
719
720            $(this.$popupContainer).off('touchstart click', '.multiselect-option, .multiselect-all, .multiselect-group');
721            $(this.$popupContainer).on('touchstart click', '.multiselect-option, .multiselect-all, .multiselect-group', $.proxy(function (event) {
722                event.stopPropagation();
723
724                var $target = $(event.target);
725
726                if (event.shiftKey && this.options.multiple) {
727                    if (!$target.is("input")) { // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
728                        event.preventDefault();
729                        $target = $target.closest(".multiselect-option").find("input");
730                        $target.prop("checked", !$target.prop("checked"));
731                    }
732                    var checked = $target.prop('checked') || false;
733
734                    if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
735                        var from = this.$popupContainer.find(".multiselect-option:visible").index($target.closest(".multiselect-option"));
736                        var to = this.$popupContainer.find(".multiselect-option:visible").index(this.lastToggledInput.closest(".multiselect-option"));
737
738                        if (from > to) { // Swap the indices
739                            var tmp = to;
740                            to = from;
741                            from = tmp;
742                        }
743
744                        // Make sure we grab all elements since slice excludes the last index
745                        ++to;
746
747                        // Change the checkboxes and underlying options
748                        var range = this.$popupContainer.find(".multiselect-option:not(.multiselect-filter-hidden)").slice(from, to).find("input");
749
750                        range.prop('checked', checked);
751
752                        if (this.options.selectedClass) {
753                            range.closest('.multiselect-option')
754                                .toggleClass(this.options.selectedClass, checked);
755                        }
756
757                        for (var i = 0, j = range.length; i < j; i++) {
758                            var $checkbox = $(range[i]);
759
760                            var $option = this.getOptionByValue($checkbox.val());
761
762                            $option.prop('selected', checked);
763                        }
764                    }
765
766                    // Trigger the select "change" event
767                    $target.trigger("change");
768                }
769                else if (!$target.is('input')) {
770                    var $checkbox = $target.closest('.multiselect-option, .multiselect-all').find('.form-check-input');
771                    if ($checkbox.length > 0) {
772                        if (this.options.multiple || !$checkbox.prop('checked')) {
773                            $checkbox.prop('checked', !$checkbox.prop('checked'));
774                            $checkbox.change();
775                        }
776                    }
777                    else if (this.options.enableClickableOptGroups && this.options.multiple && !$target.hasClass("caret-container")) {
778                        var groupItem = $target;
779                        if (!groupItem.hasClass("multiselect-group")) {
780                            groupItem = $target.closest('.multiselect-group');
781                        }
782                        $checkbox = groupItem.find(".form-check-input");
783                        if ($checkbox.length > 0) {
784                            $checkbox.prop('checked', !$checkbox.prop('checked'));
785                            $checkbox.change();
786                        }
787                    }
788
789                    event.preventDefault();
790                }
791
792                // Remembers last clicked option
793                var $input = $target.closest(".multiselect-option").find("input[type='checkbox'], input[type='radio']");
794                if ($input.length > 0) {
795                    this.lastToggledInput = $target;
796                }
797                else {
798                    this.lastToggledInput = null;
799                }
800
801                $target.blur();
802            }, this));
803
804            //Keyboard support.
805            this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function (event) {
806                var $items = $(this.$container).find(".multiselect-option:not(.disabled), .multiselect-group:not(.disabled), .multiselect-all").filter(":visible");
807                var index = $items.index($items.filter(':focus'));
808                var $search = $('.multiselect-search', this.$container);
809
810                // keyCode 9 == Tab
811                if (event.keyCode === 9 && this.$container.hasClass('show')) {
812                    this.$button.click();
813                }
814                // keyCode 13 = Enter
815                else if (event.keyCode == 13) {
816                    var $current = $items.eq(index);
817                    setTimeout(function () {
818                        $current.focus();
819                    }, 1);
820                }
821                // keyCode 38 = Arrow Up
822                else if (event.keyCode == 38) {
823                    if (index == 0 && !$search.is(':focus')) {
824                        setTimeout(function () {
825                            $search.focus();
826                        }, 1);
827                    }
828                }
829                // keyCode 40 = Arrow Down
830                else if (event.keyCode == 40) {
831                    if ($search.is(':focus')) {
832                        var $first = $items.eq(0);
833                        setTimeout(function () {
834                            $search.blur();
835                            $first.focus();
836                        }, 1);
837                    }
838                    else if (index == -1) {
839                        setTimeout(function () {
840                            $search.focus();
841                        }, 1);
842                    }
843                }
844            }, this));
845
846            if (this.options.enableClickableOptGroups && this.options.multiple) {
847                $(".multiselect-group input", this.$popupContainer).off("change");
848                $(".multiselect-group input", this.$popupContainer).on("change", $.proxy(function (event) {
849                    event.stopPropagation();
850
851                    var $target = $(event.target);
852                    var checked = $target.prop('checked') || false;
853
854                    var $item = $(event.target).closest('.dropdown-item');
855                    var $group = $item.nextUntil(".multiselect-group")
856                        .not('.multiselect-filter-hidden')
857                        .not('.disabled');
858

978            // Support the label attribute on options.
979            var label = this.options.optionLabel(element);
980            var classes = this.options.optionClass(element);
981            var value = $element.val();
982            var inputType = this.options.multiple ? "checkbox" : "radio";
983            var title = $element.attr('title');
984
985            var $option = $(this.options.templates.option);
986            $option.addClass(classes);
987
988            if (isGroupOption && this.options.indentGroupOptions) {
989                $option.addClass("multiselect-group-option-indented")
990            }
991
992            // Hide all children items when collapseOptGroupsByDefault is true
993            if (this.options.collapseOptGroupsByDefault && $(element).parent().prop("tagName").toLowerCase() === "optgroup") {
994                $option.addClass("multiselect-collapsible-hidden");
995                $option.hide();
996            }
997
998            var name = this.options.checkboxName($element);
999            var $checkbox = this.createCheckbox($option, label, name, value, title, inputType);
1000
1001            var selected = $element.prop('selected') || false;
1002
1003            if (value === this.options.selectAllValue) {
1004                $option.addClass("multiselect-all");
1005                $option.removeClass("multiselect-option");
1006                $checkbox.parent().parent()
1007                    .addClass('multiselect-all');
1008            }
1009
1010            this.$popupContainer.append($option);
1011
1012            if ($element.is(':disabled')) {
1013                $checkbox.attr('disabled', 'disabled')
1014                    .prop('disabled', true)
1015                    .closest('.dropdown-item')
1016                    .addClass('disabled');
1017            }
1018
1019            $checkbox.prop('checked', selected);
1020
1021            if (selected && this.options.selectedClass) {
1022                $checkbox.closest('.dropdown-item')
1023                    .addClass(this.options.selectedClass);
1024            }
1025        },
1026
1027        /**
1028         * Creates a divider using the given select option.
1029         *
1030         * @param {jQuery} element
1031         */
1032        createDivider: function (element) {
1033            var $divider = $(this.options.templates.divider);
1034            this.$popupContainer.append($divider);
1035        },
1036
1037        /**
1038         * Creates an optgroup.
1039         *
1040         * @param {jQuery} group
1041         */
1042        createOptgroup: function (group) {
1043            var $group = $(group);
1044            var label = $group.attr("label");
1045            var value = $group.attr("value");
1046            var title = $group.attr('title');
1047
1048            var $groupOption = $("<span class='multiselect-group dropdown-item-text'></span>");
1049
1050            if (this.options.enableClickableOptGroups && this.options.multiple) {
1051                $groupOption = $(this.options.templates.optionGroup);
1052                var $checkbox = this.createCheckbox($groupOption, label, null, value, title, "checkbox");
1053            }
1054            else {
1055                if (this.options.enableHTML) {
1056                    $groupOption.html(" " + label);
1057                }
1058                else {
1059                    $groupOption.text(" " + label);
1060                }
1061            }
1062
1063            var classes = this.options.optionClass(group);
1064            $groupOption.addClass(classes);
1065
1066            if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
1067                $groupOption.find('.form-check').addClass('d-inline-block');
1068                $groupOption.append('<span class="caret-container dropdown-toggle pl-1"></span>');
1069            }
1070
1071            if ($group.is(':disabled')) {
1072                $groupOption.addClass('disabled');
1073            }
1074
1075            this.$popupContainer.append($groupOption);
1076
1077            $("option", group).each($.proxy(function ($, group) {
1078                this.createOptionValue(group, true);
1079            }, this));
1080        },
1081
1082        /**
1083         * Build the reset.
1084         *
1085         */
1086        buildReset: function () {
1087            if (this.options.includeResetOption) {
1088
1089                // Check whether to add a divider after the reset.
1090                if (this.options.includeResetDivider) {
1091                    var divider = $(this.options.templates.divider);
1092                    divider.addClass("mt-0");
1093                    this.$popupContainer.prepend(divider);
1094                }
1095
1096                var $resetButton = $(this.options.templates.resetButton);
1097
1098                if (this.options.enableHTML) {
1099                    $('button', $resetButton).html(this.options.resetText);
1100                }
1101                else {
1102                    $('button', $resetButton).text(this.options.resetText);
1103                }
1104
1105                $('button', $resetButton).click($.proxy(function () {
1106                    this.clearSelection();
1107                }, this));
1108
1109                this.$popupContainer.prepend($resetButton);
1110            }
1111        },
1112
1113        /**
1114         * Build the select all.
1115         *
1116         * Checks if a select all has already been created.
1117         */
1118        buildSelectAll: function () {
1119            if (typeof this.options.selectAllValue === 'number') {
1120                this.options.selectAllValue = this.options.selectAllValue.toString();
1121            }
1122
1123            var alreadyHasSelectAll = this.hasSelectAll();
1124
1125            if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
1126                && $('option', this.$select).length > this.options.includeSelectAllIfMoreThan) {
1127
1128                // Check whether to add a divider after the select all.
1129                if (this.options.includeSelectAllDivider) {
1130                    this.$popupContainer.prepend($(this.options.templates.divider));
1131                }
1132
1133                var $option = $(this.options.templates.li || this.options.templates.option);
1134                var $checkbox = this.createCheckbox($option, this.options.selectAllText, this.options.selectAllName, this.options.selectAllValue, this.options.selectAllText, "checkbox");
1135
1136                $option.addClass("multiselect-all");
1137                $option.removeClass("multiselect-option");
1138                $option.find(".form-check-label").addClass("font-weight-bold");
1139
1140                this.$popupContainer.prepend($option);
1141
1142                $checkbox.prop('checked', false);
1143            }
1144        },
1145
1146        /**
1147         * Builds the filter.
1148         */
1149        buildFilter: function () {
1150
1151            // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength.
1152            if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) {
1153                var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering);
1154
1155                if (this.$select.find('option').length >= enableFilterLength) {
1156
1157                    this.$filter = $(this.options.templates.filter);
1158                    $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
1159
1160                    // Handles optional filter clear button                        
1161                    if (!this.options.includeFilterClearBtn) {
1162                        this.$filter.find(".multiselect-search").attr("type", "text");
1163
1164                        // Remove clear button if the old design of the filter with input groups and separated clear button is used
1165                        this.$filter.find(".multiselect-clear-filter").remove();
1166                    }
1167                    else {
1168                        // Firefox does not support a clear button in search inputs right now therefore it must be added manually
1169                        if (this.isFirefox() && this.$filter.find(".multiselect-clear-filter").length === 0) {
1170                            this.$filter.append("<i class='fas fa-times text-muted multiselect-clear-filter multiselect-moz-clear-filter'></i>");
1171                        }
1172
1173                        this.$filter.find(".multiselect-clear-filter").on('click', $.proxy(function (event) {
1174                            clearTimeout(this.searchTimeout);
1175
1176                            this.query = '';
1177                            this.$filter.find('.multiselect-search').val('');
1178                            $('.dropdown-item', this.$popupContainer).show().removeClass('multiselect-filter-hidden');
1179
1180                            this.updateSelectAll();
1181
1182                            if (this.options.enableClickableOptGroups && this.options.multiple) {
1183                                this.updateOptGroups();
1184                            }
1185
1186                        }, this));
1187                    }
1188
1189                    this.$popupContainer.prepend(this.$filter);
1190
1191                    this.$filter.val(this.query).on('click', function (event) {
1192                        event.stopPropagation();
1193                    }).on('input keydown', $.proxy(function (event) {
1194                        // Cancel enter key default behaviour
1195                        if (event.which === 13) {
1196                            event.preventDefault();
1197                        }
1198
1199                        if (this.isFirefox() && this.options.includeFilterClearBtn) {
1200                            if (event.target.value) {
1201                                this.$filter.find(".multiselect-moz-clear-filter").show();
1202                            }
1203                            else {
1204                                this.$filter.find(".multiselect-moz-clear-filter").hide();
1205                            }
1206                        }
1207
1208                        // This is useful to catch "keydown" events after the browser has updated the control.
1209                        clearTimeout(this.searchTimeout);
1210
1211                        this.searchTimeout = this.asyncFunction($.proxy(function () {
1212
1213                            if (this.query !== event.target.value) {
1214                                this.query = event.target.value;
1215
1216                                var currentGroup, currentGroupVisible;
1217                                $.each($('.multiselect-option, .multiselect-group', this.$popupContainer), $.proxy(function (index, element) {
1218                                    var value = $('input', element).length > 0 ? $('input', element).val() : "";
1219                                    var text = $('.form-check-label', element).text();
1220
1221                                    var filterCandidate = '';
1222                                    if ((this.options.filterBehavior === 'text')) {
1223                                        filterCandidate = text;
1224                                    }
1225                                    else if ((this.options.filterBehavior === 'value')) {
1226                                        filterCandidate = value;
1227                                    }
1228                                    else if (this.options.filterBehavior === 'both') {
1229                                        filterCandidate = text + '\n' + value;
1230                                    }
1231
1232                                    if (value !== this.options.selectAllValue && text) {
1233
1234                                        // By default lets assume that element is not
1235                                        // interesting for this search.
1236                                        var showElement = false;
1237
1238                                        if (this.options.enableCaseInsensitiveFiltering) {
1239                                            filterCandidate = filterCandidate.toLowerCase();
1240                                            this.query = this.query.toLowerCase();
1241                                        }
1242
1243                                        if (this.options.enableFullValueFiltering && this.options.filterBehavior !== 'both') {
1244                                            var valueToMatch = filterCandidate.trim().substring(0, this.query.length);
1245                                            if (this.query.indexOf(valueToMatch) > -1) {
1246                                                showElement = true;
1247                                            }
1248                                        }
1249                                        else if (filterCandidate.indexOf(this.query) > -1) {
1250                                            showElement = true;
1251                                        }
1252
1253                                        // Toggle current element (group or group item) according to showElement boolean.
1254                                        if (!showElement) {
1255                                            $(element).css('display', 'none');
1256                                            $(element).addClass('multiselect-filter-hidden');
1257                                        }
1258                                        if (showElement) {
1259                                            $(element).css('display', 'block');
1260                                            $(element).removeClass('multiselect-filter-hidden');
1261                                        }
1262
1263                                        // Differentiate groups and group items.
1264                                        if ($(element).hasClass('multiselect-group')) {
1265                                            // Remember group status.
1266                                            currentGroup = element;
1267                                            currentGroupVisible = showElement;
1268                                        }
1269                                        else {
1270                                            // Show group name when at least one of its items is visible.
1271                                            if (showElement) {
1272                                                $(currentGroup).show()
1273                                                    .removeClass('multiselect-filter-hidden');
1274                                            }
1275
1276                                            // Show all group items when group name satisfies filter.
1277                                            if (!showElement && currentGroupVisible) {
1278                                                $(element).show()
1279                                                    .removeClass('multiselect-filter-hidden');
1280                                            }
1281                                        }
1282                                    }
1283                                }, this));
1284                            }
1285
1286                            this.updateSelectAll();
1287
1288                            if (this.options.enableClickableOptGroups && this.options.multiple) {
1289                                this.updateOptGroups();
1290                            }
1291
1292                            this.updatePopupPosition();
1293
1294                            this.options.onFiltering(event.target);
1295
1296                        }, this), 300, this);
1297                    }, this));
1298                }
1299            }
1300        },
1301
1302        /**
1303         * Builds the filter.
1304         */
1305        buildButtons: function () {
1306            if (this.options.enableResetButton) {
1307                var $buttonGroup = $(this.options.templates.buttonGroup);
1308                this.$buttonGroupReset = $(this.options.templates.buttonGroupReset).text(this.options.resetButtonText);
1309                $buttonGroup.append(this.$buttonGroupReset);
1310                this.$popupContainer.prepend($buttonGroup);
1311                
1312                // We save all options that were previously selected.
1313                this.defaultSelection = {};
1314                $('option', this.$select).each($.proxy(function(index, element) {
1315                    var $option = $(element);
1316                    this.defaultSelection[$option.val()] = $option.prop('selected');
1317                }, this));
1318
1319                this.$buttonGroupReset.on('click', $.proxy(function(event) {
1320                    $('option', this.$select).each($.proxy(function(index, element) {
1321                        var $option = $(element);
1322                        $option.prop('selected', this.defaultSelection[$option.val()]);
1323                    }, this));
1324                    this.refresh();
1325
1326                    if (this.options.enableFiltering) {
1327                        this.$filter.trigger('keydown');
1328                        $('input', this.$filter).val('');
1329                    }
1330                }, this));
1331            }
1332        },
1333
1334        updatePopupPosition: function() {
1335            // prevent gaps between popup and select when filter is used (#1199)
1336            var transformMatrix = this.$popupContainer.css("transform");
1337            var matrixType = transformMatrix.substring(0, transformMatrix.indexOf('('));
1338            var values = transformMatrix.substring(transformMatrix.indexOf('(') + 1, transformMatrix.length - 1);
1339            var valuesArray = values.split(',');
1340
1341            var valueIndex = 5;
1342            if(matrixType === "matrix3d") {
1343                valueIndex = 13;
1344            }
1345
1346            var yTransformation = valuesArray[valueIndex];
1347            // Need to check to avoid errors when testing and in some other situations.
1348            yTransformation = typeof yTransformation === 'undefined' ? 0 : yTransformation.trim();
1349            if (yTransformation < 0) {
1350                yTransformation = this.$popupContainer.css("height").replace('px', '') * -1;
1351                valuesArray[valueIndex] = yTransformation;
1352                transformMatrix = matrixType + '(' + valuesArray.join(',') + ')';
1353                this.$popupContainer.css("transform", transformMatrix);
1354            }
1355        },
1356
1357        /**
1358         * Unbinds the whole plugin.
1359         */
1360        destroy: function () {
1361            this.$container.remove();
1362            this.$select.unwrap();
1363            this.$select.show();
1364
1365            // reset original state
1366            this.$select.prop('disabled', this.options.wasDisabled);
1367
1368            this.$select.data('multiselect', null);
1369        },
1370
1371        /**
1372         * Refreshs the multiselect based on the selected options of the select.
1373         */
1374        refresh: function () {
1375            var inputs = {};
1376            $('.multiselect-option input', this.$popupContainer).each(function () {
1377                inputs[$(this).val()] = $(this);
1378            });
1379
1380            $('option', this.$select).each($.proxy(function (index, element) {
1381                var $elem = $(element);
1382                var $input = inputs[$(element).val()];
1383
1384                if ($elem.is(':selected')) {
1385                    $input.prop('checked', true);
1386
1387                    if (this.options.selectedClass) {
1388                        $input.closest('.multiselect-option')
1389                            .addClass(this.options.selectedClass);
1390                    }
1391                }
1392                else {
1393                    $input.prop('checked', false);
1394
1395                    if (this.options.selectedClass) {
1396                        $input.closest('.multiselect-option')
1397                            .removeClass(this.options.selectedClass);
1398                    }
1399                }
1400
1401                if ($elem.is(":disabled")) {
1402                    $input.attr('disabled', 'disabled')
1403                        .prop('disabled', true)
1404                        .closest('.multiselect-option')
1405                        .addClass('disabled');
1406                }
1407                else {
1408                    $input.prop('disabled', false)
1409                        .closest('.multiselect-option')
1410                        .removeClass('disabled');
1411                }
1412            }, this));
1413
1414            this.updateButtonText();
1415            this.updateSelectAll();
1416
1417            if (this.options.enableClickableOptGroups && this.options.multiple) {
1418                this.updateOptGroups();
1419            }
1420        },
1421
1422        /**
1423         * Select all options of the given values.
1424         *
1425         * If triggerOnChange is set to true, the on change event is triggered if
1426         * and only if one value is passed.
1427         *
1428         * @param {Array} selectValues
1429         * @param {Boolean} triggerOnChange
1430         */
1431        select: function (selectValues, triggerOnChange) {
1432            if (!$.isArray(selectValues)) {
1433                selectValues = [selectValues];
1434            }
1435
1436            for (var i = 0; i < selectValues.length; i++) {
1437                var value = selectValues[i];
1438
1439                if (value === null || value === undefined) {
1440                    continue;
1441                }
1442
1443                var $option = this.getOptionByValue(value);
1444                var $checkbox = this.getInputByValue(value);
1445
1446                if ($option === undefined || $checkbox === undefined) {
1447                    continue;
1448                }
1449
1450                if (this.options.selectedClass) {
1451                    $checkbox.closest('.dropdown-item')
1452                        .addClass(this.options.selectedClass);
1453                }
1454
1455                $checkbox.prop('checked', true);
1456                $option.prop('selected', true);
1457
1458                if (!this.options.multiple) {
1459                    var $checkboxesNotThis = $('input', this.$container).not($checkbox);
1460                    $($checkboxesNotThis).prop('checked', false);
1461                    $($checkboxesNotThis).closest('.multiselect-option').removeClass("active")
1462
1463                    var $optionsNotThis = $('option', this.$select).not($option);
1464                    $optionsNotThis.prop('selected', false);
1465                }
1466
1467                if (triggerOnChange) {
1468                    this.options.onChange($option, true);
1469                }
1470            }
1471
1472            this.updateButtonText();
1473            this.updateSelectAll();
1474
1475            if (this.options.enableClickableOptGroups && this.options.multiple) {
1476                this.updateOptGroups();
1477            }
1478        },
1479
1480        /**
1481         * Clears all selected items.
1482         */
1483        clearSelection: function () {
1484            this.deselectAll(false);
1485            this.updateButtonText();
1486            this.updateSelectAll();
1487
1488            if (this.options.enableClickableOptGroups && this.options.multiple) {
1489                this.updateOptGroups();
1490            }
1491        },
1492
1493        /**
1494         * Deselects all options of the given values.
1495         *
1496         * If triggerOnChange is set to true, the on change event is triggered, if
1497         * and only if one value is passed.
1498         *
1499         * @param {Array} deselectValues
1500         * @param {Boolean} triggerOnChange
1501         */
1502        deselect: function (deselectValues, triggerOnChange) {
1503            if (!this.options.multiple) {
1504                // In single selection mode at least on option needs to be selected
1505                return;
1506            }
1507
1508            if (!$.isArray(deselectValues)) {
1509                deselectValues = [deselectValues];
1510            }
1511
1512            for (var i = 0; i < deselectValues.length; i++) {
1513                var value = deselectValues[i];
1514
1515                if (value === null || value === undefined) {
1516                    continue;
1517                }
1518
1519                var $option = this.getOptionByValue(value);
1520                var $checkbox = this.getInputByValue(value);
1521
1522                if ($option === undefined || $checkbox === undefined) {
1523                    continue;
1524                }
1525
1526                if (this.options.selectedClass) {
1527                    $checkbox.closest('.dropdown-item')
1528                        .removeClass(this.options.selectedClass);
1529                }
1530
1531                $checkbox.prop('checked', false);
1532                $option.prop('selected', false);
1533
1534                if (triggerOnChange) {
1535                    this.options.onChange($option, false);
1536                }
1537            }
1538
1539            this.updateButtonText();
1540            this.updateSelectAll();
1541
1542            if (this.options.enableClickableOptGroups && this.options.multiple) {
1543                this.updateOptGroups();
1544            }
1545        },
1546
1547        /**
1548         * Selects all enabled & visible options.
1549         *
1550         * If justVisible is true or not specified, only visible options are selected.
1551         *
1552         * @param {Boolean} justVisible
1553         * @param {Boolean} triggerOnSelectAll
1554         */
1555        selectAll: function (justVisible, triggerOnSelectAll) {
1556            if (!this.options.multiple) {
1557                // In single selection mode only one option can be selected at a time
1558                return;
1559            }
1560
1561            // Record all changes, i.e., options selected that were not selected before.
1562            var selected = [];
1563            var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
1564
1565            if (justVisible) {
1566                var visibleOptions = $(".multiselect-option:not(.disabled):not(.multiselect-filter-hidden)", this.$popupContainer);
1567                $('input:enabled', visibleOptions).prop('checked', true);
1568                visibleOptions.addClass(this.options.selectedClass);
1569
1570                $('input:enabled', visibleOptions).each($.proxy(function (index, element) {
1571                    var value = $(element).val();
1572                    var option = this.getOptionByValue(value);
1573                    if (!$(option).prop('selected')) {
1574                        selected.push(option);
1575                    }
1576                    $(option).prop('selected', true);
1577                }, this));
1578            }
1579            else {
1580                var allOptions = $(".multiselect-option:not(.disabled)", this.$popupContainer);
1581                $('input:enabled', allOptions).prop('checked', true);
1582                allOptions.addClass(this.options.selectedClass);
1583
1584                $('input:enabled', allOptions).each($.proxy(function (index, element) {
1585                    var value = $(element).val();
1586                    var option = this.getOptionByValue(value);
1587                    if (!$(option).prop('selected')) {
1588                        selected.push(option);
1589                    }
1590                    $(option).prop('selected', true);
1591                }, this));
1592            }
1593
1594            $('.multiselect-option input[value="' + this.options.selectAllValue + '"]', this.$popupContainer).prop('checked', true);
1595
1596            if (this.options.enableClickableOptGroups && this.options.multiple) {
1597                this.updateOptGroups();
1598            }
1599
1600            this.updateButtonText();
1601            this.updateSelectAll();
1602
1603            if (triggerOnSelectAll) {
1604                this.options.onSelectAll(selected);
1605            }
1606        },
1607
1608        /**
1609         * Deselects all options.
1610         *
1611         * If justVisible is true or not specified, only visible options are deselected.
1612         *
1613         * @param {Boolean} justVisible
1614         */
1615        deselectAll: function (justVisible, triggerOnDeselectAll) {
1616            if (!this.options.multiple) {
1617                // In single selection mode at least on option needs to be selected
1618                return;
1619            }
1620
1621            // Record changes, i.e., those options that are deselected but were not deselected before.
1622            var deselected = [];
1623            var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
1624
1625            if (justVisible) {
1626                var visibleOptions = $(".multiselect-option:not(.disabled):not(.multiselect-filter-hidden)", this.$popupContainer);
1627                $('input[type="checkbox"]:enabled', visibleOptions).prop('checked', false);
1628                visibleOptions.removeClass(this.options.selectedClass);
1629
1630                $('input[type="checkbox"]:enabled', visibleOptions).each($.proxy(function (index, element) {
1631                    var value = $(element).val();
1632                    var option = this.getOptionByValue(value);
1633                    if ($(option).prop('selected')) {
1634                        deselected.push(option);
1635                    }
1636                    $(option).prop('selected', false);
1637                }, this));
1638            }
1639            else {
1640                var allOptions = $(".multiselect-option:not(.disabled):not(.multiselect-group)", this.$popupContainer);
1641                $('input[type="checkbox"]:enabled', allOptions).prop('checked', false);
1642                allOptions.removeClass(this.options.selectedClass);
1643
1644                $('input[type="checkbox"]:enabled', allOptions).each($.proxy(function (index, element) {
1645                    var value = $(element).val();
1646                    var option = this.getOptionByValue(value);
1647                    if ($(option).prop('selected')) {
1648                        deselected.push(option);
1649                    }
1650                    $(option).prop('selected', false);
1651                }, this));
1652            }
1653
1654            $('.multiselect-all input[value="' + this.options.selectAllValue + '"]', this.$popupContainer).prop('checked', false);
1655
1656            if (this.options.enableClickableOptGroups && this.options.multiple) {
1657                this.updateOptGroups();
1658            }
1659
1660            this.updateButtonText();
1661            this.updateSelectAll();
1662
1663            if (triggerOnDeselectAll) {
1664                this.options.onDeselectAll(deselected);
1665            }
1666        },
1667
1668        /**
1669         * Rebuild the plugin.
1670         *
1671         * Rebuilds the dropdown, the filter and the select all option.
1672         */
1673        rebuild: function () {
1674            this.$popupContainer.html('');
1675
1676            // Important to distinguish between radios and checkboxes.
1677            this.options.multiple = this.$select.attr('multiple') === "multiple";
1678
1679            this.buildSelectAll();
1680            this.buildDropdownOptions();
1681            this.buildFilter();
1682            this.buildButtons();
1683
1684            this.updateButtonText();
1685            this.updateSelectAll(true);
1686
1687            if (this.options.enableClickableOptGroups && this.options.multiple) {
1688                this.updateOptGroups();
1689            }
1690
1691            if (this.options.disableIfEmpty) {
1692                if ($('option', this.$select).length <= 0) {
1693                    if (!this.$select.prop('disabled')) {
1694                        this.disable(true);
1695                    }
1696                }
1697                else if (this.$select.data("disabled-by-option")) {
1698                    this.enable();
1699                }
1700            }
1701
1702            if (this.options.dropRight) {
1703                this.$container.addClass('dropright');
1704            }
1705            else if (this.options.dropUp) {
1706                this.$container.addClass('dropup');
1707            }
1708
1709            if (this.options.widthSynchronizationMode !== 'never') {
1710                this.synchronizeButtonAndPopupWidth();
1711            }
1712        },
1713
1714        /**
1715         * The provided data will be used to build the dropdown.
1716         */
1717        dataprovider: function (dataprovider) {
1718
1719            var groupCounter = 0;
1720            var $select = this.$select.empty();
1721
1722            $.each(dataprovider, function (index, option) {
1723                var $tag;
1724
1725                if ($.isArray(option.children)) { // create optiongroup tag
1726                    groupCounter++;
1727
1728                    $tag = $('<optgroup/>').attr({
1729                        label: option.label || 'Group ' + groupCounter,
1730                        disabled: !!option.disabled,
1731                        value: option.value
1732                    });
1733
1734                    forEach(option.children, function (subOption) { // add children option tags
1735                        var attributes = {
1736                            value: subOption.value,
1737                            label: subOption.label || subOption.value,
1738                            title: subOption.title,
1739                            selected: !!subOption.selected,
1740                            disabled: !!subOption.disabled
1741                        };
1742
1743                        //Loop through attributes object and add key-value for each attribute
1744                        for (var key in subOption.attributes) {
1745                            attributes['data-' + key] = subOption.attributes[key];
1746                        }
1747                        //Append original attributes + new data attributes to option
1748                        $tag.append($('<option/>').attr(attributes));
1749                    });
1750                }
1751                else {
1752
1753                    var attributes = {
1754                        'value': option.value,
1755                        'label': option.label || option.value,
1756                        'title': option.title,
1757                        'class': option['class'],
1758                        'selected': !!option['selected'],
1759                        'disabled': !!option['disabled']
1760                    };
1761                    //Loop through attributes object and add key-value for each attribute
1762                    for (var key in option.attributes) {
1763                        attributes['data-' + key] = option.attributes[key];
1764                    }
1765                    //Append original attributes + new data attributes to option
1766                    $tag = $('<option/>').attr(attributes);
1767
1768                    $tag.text(option.label || option.value);
1769                }
1770
1771                $select.append($tag);
1772            });
1773
1774            this.rebuild();
1775        },
1776
1777        /**
1778         * Enable the multiselect.
1779         */
1780        enable: function () {
1781            this.$select.prop('disabled', false);
1782            this.$button.prop('disabled', false)
1783                .removeClass('disabled');
1784
1785            this.updateButtonText();
1786        },
1787
1788        /**
1789         * Disable the multiselect.
1790         */
1791        disable: function (disableByOption) {
1792            this.$select.prop('disabled', true);
1793            this.$button.prop('disabled', true)
1794                .addClass('disabled');
1795
1796            if (disableByOption) {
1797                this.$select.data("disabled-by-option", true);
1798            }
1799            else {
1800                this.$select.data("disabled-by-option", null);
1801            }
1802
1803            this.updateButtonText();
1804        },
1805
1806        /**
1807         * Set the options.
1808         *
1809         * @param {Array} options
1810         */
1811        setOptions: function (options) {
1812            this.options = this.mergeOptions(options);
1813        },
1814
1815        /**
1816         * Merges the given options with the default options.
1817         *
1818         * @param {Array} options
1819         * @returns {Array}
1820         */
1821        mergeOptions: function (options) {
1822            return $.extend(true, {}, this.defaults, this.options, options);
1823        },
1824
1825        /**
1826         * Checks whether a select all checkbox is present.
1827         *
1828         * @returns {Boolean}
1829         */
1830        hasSelectAll: function () {
1831            return $('.multiselect-all', this.$popupContainer).length > 0;
1832        },
1833
1834        /**
1835         * Update opt groups.
1836         */
1837        updateOptGroups: function () {
1838            var $groups = $('.multiselect-group', this.$popupContainer)
1839            var selectedClass = this.options.selectedClass;
1840
1841            $groups.each(function () {
1842                var $options = $(this).nextUntil('.multiselect-group')
1843                    .not('.multiselect-filter-hidden')
1844                    .not('.disabled');
1845
1846                var checked = true;
1847                $options.each(function () {
1848                    var $input = $('input', this);
1849
1850                    if (!$input.prop('checked')) {
1851                        checked = false;
1852                    }
1853                });
1854
1855                if (selectedClass) {
1856                    if (checked) {
1857                        $(this).addClass(selectedClass);
1858                    }
1859                    else {
1860                        $(this).removeClass(selectedClass);
1861                    }
1862                }
1863
1864                $('input', this).prop('checked', checked);
1865            });
1866        },
1867
1868        /**
1869         * Updates the select all checkbox based on the currently displayed and selected checkboxes.
1870         */
1871        updateSelectAll: function (notTriggerOnSelectAll) {
1872            if (this.hasSelectAll()) {
1873                var allBoxes = $(".multiselect-option:not(.multiselect-filter-hidden):not(.multiselect-group):not(.disabled) input:enabled", this.$popupContainer);
1874                var allBoxesLength = allBoxes.length;
1875                var checkedBoxesLength = allBoxes.filter(":checked").length;
1876                var selectAllItem = $(".multiselect-all", this.$popupContainer);
1877                var selectAllInput = selectAllItem.find("input");
1878
1879                if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
1880                    selectAllInput.prop("checked", true);
1881                    selectAllItem.addClass(this.options.selectedClass);
1882                }
1883                else {
1884                    selectAllInput.prop("checked", false);
1885                    selectAllItem.removeClass(this.options.selectedClass);
1886                }
1887            }
1888        },
1889
1890        /**
1891         * Update the button text and its title based on the currently selected options.
1892         */
1893        updateButtonText: function () {