mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-18 13:45:12 +02:00
Build
This commit is contained in:
parent
93f69eb3da
commit
1f547bb065
4
assets/scripts/dist/bundle.js
vendored
4
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -114,6 +114,39 @@ export class Choices {
|
||||||
this.onClick = this.onClick.bind(this);
|
this.onClick = this.onClick.bind(this);
|
||||||
this.onPaste = this.onPaste.bind(this);
|
this.onPaste = this.onPaste.bind(this);
|
||||||
|
|
||||||
|
const classNames = this.options.classNames;
|
||||||
|
|
||||||
|
this.templates = {
|
||||||
|
option: (data) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable }" data-choice-option data-choice-id="${ data.id }" data-choice-value="${ data.value }">
|
||||||
|
${ data.label }
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
optgroup: (data) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.group } ${ data.disabled ? classNames.itemDisabled : '' }" data-choice-value="${ data.value }" data-choice-group-id="${ data.id }">
|
||||||
|
<div class="${ classNames.groupHeading }">${ data.value }</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
item: (data) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable }" data-choice-option data-choice-id="${ data.id }" data-choice-value="${ data.value }">
|
||||||
|
${ data.label }
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
notice: (label) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.item } ${ classNames.itemOption }" data-choice-notice>
|
||||||
|
${ label }
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
// Let's have it large
|
// Let's have it large
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
@ -242,7 +275,8 @@ export class Choices {
|
||||||
const activeOptions = this.getOptionsFilteredByActive();
|
const activeOptions = this.getOptionsFilteredByActive();
|
||||||
const inputIsFocussed = this.input === document.activeElement;
|
const inputIsFocussed = this.input === document.activeElement;
|
||||||
const ctrlDownKey = e.ctrlKey || e.metaKey;
|
const ctrlDownKey = e.ctrlKey || e.metaKey;
|
||||||
const deleteKey = 8 || 46;
|
const backKey = 46;
|
||||||
|
const deleteKey = 8;
|
||||||
const enterKey = 13;
|
const enterKey = 13;
|
||||||
const aKey = 65;
|
const aKey = 65;
|
||||||
const escapeKey = 27;
|
const escapeKey = 27;
|
||||||
|
@ -254,14 +288,15 @@ export class Choices {
|
||||||
// If we are typing in the input
|
// If we are typing in the input
|
||||||
if(e.target === this.input) {
|
if(e.target === this.input) {
|
||||||
// this.input.style.width = getWidthOfInput(this.input);
|
// this.input.style.width = getWidthOfInput(this.input);
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case aKey:
|
||||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||||
if (ctrlDownKey && e.keyCode === aKey && hasItems) {
|
if(ctrlDownKey && hasItems) {
|
||||||
this.handleSelectAll();
|
this.handleSelectAll();
|
||||||
}
|
}
|
||||||
|
break;
|
||||||
|
case enterKey:
|
||||||
// If enter key is pressed and the input has a value
|
// If enter key is pressed and the input has a value
|
||||||
if (e.keyCode === enterKey) {
|
|
||||||
if(e.target.value && this.passedElement.type === 'text') {
|
if(e.target.value && this.passedElement.type === 'text') {
|
||||||
const value = this.input.value;
|
const value = this.input.value;
|
||||||
this.handleEnter(activeItems, value);
|
this.handleEnter(activeItems, value);
|
||||||
|
@ -278,15 +313,15 @@ export class Choices {
|
||||||
this.input.value = "";
|
this.input.value = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
break;
|
||||||
|
case escapeKey:
|
||||||
if(e.keyCode === escapeKey && hasActiveDropDown) {
|
|
||||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
||||||
this.toggleDropdown();
|
this.toggleDropdown();
|
||||||
}
|
}
|
||||||
}
|
break;
|
||||||
|
case downKey:
|
||||||
if(e.keyCode === downKey || e.keyCode === upKey) {
|
case upKey:
|
||||||
|
// If up or down key is pressed, traverse through options
|
||||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
||||||
const selectableOptions = activeOptions.filter((option) => {
|
const selectableOptions = activeOptions.filter((option) => {
|
||||||
return !option.selected;
|
return !option.selected;
|
||||||
|
@ -316,16 +351,18 @@ export class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
break
|
||||||
|
case backKey:
|
||||||
}
|
case deleteKey:
|
||||||
|
|
||||||
if(inputIsFocussed) {
|
|
||||||
// If backspace or delete key is pressed and the input has no value
|
// If backspace or delete key is pressed and the input has no value
|
||||||
if (e.keyCode === deleteKey && !e.target.value) {
|
if(inputIsFocussed && !e.target.value) {
|
||||||
this.handleBackspaceKey(activeItems);
|
this.handleBackspaceKey(activeItems);
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -558,6 +595,8 @@ export class Choices {
|
||||||
const value = item.value;
|
const value = item.value;
|
||||||
const optionId = item.optionId;
|
const optionId = item.optionId;
|
||||||
|
|
||||||
|
this.store.dispatch(removeItem(id, optionId));
|
||||||
|
|
||||||
// Run callback
|
// Run callback
|
||||||
if(callback){
|
if(callback){
|
||||||
if(isType('Function', callback)) {
|
if(isType('Function', callback)) {
|
||||||
|
@ -566,8 +605,6 @@ export class Choices {
|
||||||
console.error('callbackOnRemoveItem: Callback is not a function');
|
console.error('callbackOnRemoveItem: Callback is not a function');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.store.dispatch(removeItem(id, optionId));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
removeItemsByValue(value) {
|
removeItemsByValue(value) {
|
||||||
|
@ -938,18 +975,10 @@ export class Choices {
|
||||||
});
|
});
|
||||||
|
|
||||||
if(groupOptions.length >= 1) {
|
if(groupOptions.length >= 1) {
|
||||||
const dropdownGroup = strToEl(`
|
const dropdownGroup = this.templates['optgroup'](group);
|
||||||
<div class="${ classNames.group } ${ group.disabled ? classNames.itemDisabled : '' }" data-choice-value="${ group.value }" data-choice-group-id="${ group.id }">
|
|
||||||
<div class="${ classNames.groupHeading }">${ group.value }</div>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
|
|
||||||
groupOptions.forEach((option, j) => {
|
groupOptions.forEach((option, j) => {
|
||||||
const dropdownItem = strToEl(`
|
const dropdownItem = this.templates['option'](option);
|
||||||
<div class="${ classNames.item } ${ classNames.itemOption } ${ option.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable } ${ i === 0 && j === 0 ? classNames.highlightedState : ''}" data-choice-option data-choice-id="${ option.id }" data-choice-value="${ option.value }">
|
|
||||||
${ option.label }
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
|
|
||||||
dropdownGroup.appendChild(dropdownItem);
|
dropdownGroup.appendChild(dropdownItem);
|
||||||
});
|
});
|
||||||
|
@ -959,11 +988,7 @@ export class Choices {
|
||||||
});
|
});
|
||||||
} else if(activeOptions.length >= 1) {
|
} else if(activeOptions.length >= 1) {
|
||||||
activeOptions.forEach((option, i) => {
|
activeOptions.forEach((option, i) => {
|
||||||
const dropdownItem = strToEl(`
|
const dropdownItem = this.templates['option'](option);
|
||||||
<div class="${ classNames.item } ${ classNames.itemOption } ${ option.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable } ${ i === 0 ? classNames.highlightedState : ''}" data-choice-option data-choice-id="${ option.id }" data-choice-value="${ option.value }">
|
|
||||||
${ option.label }
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
optionListFragment.appendChild(dropdownItem);
|
optionListFragment.appendChild(dropdownItem);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -972,7 +997,8 @@ export class Choices {
|
||||||
|
|
||||||
// If dropdown is empty, show a no content message
|
// If dropdown is empty, show a no content message
|
||||||
if(this.dropdown.innerHTML === "") {
|
if(this.dropdown.innerHTML === "") {
|
||||||
const dropdownItem = strToEl(`<div class="${ classNames.item }">No options to select</div>`);
|
const dropdownItem = this.templates['notice']('No options to select');
|
||||||
|
|
||||||
optionListFragment.appendChild(dropdownItem);
|
optionListFragment.appendChild(dropdownItem);
|
||||||
this.dropdown.appendChild(optionListFragment);
|
this.dropdown.appendChild(optionListFragment);
|
||||||
}
|
}
|
||||||
|
@ -995,11 +1021,7 @@ export class Choices {
|
||||||
// Add each list item to list
|
// Add each list item to list
|
||||||
activeItems.forEach((item) => {
|
activeItems.forEach((item) => {
|
||||||
// Create new list element
|
// Create new list element
|
||||||
const listItem = strToEl(`
|
const listItem = this.templates['item'](item);
|
||||||
<li class="${ classNames.item } ${ this.options.removeItems ? classNames.itemSelectable : '' } ${ item.selected ? classNames.selectedState : '' }" data-choice-item data-choice-id="${ item.id }" data-choice-selected="${ item.selected }">
|
|
||||||
${ item.label }
|
|
||||||
</li>
|
|
||||||
`);
|
|
||||||
|
|
||||||
// Append it to list
|
// Append it to list
|
||||||
itemListFragment.appendChild(listItem);
|
itemListFragment.appendChild(listItem);
|
||||||
|
|
Loading…
Reference in a new issue