deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-02 22:03:11 +02:00
Code Issues Projects Releases Wiki Activity

Merge master

Browse source
This commit is contained in:
Josh Johnson 2017-08-03 10:07:45 +01:00
parent 1013f32ce6 c3a7330e5b
commit 171f59cf65
10 changed files with 147 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -358,7 +358,7 @@ const example = new Choices(element, {
### placeholder
**Type:** `Boolean` **Default:** `true`
**Input types affected:** `text`, `select-one`, `select-multiple`
**Input types affected:** `text`, `select-multiple`
**Usage:** Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value.
@ -369,6 +369,13 @@ const example = new Choices(element, {
**Usage:** The value of the inputs placeholder.
### searchPlaceholderValue
**Type:** `String` **Default:** `null`
**Input types affected:** `select-one`
**Usage:** The value of the search inputs placeholder.
### prependValue
**Type:** `String` **Default:** `null`

159
assets/scripts/dist/choices.js vendored
View file

@ -1,4 +1,4 @@
/*! choices.js v2.8.11 | (c) 2017 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
/*! choices.js v2.8.12 | (c) 2017 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
@ -219,6 +219,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.isSelectElement = this.isSelectOneElement || this.isSelectMultipleElement;
this.isValidElementType = this.isTextElement || this.isSelectElement;
this.isIe11 = !!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/));
this.isScrollingOnIe = false;
if (!this.passedElement) {
if (!this.config.silent) {
@ -1604,10 +1605,6 @@ return /******/ (function(modules) { // webpackBootstrap
document.addEventListener('mousedown', this._onMouseDown);
document.addEventListener('mouseover', this._onMouseOver);
if (this.isIe11) {
document.addEventListener('focus', this._onDocumentFocus);
}
if (this.isSelectOneElement) {
this.containerOuter.addEventListener('focus', this._onFocus);
this.containerOuter.addEventListener('blur', this._onBlur);
@ -1636,10 +1633,6 @@ return /******/ (function(modules) { // webpackBootstrap
document.removeEventListener('mousedown', this._onMouseDown);
document.removeEventListener('mouseover', this._onMouseOver);
if (this.isIe11) {
document.removeEventListener('focus', this._onDocumentFocus);
}
if (this.isSelectOneElement) {
this.containerOuter.removeEventListener('focus', this._onFocus);
this.containerOuter.removeEventListener('blur', this._onBlur);
@ -1969,6 +1962,12 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_onMouseDown',
value: function _onMouseDown(e) {
var target = e.target;
// If we have our mouse down on the scrollbar and are on IE11...
if (target === this.choiceList && this.isIe11) {
this.isScrollingOnIe = true;
}
if (this.containerOuter.contains(target) && target !== this.input) {
var foundTarget = void 0;
var activeItems = this.store.getItemsFilteredByActive();
@ -2059,48 +2058,6 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
/**
* Focus event on everything in the document
* @param {Object} e Event
* @return
* @private
*/
}, {
key: '_onDocumentFocus',
value: function _onDocumentFocus(e) {
var _this17 = this;
var target = e.target;
var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
var blurActions = {
text: function text() {
if (target !== _this17.input) {
if (hasActiveDropdown) {
_this17.hideDropdown();
}
}
},
'select-one': function selectOne() {
if (target !== _this17.containerOuter) {
if (hasActiveDropdown && !_this17.canSearch) {
_this17.hideDropdown();
}
}
},
'select-multiple': function selectMultiple() {
if (target !== _this17.input) {
if (hasActiveDropdown) {
_this17.hideDropdown();
}
}
}
};
blurActions[this.passedElement.type]();
}
/**
* Paste event
* @param {Object} e Event
@ -2127,7 +2084,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_onFocus',
value: function _onFocus(e) {
var _this18 = this;
var _this17 = this;
var target = e.target;
// If target is something that concerns us
@ -2135,27 +2092,27 @@ return /******/ (function(modules) { // webpackBootstrap
var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
var focusActions = {
text: function text() {
if (target === _this18.input) {
_this18.containerOuter.classList.add(_this18.config.classNames.focusState);
if (target === _this17.input) {
_this17.containerOuter.classList.add(_this17.config.classNames.focusState);
}
},
'select-one': function selectOne() {
_this18.containerOuter.classList.add(_this18.config.classNames.focusState);
if (target === _this18.input) {
_this17.containerOuter.classList.add(_this17.config.classNames.focusState);
if (target === _this17.input) {
// Show dropdown if it isn't already showing
if (!hasActiveDropdown) {
_this18.showDropdown();
_this17.showDropdown();
}
}
},
'select-multiple': function selectMultiple() {
if (target === _this18.input) {
if (target === _this17.input) {
// If element is a select box, the focused element is the container and the dropdown
// isn't already open, focus and show dropdown
_this18.containerOuter.classList.add(_this18.config.classNames.focusState);
_this17.containerOuter.classList.add(_this17.config.classNames.focusState);
if (!hasActiveDropdown) {
_this18.showDropdown(true);
_this17.showDropdown(true);
}
}
}
@ -2175,11 +2132,11 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_onBlur',
value: function _onBlur(e) {
var _this19 = this;
var _this18 = this;
var target = e.target;
// If target is something that concerns us
if (this.containerOuter.contains(target)) {
if (this.containerOuter.contains(target) && !this.isScrollingOnIe) {
var activeItems = this.store.getItemsFilteredByActive();
var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
var hasHighlightedItems = activeItems.some(function (item) {
@ -2187,49 +2144,55 @@ return /******/ (function(modules) { // webpackBootstrap
});
var blurActions = {
text: function text() {
if (target === _this19.input) {
if (target === _this18.input) {
// Remove the focus state
_this19.containerOuter.classList.remove(_this19.config.classNames.focusState);
_this18.containerOuter.classList.remove(_this18.config.classNames.focusState);
// De-select any highlighted items
if (hasHighlightedItems) {
_this19.unhighlightAll();
_this18.unhighlightAll();
}
// Hide dropdown if it is showing
if (hasActiveDropdown) {
_this19.hideDropdown();
_this18.hideDropdown();
}
}
},
'select-one': function selectOne() {
_this19.containerOuter.classList.remove(_this19.config.classNames.focusState);
if (target === _this19.containerOuter) {
_this18.containerOuter.classList.remove(_this18.config.classNames.focusState);
if (target === _this18.containerOuter) {
// Hide dropdown if it is showing
if (hasActiveDropdown && !_this19.canSearch) {
_this19.hideDropdown();
if (hasActiveDropdown && !_this18.canSearch) {
_this18.hideDropdown();
}
}
if (target === _this19.input && hasActiveDropdown) {
if (target === _this18.input && hasActiveDropdown) {
// Hide dropdown if it is showing
_this19.hideDropdown();
_this18.hideDropdown();
}
},
'select-multiple': function selectMultiple() {
if (target === _this19.input) {
if (target === _this18.input) {
// Remove the focus state
_this19.containerOuter.classList.remove(_this19.config.classNames.focusState);
_this18.containerOuter.classList.remove(_this18.config.classNames.focusState);
// Hide dropdown if it is showing
if (hasActiveDropdown) {
_this19.hideDropdown();
_this18.hideDropdown();
}
// De-select any highlighted items
if (hasHighlightedItems) {
_this19.unhighlightAll();
_this18.unhighlightAll();
}
}
}
};
blurActions[this.passedElement.type]();
} else {
// On IE11, clicking the scollbar blurs our input and thus
// closes the dropdown. To stop this, we refocus our input
// if we know we are on IE *and* are scrolling.
this.isScrollingOnIe = false;
this.input.focus();
}
}
@ -2263,7 +2226,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_scrollToChoice',
value: function _scrollToChoice(choice, direction) {
var _this20 = this;
var _this19 = this;
if (!choice) {
return;
@ -2280,7 +2243,7 @@ return /******/ (function(modules) { // webpackBootstrap
var animateScroll = function animateScroll() {
var strength = 4;
var choiceListScrollTop = _this20.choiceList.scrollTop;
var choiceListScrollTop = _this19.choiceList.scrollTop;
var continueAnimation = false;
var easing = void 0;
var distance = void 0;
@ -2289,7 +2252,7 @@ return /******/ (function(modules) { // webpackBootstrap
easing = (endPoint - choiceListScrollTop) / strength;
distance = easing > 1 ? easing : 1;
_this20.choiceList.scrollTop = choiceListScrollTop + distance;
_this19.choiceList.scrollTop = choiceListScrollTop + distance;
if (choiceListScrollTop < endPoint) {
continueAnimation = true;
}
@ -2297,7 +2260,7 @@ return /******/ (function(modules) { // webpackBootstrap
easing = (choiceListScrollTop - endPoint) / strength;
distance = easing > 1 ? easing : 1;
_this20.choiceList.scrollTop = choiceListScrollTop - distance;
_this19.choiceList.scrollTop = choiceListScrollTop - distance;
if (choiceListScrollTop > endPoint) {
continueAnimation = true;
}
@ -2325,7 +2288,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_highlightChoice',
value: function _highlightChoice() {
var _this21 = this;
var _this20 = this;
var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@ -2338,7 +2301,7 @@ return /******/ (function(modules) { // webpackBootstrap
// Remove any highlighted choices
highlightedChoices.forEach(function (choice) {
choice.classList.remove(_this21.config.classNames.highlightedState);
choice.classList.remove(_this20.config.classNames.highlightedState);
choice.setAttribute('aria-selected', 'false');
});
@ -2541,7 +2504,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_addGroup',
value: function _addGroup(group, id) {
var _this22 = this;
var _this21 = this;
var valueKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
var labelKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'label';
@ -2557,7 +2520,7 @@ return /******/ (function(modules) { // webpackBootstrap
var isOptDisabled = option.disabled || option.parentNode && option.parentNode.disabled;
var label = (0, _utils.isType)('Object', option) ? option[labelKey] : option.innerHTML;
_this22._addChoice(option[valueKey], label, option.selected, isOptDisabled, groupId, option.customProperties);
_this21._addChoice(option[valueKey], label, option.selected, isOptDisabled, groupId, option.customProperties);
});
} else {
this.store.dispatch((0, _index3.addGroup)(group.label, group.id, false, group.disabled));
@ -2596,12 +2559,12 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_createTemplates',
value: function _createTemplates() {
var _this23 = this;
var _this22 = this;
var globalClasses = this.config.classNames;
var templates = {
containerOuter: function containerOuter(direction) {
return (0, _utils.strToEl)('\n <div\n class="' + globalClasses.containerOuter + '"\n ' + (_this23.isSelectElement ? _this23.config.searchEnabled ? 'role="combobox" aria-autocomplete="list"' : 'role="listbox"' : '') + '\n data-type="' + _this23.passedElement.type + '"\n ' + (_this23.isSelectOneElement ? 'tabindex="0"' : '') + '\n aria-haspopup="true"\n aria-expanded="false"\n dir="' + direction + '"\n >\n </div>\n ');
return (0, _utils.strToEl)('\n <div\n class="' + globalClasses.containerOuter + '"\n ' + (_this22.isSelectElement ? _this22.config.searchEnabled ? 'role="combobox" aria-autocomplete="list"' : 'role="listbox"' : '') + '\n data-type="' + _this22.passedElement.type + '"\n ' + (_this22.isSelectOneElement ? 'tabindex="0"' : '') + '\n aria-haspopup="true"\n aria-expanded="false"\n dir="' + direction + '"\n >\n </div>\n ');
},
containerInner: function containerInner() {
return (0, _utils.strToEl)('\n <div class="' + globalClasses.containerInner + '"></div>\n ');
@ -2609,7 +2572,7 @@ return /******/ (function(modules) { // webpackBootstrap
itemList: function itemList() {
var _classNames;
var localClasses = (0, _classnames2.default)(globalClasses.list, (_classNames = {}, _defineProperty(_classNames, globalClasses.listSingle, _this23.isSelectOneElement), _defineProperty(_classNames, globalClasses.listItems, !_this23.isSelectOneElement), _classNames));
var localClasses = (0, _classnames2.default)(globalClasses.list, (_classNames = {}, _defineProperty(_classNames, globalClasses.listSingle, _this22.isSelectOneElement), _defineProperty(_classNames, globalClasses.listItems, !_this22.isSelectOneElement), _classNames));
return (0, _utils.strToEl)('\n <div class="' + localClasses + '"></div>\n ');
},
@ -2621,7 +2584,7 @@ return /******/ (function(modules) { // webpackBootstrap
var localClasses = (0, _classnames2.default)(globalClasses.item, (_classNames2 = {}, _defineProperty(_classNames2, globalClasses.highlightedState, data.highlighted), _defineProperty(_classNames2, globalClasses.itemSelectable, !data.highlighted), _classNames2));
if (_this23.config.removeItemButton) {
if (_this22.config.removeItemButton) {
var _classNames3;
localClasses = (0, _classnames2.default)(globalClasses.item, (_classNames3 = {}, _defineProperty(_classNames3, globalClasses.highlightedState, data.highlighted), _defineProperty(_classNames3, globalClasses.itemSelectable, !data.disabled), _classNames3));
@ -2632,7 +2595,7 @@ return /******/ (function(modules) { // webpackBootstrap
return (0, _utils.strToEl)('\n <div\n class="' + localClasses + '"\n data-item\n data-id="' + data.id + '"\n data-value="' + data.value + '"\n ' + (data.active ? 'aria-selected="true"' : '') + '\n ' + (data.disabled ? 'aria-disabled="true"' : '') + '\n >\n ' + data.label + '\n </div>\n ');
},
choiceList: function choiceList() {
return (0, _utils.strToEl)('\n <div\n class="' + globalClasses.list + '"\n dir="ltr"\n role="listbox"\n ' + (!_this23.isSelectOneElement ? 'aria-multiselectable="true"' : '') + '\n >\n </div>\n ');
return (0, _utils.strToEl)('\n <div\n class="' + globalClasses.list + '"\n dir="ltr"\n role="listbox"\n ' + (!_this22.isSelectOneElement ? 'aria-multiselectable="true"' : '') + '\n >\n </div>\n ');
},
choiceGroup: function choiceGroup(data) {
var localClasses = (0, _classnames2.default)(globalClasses.group, _defineProperty({}, globalClasses.itemDisabled, data.disabled));
@ -2644,7 +2607,7 @@ return /******/ (function(modules) { // webpackBootstrap
var localClasses = (0, _classnames2.default)(globalClasses.item, globalClasses.itemChoice, (_classNames5 = {}, _defineProperty(_classNames5, globalClasses.itemDisabled, data.disabled), _defineProperty(_classNames5, globalClasses.itemSelectable, !data.disabled), _classNames5));
return (0, _utils.strToEl)('\n <div\n class="' + localClasses + '"\n data-select-text="' + _this23.config.itemSelectText + '"\n data-choice\n data-id="' + data.id + '"\n data-value="' + data.value + '"\n ' + (data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable') + '\n id="' + data.elementId + '"\n ' + (data.groupId > 0 ? 'role="treeitem"' : 'role="option"') + '\n >\n ' + data.label + '\n </div>\n ');
return (0, _utils.strToEl)('\n <div\n class="' + localClasses + '"\n data-select-text="' + _this22.config.itemSelectText + '"\n data-choice\n data-id="' + data.id + '"\n data-value="' + data.value + '"\n ' + (data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable') + '\n id="' + data.elementId + '"\n ' + (data.groupId > 0 ? 'role="treeitem"' : 'role="option"') + '\n >\n ' + data.label + '\n </div>\n ');
},
input: function input() {
var localClasses = (0, _classnames2.default)(globalClasses.input, globalClasses.inputCloned);
@ -2685,7 +2648,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_createInput',
value: function _createInput() {
var _this24 = this;
var _this23 = this;
var direction = this.passedElement.getAttribute('dir') || 'ltr';
var containerOuter = this._getTemplate('containerOuter', direction);
@ -2760,7 +2723,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (passedGroups && passedGroups.length) {
passedGroups.forEach(function (group) {
_this24._addGroup(group, group.id || null);
_this23._addGroup(group, group.id || null);
});
} else {
var passedOptions = Array.from(this.passedElement.options);
@ -2790,17 +2753,17 @@ return /******/ (function(modules) { // webpackBootstrap
// Add each choice
allChoices.forEach(function (choice, index) {
// Pre-select first choice if it's a single select
if (_this24.isSelectOneElement) {
if (_this23.isSelectOneElement) {
if (hasSelectedChoice || !hasSelectedChoice && index > 0) {
// If there is a selected choice already or the choice is not
// the first in the array, add each choice normally
_this24._addChoice(choice.value, choice.label, choice.selected, choice.disabled, undefined, choice.customProperties);
_this23._addChoice(choice.value, choice.label, choice.selected, choice.disabled, undefined, choice.customProperties);
} else {
// Otherwise pre-select the first choice in the array
_this24._addChoice(choice.value, choice.label, true, false, undefined, choice.customProperties);
_this23._addChoice(choice.value, choice.label, true, false, undefined, choice.customProperties);
}
} else {
_this24._addChoice(choice.value, choice.label, choice.selected, choice.disabled, undefined, choice.customProperties);
_this23._addChoice(choice.value, choice.label, choice.selected, choice.disabled, undefined, choice.customProperties);
}
});
}
@ -2812,9 +2775,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (!item.value) {
return;
}
_this24._addItem(item.value, item.label, item.id, undefined, item.customProperties);
_this23._addItem(item.value, item.label, item.id, undefined, item.customProperties);
} else if (itemType === 'String') {
_this24._addItem(item);
_this23._addItem(item);
}
});
}

2
assets/scripts/dist/choices.js.map vendored
View file

File diff suppressed because one or more lines are too long

8
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

134
assets/scripts/src/choices.js
View file

@ -174,6 +174,9 @@ class Choices {
this.highlightPosition = 0;
this.canSearch = this.config.searchEnabled;
this.placeholder = this.config.placeholder ?
(this.config.placeholderValue || this.passedElement.getAttribute('placeholder')) :
false;
this.placeholder = false;
if (!this.isSelectOneElement) {
@ -1145,14 +1148,9 @@ class Choices {
this._removeItem(itemToRemove);
this._triggerChange(itemToRemove.value);
if (this.isSelectOneElement) {
const placeholder = this.config.placeholder ?
(this.config.placeholderValue || this.passedElement.getAttribute('placeholder')) :
false;
if (placeholder) {
const placeholderItem = this._getTemplate('placeholder', placeholder);
this.itemList.appendChild(placeholderItem);
}
if (this.isSelectOneElement && this.placeholder) {
const placeholderItem = this._getTemplate('placeholder', this.placeholder);
this.itemList.appendChild(placeholderItem);
}
}
}
@ -1357,15 +1355,11 @@ class Choices {
} else {
// Remove loading states/text
this.containerOuter.classList.remove(this.config.classNames.loadingState);
const placeholder = this.config.placeholder ?
this.config.placeholderValue ||
this.passedElement.getAttribute('placeholder') :
false;
if (this.isSelectOneElement) {
placeholderItem.innerHTML = placeholder || '';
placeholderItem.innerHTML = (this.placeholder || '');
} else {
this.input.placeholder = placeholder || '';
this.input.placeholder = (this.placeholder || '');
}
}
}
@ -1560,13 +1554,10 @@ class Choices {
* @return
*/
_setInputWidth() {
if ((this.config.placeholderValue || this.passedElement.getAttribute('placeholder') &&
this.config.placeholder)) {
if (this.placeholder) {
// If there is a placeholder, we only want to set the width of the input when it is a greater
// length than 75% of the placeholder. This stops the input jumping around.
const placeholder = this.config.placeholder ? this.config.placeholderValue ||
this.passedElement.getAttribute('placeholder') : false;
if (this.input.value && this.input.value.length >= (placeholder.length / 1.25)) {
if (this.input.value && this.input.value.length >= (this.placeholder.length / 1.25)) {
this.input.style.width = getWidthOfInput(this.input);
}
} else {
@ -1951,43 +1942,6 @@ class Choices {
}
}
/**
* Focus event on everything in the document
* @param {Object} e Event
* @return
* @private
*/
_onDocumentFocus (e) {
const target = e.target;
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
const blurActions = {
text: () => {
if (target !== this.input) {
if (hasActiveDropdown) {
this.hideDropdown();
}
}
},
'select-one': () => {
if (target !== this.containerOuter) {
if (hasActiveDropdown && !this.canSearch) {
this.hideDropdown();
}
}
},
'select-multiple': () => {
if (target !== this.input) {
if (hasActiveDropdown) {
this.hideDropdown();
}
}
},
};
blurActions[this.passedElement.type]();
}
/**
* Paste event
* @param {Object} e Event
@ -2426,15 +2380,11 @@ class Choices {
);
groupChoices.forEach((option) => {
const isOptDisabled = option.disabled ||
(option.parentNode && option.parentNode.disabled);
let label = isType('Object', option) ?
option[labelKey] :
option.innerHTML;
const isOptDisabled = option.disabled || (option.parentNode && option.parentNode.disabled);
this._addChoice(
option[valueKey],
label,
(isType('Object', option)) ? option[labelKey] : option.innerHTML,
option.selected,
isOptDisabled,
groupId,
@ -2735,11 +2685,6 @@ class Choices {
const choiceList = this._getTemplate('choiceList');
const input = this._getTemplate('input');
const dropdown = this._getTemplate('dropdown');
const placeholder = this.config.placeholder ?
this.config.placeholderValue ||
this.config.searchPlaceholderValue ||
this.passedElement.getAttribute('placeholder') :
false;
this.containerOuter = containerOuter;
this.containerInner = containerInner;
@ -2774,20 +2719,11 @@ class Choices {
// Wrapper inner container with outer container
wrap(containerInner, containerOuter);
// If placeholder has been enabled and we have a value
if (placeholder) {
input.placeholder = placeholder;
if (!this.isSelectOneElement) {
input.style.width = getWidthOfInput(input);
} else {
// If select one element with a search placeholder value
if (this.config.searchPlaceholderValue) {
input.placeholder = this.config.searchPlaceholderValue;
} else if (this.placeholder) {
const placeholderItem = this._getTemplate('placeholder', this.placeholder);
this.itemList.appendChild(placeholderItem);
}
}
if (this.isSelectOneElement) {
input.placeholder = this.config.searchPlaceholderValue || '';
} else if (this.placeholder) {
input.placeholder = this.placeholder;
input.style.width = getWidthOfInput(input);
}
if (!this.config.addItems) {
@ -2846,30 +2782,18 @@ class Choices {
allChoices.forEach((choice, index) => {
// Pre-select first choice if it's a single select
if (this.isSelectOneElement) {
if (hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
// If there is a selected choice already or the choice is not
// the first in the array, add each choice normally
this._addChoice(
choice.value,
choice.label,
choice.selected,
choice.disabled,
undefined,
choice.customProperties,
choice.placeholder
);
} else {
// Otherwise pre-select the first choice in the array
this._addChoice(
choice.value,
choice.label,
true,
false,
undefined,
choice.customProperties,
choice.placeholder
);
}
// If there is a selected choice already or the choice is not
// the first in the array, add each choice normally
// Otherwise pre-select the first choice in the array
this._addChoice(
choice.value,
choice.label,
(hasSelectedChoice || index > 0) ? choice.selected : true,
(hasSelectedChoice || index > 0) ? choice.disabled : false,
undefined,
choice.customProperties,
choice.placeholder
);
} else {
this._addChoice(
choice.value,

2
bower.json
View file

@ -1,6 +1,6 @@
{
"name": "choices.js",
"version": "2.8.11",
"version": "2.8.12",
"description": "A vanilla JS customisable text input/select box plugin",
"main": [
"./assets/scripts/dist/choices.js",

11
index.html
View file

@ -16,7 +16,7 @@
<meta name="theme-color" content="#ffffff">
<!-- Ignore these -->
<link rel="stylesheet" href="assets/styles/css/base.min.css?version=2.8.11">
<link rel="stylesheet" href="assets/styles/css/base.min.css?version=2.8.12">
<!-- End ignore these -->
<!-- Optional includes -->
@ -24,7 +24,7 @@
<!-- End optional includes -->
<!-- Choices includes -->
<link rel="stylesheet" href="assets/styles/css/choices.min.css?version=2.8.11">
<link rel="stylesheet" href="assets/styles/css/choices.min.css?version=2.8.12">
<script src="assets/scripts/dist/choices.min.js?version=2.8.8"></script>
<!-- End Choices includes -->
@ -157,7 +157,6 @@
<h2>Single select input</h2>
<label for="choices-single-default">Default</label>
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
<option selected disabled>This is a placeholder</option>
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
@ -376,7 +375,8 @@
var singleFetch = new Choices('#choices-single-remote-fetch', {
placeholder: true,
placeholderValue: 'Pick an Arctic Monkeys record'
placeholderValue: 'Pick an Arctic Monkeys record',
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
}).ajax(function (callback) {
fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
.then(function (response) {
@ -413,7 +413,8 @@
});
var genericExamples = new Choices('[data-trigger]', {
placeholderValue: 'This is a placeholder set in the config'
placeholderValue: 'This is a placeholder set in the config',
searchPlaceholderValue: 'This is a search placeholder'
});
var singleNoSearch = new Choices('#choices-single-no-search', {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "choices.js",
"version": "2.8.11",
"version": "2.8.12",
"description": "A vanilla JS customisable text input/select box plugin",
"main": "./assets/scripts/dist/choices.min.js",
"scripts": {

35
tests/spec/choices_spec.js
View file

@ -171,6 +171,16 @@ describe('Choices', () => {
this.choices.destroy();
});
it('should apply placeholderValue to input', function() {
this.choices = new Choices(this.input);
expect(this.choices.input.placeholder).toEqual('Placeholder text');
});
it('should not apply searchPlaceholderValue to input', function() {
this.choices = new Choices(this.input);
expect(this.choices.input.placeholder).not.toEqual('Test');
});
it('should accept a user inputted value', function() {
this.choices = new Choices(this.input);
@ -283,6 +293,22 @@ describe('Choices', () => {
this.choices.destroy();
});
it('should not apply placeholderValue to input', function() {
this.choices = new Choices(this.input, {
placeholderValue: 'Placeholder'
});
expect(this.choices.input.placeholder).not.toEqual('Placeholder');
});
it('should apply searchPlaceholderValue to input', function() {
this.choices = new Choices(this.input, {
searchPlaceholderValue: 'Placeholder'
});
expect(this.choices.input.placeholder).toEqual('Placeholder');
});
it('should open the choice list on focusing', function() {
this.choices = new Choices(this.input);
this.choices.input.focus();
@ -600,6 +626,7 @@ describe('Choices', () => {
this.choices = new Choices(this.input, {
placeholderValue: 'Placeholder text',
searchPlaceholderValue: 'Test',
choices: [{
value: 'One',
label: 'Label One',
@ -620,6 +647,14 @@ describe('Choices', () => {
this.choices.destroy();
});
it('should apply placeholderValue to input', function() {
expect(this.choices.input.placeholder).toEqual('Placeholder text');
});
it('should not apply searchPlaceholderValue to input', function() {
expect(this.choices.input.placeholder).not.toEqual('Test');
});
it('should add any pre-defined values', function() {
expect(this.choices.currentState.items.length).toBeGreaterThan(1);
});

2
version.js
View file

@ -1,4 +1,4 @@
// Example usage: npm --newVersion=2.8.11 run version
// Example usage: npm --newVersion=2.8.12 run version
const fs = require('fs');
const path = require('path');