mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
More higlighting option tweaks
This commit is contained in:
parent
35b9670ac5
commit
9dc23e86bf
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
|
@ -94,9 +94,6 @@ export class Choices {
|
||||||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||||
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
||||||
|
|
||||||
// Initial state of input type (we update this when we init)
|
|
||||||
this.inputType = null;
|
|
||||||
|
|
||||||
// Set preset items - this looks out of place
|
// Set preset items - this looks out of place
|
||||||
this.presetItems = [];
|
this.presetItems = [];
|
||||||
if(this.options.items.length) {
|
if(this.options.items.length) {
|
||||||
|
@ -153,23 +150,25 @@ export class Choices {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
handleEnter(activeItems, value) {
|
handleEnter(activeItems, value = null) {
|
||||||
let canUpdate = true;
|
let canUpdate = true;
|
||||||
|
|
||||||
if(this.options.addItems) {
|
if(this.passedElement.type === 'text') {
|
||||||
if (this.options.maxItems && this.options.maxItems <= this.list.children.length) {
|
if(this.options.addItems) {
|
||||||
// If there is a max entry limit and we have reached that limit
|
if (this.options.maxItems && this.options.maxItems <= this.list.children.length) {
|
||||||
// don't update
|
// If there is a max entry limit and we have reached that limit
|
||||||
|
// don't update
|
||||||
|
canUpdate = false;
|
||||||
|
} else if(this.options.allowDuplicates === false && this.passedElement.value) {
|
||||||
|
// If no duplicates are allowed, and the value already exists
|
||||||
|
// in the array, don't update
|
||||||
|
canUpdate = !activeItems.some((item) => {
|
||||||
|
return item.value === value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
canUpdate = false;
|
canUpdate = false;
|
||||||
} else if(this.options.allowDuplicates === false && this.passedElement.value) {
|
}
|
||||||
// If no duplicates are allowed, and the value already exists
|
|
||||||
// in the array, don't update
|
|
||||||
canUpdate = !activeItems.some((item) => {
|
|
||||||
return item.value === value;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
canUpdate = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// All is good, update
|
// All is good, update
|
||||||
|
@ -190,6 +189,10 @@ export class Choices {
|
||||||
this.clearInput(this.passedElement);
|
this.clearInput(this.passedElement);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(this.passedElement.type === 'select-multiple') {
|
||||||
|
console.log('hit');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -257,9 +260,19 @@ export class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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 && e.target.value) {
|
if (e.keyCode === enterKey) {
|
||||||
const value = this.input.value;
|
if(e.target.value && this.passedElement.type === 'text') {
|
||||||
this.handleEnter(activeItems, value);
|
const value = this.input.value;
|
||||||
|
this.handleEnter(activeItems, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
||||||
|
const highlighted = this.getOptionsFilteredByHighlighted();
|
||||||
|
if(highlighted) {
|
||||||
|
this.addItem(highlighted.value, highlighted.label, highlighted.id);
|
||||||
|
this.input.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(e.keyCode === escapeKey && hasActiveDropDown) {
|
if(e.keyCode === escapeKey && hasActiveDropDown) {
|
||||||
|
@ -283,7 +296,7 @@ export class Choices {
|
||||||
|
|
||||||
onKeyUp(e) {
|
onKeyUp(e) {
|
||||||
if(e.target === this.input) {
|
if(e.target === this.input) {
|
||||||
if(this.inputType === 'multipleSelect' && this.options.allowSearch) {
|
if(this.passedElement.type === 'select-multiple' && this.options.allowSearch) {
|
||||||
if(this.input.value) {
|
if(this.input.value) {
|
||||||
// If we have a value, filter options based on it
|
// If we have a value, filter options based on it
|
||||||
const handleFilter = debounce(() => {
|
const handleFilter = debounce(() => {
|
||||||
|
@ -353,7 +366,7 @@ export class Choices {
|
||||||
this.deselectAll();
|
this.deselectAll();
|
||||||
}
|
}
|
||||||
// If there is a dropdown and it is active
|
// If there is a dropdown and it is active
|
||||||
if(this.inputType === 'multipleSelect' && this.dropdown.classList.contains(this.options.classNames.activeState)) {
|
if(this.passedElement.type === 'select-multiple' && this.dropdown.classList.contains(this.options.classNames.activeState)) {
|
||||||
this.toggleDropdown();
|
this.toggleDropdown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -494,9 +507,9 @@ export class Choices {
|
||||||
const id = this.store.getState().items.length + 1;
|
const id = this.store.getState().items.length + 1;
|
||||||
|
|
||||||
// Close dropdown
|
// Close dropdown
|
||||||
if(this.inputType === 'multipleSelect' && this.dropdown.classList.contains(this.options.classNames.activeState)) {
|
// if(this.passedElement.type === 'select-multiple' && this.dropdown.classList.contains(this.options.classNames.activeState)) {
|
||||||
this.toggleDropdown();
|
// this.toggleDropdown();
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Run callback if it is a function
|
// Run callback if it is a function
|
||||||
if(callback){
|
if(callback){
|
||||||
|
@ -686,6 +699,14 @@ export class Choices {
|
||||||
return valueArray;
|
return valueArray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getOptionsFilteredByHighlighted() {
|
||||||
|
const options = this.getOptions();
|
||||||
|
const value = options.find((option) => {
|
||||||
|
return option.highlighted === true;
|
||||||
|
});
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
getOptionsFiltedBySelectable() {
|
getOptionsFiltedBySelectable() {
|
||||||
const options = this.getOptions();
|
const options = this.getOptions();
|
||||||
const valueArray = options.filter((option) => {
|
const valueArray = options.filter((option) => {
|
||||||
|
@ -763,7 +784,6 @@ export class Choices {
|
||||||
this.containerInner = containerInner;
|
this.containerInner = containerInner;
|
||||||
this.input = input;
|
this.input = input;
|
||||||
this.list = list;
|
this.list = list;
|
||||||
this.inputType = "text";
|
|
||||||
|
|
||||||
// Add any preset values seperated by delimiter
|
// Add any preset values seperated by delimiter
|
||||||
this.presetItems.forEach((value) => {
|
this.presetItems.forEach((value) => {
|
||||||
|
@ -815,7 +835,6 @@ export class Choices {
|
||||||
this.input = input;
|
this.input = input;
|
||||||
this.list = list;
|
this.list = list;
|
||||||
this.dropdown = dropdown;
|
this.dropdown = dropdown;
|
||||||
this.inputType = "multipleSelect";
|
|
||||||
|
|
||||||
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
||||||
|
|
||||||
|
@ -887,7 +906,7 @@ export class Choices {
|
||||||
|
|
||||||
|
|
||||||
// OPTIONS
|
// OPTIONS
|
||||||
if(this.inputType === 'multipleSelect') {
|
if(this.passedElement.type === 'select-multiple') {
|
||||||
|
|
||||||
const activeOptions = this.getOptionsFilteredByActive();
|
const activeOptions = this.getOptionsFilteredByActive();
|
||||||
const activeGroups = this.getGroupsFilteredByActive();
|
const activeGroups = this.getGroupsFilteredByActive();
|
||||||
|
@ -914,7 +933,6 @@ export class Choices {
|
||||||
`);
|
`);
|
||||||
|
|
||||||
groupOptions.forEach((option) => {
|
groupOptions.forEach((option) => {
|
||||||
console.log(option);
|
|
||||||
const dropdownItem = strToEl(`
|
const dropdownItem = strToEl(`
|
||||||
<div class="${ classNames.item } ${ classNames.itemOption } ${ option.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable } ${ option.highlighted ? classNames.highlightedState : '' }" data-choice-option data-choice-id="${ option.id }" data-choice-value="${ option.value }">
|
<div class="${ classNames.item } ${ classNames.itemOption } ${ option.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable } ${ option.highlighted ? classNames.highlightedState : '' }" data-choice-option data-choice-id="${ option.id }" data-choice-value="${ option.value }">
|
||||||
${ option.label }
|
${ option.label }
|
||||||
|
@ -1046,7 +1064,6 @@ export class Choices {
|
||||||
this.passedElement = null;
|
this.passedElement = null;
|
||||||
this.userOptions = null;
|
this.userOptions = null;
|
||||||
this.options = null;
|
this.options = null;
|
||||||
this.passedElement = null;
|
|
||||||
this.initialised = null;
|
this.initialised = null;
|
||||||
this.store = null;
|
this.store = null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,6 +48,7 @@ const options = (state = [], action) => {
|
||||||
|
|
||||||
case 'FILTER_OPTIONS':
|
case 'FILTER_OPTIONS':
|
||||||
const filteredResults = action.results.items;
|
const filteredResults = action.results.items;
|
||||||
|
let firstActive = false;
|
||||||
const newState = state.map((option, index) => {
|
const newState = state.map((option, index) => {
|
||||||
// Set active state based on whether option is
|
// Set active state based on whether option is
|
||||||
// within filtered results
|
// within filtered results
|
||||||
|
@ -55,6 +56,15 @@ const options = (state = [], action) => {
|
||||||
return result.id === index;
|
return result.id === index;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Highlight option if it is active and is the first
|
||||||
|
// active option in state
|
||||||
|
if(option.active && firstActive === false) {
|
||||||
|
option.highlighted = true;
|
||||||
|
firstActive = true;
|
||||||
|
} else {
|
||||||
|
option.highlighted = false;
|
||||||
|
}
|
||||||
|
|
||||||
return option;
|
return option;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue