/**
* Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect)
*
* Apache License, Version 2.0:
* Copyright (c) 2012 - 2015 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a
* copy of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* BSD 3-Clause License:
* Copyright (c) 2012 - 2015 David Stutz
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* - Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
* - Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
* - Neither the name of David Stutz nor the names of its contributors may be
* used to endorse or promote products derived from this software without
* specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
!function ($) {
"use strict";// jshint ;_;
if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
ko.bindingHandlers.multiselect = {
after: ['options', 'value', 'selectedOptions', 'enable', 'disable'],
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var $element = $(element);
var config = ko.toJS(valueAccessor());
$element.multiselect(config);
if (allBindings.has('options')) {
var options = allBindings.get('options');
if (ko.isObservable(options)) {
ko.computed({
read: function() {
options();
setTimeout(function() {
var ms = $element.data('multiselect');
if (ms)
ms.updateOriginalOptions();//Not sure how beneficial this is.
$element.multiselect('rebuild');
}, 1);
},
disposeWhenNodeIsRemoved: element
});
}
}
//value and selectedOptions are two-way, so these will be triggered even by our own actions.
//It needs some way to tell if they are triggered because of us or because of outside change.
//It doesn't loop but it's a waste of processing.
if (allBindings.has('value')) {
var value = allBindings.get('value');
if (ko.isObservable(value)) {
ko.computed({
read: function() {
value();
setTimeout(function() {
$element.multiselect('refresh');
}, 1);
},
disposeWhenNodeIsRemoved: element
}).extend({ rateLimit: 100, notifyWhenChangesStop: true });
}
}
//Switched from arrayChange subscription to general subscription using 'refresh'.
//Not sure performance is any better using 'select' and 'deselect'.
if (allBindings.has('selectedOptions')) {
var selectedOptions = allBindings.get('selectedOptions');
if (ko.isObservable(selectedOptions)) {
ko.computed({
read: function() {
selectedOptions();
setTimeout(function() {
$element.multiselect('refresh');
}, 1);
},
disposeWhenNodeIsRemoved: element
}).extend({ rateLimit: 100, notifyWhenChangesStop: true });
}
}
var setEnabled = function (enable) {
setTimeout(function () {
if (enable)
$element.multiselect('enable');
else
$element.multiselect('disable');
});
};
if (allBindings.has('enable')) {
var enable = allBindings.get('enable');
if (ko.isObservable(enable)) {
ko.computed({
read: function () {
setEnabled(enable());
},
disposeWhenNodeIsRemoved: element
}).extend({ rateLimit: 100, notifyWhenChangesStop: true });
} else {
setEnabled(enable);
}
}
if (allBindings.has('disable')) {
var disable = allBindings.get('disable');
if (ko.isObservable(disable)) {
ko.computed({
read: function () {
setEnabled(!disable());
},
disposeWhenNodeIsRemoved: element
}).extend({ rateLimit: 100, notifyWhenChangesStop: true });
} else {
setEnabled(!disable);
}
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$element.multiselect('destroy');
});
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var $element = $(element);
var config = ko.toJS(valueAccessor());
$element.multiselect('setOptions', config);
$element.multiselect('rebuild');
}
};
}
function forEach(array, callback) {
for (var index = 0; index < array.length; ++index) {
callback(array[index], index);
}
}
/**
* Constructor to create a new multiselect using the given select.
*
* @param {jQuery} select
* @param {Object} options
* @returns {Multiselect}
*/
function Multiselect(select, options) {
this.$select = $(select);
// Placeholder via data attributes
if (this.$select.attr("data-placeholder")) {
options.nonSelectedText = this.$select.data("placeholder");
}
this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
// Initialization.
// We have to clone to create a new reference.
this.originalOptions = this.$select.clone()[0].options;
this.query = '';
this.searchTimeout = null;
this.lastToggledInput = null;
this.options.multiple = this.$select.attr('multiple') === "multiple";
this.options.onChange = $.proxy(this.options.onChange, this);
this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);
this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);
this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
this.options.onInitialized = $.proxy(this.options.onInitialized, this);
// Build select all if enabled.
this.buildContainer();
this.buildButton();
this.buildDropdown();
this.buildSelectAll();
this.buildDropdownOptions();
this.buildFilter();
this.updateButtonText();
this.updateSelectAll(true);
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable();
}
this.$select.hide().after(this.$container);
this.options.onInitialized(this.$select, this.$container);
}
Multiselect.prototype = {
defaults: {
/**
* Default text function will either print 'None selected' in case no
* option is selected or a list of the selected options up to a length
* of 3 selected options.
*
* @param {jQuery} options
* @param {jQuery} select
* @returns {String}
*/
buttonText: function(options, select) {
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
}
else if (options.length === 0) {
return this.nonSelectedText;
}
else if (this.allSelectedText
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
&& this.multiple) {
if (this.selectAllNumber) {
return this.allSelectedText + ' (' + options.length + ')';
}
else {
return this.allSelectedText;
}
}
else if (options.length > this.numberDisplayed) {
return options.length + ' ' + this.nSelectedText;
}
else {
var selected = '';
var delimiter = this.delimiterText;
options.each(function() {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter;
});
return selected.substr(0, selected.length - 2);
}
},
/**
* Updates the title of the button similar to the buttonText function.
*
* @param {jQuery} options
* @param {jQuery} select
* @returns {@exp;selected@call;substr}
*/
buttonTitle: function(options, select) {
if (options.length === 0) {
return this.nonSelectedText;
}
else {
var selected = '';
var delimiter = this.delimiterText;
options.each(function () {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter;
});
return selected.substr(0, selected.length - 2);
}
},
/**
* Create a label.
*
* @param {jQuery} element
* @returns {String}
*/
optionLabel: function(element){
return $(element).attr('label') || $(element).text();
},
/**
* Create a class.
*
* @param {jQuery} element
* @returns {String}
*/
optionClass: function(element) {
return $(element).attr('class') || '';
},
/**
* Triggered on change of the multiselect.
*
* Not triggered when selecting/deselecting options manually.
*
* @param {jQuery} option
* @param {Boolean} checked
*/
onChange : function(option, checked) {
},
/**
* Triggered when the dropdown is shown.
*
* @param {jQuery} event
*/
onDropdownShow: function(event) {
},
/**
* Triggered when the dropdown is hidden.
*
* @param {jQuery} event
*/
onDropdownHide: function(event) {
},
/**
* Triggered after the dropdown is shown.
*
* @param {jQuery} event
*/
onDropdownShown: function(event) {
},
/**
* Triggered after the dropdown is hidden.
*
* @param {jQuery} event
*/
onDropdownHidden: function(event) {
},
/**
* Triggered on select all.
*/
onSelectAll: function(checked) {
},
/**
* Triggered after initializing.
*
* @param {jQuery} $select
* @param {jQuery} $container
*/
onInitialized: function($select, $container) {
},
enableHTML: false,
buttonClass: 'btn btn-default',
inheritClass: false,
buttonWidth: 'auto',
buttonContainer: '
',
dropRight: false,
dropUp: false,
selectedClass: 'active',
// Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false,
checkboxName: false,
includeSelectAllOption: false,
includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all',
selectAllValue: 'multiselect-all',
selectAllName: false,
selectAllNumber: true,
selectAllJustVisible: true,
enableFiltering: false,
enableCaseInsensitiveFiltering: false,
enableFullValueFiltering: false,
enableClickableOptGroups: false,
enableCollapsibelOptGroups: false,
filterPlaceholder: 'Search',
// possible options: 'text', 'value', 'both'
filterBehavior: 'text',
includeFilterClearBtn: true,
preventInputChangeEvent: false,
nonSelectedText: 'None selected',
nSelectedText: 'selected',
allSelectedText: 'All selected',
numberDisplayed: 3,
disableIfEmpty: false,
disabledText: '',
delimiterText: ', ',
templates: {
button: '',
ul: '
',
filter: '
',
filterClearBtn: '',
li: '
',
divider: '',
liGroup: ''
}
},
constructor: Multiselect,
/**
* Builds the container of the multiselect.
*/
buildContainer: function() {
this.$container = $(this.options.buttonContainer);
this.$container.on('show.bs.dropdown', this.options.onDropdownShow);
this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);
this.$container.on('shown.bs.dropdown', this.options.onDropdownShown);
this.$container.on('hidden.bs.dropdown', this.options.onDropdownHidden);
},
/**
* Builds the button of the multiselect.
*/
buildButton: function() {
this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);
if (this.$select.attr('class') && this.options.inheritClass) {
this.$button.addClass(this.$select.attr('class'));
}
// Adopt active state.
if (this.$select.prop('disabled')) {
this.disable();
}
else {
this.enable();
}
// Manually add button width if set.
if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {
this.$button.css({
'width' : this.options.buttonWidth,
'overflow' : 'hidden',
'text-overflow' : 'ellipsis'
});
this.$container.css({
'width': this.options.buttonWidth
});
}
// Keep the tab index from the select.
var tabindex = this.$select.attr('tabindex');
if (tabindex) {
this.$button.attr('tabindex', tabindex);
}
this.$container.prepend(this.$button);
},
/**
* Builds the ul representing the dropdown menu.
*/
buildDropdown: function() {
// Build ul.
this.$ul = $(this.options.templates.ul);
if (this.options.dropRight) {
this.$ul.addClass('pull-right');
}
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
// TODO: Add a class for this option to move the css declarations.
this.$ul.css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden'
});
}
if (this.options.dropUp) {
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));
var moveCalc = height + 34;
this.$ul.css({
'max-height': height + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden',
'margin-top': "-" + moveCalc + 'px'
});
}
this.$container.append(this.$ul);
},
/**
* Build the dropdown options and binds all nessecary events.
*
* Uses createDivider and createOptionValue to create the necessary options.
*/
buildDropdownOptions: function() {
this.$select.children().each($.proxy(function(index, element) {
var $element = $(element);
// Support optgroups and options without a group simultaneously.
var tag = $element.prop('tagName')
.toLowerCase();
if ($element.prop('value') === this.options.selectAllValue) {
return;
}
if (tag === 'optgroup') {
this.createOptgroup(element);
}
else if (tag === 'option') {
if ($element.data('role') === 'divider') {
this.createDivider();
}
else {
this.createOptionValue(element);
}
}
// Other illegal tags will be ignored.
}, this));
// Bind the change event on the dropdown elements.
$('li input', this.$ul).on('change', $.proxy(function(event) {
var $target = $(event.target);
var checked = $target.prop('checked') || false;
var isSelectAllOption = $target.val() === this.options.selectAllValue;
// Apply or unapply the configured selected class.
if (this.options.selectedClass) {
if (checked) {
$target.closest('li')
.addClass(this.options.selectedClass);
}
else {
$target.closest('li')
.removeClass(this.options.selectedClass);
}
}
// Get the corresponding option.
var value = $target.val();
var $option = this.getOptionByValue(value);
var $optionsNotThis = $('option', this.$select).not($option);
var $checkboxesNotThis = $('input', this.$container).not($target);
if (isSelectAllOption) {
if (checked) {
this.selectAll(this.options.selectAllJustVisible);
}
else {
this.deselectAll(this.options.selectAllJustVisible);
}
}
else {
if (checked) {
$option.prop('selected', true);
if (this.options.multiple) {
// Simply select additional option.
$option.prop('selected', true);
}
else {
// Unselect all other options and corresponding checkboxes.
if (this.options.selectedClass) {
$($checkboxesNotThis).closest('li').removeClass(this.options.selectedClass);
}
$($checkboxesNotThis).prop('checked', false);
$optionsNotThis.prop('selected', false);
// It's a single selection, so close.
this.$button.click();
}
if (this.options.selectedClass === "active") {
$optionsNotThis.closest("a").css("outline", "");
}
}
else {
// Unselect option.
$option.prop('selected', false);
}
// To prevent select all from firing onChange: #575
this.options.onChange($option, checked);
}
this.$select.change();
this.updateButtonText();
this.updateSelectAll();
if(this.options.preventInputChangeEvent) {
return false;
}
}, this));
$('li a', this.$ul).on('mousedown', function(e) {
if (e.shiftKey) {
// Prevent selecting text by Shift+click
return false;
}
});
$('li a', this.$ul).on('touchstart click', $.proxy(function(event) {
event.stopPropagation();
var $target = $(event.target);
if (event.shiftKey && this.options.multiple) {
if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
event.preventDefault();
$target = $target.find("input");
$target.prop("checked", !$target.prop("checked"));
}
var checked = $target.prop('checked') || false;
if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
var from = $target.closest("li").index();
var to = this.lastToggledInput.closest("li").index();
if (from > to) { // Swap the indices
var tmp = to;
to = from;
from = tmp;
}
// Make sure we grab all elements since slice excludes the last index
++to;
// Change the checkboxes and underlying options
var range = this.$ul.find("li").slice(from, to).find("input");
range.prop('checked', checked);
if (this.options.selectedClass) {
range.closest('li')
.toggleClass(this.options.selectedClass, checked);
}
for (var i = 0, j = range.length; i < j; i++) {
var $checkbox = $(range[i]);
var $option = this.getOptionByValue($checkbox.val());
$option.prop('selected', checked);
}
}
// Trigger the select "change" event
$target.trigger("change");
}
// Remembers last clicked option
if($target.is("input") && !$target.closest("li").is(".multiselect-item")){
this.lastToggledInput = $target;
}
$target.blur();
}, this));
// Keyboard support.
this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function(event) {
if ($('input[type="text"]', this.$container).is(':focus')) {
return;
}
if (event.keyCode === 9 && this.$container.hasClass('open')) {
this.$button.click();
}
else {
var $items = $(this.$container).find("li:not(.divider):not(.disabled) a").filter(":visible");
if (!$items.length) {
return;
}
var index = $items.index($items.filter(':focus'));
// Navigation up.
if (event.keyCode === 38 && index > 0) {
index--;
}
// Navigate down.
else if (event.keyCode === 40 && index < $items.length - 1) {
index++;
}
else if (!~index) {
index = 0;
}
var $current = $items.eq(index);
$current.focus();
if (event.keyCode === 32 || event.keyCode === 13) {
var $checkbox = $current.find('input');
$checkbox.prop("checked", !$checkbox.prop("checked"));
$checkbox.change();
}
event.stopPropagation();
event.preventDefault();
}
}, this));
if(this.options.enableClickableOptGroups && this.options.multiple) {
$('li.multiselect-group', this.$ul).on('click', $.proxy(function(event) {
event.stopPropagation();
console.log('test');
var group = $(event.target).parent();
// Search all option in optgroup
var $options = group.nextUntil('li.multiselect-group');
var $visibleOptions = $options.filter(":visible:not(.disabled)");
// check or uncheck items
var allChecked = true;
var optionInputs = $visibleOptions.find('input');
var values = [];
optionInputs.each(function() {
allChecked = allChecked && $(this).prop('checked');
values.push($(this).val());
});
if (!allChecked) {
this.select(values, false);
}
else {
this.deselect(values, false);
}
this.options.onChange(optionInputs, !allChecked);
}, this));
}
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$("li.multiselect-group input", this.$ul).off();
$("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each( function () {
$(this).toggleClass('hidden', true);
});
$("li.multiselect-group", this.$ul).on("click", $.proxy(function(group) {
group.stopPropagation();
}, this));
$("li.multiselect-group > a > b", this.$ul).on("click", $.proxy(function(t) {
t.stopPropagation();
var n = $(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group");
var i = true;
r.each(function() {
i = i && $(this).hasClass('hidden');
});
r.toggleClass('hidden', !i);
}, this));
$("li.multiselect-group > a > input", this.$ul).on("change", $.proxy(function(t) {
t.stopPropagation();
var n = $(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group", ':not(.disabled)');
var s = r.find("input");
var i = true;
s.each(function() {
i = i && $(this).prop("checked");
});
s.prop("checked", !i).trigger("change");
}, this));
// Set the initial selection state of the groups.
$('li.multiselect-group', this.$ul).each(function() {
var r = $(this).nextUntil("li.multiselect-group", ':not(.disabled)');
var s = r.find("input");
var i = true;
s.each(function() {
i = i && $(this).prop("checked");
});
$(this).find('input').prop("checked", i);
});
// Update the group checkbox based on new selections among the
// corresponding children.
$("li input", this.$ul).on("change", $.proxy(function(t) {
t.stopPropagation();
var n = $(t.target).closest('li');
var r1 = n.prevUntil("li.multiselect-group", ':not(.disabled)');
var r2 = n.nextUntil("li.multiselect-group", ':not(.disabled)');
var s1 = r1.find("input");
var s2 = r2.find("input");
var i = $(t.target).prop('checked');
s1.each(function() {
i = i && $(this).prop("checked");
});
s2.each(function() {
i = i && $(this).prop("checked");
});
n.prevAll('.multiselect-group').find('input').prop('checked', i);
}, this));
$("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
$("li.multiselect-group > a, li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
$("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
}
},
/**
* Create an option using the given select option.
*
* @param {jQuery} element
*/
createOptionValue: function(element) {
var $element = $(element);
if ($element.is(':selected')) {
$element.prop('selected', true);
}
// Support the label attribute on options.
var label = this.options.optionLabel(element);
var classes = this.options.optionClass(element);
var value = $element.val();
var inputType = this.options.multiple ? "checkbox" : "radio";
var $li = $(this.options.templates.li);
var $label = $('label', $li);
$label.addClass(inputType);
$li.addClass(classes);
if (this.options.enableHTML) {
$label.html(" " + label);
}
else {
$label.text(" " + label);
}
var $checkbox = $('').attr('type', inputType);
if (this.options.checkboxName) {
$checkbox.attr('name', this.options.checkboxName);
}
$label.prepend($checkbox);
var selected = $element.prop('selected') || false;
$checkbox.val(value);
if (value === this.options.selectAllValue) {
$li.addClass("multiselect-item multiselect-all");
$checkbox.parent().parent()
.addClass('multiselect-all');
}
$label.attr('title', $element.attr('title'));
this.$ul.append($li);
if ($element.is(':disabled')) {
$checkbox.attr('disabled', 'disabled')
.prop('disabled', true)
.closest('a')
.attr("tabindex", "-1")
.closest('li')
.addClass('disabled');
}
$checkbox.prop('checked', selected);
if (selected && this.options.selectedClass) {
$checkbox.closest('li')
.addClass(this.options.selectedClass);
}
},
/**
* Creates a divider using the given select option.
*
* @param {jQuery} element
*/
createDivider: function(element) {
var $divider = $(this.options.templates.divider);
this.$ul.append($divider);
},
/**
* Creates an optgroup.
*
* @param {jQuery} group
*/
createOptgroup: function(group) {
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
var label = $(group).attr("label");
var value = $(group).attr("value");
var r = $('