mirror of
https://github.com/Cacti/cacti.git
synced 2026-11-02 18:17:00 +09:00
TheWitness
8a8541d11d
* Fixing #2572 - Ordering Graphs by Data Source * Support Sorting of Tree or Graph View by Data Source * This feature is not yet complete. The API modifications for ordering are not yet complete. * This first commit covers much of the initial front end changes. * Proposed API changes * First working prototype of Graph Ordering * Fixing bugs and applying to tree * Updating the ChangeLog for #2572 * QA: Fix GitHub Action - Pre-checks
1941 lines
71 KiB
JavaScript
1941 lines
71 KiB
JavaScript
/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
|
|
/*
|
|
* jQuery UI MultiSelect Widget 3.0.0
|
|
* Copyright (c) 2012 Eric Hynds
|
|
*
|
|
* Depends:
|
|
* - jQuery 1.8+ (http://api.jquery.com/)
|
|
* - jQuery UI 1.11 widget factory (http://api.jqueryui.com/jQuery.widget/)
|
|
*
|
|
* Optional:
|
|
* - jQuery UI effects
|
|
* - jQuery UI position utility
|
|
*
|
|
* Dual licensed under the MIT and GPL licenses:
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* http://www.gnu.org/licenses/gpl.html
|
|
*
|
|
*/
|
|
(function($, undefined) {
|
|
// Counter used to prevent collisions
|
|
var multiselectID = 0;
|
|
|
|
// The following information can be overridden via the linkInfo option.
|
|
// An $.extend is used to allow just specifying a partial object in linkInfo.
|
|
var linkDefaults = {
|
|
'open': {
|
|
'class': 'ui-multiselect-open',
|
|
'icon': '<span class="ui-icon ui-icon-triangle-1-s"></span',
|
|
'title': 'Open',
|
|
},
|
|
'close': {
|
|
'class': 'ui-multiselect-close',
|
|
'icon': '<span class="ui-icon ui-icon-circle-close"></span>',
|
|
'title': 'Close',
|
|
},
|
|
'checkAll': {
|
|
'class': 'ui-multiselect-all',
|
|
'icon': '<span class="ui-icon ui-icon-check"></span>',
|
|
'text': 'Check all',
|
|
'title': 'Check all',
|
|
},
|
|
'uncheckAll': {
|
|
'class': 'ui-multiselect-none',
|
|
'icon': '<span class="ui-icon ui-icon-closethick"></span>',
|
|
'text': 'Uncheck all',
|
|
'title': 'Uncheck all',
|
|
},
|
|
'flipAll': {
|
|
'class': 'ui-multiselect-flip',
|
|
'icon': '<span class="ui-icon ui-icon-arrowrefresh-1-w"></span>',
|
|
'text': 'Flip all',
|
|
'title': 'Flip all',
|
|
},
|
|
'collapse': {
|
|
'icon': '<span class="ui-icon ui-icon-minusthick"></span>',
|
|
'title': 'Collapse',
|
|
},
|
|
'expand': {
|
|
'icon': '<span class="ui-icon ui-icon-plusthick"></span>',
|
|
'title': 'Expand',
|
|
},
|
|
'collapseAll': {
|
|
'class': 'ui-multiselect-collapseall',
|
|
'icon': '<span class="ui-icon ui-icon-minus"></span>',
|
|
'text': 'Collapse all',
|
|
'title': 'Collapse all',
|
|
},
|
|
'expandAll': {
|
|
'class': 'ui-multiselect-expandall',
|
|
'icon': '<span class="ui-icon ui-icon-plus"></span>',
|
|
'text': 'Expand all',
|
|
'title': 'Expand all',
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Checks an option element for data-image-src
|
|
* and adds that as an image tag within the widget option
|
|
*
|
|
* @param {Node} option to pull an image from
|
|
* @param {Node} span to insert image tag into
|
|
*/
|
|
function insertImage(option, span) {
|
|
var optionImageSrc = option.getAttribute('data-image-src');
|
|
if (optionImageSrc) {
|
|
var img = document.createElement('img');
|
|
img.setAttribute('src', optionImageSrc);
|
|
span.insertBefore(img, span.firstChild);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Retrieves the font size of the document
|
|
* Defaults to 16px
|
|
* @return {string} pixel string for font size
|
|
*/
|
|
function determineFontSize() {
|
|
if (window.getComputedStyle) {
|
|
return getComputedStyle(document.body).fontSize;
|
|
}
|
|
return '16px';
|
|
}
|
|
|
|
/**
|
|
* Creates a jQuery object from the input element
|
|
* This can be a string selector, Node, or jQuery object
|
|
* @param {(object|string)} elem
|
|
* @return {object} jquery object for element
|
|
*/
|
|
function getjQueryFromElement(elem) {
|
|
if (!!elem.jquery) {
|
|
return elem;
|
|
}
|
|
if (!!elem.nodeType) {
|
|
return $(elem);
|
|
}
|
|
|
|
return $(elem).eq(0);
|
|
}
|
|
|
|
/**
|
|
* Converts dimensions specified in options to pixel values.
|
|
* Determines if specified value is a minimum, maximum or exact value.
|
|
* The value can be a number or a string with px, pts, ems, in, cm, mm, or % units.
|
|
* Number/Numeric string treated as pixel measurements
|
|
* - 30
|
|
* - '30'
|
|
* - '>30px'
|
|
* - '1.3em'
|
|
* - '20 pt'
|
|
* - '30%'
|
|
* @param {string} dimText Option text (or number) containing possibly < or >, number, and a unit.
|
|
* @param {object} $elem jQuery object (or node) to reference for % calculations.
|
|
* @param {boolean} isHeight T/F to change from using width in % calculations.
|
|
* @return {object} object containing pixels and -1/1/0 indicating min/max/exact.
|
|
*/
|
|
function parse2px(dimText, $elem, isHeight) {
|
|
if (typeof dimText !== 'string') {
|
|
return {px: dimText, minimax: 0};
|
|
}
|
|
|
|
var parts = dimText.match(/([<>])?=?\s*([.\d]+)\s*([eimnptx%]*)s?/i);
|
|
var minimax = parts[1];
|
|
var value = parseFloat(parts[2]);
|
|
var unit = parts[3].toLowerCase();
|
|
var pixels = -1;
|
|
switch (unit) {
|
|
case 'pt':
|
|
case 'in':
|
|
case 'cm':
|
|
case 'mm':
|
|
pixels = {'pt': 4.0 / 3.0, 'in': 96.0, 'cm': 96.0 / 2.54, 'mm': 96.0 / 25.4}[unit] * value;
|
|
break;
|
|
case 'em':
|
|
pixels = parseFloat(determineFontSize()) * value;
|
|
break;
|
|
case '%':
|
|
if ( !!$elem ) {
|
|
if (typeof $elem === 'string' || !$elem.jquery) {
|
|
$elem = $($elem);
|
|
}
|
|
pixels = ( !!isHeight ? $elem.parent().height() : $elem.parent().width() ) * (value / 100.0);
|
|
} // else returns -1 default value from above.
|
|
break;
|
|
default:
|
|
pixels = value;
|
|
}
|
|
// minimax: -1 => minimum value, 1 => maximum value, 0 => exact value
|
|
return {px: pixels, minimax: minimax == '>' ? -1 : ( minimax == '<' ? 1 : 0 )};
|
|
}
|
|
|
|
$.widget('ech.multiselect', {
|
|
|
|
// default options
|
|
options: {
|
|
buttonWidth: 225, // (integer | string | 'auto' | null) Sets the min/max/exact width of the button.
|
|
menuWidth: null, // (integer | string | 'auto' | null) If a number is provided, sets the exact menu width.
|
|
menuHeight: 200, // (integer | string | 'auto' | 'size') Sets the height of the menu or determines it using native select's size setting.
|
|
resizableMenu: false, // (true | false) Enables the use of jQuery UI resizable if it is loaded.
|
|
appendTo: null, // (jQuery | DOM element | selector string) If provided, this specifies what element to append the widget to in the DOM.
|
|
position: {}, // (object) A jQuery UI position object that constrains how the pop-up menu is positioned.
|
|
zIndex: null, // (integer) Overrides the z-index set for the menu container.
|
|
classes: '', // (string) Classes that you can provide to be applied to the elements making up the widget.
|
|
header: ['checkAll', 'uncheckAll'], // (false | string | array) False, custom string or array indicating which links to show in the header & in what order.
|
|
linkInfo: null, // (object | null) Supply an obect of link information to use alternative icons, icon labels, or icon title text. See linkDefaults above for object structure.
|
|
noneSelectedText: 'Select options', // (string | null) The text to show in the button where nothing is selected. Set to null to use the native select's placeholder text.
|
|
selectedText: '# of # selected', // (string) A "template" that indicates how to show the count of selections in the button. The "#'s" are replaced by the selection count & option count.
|
|
selectedList: 0, // (integer) The actual list selections will be shown in the button when the count of selections is <= than this number.
|
|
selectedListSeparator: ', ', // (string) This allows customization of the list separator. Use ',<br/>' to make the button grow vertically showing 1 selection per line.
|
|
maxSelected: null, // (integer | null) If selected count > maxSelected, then message is displayed, and new selection is undone.
|
|
openEffect: null, // (array) An array containing menu opening effect information.
|
|
closeEffect: null, // (array) An array containing menu closing effect information.
|
|
autoOpen: false, // (true | false) If true, then the menu will be opening immediately after initialization.
|
|
htmlText: [], // (array) List of 'button' &/or 'options' indicating in which parts of the widget to treat text as html.
|
|
wrapText: ['button', 'header', 'options'], // (array) List of 'button', 'header', &/or 'options' indicating in which parts of the widget to wrap text.
|
|
listbox: false, // (true | false) Omits the button and instead of a pop-up inserts the open menu directly after the native select as a list box.
|
|
addInputNames: true, // (true | false) If true, names are created for each option input in the multi-select.
|
|
disableInputsOnToggle: true, // (true | false) If true, each individual checkbox input is also disabled when the widget is disabled.
|
|
groupsSelectable: true, // (true | false) Determines if clicking on an option group heading selects all of its options.
|
|
groupsCollapsable: false, // (true | false) Determines if option groups can be collapsed.
|
|
groupColumns: false, // (true | false) Displays groups in a horizonal column layout.
|
|
groupColumnsWidth: false, // (integer) The width of each select item in the groupColumns.
|
|
},
|
|
|
|
/**
|
|
* This method determines which DOM element to append the menu to. Determination process:
|
|
* 1. Look up the jQuery object, DOM element, or string selector provided in the options.
|
|
* 2. If nothing provided in options or lookup in #1 failed, then look for .ui-front or dialog. (dialog case)
|
|
* 3. If still do not have a valid DOM element to append to, then append to the document body.
|
|
*
|
|
* NOTE: this.element and this.document are jQuery objects per the jQuery UI widget API.
|
|
* @return {object} jQuery object for the DOM element to append to.
|
|
*/
|
|
_getAppendEl: function() {
|
|
var elem = this.options.appendTo; // jQuery object or selector, DOM element or null.
|
|
|
|
if (elem) { // NOTE: The find below handles the jQuery selector case
|
|
elem = getjQueryFromElement(elem);
|
|
}
|
|
if (!elem || !elem[0]) {
|
|
elem = this.element.closest('.ui-front, dialog');
|
|
}
|
|
if (!elem.length) {
|
|
elem = $(document.body); // Position at end of body. Note that this returns a DOM element.
|
|
}
|
|
return elem;
|
|
},
|
|
|
|
/**
|
|
* Constructs the button element for the widget
|
|
* Stores the result in this.$button
|
|
* @return{object} jQuery object for button
|
|
*/
|
|
_buildButton: function() {
|
|
var wrapText = this.options.wrapText || [];
|
|
var $button = (this.$button = $(document.createElement('button')))
|
|
.addClass('ui-multiselect ui-widget ui-state-default ui-corner-all'
|
|
+ (wrapText.indexOf('button') > -1 ? '' : ' ui-multiselect-nowrap')
|
|
+ (this.options.classes ? ' ' + this.options.classes : '')
|
|
)
|
|
.attr({
|
|
'type': 'button',
|
|
'title': this.element[0].title,
|
|
'tabIndex': this.element[0].tabIndex,
|
|
'id': this.element[0].id ? this.element[0].id + '_ms' : null,
|
|
})
|
|
.prop('aria-haspopup', true)
|
|
.html(this._linkHTML('<span class="{{class}}" title="{{title}}">{{icon}}</span>', 'open'));
|
|
|
|
this.$buttonlabel = $(document.createElement('span'))
|
|
.html(this.options.noneSelectedText || this.element[0].placeholder)
|
|
.appendTo($button);
|
|
return $button;
|
|
},
|
|
|
|
/**
|
|
* Constructs HTML string for menu header
|
|
* @return {string}
|
|
*/
|
|
_buildHeaderHtml: function() {
|
|
// Header controls will contain the links & ordering specified by the header option.
|
|
// Depending on how the options are set, this may be empty or simply plain text
|
|
if (!this.options.header) {
|
|
return '';
|
|
}
|
|
if (typeof this.options.header === 'string') {
|
|
return '<li>' + this.options.header + '</li>';
|
|
}
|
|
var headerLinksHTML = '';
|
|
if (this.options.header.constructor == Array) {
|
|
for (var x = 0; x < this.options.header.length; x++) {
|
|
var linkInfoKey = this.options.header[x];
|
|
if (linkInfoKey && linkInfoKey in this.linkInfo
|
|
&& !(this.options.maxSelected && linkInfoKey === 'checkAll')
|
|
&& ['open', 'close', 'collapse', 'expand'].indexOf(linkInfoKey) === -1) {
|
|
headerLinksHTML += this._linkHTML('<li><a class="{{class}}" title="{{title}}">{{icon}}<span>{{text}}</span></a></li>', linkInfoKey);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.options.header.constructor == Object) {
|
|
var options = Object.keys(this.options.header);
|
|
for (var x = 0; x < options.length; x++) {
|
|
var displayText = options[x];
|
|
var linkInfoKey = this.options.header[displayText];
|
|
if (linkInfoKey && linkInfoKey in this.linkInfo
|
|
&& !(this.options.maxSelected && linkInfoKey === 'checkAll')
|
|
&& ['open', 'close', 'collapse', 'expand'].indexOf(linkInfoKey) === -1) {
|
|
headerLinksHTML += this._linkHTML('<li><a class="{{class}}" title="{{title}}">{{icon}}<span>'+displayText+'</span></a></li>', linkInfoKey);
|
|
}
|
|
}
|
|
}
|
|
return headerLinksHTML;
|
|
},
|
|
|
|
/**
|
|
* Performs initial widget creation
|
|
* Widget API has already set this.element and this.options for us
|
|
* All inserts into the DOM are performed at the end to limit performance impact
|
|
* - Build header links based on options and linkInfo object
|
|
* - Set UI effect speeds
|
|
* - Sets the multiselect ID using the global counter
|
|
* - Creates the button, header, and menu
|
|
* - Binds events for the widget
|
|
* - Calls refresh to populate the menu
|
|
*/
|
|
_create: function() {
|
|
var $element = this.element;
|
|
var options = this.options;
|
|
|
|
// Do an extend here to address link info missing from options.linkInfo--missing info defaults to that in linkDefaults.
|
|
this.linkInfo = $.extend(true, {}, linkDefaults, options.linkInfo || {});
|
|
|
|
// grab select width before hiding it
|
|
this._selectWidth = $element.outerWidth();
|
|
$element.hide();
|
|
|
|
// Convert null/falsely option values to empty arrays for fewer problems
|
|
options.htmlText = options.htmlText || [];
|
|
var wrapText = ( options.wrapText = options.wrapText || [] );
|
|
|
|
// default speed for effects
|
|
this.speed = $.fx.speeds._default;
|
|
this._isOpen = false;
|
|
|
|
// Create a unique namespace for events that
|
|
// the widget factory cannot unbind automatically.
|
|
this._namespaceID = this.eventNamespace;
|
|
// bump unique ID after assigning it to the widget instance
|
|
this.multiselectID = multiselectID++;
|
|
|
|
// Convert to a multi-select if it's not already
|
|
if (!$element[0].multiple) {
|
|
$element[0].multiple = true;
|
|
}
|
|
|
|
this.$headerLinkContainer = $( document.createElement('ul') )
|
|
.addClass('ui-helper-reset')
|
|
.html( this._buildHeaderHtml()
|
|
+ ( !options.listbox
|
|
? this._linkHTML('<li class="{{class}}"><a class="{{class}}" title="{{title}}">{{icon}}</a></li>', 'close')
|
|
: '' ) );
|
|
|
|
// Menu header to hold controls for the menu
|
|
var $header = ( this.$header = $( document.createElement('div') ) )
|
|
.addClass('ui-multiselect-header ui-widget-header ui-corner-all ui-helper-clearfix')
|
|
.append( this.$headerLinkContainer );
|
|
|
|
// Holds the actual check boxes for inputs
|
|
var $checkboxes = ( this.$checkboxes = $( document.createElement('ul') ) )
|
|
.addClass('ui-multiselect-checkboxes ui-helper-reset' + (wrapText.indexOf('options') > -1 ? '' : ' ui-multiselect-nowrap'));
|
|
|
|
// This is the menu container that will hold all the options added via refresh().
|
|
var $menu = ( this.$menu = $( document.createElement('div') ) )
|
|
.addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all'
|
|
+ ($element[0].multiple ? '' : ' ui-multiselect-single')
|
|
+ (!options.listbox ? '' : ' ui-multiselect-listbox')
|
|
+ (this.options.classes ? ' ' + this.options.classes : ''))
|
|
.append($header, $checkboxes);
|
|
|
|
if (!options.listbox) {
|
|
var $button = this._buildButton();
|
|
$button.insertAfter($element);
|
|
var $appendEl = this._getAppendEl();
|
|
$appendEl.append($menu);
|
|
// Set z-index of menu appropriately when it is not appended to a dialog and no z-index specified.
|
|
if ( !options.zIndex && !$appendEl.hasClass('ui-front') ) {
|
|
var $uiFront = this.element.closest('.ui-front, dialog');
|
|
options.zIndex = Math.max( $uiFront && parseInt($uiFront.css('z-index'), 10) + 1 || 0,
|
|
$appendEl && parseInt($appendEl.css('z-index'), 10) + 1 || 0);
|
|
}
|
|
|
|
if (options.zIndex) {
|
|
$menu.css('z-index', options.zIndex);
|
|
}
|
|
// Use $.extend below since the "of" position property may not be able to be supplied via the option.
|
|
options.position = $.extend({'my': 'left top', 'at': 'left bottom', 'of': $button}, options.position || {});
|
|
} else {
|
|
$menu.insertAfter($element); // No button
|
|
}
|
|
|
|
this._bindEvents();
|
|
|
|
// build menu
|
|
this.refresh(true);
|
|
},
|
|
|
|
/**
|
|
* Helper function used in _create()
|
|
* @param {string} linkTemplate HTML link template string
|
|
* @param {string} linkID key string to look up in linkInfo object.
|
|
* @return {object} link HTML
|
|
*/
|
|
_linkHTML: function(linkTemplate, linkID) {
|
|
var self = this;
|
|
return linkTemplate.replace(/{{(.*?)}}/ig, function(m, p1) {
|
|
return self.linkInfo[linkID][p1];
|
|
} )
|
|
.replace('<span></span>', '');
|
|
},
|
|
|
|
/**
|
|
* https://api.jqueryui.com/jquery.widget/#method-_init
|
|
* Performed every time the widget is instantiated, or called with only an options object
|
|
* - Set visibility of header links
|
|
* - Auto open menu if appropriate
|
|
* - Set disabled status
|
|
*/
|
|
_init: function() {
|
|
var elSelect = this.element[0];
|
|
|
|
if (this.options.header !== false) {
|
|
this.$headerLinkContainer
|
|
.find('.ui-multiselect-all, .ui-multiselect-none, .ui-multiselect-flip')
|
|
.toggle( !!elSelect.multiple );
|
|
} else {
|
|
this.$header.hide();
|
|
}
|
|
|
|
if (this.options.autoOpen && !this.options.listbox) {
|
|
this.open();
|
|
}
|
|
|
|
if (elSelect.disabled) {
|
|
this.disable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Builds an option item for the menu. (Mostly plain JS for speed.)
|
|
* <li>
|
|
* <label>
|
|
* <input /> checkbox or radio depending on single/multiple select
|
|
* <span /> option text
|
|
* </label>
|
|
* </li>
|
|
* @param {node} option Option from select to be added to menu
|
|
* @return {object} jQuery object for menu option
|
|
*/
|
|
_makeOption: function(option) {
|
|
var elSelect = this.element.get(0);
|
|
// Determine unique ID for the label & option tags
|
|
var id = elSelect.id || this.multiselectID;
|
|
var inputID = 'ui-multiselect-' + this.multiselectID + '-' + (option.id || id + '-option-' + this.inputIdCounter++);
|
|
// Pick up the select type from the underlying element
|
|
var isMultiple = elSelect.multiple;
|
|
var isDisabled = option.disabled;
|
|
|
|
if (option.selected || option.outerHTML.indexOf('selected=') > 0) {
|
|
var isSelected = true;
|
|
} else {
|
|
var isSelected = false;
|
|
}
|
|
|
|
var input = document.createElement('input');
|
|
var inputAttribs = {
|
|
'type': isMultiple ? 'checkbox' : 'radio',
|
|
'id': inputID,
|
|
'title': option.title || null,
|
|
'value': option.value,
|
|
'name': this.options.addInputNames ? 'multiselect_' + id : null,
|
|
'checked': isSelected ? 'checked' : null,
|
|
'aria-selected': isSelected ? 'true' : null,
|
|
'disabled': isDisabled ? 'disabled' : null,
|
|
'aria-disabled': isDisabled ? 'true' : null,
|
|
};
|
|
|
|
for (var name in inputAttribs) {
|
|
if (inputAttribs[name] !== null) {
|
|
input.setAttribute(name, inputAttribs[name]);
|
|
}
|
|
}
|
|
// Clone data attributes
|
|
var optionAttribs = option.attributes;
|
|
var len = optionAttribs.length;
|
|
for (var x = 0; x < len; x++) {
|
|
var attribute = optionAttribs[x];
|
|
if ( /^data\-.+/.test(attribute.name) ) {
|
|
input.setAttribute(attribute.name, attribute.value);
|
|
}
|
|
}
|
|
|
|
// Option text or html
|
|
var span = document.createElement('span');
|
|
if (this.htmlAllowedFor('options')) {
|
|
span.innerHTML = option.innerHTML;
|
|
} else {
|
|
span.textContent = option.textContent;
|
|
}
|
|
|
|
// Icon images for each item.
|
|
insertImage(option, span);
|
|
|
|
var label = document.createElement('label');
|
|
label.setAttribute('for', inputID);
|
|
if (option.title) {
|
|
label.setAttribute('title', option.title);
|
|
}
|
|
label.className += (isDisabled ? ' ui-state-disabled' : '')
|
|
+ (isSelected && !isMultiple ? ' ui-state-active' : '')
|
|
+ ' ui-corner-all';
|
|
label.appendChild(input);
|
|
label.appendChild(span);
|
|
|
|
var item = document.createElement('li');
|
|
item.className = (isDisabled ? 'ui-multiselect-disabled ' : '')
|
|
+ (this.options.groupColumns ? ' ui-multiselect-columns' : '')
|
|
+ (option.className || '');
|
|
|
|
if (this.options.groupColumnsWidth) {
|
|
item.style.width = this.options.groupColumnsWidth+'px';
|
|
}
|
|
|
|
item.appendChild(label);
|
|
|
|
return item;
|
|
},
|
|
|
|
/**
|
|
* Processes option and optgroup tags from underlying select to construct the menu's option list
|
|
* If groupsCollapsable option is set, adds collapse/expand buttons for each option group.
|
|
* This replaces the current contents of this.$checkboxes
|
|
* Defers to _makeOption to actually build the options
|
|
* Resets the input ID counter
|
|
*/
|
|
_buildOptionList: function() {
|
|
var self = this;
|
|
var list = [];
|
|
|
|
this.inputIdCounter = 0;
|
|
|
|
this.element.children().each( function() {
|
|
var elem = this;
|
|
|
|
if (elem.tagName.toUpperCase() === 'OPTGROUP') {
|
|
var options = [];
|
|
|
|
$(elem).children().each( function() {
|
|
options.push(self._makeOption(this));
|
|
});
|
|
|
|
// Build the list section for this optgroup, complete w/ option inputs...
|
|
var $collapseButton = !!self.options.groupsCollapsable
|
|
? $( document.createElement('button') )
|
|
.attr({'title': self.linkInfo.collapse.title, 'type': 'button'})
|
|
.addClass('ui-state-default ui-corner-all ui-multiselect-collapser')
|
|
.html(self.linkInfo.collapse.icon)
|
|
: null;
|
|
var $optGroupLabel = $( document.createElement('a') )
|
|
.addClass('ui-multiselect-grouplabel'
|
|
+ (self.options.groupsSelectable ? ' ui-multiselect-selectable' : ''))
|
|
.html( elem.getAttribute('label') );
|
|
var $optionGroup = $( document.createElement('ul') ).append(options);
|
|
var $optGroupItem = $( document.createElement('li') )
|
|
.addClass('ui-multiselect-optgroup'
|
|
+ (self.options.groupColumns ? ' ui-multiselect-columns' : '')
|
|
+ (elem.className ? ' ' + elem.className : ''))
|
|
.append($collapseButton, $optGroupLabel, $optionGroup);
|
|
|
|
if (self.options.groupColumnsWidth) {
|
|
$optGroupItem.css('width', self.options.groupColumnsWidth+'px');
|
|
}
|
|
|
|
list.push($optGroupItem);
|
|
} else {
|
|
list.push(self._makeOption(elem));
|
|
}
|
|
});
|
|
|
|
this.$checkboxes.empty().append(list);
|
|
},
|
|
|
|
/**
|
|
* Refreshes the widget's menu
|
|
* - Refresh header links if required
|
|
* - Rebuild option list
|
|
* - Update the cached values for height, width, and cached elements
|
|
* - If listbox option is set, shows the menu and sets menu size.
|
|
* @param {boolean} init If false, broadcasts a refresh event
|
|
*/
|
|
refresh: function(init) {
|
|
var $element = this.element;
|
|
|
|
// update header link container visibility if needed
|
|
if (this.options.header !== false) {
|
|
this.$headerLinkContainer
|
|
.find('.ui-multiselect-all, .ui-multiselect-none, .ui-multiselect-flip')
|
|
.toggle( !!$element[0].multiple );
|
|
}
|
|
|
|
this._buildOptionList(); // Clear and rebuild the menu.
|
|
this._updateCache(); // cache some more useful elements
|
|
|
|
if (!this.options.listbox) {
|
|
this._setButtonWidth();
|
|
this.update(true);
|
|
} else {
|
|
if (!this._isOpen) {
|
|
this.$menu.show();
|
|
this._isOpen = true;
|
|
}
|
|
this._setMenuWidth();
|
|
this._setMenuHeight();
|
|
}
|
|
|
|
// broadcast refresh event; useful for widgets
|
|
if (!init) {
|
|
this._trigger('refresh');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates cached values used elsewhere in the widget
|
|
* Causes the filter to also update its cache if the filter is loaded
|
|
*/
|
|
_updateCache: function() {
|
|
// Invalidate cached dimensions to force recalcs.
|
|
this._savedButtonWidth = 0;
|
|
this._savedMenuWidth = 0;
|
|
this._savedMenuHeight = 0;
|
|
|
|
// Recreate important cached jQuery objects
|
|
this.$header = this.$menu.children('.ui-multiselect-header');
|
|
this.$checkboxes = this.$menu.children('.ui-multiselect-checkboxes');
|
|
|
|
// Update saved labels and inputs
|
|
this.$labels = this.$menu.find('label:not(.ui-multiselect-filter-label)');
|
|
this.$inputs = this.$labels.children('input');
|
|
|
|
// If the filter widget is in use, then also update its cache.
|
|
if ( this.element.is(':data("ech-multiselectfilter")') ) {
|
|
this.element.data('ech-multiselectfilter').updateCache(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates the widget checkboxes' checked states
|
|
* from the native select options' selected states.
|
|
* @param {boolean} skipDisabled If true, disabled options in either are skipped.
|
|
*/
|
|
resync: function(skipDisabled) {
|
|
var $inputs = this.$inputs;
|
|
var $options = this.element.find('option');
|
|
|
|
if ($inputs.length === $options.length) {
|
|
var inputValues = {};
|
|
$inputs.not(!!skipDisabled ? ':disabled' : '').each( function() {
|
|
inputValues[this.value] = this;
|
|
});
|
|
$options.not(!!skipDisabled ? ':disabled' : '').each( function() {
|
|
if (this.value in inputValues) {
|
|
inputValues[this.value].checked = this.selected;
|
|
}
|
|
});
|
|
this._trigger('resync');
|
|
this.update();
|
|
} else {
|
|
this.refresh();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates the button text
|
|
* If selectedText option is a function, simply call it
|
|
* The selectedList option determines how many options to display
|
|
* before switching to # of # selected
|
|
* This does not apply in listbox mode
|
|
* @param {boolean} isDefault true if value is default value for the button
|
|
*/
|
|
update: function(isDefault) {
|
|
if (!!this.options.listbox) {
|
|
return;
|
|
}
|
|
var options = this.options;
|
|
var selectedList = options.selectedList;
|
|
var selectedText = options.selectedText;
|
|
var $inputs = this.$inputs;
|
|
var inputCount = $inputs.length;
|
|
var $checked = $inputs.filter(':checked');
|
|
var numChecked = $checked.length;
|
|
var value;
|
|
|
|
if (numChecked) {
|
|
if (typeof selectedText === 'function') {
|
|
value = selectedText.call(this, numChecked, inputCount, $checked.get());
|
|
} else if (/\d/.test(selectedList) && selectedList > 0 && numChecked <= selectedList) {
|
|
value = $checked.map(function() {
|
|
return $(this).next().text().replace(/\n$/, '');
|
|
})
|
|
.get().join(options.selectedListSeparator);
|
|
} else {
|
|
value = selectedText.replace('#', numChecked).replace('#', inputCount);
|
|
}
|
|
} else {
|
|
value = options.noneSelectedText;
|
|
}
|
|
|
|
this._setButtonValue(value, isDefault);
|
|
|
|
if ( options.wrapText.indexOf('button') === -1 ) {
|
|
this._setButtonWidth(true);
|
|
}
|
|
|
|
// Check if the menu needs to be repositioned due to button height changing from adding/removing selections.
|
|
if (this._isOpen && this._savedButtonHeight != this.$button.outerHeight(false)) {
|
|
this.position();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the button text
|
|
* @param {string} value content to be assigned to the button
|
|
* @param {boolean} isDefault true if value is default value for the button
|
|
*/
|
|
_setButtonValue: function(value, isDefault) {
|
|
this.$buttonlabel[this.htmlAllowedFor('button') ? 'html' : 'text'](value);
|
|
|
|
if (!!isDefault) {
|
|
this.$button[0].defaultValue = value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets button events for mouse and keyboard interaction
|
|
* Called by _bindEvents
|
|
*/
|
|
_bindButtonEvents: function() {
|
|
var self = this;
|
|
var $button = this.$button;
|
|
/**
|
|
* @return {Boolean} always false
|
|
*/
|
|
function buttonClickHandler() {
|
|
self[self._isOpen ? 'close' : 'open']();
|
|
return false;
|
|
}
|
|
|
|
$button
|
|
.on({
|
|
click: buttonClickHandler,
|
|
keydown: $.proxy(self._handleButtonKeyboardNav, self),
|
|
mouseenter: function() {
|
|
if (!this.classList.contains('ui-state-disabled')) {
|
|
this.classList.add('ui-state-hover');
|
|
}
|
|
},
|
|
mouseleave: function() {
|
|
this.classList.remove('ui-state-hover');
|
|
},
|
|
focus: function() {
|
|
if (!this.classList.contains('ui-state-disabled')) {
|
|
this.classList.add('ui-state-focus');
|
|
}
|
|
},
|
|
blur: function() {
|
|
this.classList.remove('ui-state-focus');
|
|
},
|
|
})
|
|
// webkit doesn't like it when you click on the span :(
|
|
.find('span')
|
|
.on('click.multiselect,click', buttonClickHandler);
|
|
},
|
|
|
|
// Handle keyboard events for the multiselect button.
|
|
_handleButtonKeyboardNav: function(e) {
|
|
// Change selection via up/down on a closed single select.
|
|
if (!this._isOpen && !this.element[0].multiple && (e.which === 38 || e.which === 40) ) {
|
|
var $inputs = this.$inputs;
|
|
var index = $inputs.index( $inputs.filter(':checked') );
|
|
if (e.which === 38 && index) {
|
|
$inputs.eq(index - 1).trigger('click');
|
|
} else if (e.which === 40 && index < $inputs.length - 1) {
|
|
$inputs.eq(index + 1).trigger('click');
|
|
}
|
|
return;
|
|
}
|
|
|
|
switch (e.which) {
|
|
case 27: // esc
|
|
case 37: // left
|
|
case 38: // up
|
|
this.close();
|
|
break;
|
|
case 40: // down
|
|
case 39: // right
|
|
this.open();
|
|
break;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Bind events to the checkboxes for options and option groups
|
|
* Must be bound to the checkboxes container.
|
|
* This method scopes actions to filtered options
|
|
* Called by _bindEvents
|
|
*/
|
|
_bindCheckboxEvents: function() {
|
|
var self = this;
|
|
|
|
// optgroup label toggle support
|
|
self.$checkboxes.on('click.multiselect', '.ui-multiselect-grouplabel', function(e) {
|
|
e.preventDefault();
|
|
|
|
if (!self.options.groupsSelectable) {
|
|
return false;
|
|
}
|
|
|
|
var $this = $(this);
|
|
var $inputs = $this.next('ul').children(':not(.ui-multiselect-excluded)').find('input').not(':disabled');
|
|
var nodes = $inputs.get();
|
|
var label = this.textContent;
|
|
|
|
// trigger before callback and bail if the return is false
|
|
if (self._trigger('beforeoptgrouptoggle', e, {inputs: nodes, label: label}) === false) {
|
|
return;
|
|
}
|
|
|
|
// if maxSelected is in use, cannot exceed it
|
|
var maxSelected = self.options.maxSelected;
|
|
if (maxSelected && (self.$inputs.filter(':checked').length + $inputs.length > maxSelected) ) {
|
|
return;
|
|
}
|
|
|
|
// toggle inputs
|
|
self._toggleChecked(
|
|
$inputs.filter(':checked').length !== $inputs.length,
|
|
$inputs
|
|
);
|
|
|
|
self._trigger('optgrouptoggle', e, {
|
|
inputs: nodes,
|
|
label: label,
|
|
checked: nodes.length ? nodes[0].checked : null,
|
|
});
|
|
})
|
|
// collapse button
|
|
.on('click.multiselect', '.ui-multiselect-collapser', function(e) {
|
|
var $this = $(this);
|
|
var $parent = $this.parent();
|
|
var optgroupLabel = $parent.find('.ui-multiselect-grouplabel').first().html();
|
|
var linkInfo = self.linkInfo;
|
|
var collapsedClass = 'ui-multiselect-collapsed';
|
|
var isCollapsed = $parent.hasClass(collapsedClass);
|
|
|
|
if (self._trigger('beforecollapsetoggle', e, {label: optgroupLabel, collapsed: isCollapsed}) === false) {
|
|
return;
|
|
}
|
|
$parent.toggleClass(collapsedClass);
|
|
|
|
$this.attr('title', isCollapsed ? linkInfo.collapse.title : linkInfo.expand.title)
|
|
.html(isCollapsed ? linkInfo.collapse.icon : linkInfo.expand.icon );
|
|
|
|
if (!self.options.listbox) {
|
|
self._setMenuHeight(true);
|
|
}
|
|
|
|
self._trigger('collapsetoggle', e, {label: optgroupLabel, collapsed: !isCollapsed});
|
|
})
|
|
// collapse button
|
|
.on('mouseenter.multiselect', '.ui-multiselect-collapser', function(e) {
|
|
this.classList.add('ui-state-hover');
|
|
})
|
|
// collapse button
|
|
.on('mouseleave.multiselect', '.ui-multiselect-collapser', function(e) {
|
|
this.classList.remove('ui-state-hover');
|
|
})
|
|
// option label
|
|
.on('mouseenter.multiselect', 'label', function(e, param) {
|
|
if (!this.classList.contains('ui-state-disabled')) {
|
|
var checkboxes = self.$checkboxes[0];
|
|
var scrollLeft = checkboxes.scrollLeft;
|
|
var scrollTop = checkboxes.scrollTop;
|
|
var scrollX = window.pageXOffset;
|
|
var scrollY = window.pageYOffset;
|
|
|
|
self.$labels.removeClass('ui-state-hover');
|
|
$(this).addClass('ui-state-hover').find('input').focus();
|
|
|
|
// Restore scroll positions if altered by setting input focus
|
|
if ( !param || !param.allowScroll ) {
|
|
checkboxes.scrollLeft = scrollLeft;
|
|
checkboxes.scrollTop = scrollTop;
|
|
window.scrollTo(scrollX, scrollY);
|
|
}
|
|
}
|
|
})
|
|
// Keyboard navigation of the menu
|
|
.on('keydown.multiselect', 'label', function(e) {
|
|
// Don't capture function keys or 'r'
|
|
if (e.which === 82) {
|
|
return; // r
|
|
}
|
|
|
|
if (e.which > 111 && e.which < 124) {
|
|
return; // Function keys.
|
|
}
|
|
|
|
e.preventDefault();
|
|
switch (e.which) {
|
|
case 9: // tab
|
|
if (e.shiftKey) {
|
|
self.$menu.find('.ui-state-hover').removeClass('ui-state-hover');
|
|
self.$header.find('li').last().find('a').focus();
|
|
} else {
|
|
self.close();
|
|
}
|
|
break;
|
|
case 27: // esc
|
|
self.close();
|
|
break;
|
|
case 38: // up
|
|
case 40: // down
|
|
case 37: // left
|
|
case 39: // right
|
|
self._traverse(e.which, this);
|
|
break;
|
|
case 13: // enter
|
|
case 32: // space
|
|
$(this).find('input')[0].click();
|
|
break;
|
|
case 65: // Alt-A
|
|
if (e.altKey) {
|
|
self.checkAll();
|
|
}
|
|
break;
|
|
case 70: // Alt-F
|
|
if (e.altKey) {
|
|
self.flipAll();
|
|
}
|
|
break;
|
|
case 85: // Alt-U
|
|
if (e.altKey) {
|
|
self.uncheckAll();
|
|
}
|
|
break;
|
|
}
|
|
})
|
|
.on('click.multiselect', 'input', function(e) {
|
|
// Reference to this checkbox / radio input
|
|
var input = this;
|
|
var $input = $(input);
|
|
var val = input.value;
|
|
var checked = input.checked;
|
|
// self is cached from outer scope above
|
|
var $element = self.element;
|
|
var $tags = $element.find('option');
|
|
var isMultiple = $element[0].multiple;
|
|
var $allInputs = self.$inputs;
|
|
var numChecked = $allInputs.filter(':checked').length;
|
|
var options = self.options;
|
|
var textFxn = self.htmlAllowedFor('options') ? 'html' : 'text';
|
|
var optionText = $input.parent().find('span')[textFxn]();
|
|
var maxSelected = options.maxSelected;
|
|
|
|
// bail if this input is disabled or the event is cancelled
|
|
if (input.disabled || self._trigger('click', e, {value: val, text: optionText, checked: checked}) === false) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (maxSelected && checked && numChecked > maxSelected) {
|
|
if (self._trigger('maxselected', e, {labels: self.$labels, inputs: $allInputs}) !== false) {
|
|
self.buttonMessage('<center><b>LIMIT OF ' + (numChecked - 1) + ' REACHED!</b></center>');
|
|
}
|
|
input.checked = false;
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
// make sure the input has focus. otherwise, the esc key
|
|
// won't close the menu after clicking an item.
|
|
input.focus();
|
|
|
|
// toggle aria state
|
|
$input.prop('aria-selected', checked);
|
|
|
|
// change state on the original option tags
|
|
$tags.each(function() {
|
|
this.selected = (this.value === val ? checked : isMultiple && this.selected);
|
|
});
|
|
|
|
// some additional single select-specific logic
|
|
if (!isMultiple) {
|
|
self.$labels.removeClass('ui-state-active');
|
|
$input.closest('label').toggleClass('ui-state-active', checked);
|
|
|
|
// close menu
|
|
self.close();
|
|
}
|
|
|
|
// fire change on the select box
|
|
$element.trigger('change');
|
|
|
|
// setTimeout is to fix multiselect issue #14 and #47. caused by jQuery issue #3827
|
|
// http://bugs.jquery.com/ticket/3827
|
|
setTimeout($.proxy(self.update, self), 10);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Binds keyboard and mouse events to the header
|
|
* Called by _bindEvents
|
|
*/
|
|
_bindHeaderEvents: function() {
|
|
var self = this;
|
|
|
|
// header links
|
|
self.$header
|
|
.on('click.multiselect', 'a', function(e) {
|
|
var headerLinks = {
|
|
'ui-multiselect-close': 'close',
|
|
'ui-multiselect-all': 'checkAll',
|
|
'ui-multiselect-none': 'uncheckAll',
|
|
'ui-multiselect-flip': 'flipAll',
|
|
'ui-multiselect-collapseall': 'collapseAll',
|
|
'ui-multiselect-expandall': 'expandAll',
|
|
};
|
|
for (hdgClass in headerLinks) {
|
|
if ( this.classList.contains(hdgClass) ) {
|
|
// headerLinks[hdgClass] is the click handler name
|
|
self[headerLinks[hdgClass]]();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
}
|
|
}).
|
|
on('keydown.multiselect', 'a', function(e) {
|
|
switch (e.which) {
|
|
case 27:
|
|
self.close();
|
|
break;
|
|
case 9: // tab
|
|
var $target = $(e.target);
|
|
if ((e.shiftKey
|
|
&& !$target.parent().prev().length
|
|
&& !self.$header.find('.ui-multiselect-filter').length)
|
|
|| (!$target.parent().next().length && !self.$labels.length && !e.shiftKey)) {
|
|
self.close();
|
|
e.preventDefault();
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Allows the widget to be resized if the option is set and resizable is
|
|
* included in jQuery UI
|
|
*/
|
|
_setResizable: function() {
|
|
if (!this.options.resizableMenu || !('resizable' in $.ui)) {
|
|
return;
|
|
}
|
|
this.$menu.show();
|
|
this.$menu.resizable({
|
|
containment: 'parent',
|
|
handles: 's',
|
|
helper: 'ui-multiselect-resize',
|
|
stop: function(e, ui) {
|
|
// Force consistent width
|
|
ui.size.width = ui.originalSize.width;
|
|
$(this).outerWidth(ui.originalSize.width);
|
|
if (this._trigger('resize', e, ui) !== false) {
|
|
this.options.menuHeight = ui.size.height;
|
|
}
|
|
this._setMenuHeight(true);
|
|
},
|
|
});
|
|
this.$menu.hide();
|
|
},
|
|
|
|
/**
|
|
* Binds all events used in the widget
|
|
* This calls the menu, button, and header event binding methods
|
|
*/
|
|
_bindEvents: function() {
|
|
if (!this.options.listbox) {
|
|
this._bindButtonEvents();
|
|
}
|
|
this._bindHeaderEvents();
|
|
this._bindCheckboxEvents();
|
|
this._setResizable();
|
|
|
|
// Close each widget when clicking on any other element/anywhere else on the page,
|
|
// another widget instance, or when scrolling w/ the mouse wheel outside the menu button.
|
|
this.document.on('mousedown' + this._namespaceID
|
|
+ ' wheel' + this._namespaceID
|
|
+ ' mousewheel' + this._namespaceID, function(event) {
|
|
var target = event.target;
|
|
|
|
if ( this._isOpen
|
|
&& (!!this.$button ? target !== this.$button[0] && !$.contains(this.$button[0], target) : true)
|
|
&& target !== this.$menu[0] && !$.contains(this.$menu[0], target) ) {
|
|
this.close();
|
|
}
|
|
}.bind(this));
|
|
|
|
// deal with form resets. the problem here is that buttons aren't
|
|
// restored to their defaultValue prop on form reset, and the reset
|
|
// handler fires before the form is actually reset. delaying it a bit
|
|
// gives the form inputs time to clear.
|
|
$(this.element[0].form).on('reset' + this._namespaceID, function() {
|
|
setTimeout(this.refresh.bind(this), 10);
|
|
}.bind(this));
|
|
},
|
|
|
|
/**
|
|
* Sets and caches the width of the button
|
|
* Can set a minimum value if less than calculated width of native select.
|
|
* @param {boolean} recalc true if cached width needs to be re-calculated
|
|
*/
|
|
_setButtonWidth: function(recalc) {
|
|
if (this._savedButtonWidth && !recalc) {
|
|
return;
|
|
}
|
|
|
|
// this._selectWidth set in _create() for native select element before hiding it.
|
|
var width = this._selectWidth || this._getBCRWidth( this.element );
|
|
var buttonWidth = this.options.buttonWidth || '';
|
|
if (/\d/.test(buttonWidth)) {
|
|
var parsed = parse2px(buttonWidth, this.element);
|
|
var pixels = parsed.px;
|
|
var minimax = parsed.minimax;
|
|
width = minimax < 0 ? Math.max(width, pixels) : ( minimax > 0 ? Math.min(width, pixels) : pixels );
|
|
} else { // keywords
|
|
buttonWidth = buttonWidth.toLowerCase();
|
|
}
|
|
|
|
// The button width is set to auto in the CSS,
|
|
// so we only need to change it for a specific width.
|
|
if (buttonWidth !== 'auto') {
|
|
this.$button.outerWidth(width);
|
|
}
|
|
this._savedButtonWidth = width;
|
|
},
|
|
|
|
/**
|
|
* Sets and caches the width of the menu
|
|
* Will use the width in options if provided, otherwise matches the button
|
|
* @param {boolean} recalc true if cached width needs to be re-calculated
|
|
*/
|
|
_setMenuWidth: function(recalc) {
|
|
if (this._savedMenuWidth && !recalc) {
|
|
return;
|
|
}
|
|
|
|
// Note that it is assumed that the button width was set prior.
|
|
var width = !!this.options.listbox ? this._selectWidth : (this._savedButtonWidth || this._getBCRWidth( this.$button ));
|
|
|
|
var menuWidth = this.options.menuWidth || '';
|
|
if ( /\d/.test(menuWidth) ) {
|
|
var parsed = parse2px(menuWidth, this.element);
|
|
var pixels = parsed.px;
|
|
var minimax = parsed.minimax;
|
|
width = minimax < 0 ? Math.max(width, pixels) : ( minimax > 0 ? Math.min(width, pixels) : pixels );
|
|
} else { // keywords
|
|
menuWidth = menuWidth.toLowerCase();
|
|
}
|
|
|
|
// Note that the menu width defaults to the button width if menuWidth option is null or blank.
|
|
if (menuWidth !== 'auto') {
|
|
this.$menu.outerWidth(width);
|
|
this._savedMenuWidth = width;
|
|
return;
|
|
}
|
|
|
|
// Auto width determination: get intrinsic / "shrink-wrapped" outer widths w/ margins by applying floats.
|
|
// cbWidth includes the width of the vertical scrollbar & ui-hover-state width increase per the applied CSS.
|
|
// Note that a correction is made for jQuery floating point round-off errors below.
|
|
this.$menu.addClass('ui-multiselect-measure');
|
|
var headerWidth = this.$header.outerWidth(true) + this._jqWidthFix(this.$header);
|
|
var cbWidth = this.$checkboxes.outerWidth(true) + this._jqWidthFix(this.$checkboxes);
|
|
this.$menu.removeClass('ui-multiselect-measure');
|
|
|
|
var contentWidth = Math.max(this.options.wrapText.indexOf('header') > -1 ? 0 : headerWidth, cbWidth);
|
|
|
|
// Use $().width() to set menu width not including padding or border.
|
|
this.$menu.width(contentWidth);
|
|
// Save width including padding and border (no margins) for consistency w/ normal width setting.
|
|
this._savedMenuWidth = this.$menu.outerWidth(false);
|
|
},
|
|
|
|
/**
|
|
* Sets and caches the height of the menu
|
|
* Will use the height provided in the options unless using the select size
|
|
* option or the option exceeds the available height for the menu
|
|
* Will set a scrollbar if the options can't all be visible at once
|
|
* @param {boolean} recalc true if cached value needs to be re-calculated
|
|
*/
|
|
_setMenuHeight: function(recalc) {
|
|
var self = this;
|
|
if (self._savedMenuHeight && !recalc) {
|
|
return;
|
|
}
|
|
|
|
var maxHeight = $(window).height();
|
|
var optionHeight = self.options.menuHeight || '';
|
|
var useSelectSize = false;
|
|
var elSelectSize = 4;
|
|
|
|
if ( /\d/.test(optionHeight) ) {
|
|
// Deduct height of header & border/padding to find height available for checkboxes.
|
|
var $header = self.$header.filter(':visible');
|
|
var headerHeight = $header.outerHeight(true);
|
|
var menuBorderPaddingHt = this.$menu.outerHeight(false) - this.$menu.height();
|
|
var cbBorderPaddingHt = this.$checkboxes.outerHeight(false) - this.$checkboxes.height();
|
|
|
|
optionHeight = parse2px(optionHeight, self.element, true).px;
|
|
maxHeight = Math.min(optionHeight, maxHeight) - headerHeight - menuBorderPaddingHt - cbBorderPaddingHt;
|
|
} else if (optionHeight.toLowerCase() === 'size') {
|
|
// Overall height based on native select 'size' attribute
|
|
useSelectSize = true;
|
|
// Retrieves native select's size attribute or defaults to 4 (like native select).
|
|
elSelectSize = self.element[0].size || elSelectSize;
|
|
}
|
|
|
|
var overflowSetting = 'hidden';
|
|
var itemCount = 0;
|
|
var hoverAdjust = 4; // Adjustment for hover height included here.
|
|
var ulHeight = hoverAdjust;
|
|
var ulTop = -1;
|
|
|
|
// The following determines the how many items are visible per the menuHeight option.
|
|
// If the visible height calculation exceeds the calculated maximum height or if the number
|
|
// of item heights summed equal or exceed the native select size attribute, the loop is aborted.
|
|
// If the loop is aborted, this means that the menu must be scrolled to see all the items.
|
|
self.$checkboxes.find('li:not(.ui-multiselect-optgroup),a').filter(':visible').each( function() {
|
|
if (ulTop < 0) {
|
|
ulTop = this.offsetTop;
|
|
}
|
|
ulHeight = this.offsetTop + this.offsetHeight - ulTop + hoverAdjust;
|
|
if (useSelectSize && ++itemCount >= elSelectSize || ulHeight > maxHeight) {
|
|
overflowSetting = 'auto';
|
|
if (!useSelectSize) {
|
|
ulHeight = maxHeight;
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// We actually only set the height of the checkboxes as the outer menu container is height:auto.
|
|
// The _savedMenuHeight value below can be compared to optionHeight as an accuracy check.
|
|
self.$checkboxes.css('overflow', overflowSetting).height(ulHeight);
|
|
self._savedMenuHeight = this.$menu.outerHeight(false);
|
|
},
|
|
|
|
/**
|
|
* Calculate accurate outerWidth(false) using getBoundingClientRect()
|
|
* Note that this presumes that the element is visible in the layout.
|
|
* @param {node} elem DOM node or jQuery equivalent to get width for.
|
|
* @return {float} Decimal floating point value for the width.
|
|
*/
|
|
_getBCRWidth: function(elem) {
|
|
if (!elem || !!elem.jquery && !elem[0]) {
|
|
return null;
|
|
}
|
|
var domRect = !!elem.jquery ? elem[0].getBoundingClientRect() : elem.getBoundingClientRect();
|
|
return domRect.right - domRect.left;
|
|
},
|
|
|
|
/**
|
|
* Calculate jQuery width correction factor to fix floating point round-off errors.
|
|
* Note that this presumes that the element is visible in the layout.
|
|
* @param {node} elem node or jQuery equivalent to get width for.
|
|
* @return {float} Correction value for the width--typically a decimal < 1.0
|
|
*/
|
|
_jqWidthFix: function(elem) {
|
|
if (!elem || !!elem.jquery && !elem[0]) {
|
|
return null;
|
|
}
|
|
return !!elem.jquery
|
|
? this._getBCRWidth(elem[0]) - elem.outerWidth(false)
|
|
: this._getBCRWidth(elem) - $(elem).outerWidth(false);
|
|
},
|
|
|
|
/**
|
|
* Moves focus up or down the options list
|
|
* @param {number} which key that triggered the traversal
|
|
* @param {node} start element event was triggered from
|
|
*/
|
|
_traverse: function(which, start) {
|
|
var $start = $(start);
|
|
var moveToLast = which === 38 || which === 37;
|
|
|
|
// select the first li that isn't an optgroup label / disabled
|
|
var $next = $start.parent()[moveToLast ? 'prevAll' : 'nextAll']('li:not(:disabled, .ui-multiselect-optgroup):visible').first();
|
|
// we might have to jump to the next/previous option group
|
|
if (!$next.length) {
|
|
$next = $start.parents('.ui-multiselect-optgroup')[moveToLast ? 'prev' : 'next']();
|
|
}
|
|
|
|
// if at the first/last element
|
|
if (!$next.length) {
|
|
var $container = this.$checkboxes;
|
|
|
|
// move to the first/last
|
|
$container.find('label').filter(':visible')[moveToLast ? 'last' : 'first']().trigger('mouseover', {allowScroll: true});
|
|
|
|
// set scroll position
|
|
$container.scrollTop(moveToLast ? $container.height() : 0);
|
|
} else {
|
|
$next.find('label').filter(':visible')[moveToLast ? 'last' : 'first']().trigger('mouseover', {allowScroll: true});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Internal function to toggle checked property and related attributes on a checkbox
|
|
* The context of this function should be a checkbox; do not proxy it.
|
|
* @param {string} prop Property being toggled on the checkbox
|
|
* @param {string} flag Flag to set for the property
|
|
* @return {function} function for toggling checked state
|
|
*/
|
|
_toggleState: function(prop, flag) {
|
|
return function() {
|
|
var state = (flag === '!') ? !this[prop] : flag;
|
|
|
|
if ( !this.disabled ) {
|
|
this[prop] = state;
|
|
}
|
|
|
|
if (state) {
|
|
this.setAttribute('aria-' + prop, true);
|
|
} else {
|
|
this.removeAttribute('aria-' + prop);
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Toggles the checked state on options within the menu
|
|
* Potentially scoped down to visible elements from filteredInputs
|
|
* @param {boolean} flag checked property to set
|
|
* @param {object} group option group that was clicked, if any
|
|
* @param {boolean} filteredInputs does not toggle hidden inputs if filtering.
|
|
*/
|
|
_toggleChecked: function(flag, group, filteredInputs) {
|
|
var self = this;
|
|
var $element = self.element;
|
|
var $inputs = (group && group.length) ? group : self.$inputs;
|
|
|
|
if (filteredInputs) {
|
|
$inputs = self._isOpen
|
|
? $inputs.closest('li').not('.ui-multiselect-excluded').find('input').not(':disabled')
|
|
: $inputs.not(':disabled');
|
|
}
|
|
|
|
// toggle state on inputs
|
|
$inputs.each(self._toggleState('checked', flag));
|
|
|
|
// Give the first input focus
|
|
$inputs.eq(0).focus();
|
|
|
|
// update button text
|
|
self.update();
|
|
|
|
// Create a plain object of the values that actually changed
|
|
var inputValues = {};
|
|
$inputs.each( function() {
|
|
inputValues[this.value] = true;
|
|
});
|
|
|
|
// toggle state on original option tags
|
|
$element.find('option')
|
|
.each( function() {
|
|
if (!this.disabled && inputValues[this.value]) {
|
|
self._toggleState('selected', flag).call(this);
|
|
}
|
|
});
|
|
|
|
// trigger the change event on the select
|
|
if ($inputs.length) {
|
|
$element.trigger('change');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggles disabled state on the widget and underlying select or for just one option group.
|
|
* Will also disable all individual options if the disableInputsOnToggle option is set
|
|
* @param {boolean} flag true if disabling widget
|
|
* @param {number | string} groupID index or label of option group to disable
|
|
*/
|
|
_toggleDisabled: function(flag, groupID) {
|
|
var disabledClass = 'ui-state-disabled'; // used for styling only
|
|
|
|
if (this.$button) {
|
|
this.$button.prop({'disabled': flag, 'aria-disabled': flag})[flag ? 'addClass' : 'removeClass'](disabledClass);
|
|
}
|
|
|
|
if (this.options.disableInputsOnToggle) {
|
|
// Apply the ui-multiselect-disabled class name to identify which
|
|
// input elements this widget disabled (not pre-disabled)
|
|
// so that they can be restored if the widget is re-enabled.
|
|
var $inputs = (typeof groupID === 'undefined') ? this.$inputs : this._multiselectOptgroupFilter(groupID).find('input');
|
|
var msDisabledClass = 'ui-multiselect-disabled';
|
|
if (flag) {
|
|
var matchedInputs = $inputs.filter(':enabled').get();
|
|
for (var x = 0, len = matchedInputs.length; x < len; x++) {
|
|
matchedInputs[x].setAttribute('disabled', 'disabled');
|
|
matchedInputs[x].setAttribute('aria-disabled', 'disabled');
|
|
matchedInputs[x].classList.add(msDisabledClass);
|
|
matchedInputs[x].parentNode.classList.add(disabledClass);
|
|
}
|
|
} else {
|
|
var matchedInputs = $inputs.filter('.' + msDisabledClass + ':disabled').get();
|
|
for (var x = 0, len = matchedInputs.length; x < len; x++) {
|
|
matchedInputs[x].removeAttribute('disabled');
|
|
matchedInputs[x].removeAttribute('aria-disabled');
|
|
matchedInputs[x].classList.remove(msDisabledClass);
|
|
matchedInputs[x].parentNode.classList.remove(disabledClass);
|
|
}
|
|
}
|
|
}
|
|
|
|
var $select = (typeof groupID === 'undefined') ? this.element : this._nativeOptgroupFilter(groupID).find('option');
|
|
$select.prop({
|
|
'disabled': flag,
|
|
'aria-disabled': flag,
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Opens the menu, possibly with effects
|
|
* Calls methods to set position and resize as well
|
|
*/
|
|
open: function() {
|
|
var $button = this.$button;
|
|
|
|
// bail if the multiselect open event returns false, this widget is disabled, or is already open
|
|
if (this._trigger('beforeopen') === false || $button.hasClass('ui-state-disabled') || this._isOpen || !!this.options.listbox) {
|
|
return;
|
|
}
|
|
|
|
var $menu = this.$menu;
|
|
var $header = this.$header;
|
|
var $labels = this.$labels;
|
|
var $inputs = this.$inputs.filter(':checked:not(.ui-state-disabled)');
|
|
var options = this.options;
|
|
var effect = options.openEffect;
|
|
var scrollX = window.pageXOffset;
|
|
var scrollY = window.pageYOffset;
|
|
|
|
// set the scroll of the checkbox container
|
|
this.$checkboxes.scrollTop(0);
|
|
|
|
// Show the menu, set its dimensions, and position it.
|
|
$menu.css('display', 'block');
|
|
this._setMenuWidth();
|
|
this._setMenuHeight();
|
|
this.position();
|
|
|
|
// Do any specified open animation effect after positioning the menu.
|
|
if (!!effect) {
|
|
// Menu must be hidden for some effects (e.g. fade) to work.
|
|
$menu.css('display', 'none');
|
|
if (typeof effect == 'string') {
|
|
$menu.show(effect, this.speed);
|
|
} else if (typeof effect == 'object' && effect.constructor == Array) {
|
|
$menu.show(effect[0], effect[1] || this.speed);
|
|
} else if (typeof effect == 'object' && effect.constructor == Object) {
|
|
$menu.show(effect);
|
|
}
|
|
}
|
|
|
|
// focus the first not disabled option or filter input if available
|
|
var filter = $header.find('.ui-multiselect-filter');
|
|
if (filter.length) {
|
|
filter.first().find('input').trigger('focus');
|
|
} else if ($inputs.length) {
|
|
$inputs.eq(0).trigger('focus').parent('label').eq(0).trigger('mouseover').trigger('mouseenter');
|
|
} else if ($labels.length) {
|
|
$labels.filter(':not(.ui-state-disabled)').eq(0).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
|
|
} else {
|
|
$header.find('a').first().trigger('focus');
|
|
}
|
|
|
|
// Restore window scroll position if altered by setting element focus
|
|
window.scrollTo(scrollX, scrollY);
|
|
|
|
$button.addClass('ui-state-active');
|
|
this._isOpen = true;
|
|
this._trigger('open');
|
|
},
|
|
|
|
// Close the menu
|
|
close: function() {
|
|
// bail if the multiselect close event returns false
|
|
if (this._trigger('beforeclose') === false || !!this.options.listbox) {
|
|
return;
|
|
}
|
|
|
|
var $menu = this.$menu;
|
|
var options = this.options;
|
|
var effect = options.closeEffect;
|
|
var $button = this.$button;
|
|
|
|
// hide the menu, maybe with a speed/effect combo
|
|
if (!!effect) {
|
|
if (typeof effect == 'string') {
|
|
$menu.hide(effect, this.speed);
|
|
} else if (typeof effect == 'object' && effect.constructor == Array) {
|
|
$menu.hide(effect[0], effect[1] || this.speed);
|
|
} else if (typeof effect == 'object' && effect.constructor == Object) {
|
|
$menu.hide(effect);
|
|
}
|
|
} else {
|
|
$menu.css('display', 'none');
|
|
}
|
|
|
|
$button.removeClass('ui-state-active').trigger('blur').trigger('mouseleave');
|
|
this.element.trigger('blur'); // For jQuery Validate
|
|
this._isOpen = false;
|
|
this._trigger('close');
|
|
$button.trigger('focus');
|
|
},
|
|
|
|
/**
|
|
* Positions the menu relative to the button.
|
|
*/
|
|
position: function() {
|
|
var $button = this.$button;
|
|
|
|
// Save the button height so that we can determine when it has changed due to adding/removing selections.
|
|
this._savedButtonHeight = $button.outerHeight(false);
|
|
|
|
if ($.ui && $.ui.position) {
|
|
this.$menu.position(this.options.position);
|
|
} else {
|
|
var pos = {};
|
|
|
|
pos.top = $button.offset().top + this._savedButtonHeight;
|
|
pos.left = $button.offset().left;
|
|
|
|
this.$menu.offset(pos);
|
|
}
|
|
},
|
|
|
|
// Enable widget
|
|
enable: function(groupID) {
|
|
this._toggleDisabled(false, groupID);
|
|
},
|
|
|
|
// Disable widget
|
|
disable: function(groupID) {
|
|
this._toggleDisabled(true, groupID);
|
|
},
|
|
|
|
/**
|
|
* Checks all options or those in an option group
|
|
* Accounts for maxSelected possibly being set.
|
|
* @param {(number|string)} groupID index or label of option group to check all for.
|
|
*/
|
|
checkAll: function(groupID) {
|
|
this._trigger('beforeCheckAll');
|
|
|
|
if (this.options.maxSelected) {
|
|
return;
|
|
}
|
|
|
|
if (typeof groupID === 'undefined') { // groupID could be 0
|
|
this._toggleChecked(true);
|
|
} else {
|
|
this._toggleChecked(true, this._multiselectOptgroupFilter(groupID).find('input'));
|
|
}
|
|
|
|
this._trigger('checkAll');
|
|
},
|
|
|
|
/**
|
|
* Unchecks all options or those in an option group
|
|
* @param {(number|string)} groupID index or label of option group to uncheck all for.
|
|
*/
|
|
uncheckAll: function(groupID) {
|
|
this._trigger('beforeUncheckAll');
|
|
|
|
if (typeof groupID === 'undefined') { // groupID could be 0
|
|
this._toggleChecked(false);
|
|
} else {
|
|
this._toggleChecked(false, this._multiselectOptgroupFilter(groupID).find('input'));
|
|
}
|
|
if ( !this.element[0].multiple && !this.$inputs.filter(':checked').length) {
|
|
// Forces the underlying single-select to have no options selected.
|
|
this.element[0].selectedIndex = -1;
|
|
}
|
|
|
|
this._trigger('uncheckAll');
|
|
},
|
|
|
|
/**
|
|
* Flips all options or those in an option group.
|
|
* Accounts for maxSelected possibly being set.
|
|
* @param {(number|string)} groupID index or label of option group to flip all for.
|
|
*/
|
|
flipAll: function(groupID) {
|
|
this._trigger('beforeFlipAll');
|
|
|
|
var gotID = (typeof groupID !== 'undefined'); // groupID could be 0
|
|
var maxSelected = this.options.maxSelected;
|
|
var inputCount = this.$inputs.length;
|
|
var checkedCount = this.$inputs.filter(':checked').length;
|
|
var $filteredOptgroupInputs = gotID ? this._multiselectOptgroupFilter(groupID).find('input') : null;
|
|
var gInputCount = gotID ? $filteredOptgroupInputs.length : 0;
|
|
var gCheckedCount = gotID ? $filteredOptgroupInputs.filter(':checked').length : 0;
|
|
|
|
if (!maxSelected
|
|
|| maxSelected >= (gotID ? checkedCount - gCheckedCount + gInputCount - gCheckedCount : inputCount - checkedCount ) ) {
|
|
if (gotID) {
|
|
this._toggleChecked('!', $filteredOptgroupInputs);
|
|
} else {
|
|
this._toggleChecked('!');
|
|
}
|
|
this._trigger('flipAll');
|
|
} else {
|
|
this.buttonMessage('<center><b>Flip All Not Permitted.</b></center>');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collapses all option groups or just the one specified.
|
|
* @param {(number|string)} groupID index or label of option group to collapse.
|
|
*/
|
|
collapseAll: function(groupID) {
|
|
this._trigger('beforeCollapseAll');
|
|
|
|
var $optgroups = (typeof groupID === 'undefined') // groupID could be 0
|
|
? this.$checkboxes.find('.ui-multiselect-optgroup')
|
|
: this._multiselectOptgroupFilter(groupID);
|
|
|
|
$optgroups.addClass('ui-multiselect-collapsed')
|
|
.children('.ui-multiselect-collapser').attr('title', this.linkInfo.expand.title ).html( this.linkInfo.expand.icon );
|
|
|
|
this._trigger('collapseAll');
|
|
},
|
|
|
|
/**
|
|
* Expands all option groups or just the one specified.
|
|
* @param {(number|string)} groupID index or label of option group to expand.
|
|
*/
|
|
expandAll: function(groupID) {
|
|
this._trigger('beforeExpandAll');
|
|
|
|
var $optgroups = (typeof groupID === 'undefined') // groupID could be 0
|
|
? this.$checkboxes.find('.ui-multiselect-optgroup')
|
|
: this._multiselectOptgroupFilter(groupID);
|
|
|
|
$optgroups.removeClass('ui-multiselect-collapsed')
|
|
.children('.ui-multiselect-collapser').attr('title', this.linkInfo.collapse.title ).html( this.linkInfo.collapse.icon );
|
|
|
|
this._trigger('expandAll');
|
|
},
|
|
|
|
/**
|
|
* Flashes a message in the button caption for 1 second.
|
|
* Useful for very short warning messages to the user.
|
|
* @param {string} message HTML to show in the button.
|
|
*/
|
|
buttonMessage: function(message) {
|
|
var self = this;
|
|
self.$buttonlabel.html(message);
|
|
setTimeout( function() {
|
|
self.update();
|
|
}, 1000 );
|
|
},
|
|
|
|
/**
|
|
* Provides a list of all checked options
|
|
* @return {array} list of inputs
|
|
*/
|
|
getChecked: function() {
|
|
return this.$inputs.filter(':checked');
|
|
},
|
|
|
|
/**
|
|
* Provides a list of all options that are not checked
|
|
* @return {array} list of inputs
|
|
*/
|
|
getUnchecked: function() {
|
|
return this.$inputs.filter(':not(:checked)');
|
|
},
|
|
|
|
/**
|
|
* Destroys the widget instance
|
|
* @return {object} reference to widget
|
|
*/
|
|
destroy: function() {
|
|
// remove classes + data
|
|
$.Widget.prototype.destroy.call(this);
|
|
|
|
// unbind events
|
|
this.document.off(this._namespaceID);
|
|
$(this.element[0].form).off(this._namespaceID);
|
|
|
|
if (!this.options.listbox) {
|
|
this.$button.remove();
|
|
}
|
|
this.$menu.remove();
|
|
this.element.show();
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @return {boolean} indicates whether the menu is open
|
|
*/
|
|
isOpen: function() {
|
|
return this._isOpen;
|
|
},
|
|
|
|
/**
|
|
* @return {object} jQuery object for menu
|
|
*/
|
|
widget: function() {
|
|
return this.$menu;
|
|
},
|
|
|
|
/**
|
|
* @return {string} namespaceID for use with external event handlers.
|
|
*/
|
|
getNamespaceID: function() {
|
|
return this._namespaceID;
|
|
},
|
|
|
|
/**
|
|
* @return {object} jQuery object for button
|
|
*/
|
|
getButton: function() {
|
|
return this.$button;
|
|
},
|
|
|
|
/**
|
|
* Essentially an alias for widget
|
|
* @return {object} jQuery object for menu
|
|
*/
|
|
getMenu: function() {
|
|
return this.$menu;
|
|
},
|
|
|
|
/**
|
|
* @return {array} List of the option labels
|
|
*/
|
|
getLabels: function() {
|
|
return this.$labels;
|
|
},
|
|
|
|
/**
|
|
* @return {array} List of option groups that are collapsed
|
|
*/
|
|
getCollapsed: function() {
|
|
return this.$checkboxes.find('.ui-multiselect-collapsed');
|
|
},
|
|
|
|
/**
|
|
* Sets the value of the underlying select then resyncs the menu.
|
|
* @param {(string|array)} newValue value(s) to set the underlying select to.
|
|
* @return {any} the underlying select when a value is provied, or eles the value of the select
|
|
*/
|
|
value: function(newValue) {
|
|
if (typeof newValue !== 'undefined') {
|
|
this.element.val(newValue);
|
|
this.resync();
|
|
return this.element;
|
|
} else {
|
|
return this.element.val();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Determines if HTML content is allowed for the given element type
|
|
* @param {string} element to check
|
|
* @return {boolean} true if html content is allowed
|
|
*/
|
|
htmlAllowedFor: function(element) {
|
|
return this.options.htmlText.indexOf(element) > -1;
|
|
},
|
|
|
|
/**
|
|
* Adds an option to the widget and underlying select
|
|
* @param {object} attributes hash to be added to the option
|
|
* @param {string} text label for the option
|
|
* @param {(number|string)} groupID index or label of option group to add the option to
|
|
*/
|
|
addOption: function(attributes, text, groupID) {
|
|
var self = this;
|
|
var textFxn = self.htmlAllowedFor('options') ? 'html' : 'text';
|
|
var $option = $( document.createElement('option') ).attr(attributes)[textFxn](text);
|
|
var optionNode = $option.get(0);
|
|
|
|
if (typeof groupID === 'undefined') { // groupID could be 0
|
|
self.element.append($option);
|
|
self.$checkboxes.append(self._makeOption(optionNode));
|
|
} else {
|
|
self._nativeOptgroupFilter(groupID).append($option);
|
|
self._multiselectOptgroupFilter(groupID).append(self._makeOption(optionNode));
|
|
}
|
|
|
|
self._updateCache();
|
|
},
|
|
|
|
/**
|
|
* Finds an optgroup in the native select by index or label using the tag name
|
|
* @param {(number|string)} groupID index or label of option group to find
|
|
* @return {object} matching option groups
|
|
*/
|
|
_nativeOptgroupFilter: function(groupID) {
|
|
return this.element.children('OPTGROUP').filter( function(index) {
|
|
return (typeof groupID === 'number' ? index === groupID : this.getAttribute('label') === groupID);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Finds an optgroup in the multiselect widget by index or label
|
|
* @param {(number|string)} groupID index or label of option group to find
|
|
* @return {object} matching option groups
|
|
*/
|
|
_multiselectOptgroupFilter: function(groupID) {
|
|
return this.$menu.find('.ui-multiselect-optgroup').filter( function(index) {
|
|
return (typeof groupID === 'number' ? index === groupID : this.getElementsByClassName('ui-multiselect-grouplabel')[0].textContent === groupID);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Removes an option from the widget and underlying select
|
|
* @param {string} value attribute corresponding to option being removed
|
|
*/
|
|
removeOption: function(value) {
|
|
if (!value) {
|
|
return;
|
|
}
|
|
this.element.find('option[value=' + value + ']').remove();
|
|
this.$labels.find('input[value=' + value + ']').parents('li').remove();
|
|
|
|
this._updateCache();
|
|
},
|
|
|
|
/**
|
|
* Reacts to options being changed
|
|
* Delegates to various handlers
|
|
* @param {string} key into the options hash
|
|
* @param {any} value to be assigned to that option
|
|
*/
|
|
_setOption: function(key, value) {
|
|
var $header = this.$header;
|
|
var $menu = this.$menu;
|
|
|
|
switch (key) {
|
|
case 'header':
|
|
if (typeof value === 'boolean') {
|
|
$header.toggle( value );
|
|
} else if (typeof value === 'string') {
|
|
this.$headerLinkContainer.children('li:not(:last-child)').remove();
|
|
this.$headerLinkContainer.prepend('<li>' + value + '</li>');
|
|
}
|
|
break;
|
|
case 'checkAllText':
|
|
case 'uncheckAllText':
|
|
case 'flipAllText':
|
|
case 'collapseAllText':
|
|
case 'expandAllText':
|
|
if (key !== 'checkAllText' || !this.options.maxSelected) {
|
|
// eq(-1) finds the last span
|
|
$header.find('a.' + this.linkInfo[key.replace('Text', '')]['class'] + ' span').eq(-1).html(value);
|
|
}
|
|
break;
|
|
case 'checkAllIcon':
|
|
case 'uncheckAllIcon':
|
|
case 'flipAllIcon':
|
|
case 'collapseAllIcon':
|
|
case 'expandAllIcon':
|
|
if (key !== 'checkAllIcon' || !this.options.maxSelected) {
|
|
// eq(0) finds the first span
|
|
$header.find('a.' + this.linkInfo[key.replace('Icon', '')]['class'] + ' span').eq(0).replaceWith(value);
|
|
}
|
|
break;
|
|
case 'openIcon':
|
|
$menu.find('span.ui-multiselect-open').html(value);
|
|
break;
|
|
case 'closeIcon':
|
|
$menu.find('a.ui-multiselect-close').html(value);
|
|
break;
|
|
case 'buttonWidth':
|
|
case 'menuWidth':
|
|
this.options[key] = value;
|
|
this._setButtonWidth(true); // true forces recalc of cached value.
|
|
this._setMenuWidth(true); // true forces recalc of cached value.
|
|
break;
|
|
case 'menuHeight':
|
|
this.options[key] = value;
|
|
this._setMenuHeight(true); // true forces recalc of cached value.
|
|
break;
|
|
case 'selectedText':
|
|
case 'selectedList':
|
|
case 'maxSelected':
|
|
case 'noneSelectedText':
|
|
case 'selectedListSeparator':
|
|
this.options[key] = value; // these all need to update immediately for the update() call
|
|
this.update(true);
|
|
break;
|
|
case 'classes':
|
|
$menu.add(this.$button).removeClass(this.options.classes).addClass(value);
|
|
break;
|
|
case 'multiple':
|
|
var $element = this.element;
|
|
if (!!$element[0].multiple !== value) {
|
|
$menu.toggleClass('ui-multiselect-multiple', value).toggleClass('ui-multiselect-single', !value);
|
|
$element[0].multiple = value;
|
|
this.uncheckAll();
|
|
this.refresh();
|
|
}
|
|
break;
|
|
case 'position':
|
|
if (value !== null && !$.isEmptyObject(value) ) {
|
|
this.options.position = value;
|
|
}
|
|
this.position();
|
|
break;
|
|
case 'zIndex':
|
|
this.options.zIndex = value;
|
|
this.$menu.css('z-index', value);
|
|
break;
|
|
default:
|
|
this.options[key] = value;
|
|
}
|
|
$.Widget.prototype._setOption.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
|
},
|
|
_parse2px: parse2px,
|
|
|
|
});
|
|
|
|
// Fix for jQuery UI modal dialogs
|
|
// https://api.jqueryui.com/dialog/#method-_allowInteraction
|
|
// https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
|
|
if ($.ui && 'dialog' in $.ui) {
|
|
$.widget( 'ui.dialog', $.ui.dialog, {
|
|
_allowInteraction: function( event ) {
|
|
if ( this._super( event ) || $( event.target ).closest('.ui-multiselect-menu' ).length ) {
|
|
return true;
|
|
}
|
|
},
|
|
});
|
|
}
|
|
})(jQuery);
|