diff --git a/assets/scripts/dist/choices.js b/assets/scripts/dist/choices.js index 026b4b0..f53e2be 100644 --- a/assets/scripts/dist/choices.js +++ b/assets/scripts/dist/choices.js @@ -107,8 +107,9 @@ return /******/ (function(modules) { // webpackBootstrap if ((0, _utils.isType)('String', element)) { var elements = document.querySelectorAll(element); if (elements.length > 1) { - for (var i = 1; i < elements.length; i++) { + for (var i = 1; i < elements.length; i += 1) { var el = elements[i]; + /* eslint-disable no-new */ new Choices(el, userConfig); } } @@ -221,7 +222,7 @@ return /******/ (function(modules) { // webpackBootstrap if (!this.config.silent) { console.error('Passed element not found'); } - return; + return false; } this.isTextElement = this.passedElement.type === 'text'; @@ -290,7 +291,7 @@ return /******/ (function(modules) { // webpackBootstrap if (canInit) { // If element has already been initialised with Choices if (this.passedElement.getAttribute('data-choice') === 'active') { - return; + return false; } // Let's go @@ -300,9 +301,9 @@ return /******/ (function(modules) { // webpackBootstrap } } - /*======================================== + /* ======================================== = Public functions = - ========================================*/ + ======================================== */ /** * Initialise Choices @@ -334,10 +335,8 @@ return /******/ (function(modules) { // webpackBootstrap this._addEventListeners(); // Run callback if it is a function - if (callback) { - if ((0, _utils.isType)('Function', callback)) { - callback.call(this); - } + if (callback && (0, _utils.isType)('Function', callback)) { + callback.call(this); } } @@ -360,9 +359,10 @@ return /******/ (function(modules) { // webpackBootstrap // Reinstate passed element this.passedElement.classList.remove(this.config.classNames.input, this.config.classNames.hiddenState); this.passedElement.removeAttribute('tabindex'); + // Recover original styles if any var origStyle = this.passedElement.getAttribute('data-choice-orig-style'); - if (Boolean(origStyle)) { + if (origStyle) { this.passedElement.removeAttribute('data-choice-orig-style'); this.passedElement.setAttribute('style', origStyle); } else { @@ -501,11 +501,11 @@ return /******/ (function(modules) { // webpackBootstrap } // Add each choice to dropdown within range - for (var i = 0; i < choiceLimit; i++) { + for (var i = 0; i < choiceLimit; i += 1) { if (sortedChoices[i]) { appendChoice(sortedChoices[i]); } - }; + } return choicesFragment; } @@ -757,9 +757,8 @@ return /******/ (function(modules) { // webpackBootstrap var items = this.store.getItems(); items.forEach(function (item) { - _this4.highlightItem(item); + return _this4.highlightItem(item); }); - return this; } @@ -776,9 +775,8 @@ return /******/ (function(modules) { // webpackBootstrap var items = this.store.getItems(); items.forEach(function (item) { - _this5.unhighlightItem(item); + return _this5.unhighlightItem(item); }); - return this; } @@ -886,7 +884,8 @@ return /******/ (function(modules) { // webpackBootstrap var dimensions = this.dropdown.getBoundingClientRect(); var dropdownPos = Math.ceil(dimensions.top + window.scrollY + this.dropdown.offsetHeight); - // If flip is enabled and the dropdown bottom position is greater than the window height flip the dropdown. + // If flip is enabled and the dropdown bottom position is + // greater than the window height flip the dropdown. var shouldFlip = false; if (this.config.position === 'auto') { shouldFlip = dropdownPos >= winHeight; @@ -926,6 +925,10 @@ return /******/ (function(modules) { // webpackBootstrap this.containerOuter.setAttribute('aria-expanded', 'false'); this.dropdown.classList.remove(this.config.classNames.activeState); this.dropdown.setAttribute('aria-expanded', 'false'); + // IE11 ignores aria-label and blocks virtual keyboard + // if aria-activedescendant is set without a dropdown + this.input.removeAttribute('aria-activedescendant'); + this.containerOuter.removeAttribute('aria-activedescendant'); if (isFlipped) { this.containerOuter.classList.remove(this.config.classNames.flippedState); @@ -963,7 +966,8 @@ return /******/ (function(modules) { // webpackBootstrap /** * Get value(s) of input (i.e. inputted items (text) or selected choices (select)) * @param {Boolean} valueOnly Get only values of selected items, otherwise return selected items - * @return {Array/String} selected value (select-one) or array of selected items (inputs & select-multiple) + * @return {Array/String} selected value (select-one) or + * array of selected items (inputs & select-multiple) * @public */ @@ -993,8 +997,8 @@ return /******/ (function(modules) { // webpackBootstrap } /** - * Set value of input. If the input is a select box, a choice will be created and selected otherwise - * an item will created directly. + * Set value of input. If the input is a select box, a choice will + * be created and selected otherwise an item will created directly. * @param {Array} args Array of value objects or value strings * @return {Object} Class instance * @public @@ -1005,40 +1009,43 @@ return /******/ (function(modules) { // webpackBootstrap value: function setValue(args) { var _this10 = this; - if (this.initialised === true) { - // Convert args to an iterable array - var values = [].concat(_toConsumableArray(args)), - handleValue = function handleValue(item) { - var itemType = (0, _utils.getType)(item); - if (itemType === 'Object') { - if (!item.value) { - return; - } - - // If we are dealing with a select input, we need to create an option first - // that is then selected. For text inputs we can just add items normally. - if (!_this10.isTextElement) { - _this10._addChoice(item.value, item.label, true, false, -1, item.customProperties, item.placeholder); - } else { - _this10._addItem(item.value, item.label, item.id, undefined, item.customProperties, item.placeholder); - } - } else if (itemType === 'String') { - if (!_this10.isTextElement) { - _this10._addChoice(item, item, true, false, -1, null); - } else { - _this10._addItem(item); - } - } - }; - - if (values.length > 1) { - values.forEach(function (value) { - handleValue(value); - }); - } else { - handleValue(values[0]); - } + if (!this.initialised) { + return this; } + + // Convert args to an iterable array + var values = [].concat(_toConsumableArray(args)); + var handleValue = function handleValue(item) { + var itemType = (0, _utils.getType)(item); + if (itemType === 'Object') { + if (!item.value) { + return; + } + + // If we are dealing with a select input, we need to create an option first + // that is then selected. For text inputs we can just add items normally. + if (!_this10.isTextElement) { + _this10._addChoice(item.value, item.label, true, false, -1, item.customProperties, item.placeholder); + } else { + _this10._addItem(item.value, item.label, item.id, undefined, item.customProperties, item.placeholder); + } + } else if (itemType === 'String') { + if (!_this10.isTextElement) { + _this10._addChoice(item, item, true, false, -1, null); + } else { + _this10._addItem(item); + } + } + }; + + if (values.length > 1) { + values.forEach(function (value) { + return handleValue(value); + }); + } else { + handleValue(values[0]); + } + return this; } @@ -1054,29 +1061,31 @@ return /******/ (function(modules) { // webpackBootstrap value: function setValueByChoice(value) { var _this11 = this; - if (!this.isTextElement) { - var choices = this.store.getChoices(); - // If only one value has been passed, convert to array - var choiceValue = (0, _utils.isType)('Array', value) ? value : [value]; - - // Loop through each value and - choiceValue.forEach(function (val) { - var foundChoice = choices.find(function (choice) { - // Check 'value' property exists and the choice isn't already selected - return choice.value === val; - }); - - if (foundChoice) { - if (!foundChoice.selected) { - _this11._addItem(foundChoice.value, foundChoice.label, foundChoice.id, foundChoice.groupId, foundChoice.customProperties, foundChoice.placeholder, foundChoice.keyCode); - } else if (!_this11.config.silent) { - console.warn('Attempting to select choice already selected'); - } - } else if (!_this11.config.silent) { - console.warn('Attempting to select choice that does not exist'); - } - }); + if (this.isTextElement) { + return this; } + + var choices = this.store.getChoices(); + // If only one value has been passed, convert to array + var choiceValue = (0, _utils.isType)('Array', value) ? value : [value]; + + // Loop through each value and + choiceValue.forEach(function (val) { + // Check 'value' property exists and the choice isn't already selected + var foundChoice = choices.find(function (choice) { + return choice.value === val; + }); + + if (foundChoice) { + if (!foundChoice.selected) { + _this11._addItem(foundChoice.value, foundChoice.label, foundChoice.id, foundChoice.groupId, foundChoice.customProperties, foundChoice.placeholder, foundChoice.keyCode); + } else if (!_this11.config.silent) { + console.warn('Attempting to select choice already selected'); + } + } else if (!_this11.config.silent) { + console.warn('Attempting to select choice that does not exist'); + } + }); return this; } @@ -1097,28 +1106,27 @@ return /******/ (function(modules) { // webpackBootstrap var replaceChoices = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; - if (this.initialised === true) { - if (this.isSelectElement) { - if (!(0, _utils.isType)('Array', choices) || !value) { - return this; - } - // Clear choices if needed - if (replaceChoices) { - this._clearChoices(); - } - // Add choices if passed - if (choices && choices.length) { - this.containerOuter.classList.remove(this.config.classNames.loadingState); - choices.forEach(function (result) { - if (result.choices) { - _this12._addGroup(result, result.id || null, value, label); - } else { - _this12._addChoice(result[value], result[label], result.selected, result.disabled, undefined, result.customProperties, result.placeholder); - } - }); - } - } + if (!this.initialised || !this.isSelectElement || !(0, _utils.isType)('Array', choices) || !value) { + return this; } + + // Clear choices if needed + if (replaceChoices) { + this._clearChoices(); + } + + // Add choices if passed + if (choices && choices.length) { + this.containerOuter.classList.remove(this.config.classNames.loadingState); + choices.forEach(function (result) { + if (result.choices) { + _this12._addGroup(result, result.id || null, value, label); + } else { + _this12._addChoice(result[value], result[label], result.selected, result.disabled, undefined, result.customProperties, result.placeholder); + } + }); + } + return this; } @@ -1148,13 +1156,16 @@ return /******/ (function(modules) { // webpackBootstrap if (this.input.value) { this.input.value = ''; } + if (!this.isSelectOneElement) { this._setInputWidth(); } + if (!this.isTextElement && this.config.searchEnabled) { this.isSearching = false; this.store.dispatch((0, _index3.activateChoices)(true)); } + return this; } @@ -1166,20 +1177,24 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'enable', value: function enable() { - if (this.initialised) { - this.passedElement.disabled = false; - var isDisabled = this.containerOuter.classList.contains(this.config.classNames.disabledState); - if (isDisabled) { - this._addEventListeners(); - this.passedElement.removeAttribute('disabled'); - this.input.removeAttribute('disabled'); - this.containerOuter.classList.remove(this.config.classNames.disabledState); - this.containerOuter.removeAttribute('aria-disabled'); - if (this.isSelectOneElement) { - this.containerOuter.setAttribute('tabindex', '0'); - } + if (!this.initialised) { + return this; + } + + this.passedElement.disabled = false; + var isDisabled = this.containerOuter.classList.contains(this.config.classNames.disabledState); + + if (isDisabled) { + this._addEventListeners(); + this.passedElement.removeAttribute('disabled'); + this.input.removeAttribute('disabled'); + this.containerOuter.classList.remove(this.config.classNames.disabledState); + this.containerOuter.removeAttribute('aria-disabled'); + if (this.isSelectOneElement) { + this.containerOuter.setAttribute('tabindex', '0'); } } + return this; } @@ -1192,20 +1207,24 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'disable', value: function disable() { - if (this.initialised) { - this.passedElement.disabled = true; - var isEnabled = !this.containerOuter.classList.contains(this.config.classNames.disabledState); - if (isEnabled) { - this._removeEventListeners(); - this.passedElement.setAttribute('disabled', ''); - this.input.setAttribute('disabled', ''); - this.containerOuter.classList.add(this.config.classNames.disabledState); - this.containerOuter.setAttribute('aria-disabled', 'true'); - if (this.isSelectOneElement) { - this.containerOuter.setAttribute('tabindex', '-1'); - } + if (!this.initialised) { + return this; + } + + this.passedElement.disabled = true; + var isEnabled = !this.containerOuter.classList.contains(this.config.classNames.disabledState); + + if (isEnabled) { + this._removeEventListeners(); + this.passedElement.setAttribute('disabled', ''); + this.input.setAttribute('disabled', ''); + this.containerOuter.classList.add(this.config.classNames.disabledState); + this.containerOuter.setAttribute('aria-disabled', 'true'); + if (this.isSelectOneElement) { + this.containerOuter.setAttribute('tabindex', '-1'); } } + return this; } @@ -1221,24 +1240,25 @@ return /******/ (function(modules) { // webpackBootstrap value: function ajax(fn) { var _this13 = this; - if (this.initialised === true) { - if (this.isSelectElement) { - // Show loading text - requestAnimationFrame(function () { - _this13._handleLoadingState(true); - }); - // Run callback - fn(this._ajaxCallback()); - } + if (!this.initialised || !this.isSelectElement) { + return this; } + + // Show loading text + requestAnimationFrame(function () { + return _this13._handleLoadingState(true); + }); + // Run callback + fn(this._ajaxCallback()); + return this; } - /*===== End of Public functions ======*/ + /* ===== End of Public functions ====== */ - /*============================================= + /* ============================================= = Private functions = - =============================================*/ + ============================================= */ /** * Call change callback @@ -1451,13 +1471,11 @@ return /******/ (function(modules) { // webpackBootstrap } } - if (this.isTextElement && this.config.addItems && canAddItem) { + if (this.isTextElement && this.config.addItems && canAddItem && this.config.regexFilter) { // If a user has supplied a regular expression filter - if (this.config.regexFilter) { - // Determine whether we can update based on whether - // our regular expression passes - canAddItem = this._regexFilter(value); - } + // determine whether we can update based on whether + // our regular expression passes + canAddItem = (0, _utils.regexFilter)(value, this.config.regexFilter); } // If no duplicates are allowed, and the value already exists @@ -1800,12 +1818,10 @@ return /******/ (function(modules) { // webpackBootstrap } _this16._handleChoiceAction(activeItems, highlighted); } - } else if (_this16.isSelectOneElement) { + } else if (_this16.isSelectOneElement && !hasActiveDropdown) { // Open single select dropdown if it's not active - if (!hasActiveDropdown) { - _this16.showDropdown(true); - e.preventDefault(); - } + _this16.showDropdown(true); + e.preventDefault(); } }; @@ -1899,8 +1915,8 @@ return /******/ (function(modules) { // webpackBootstrap // notice. Otherwise hide the dropdown if (this.isTextElement) { var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); - if (value) { + if (value) { if (canAddItem.notice) { var dropdownItem = this._getTemplate('notice', canAddItem.notice); this.dropdown.innerHTML = dropdownItem.outerHTML; @@ -1985,11 +2001,9 @@ return /******/ (function(modules) { // webpackBootstrap if (document.activeElement !== this.input) { this.input.focus(); } - } else { - if (!hasActiveDropdown) { - // If a select box, we want to show the dropdown - this.showDropdown(true); - } + } else if (!hasActiveDropdown) { + // If a select box, we want to show the dropdown + this.showDropdown(true); } } // Prevents focus event firing @@ -2017,16 +2031,19 @@ return /******/ (function(modules) { // webpackBootstrap } if (this.containerOuter.contains(target) && target !== this.input) { - var foundTarget = void 0; var activeItems = this.store.getItemsFilteredByActive(); var hasShiftKey = e.shiftKey; - if (foundTarget = (0, _utils.findAncestorByAttrName)(target, 'data-button')) { - this._handleButtonAction(activeItems, foundTarget); - } else if (foundTarget = (0, _utils.findAncestorByAttrName)(target, 'data-item')) { - this._handleItemAction(activeItems, foundTarget, hasShiftKey); - } else if (foundTarget = (0, _utils.findAncestorByAttrName)(target, 'data-choice')) { - this._handleChoiceAction(activeItems, foundTarget); + var buttonTarget = (0, _utils.findAncestorByAttrName)(target, 'data-button'); + var itemTarget = (0, _utils.findAncestorByAttrName)(target, 'data-item'); + var choiceTarget = (0, _utils.findAncestorByAttrName)(target, 'data-choice'); + + if (buttonTarget) { + this._handleButtonAction(activeItems, buttonTarget); + } else if (itemTarget) { + this._handleItemAction(activeItems, itemTarget, hasShiftKey); + } else if (choiceTarget) { + this._handleChoiceAction(activeItems, choiceTarget); } e.preventDefault(); @@ -2059,13 +2076,11 @@ return /******/ (function(modules) { // webpackBootstrap if (document.activeElement !== this.input) { this.input.focus(); } + } else if (this.canSearch) { + this.showDropdown(true); } else { - if (this.canSearch) { - this.showDropdown(true); - } else { - this.showDropdown(); - this.containerOuter.focus(); - } + this.showDropdown(); + this.containerOuter.focus(); } } else if (this.isSelectOneElement && target !== this.input && !this.dropdown.contains(target)) { this.hideDropdown(true); @@ -2244,25 +2259,6 @@ return /******/ (function(modules) { // webpackBootstrap } } - /** - * Tests value against a regular expression - * @param {string} value Value to test - * @return {Boolean} Whether test passed/failed - * @private - */ - - }, { - key: '_regexFilter', - value: function _regexFilter(value) { - if (!value) { - return false; - } - - var regex = this.config.regexFilter; - var expression = new RegExp(regex.source, 'i'); - return expression.test(value); - } - /** * Scroll to an option element * @param {HTMLElement} choice Option to scroll to @@ -2373,7 +2369,14 @@ return /******/ (function(modules) { // webpackBootstrap // Highlight given option, and set accessiblity attributes passedEl.classList.add(this.config.classNames.highlightedState); passedEl.setAttribute('aria-selected', 'true'); - this.containerOuter.setAttribute('aria-activedescendant', passedEl.id); + + var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); + if (hasActiveDropdown) { + // IE11 ignores aria-label and blocks virtual keyboard + // if aria-activedescendant is set without a dropdown + this.input.setAttribute('aria-activedescendant', passedEl.id); + this.containerOuter.setAttribute('aria-activedescendant', passedEl.id); + } } } @@ -2559,7 +2562,7 @@ return /******/ (function(modules) { // webpackBootstrap var labelKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'label'; var groupChoices = (0, _utils.isType)('Object', group) ? group.choices : Array.from(group.getElementsByTagName('OPTION')); - var groupId = id ? id : Math.floor(new Date().valueOf() * Math.random()); + var groupId = id || Math.floor(new Date().valueOf() * Math.random()); var isDisabled = group.disabled ? group.disabled : false; if (groupChoices) { @@ -2611,10 +2614,19 @@ return /******/ (function(modules) { // webpackBootstrap var globalClasses = this.config.classNames; var templates = { containerOuter: function containerOuter(direction) { - return (0, _utils.strToEl)('\n