mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-12 02:42:31 +02:00
Housekeeping
This commit is contained in:
parent
d632b3383f
commit
cd9797e9d0
|
@ -362,10 +362,10 @@ class Choices {
|
||||||
renderItems(items, fragment) {
|
renderItems(items, fragment) {
|
||||||
// Create fragment to add elements to
|
// Create fragment to add elements to
|
||||||
const itemListFragment = fragment || document.createDocumentFragment();
|
const itemListFragment = fragment || document.createDocumentFragment();
|
||||||
// Simplify store data to just values
|
|
||||||
const itemsFiltered = this.store.getItemsReducedToValues(items);
|
|
||||||
|
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
|
// Simplify store data to just values
|
||||||
|
const itemsFiltered = this.store.getItemsReducedToValues(items);
|
||||||
// Assign hidden input array of values
|
// Assign hidden input array of values
|
||||||
this.passedElement.setAttribute('value', itemsFiltered.join(this.config.delimiter));
|
this.passedElement.setAttribute('value', itemsFiltered.join(this.config.delimiter));
|
||||||
} else {
|
} else {
|
||||||
|
@ -420,7 +420,7 @@ class Choices {
|
||||||
this.choiceList.innerHTML = '';
|
this.choiceList.innerHTML = '';
|
||||||
|
|
||||||
// Scroll back to top of choices list
|
// Scroll back to top of choices list
|
||||||
if(this.config.resetScrollPosition){
|
if (this.config.resetScrollPosition) {
|
||||||
this.choiceList.scrollTop = 0;
|
this.choiceList.scrollTop = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -510,7 +510,7 @@ class Choices {
|
||||||
this.store.dispatch(highlightItem(id, true));
|
this.store.dispatch(highlightItem(id, true));
|
||||||
|
|
||||||
if (runEvent) {
|
if (runEvent) {
|
||||||
if(group && group.value) {
|
if (group && group.value) {
|
||||||
triggerEvent(this.passedElement, 'highlightItem', {
|
triggerEvent(this.passedElement, 'highlightItem', {
|
||||||
id,
|
id,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
|
@ -546,7 +546,7 @@ class Choices {
|
||||||
|
|
||||||
this.store.dispatch(highlightItem(id, false));
|
this.store.dispatch(highlightItem(id, false));
|
||||||
|
|
||||||
if(group && group.value) {
|
if (group && group.value) {
|
||||||
triggerEvent(this.passedElement, 'unhighlightItem', {
|
triggerEvent(this.passedElement, 'unhighlightItem', {
|
||||||
id,
|
id,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
|
@ -796,13 +796,29 @@ class Choices {
|
||||||
// If we are dealing with a select input, we need to create an option first
|
// 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.
|
// that is then selected. For text inputs we can just add items normally.
|
||||||
if (passedElementType !== 'text') {
|
if (passedElementType !== 'text') {
|
||||||
this._addChoice(true, false, item.value, item.label, -1);
|
this._addChoice(
|
||||||
|
item.value,
|
||||||
|
item.label,
|
||||||
|
true,
|
||||||
|
false,
|
||||||
|
-1
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
this._addItem(item.value, item.label, item.id);
|
this._addItem(
|
||||||
|
item.value,
|
||||||
|
item.label,
|
||||||
|
item.id
|
||||||
|
);
|
||||||
}
|
}
|
||||||
} else if (itemType === 'String') {
|
} else if (itemType === 'String') {
|
||||||
if (passedElementType !== 'text') {
|
if (passedElementType !== 'text') {
|
||||||
this._addChoice(true, false, item, item, -1);
|
this._addChoice(
|
||||||
|
item,
|
||||||
|
item,
|
||||||
|
true,
|
||||||
|
false,
|
||||||
|
-1
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
this._addItem(item);
|
this._addItem(item);
|
||||||
}
|
}
|
||||||
|
@ -869,19 +885,27 @@ class Choices {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// Clear choices if needed
|
// Clear choices if needed
|
||||||
if(replaceChoices) {
|
if (replaceChoices) {
|
||||||
this._clearChoices();
|
this._clearChoices();
|
||||||
}
|
}
|
||||||
// Add choices if passed
|
// Add choices if passed
|
||||||
if (choices && choices.length) {
|
if (choices && choices.length) {
|
||||||
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
||||||
choices.forEach((result, index) => {
|
choices.forEach((result, index) => {
|
||||||
const isSelected = result.selected ? result.selected : false;
|
|
||||||
const isDisabled = result.disabled ? result.disabled : false;
|
|
||||||
if (result.choices) {
|
if (result.choices) {
|
||||||
this._addGroup(result, (result.id || null), value, label);
|
this._addGroup(
|
||||||
|
result,
|
||||||
|
(result.id || null),
|
||||||
|
value,
|
||||||
|
label
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
this._addChoice(isSelected, isDisabled, result[value], result[label]);
|
this._addChoice(
|
||||||
|
result[value],
|
||||||
|
result[label],
|
||||||
|
result.selected,
|
||||||
|
result.disabled
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -969,7 +993,9 @@ class Choices {
|
||||||
if (this.initialised === true) {
|
if (this.initialised === true) {
|
||||||
if (this.isSelectElement) {
|
if (this.isSelectElement) {
|
||||||
// Show loading text
|
// Show loading text
|
||||||
this._handleLoadingState(true);
|
requestAnimationFrame(() => {
|
||||||
|
this._handleLoadingState(true)
|
||||||
|
});
|
||||||
// Run callback
|
// Run callback
|
||||||
fn(this._ajaxCallback());
|
fn(this._ajaxCallback());
|
||||||
}
|
}
|
||||||
|
@ -1093,7 +1119,12 @@ class Choices {
|
||||||
const canAddItem = this._canAddItem(activeItems, choice.value);
|
const canAddItem = this._canAddItem(activeItems, choice.value);
|
||||||
|
|
||||||
if (canAddItem.response) {
|
if (canAddItem.response) {
|
||||||
this._addItem(choice.value, choice.label, choice.id, choice.groupId);
|
this._addItem(
|
||||||
|
choice.value,
|
||||||
|
choice.label,
|
||||||
|
choice.id,
|
||||||
|
choice.groupId
|
||||||
|
);
|
||||||
this._triggerChange(choice.value);
|
this._triggerChange(choice.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1203,7 +1234,7 @@ class Choices {
|
||||||
*/
|
*/
|
||||||
_handleLoadingState(isLoading = true) {
|
_handleLoadingState(isLoading = true) {
|
||||||
let placeholderItem = this.itemList.querySelector(`.${this.config.classNames.placeholder}`);
|
let placeholderItem = this.itemList.querySelector(`.${this.config.classNames.placeholder}`);
|
||||||
if(isLoading) {
|
if (isLoading) {
|
||||||
this.containerOuter.classList.add(this.config.classNames.loadingState);
|
this.containerOuter.classList.add(this.config.classNames.loadingState);
|
||||||
this.containerOuter.setAttribute('aria-busy', 'true');
|
this.containerOuter.setAttribute('aria-busy', 'true');
|
||||||
if (this.passedElement.type === 'select-one') {
|
if (this.passedElement.type === 'select-one') {
|
||||||
|
@ -1219,7 +1250,11 @@ class Choices {
|
||||||
} else {
|
} else {
|
||||||
// Remove loading states/text
|
// Remove loading states/text
|
||||||
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
||||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
const placeholder = this.config.placeholder ?
|
||||||
|
this.config.placeholderValue ||
|
||||||
|
this.passedElement.getAttribute('placeholder') :
|
||||||
|
false;
|
||||||
|
|
||||||
if (this.passedElement.type === 'select-one') {
|
if (this.passedElement.type === 'select-one') {
|
||||||
placeholderItem.innerHTML = placeholder || '';
|
placeholderItem.innerHTML = placeholder || '';
|
||||||
} else {
|
} else {
|
||||||
|
@ -1246,12 +1281,21 @@ class Choices {
|
||||||
this._handleLoadingState(false);
|
this._handleLoadingState(false);
|
||||||
// Add each result as a choice
|
// Add each result as a choice
|
||||||
parsedResults.forEach((result, index) => {
|
parsedResults.forEach((result, index) => {
|
||||||
const isSelected = result.selected ? result.selected : false;
|
|
||||||
const isDisabled = result.disabled ? result.disabled : false;
|
|
||||||
if (result.choices) {
|
if (result.choices) {
|
||||||
this._addGroup(result, (result.id || null), value, label);
|
const groupId = (result.id || null);
|
||||||
|
this._addGroup(
|
||||||
|
result,
|
||||||
|
groupId,
|
||||||
|
value,
|
||||||
|
label
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
this._addChoice(isSelected, isDisabled, result[value], result[label]);
|
this._addChoice(
|
||||||
|
result[value],
|
||||||
|
result[label],
|
||||||
|
result.selected,
|
||||||
|
result.disabled
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -1685,7 +1729,7 @@ class Choices {
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const hasShiftKey = e.shiftKey;
|
const hasShiftKey = e.shiftKey;
|
||||||
|
|
||||||
if(foundTarget = findAncestorByAttrName(target, 'data-button')) {
|
if (foundTarget = findAncestorByAttrName(target, 'data-button')) {
|
||||||
this._handleButtonAction(activeItems, foundTarget);
|
this._handleButtonAction(activeItems, foundTarget);
|
||||||
} else if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
|
} else if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
|
||||||
this._handleItemAction(activeItems, foundTarget, hasShiftKey);
|
this._handleItemAction(activeItems, foundTarget, hasShiftKey);
|
||||||
|
@ -2035,7 +2079,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Trigger change event
|
// Trigger change event
|
||||||
if(group && group.value) {
|
if (group && group.value) {
|
||||||
triggerEvent(this.passedElement, 'addItem', {
|
triggerEvent(this.passedElement, 'addItem', {
|
||||||
id,
|
id,
|
||||||
value: passedValue,
|
value: passedValue,
|
||||||
|
@ -2077,7 +2121,7 @@ class Choices {
|
||||||
|
|
||||||
this.store.dispatch(removeItem(id, choiceId));
|
this.store.dispatch(removeItem(id, choiceId));
|
||||||
|
|
||||||
if(group && group.value) {
|
if (group && group.value) {
|
||||||
triggerEvent(this.passedElement, 'removeItem', {
|
triggerEvent(this.passedElement, 'removeItem', {
|
||||||
id,
|
id,
|
||||||
value,
|
value,
|
||||||
|
@ -2105,7 +2149,7 @@ class Choices {
|
||||||
* @return
|
* @return
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_addChoice(isSelected, isDisabled, value, label, groupId = -1) {
|
_addChoice(value, label, isSelected = false, isDisabled = false, groupId = -1) {
|
||||||
if (typeof value === 'undefined' || value === null) {
|
if (typeof value === 'undefined' || value === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -2116,7 +2160,14 @@ class Choices {
|
||||||
const choiceId = choices ? choices.length + 1 : 1;
|
const choiceId = choices ? choices.length + 1 : 1;
|
||||||
const choiceElementId = `${this.baseId}-${this.idNames.itemChoice}-${choiceId}`;
|
const choiceElementId = `${this.baseId}-${this.idNames.itemChoice}-${choiceId}`;
|
||||||
|
|
||||||
this.store.dispatch(addChoice(value, choiceLabel, choiceId, groupId, isDisabled, choiceElementId));
|
this.store.dispatch(addChoice(
|
||||||
|
value,
|
||||||
|
choiceLabel,
|
||||||
|
choiceId,
|
||||||
|
groupId,
|
||||||
|
isDisabled,
|
||||||
|
choiceElementId
|
||||||
|
));
|
||||||
|
|
||||||
if (isSelected) {
|
if (isSelected) {
|
||||||
this._addItem(value, choiceLabel, choiceId);
|
this._addItem(value, choiceLabel, choiceId);
|
||||||
|
@ -2147,23 +2198,35 @@ class Choices {
|
||||||
const isDisabled = group.disabled ? group.disabled : false;
|
const isDisabled = group.disabled ? group.disabled : false;
|
||||||
|
|
||||||
if (groupChoices) {
|
if (groupChoices) {
|
||||||
this.store.dispatch(addGroup(group.label, groupId, true, isDisabled));
|
this.store.dispatch(addGroup(
|
||||||
|
group.label,
|
||||||
|
groupId,
|
||||||
|
true,
|
||||||
|
isDisabled
|
||||||
|
));
|
||||||
|
|
||||||
groupChoices.forEach((option) => {
|
groupChoices.forEach((option) => {
|
||||||
const isOptDisabled = (option.disabled || (option.parentNode && option.parentNode.disabled)) || false;
|
const isOptDisabled = option.disabled ||
|
||||||
const isOptSelected = option.selected ? option.selected : false;
|
(option.parentNode && option.parentNode.disabled);
|
||||||
let label;
|
let label = isType('Object', option) ?
|
||||||
|
option[labelKey] :
|
||||||
|
option.innerHTML;
|
||||||
|
|
||||||
if (isType('Object', option)) {
|
this._addChoice(
|
||||||
label = option[labelKey] || option[valueKey];
|
option[valueKey],
|
||||||
} else {
|
label,
|
||||||
label = option.innerHTML;
|
option.selected,
|
||||||
}
|
isOptDisabled,
|
||||||
|
groupId
|
||||||
this._addChoice(isOptSelected, isOptDisabled, option[valueKey], label, groupId);
|
);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.store.dispatch(addGroup(group.label, group.id, false, group.disabled));
|
this.store.dispatch(addGroup(
|
||||||
|
group.label,
|
||||||
|
group.id,
|
||||||
|
false,
|
||||||
|
group.disabled
|
||||||
|
));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2535,20 +2598,33 @@ class Choices {
|
||||||
|
|
||||||
// Add each choice
|
// Add each choice
|
||||||
allChoices.forEach((choice, index) => {
|
allChoices.forEach((choice, index) => {
|
||||||
const isDisabled = choice.disabled ? choice.disabled : false;
|
|
||||||
const isSelected = choice.selected ? choice.selected : false;
|
|
||||||
// Pre-select first choice if it's a single select
|
// Pre-select first choice if it's a single select
|
||||||
if (this.passedElement.type === 'select-one') {
|
if (this.passedElement.type === 'select-one') {
|
||||||
if (hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
|
if (hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
|
||||||
// If there is a selected choice already or the choice is not
|
// If there is a selected choice already or the choice is not
|
||||||
// the first in the array, add each choice normally
|
// the first in the array, add each choice normally
|
||||||
this._addChoice(isSelected, isDisabled, choice.value, choice.label);
|
this._addChoice(
|
||||||
|
choice.value,
|
||||||
|
choice.label,
|
||||||
|
choice.selected,
|
||||||
|
choice.disabled
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
// Otherwise pre-select the first choice in the array
|
// Otherwise pre-select the first choice in the array
|
||||||
this._addChoice(true, false, choice.value, choice.label);
|
this._addChoice(
|
||||||
|
choice.value,
|
||||||
|
choice.label,
|
||||||
|
true,
|
||||||
|
false
|
||||||
|
);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this._addChoice(isSelected, isDisabled, choice.value, choice.label);
|
this._addChoice(
|
||||||
|
choice.value,
|
||||||
|
choice.label,
|
||||||
|
choice.selected,
|
||||||
|
choice.disabled
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ const choices = (state = [], action) => {
|
||||||
elementId: action.elementId,
|
elementId: action.elementId,
|
||||||
groupId: action.groupId,
|
groupId: action.groupId,
|
||||||
value: action.value,
|
value: action.value,
|
||||||
label: action.label,
|
label: (action.label || action.value),
|
||||||
disabled: action.disabled,
|
disabled: action.disabled,
|
||||||
selected: false,
|
selected: false,
|
||||||
active: true,
|
active: true,
|
||||||
|
|
Loading…
Reference in a new issue