mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-21 06:56:34 +02:00
Better handling of option highlighting + Fuse search implementation
This commit is contained in:
Josh Johnson
parent
c359ed3e47
commit
345fe885c5
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
|
|
@ -28,8 +28,8 @@ export class Choices {
|
|||
const elements = document.querySelectorAll(element);
|
||||
if(elements.length > 1) {
|
||||
for (let i = 1; i < elements.length; i++) {
|
||||
let el = elements[i];
|
||||
new Choices(el, options);
|
||||
const el = elements[i];
|
||||
new Choices(el, userOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -280,7 +280,6 @@ export class Choices {
|
|||
case upKey:
|
||||
// If up or down key is pressed, traverse through options
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
|
||||
|
||||
const currentEl = this.dropdown.querySelector(`.${this.options.classNames.highlightedState}`);
|
||||
const directionInt = e.keyCode === downKey ? 1 : -1;
|
||||
let nextEl;
|
||||
|
|
@ -292,10 +291,13 @@ export class Choices {
|
|||
}
|
||||
|
||||
if(nextEl) {
|
||||
this.highlightOption(nextEl);
|
||||
// We prevent default to stop the cursor moving
|
||||
// when pressing the arrow
|
||||
e.preventDefault();
|
||||
if(!isScrolledIntoView(nextEl, this.dropdown, directionInt)) {
|
||||
this.scrollToOption(nextEl, directionInt);
|
||||
}
|
||||
this.highlightOption(nextEl);
|
||||
}
|
||||
}
|
||||
break
|
||||
|
|
@ -323,25 +325,32 @@ export class Choices {
|
|||
if(e.target !== this.input) return;
|
||||
|
||||
if(this.passedElement.type === 'select-multiple' && this.options.allowSearch) {
|
||||
const options = this.getOptions();
|
||||
const hasUnactiveOptions = options.some((option) => {
|
||||
return option.active !== true;
|
||||
});
|
||||
|
||||
if(this.input === document.activeElement) {
|
||||
if(this.input.value) {
|
||||
const options = this.getOptionsFiltedBySelectable();
|
||||
const fuse = new Fuse(options, {
|
||||
keys: ['label', 'value'],
|
||||
shouldSort: true,
|
||||
include: 'score',
|
||||
});
|
||||
const results = fuse.search(this.input.value);
|
||||
|
||||
this.store.dispatch(filterOptions(results));
|
||||
const options = this.getOptions();
|
||||
const hasUnactiveOptions = options.some((option) => {
|
||||
return option.active !== true;
|
||||
});
|
||||
|
||||
// Check that have a value to search
|
||||
if(this.input.value) {
|
||||
const handleFilter = debounce(() => {
|
||||
// Ensure value *still* has a value after 500 delay
|
||||
if(this.input.value && this.input.value.length >= 1) {
|
||||
const options = this.getOptionsFiltedBySelectable();
|
||||
const fuse = new Fuse(options, {
|
||||
keys: ['label', 'value'],
|
||||
shouldSort: true,
|
||||
include: 'score',
|
||||
});
|
||||
const results = fuse.search(this.input.value);
|
||||
this.isSearching = true;
|
||||
this.store.dispatch(filterOptions(results));
|
||||
}
|
||||
}, 500);
|
||||
handleFilter();
|
||||
} else if(hasUnactiveOptions) {
|
||||
// Otherwise reset options to active
|
||||
this.isSearching = false;
|
||||
this.store.dispatch(activateOptions());
|
||||
}
|
||||
}
|
||||
|
|
@ -482,14 +491,22 @@ export class Choices {
|
|||
*/
|
||||
scrollToOption(option, direction) {
|
||||
if(!option) return;
|
||||
// Distance from bottom of element to top of parent
|
||||
const optionPos = option.offsetTop + option.offsetHeight;
|
||||
// Scroll position from top
|
||||
const containerPos = this.dropdown.scrollTop + this.dropdown.offsetHeight;
|
||||
|
||||
const dropdownHeight = this.dropdown.offsetHeight;
|
||||
const optionHeight = option.offsetHeight;
|
||||
|
||||
// Distance from bottom of element to top of parent
|
||||
const optionPos = option.offsetTop + optionHeight;
|
||||
|
||||
// Scroll position of dropdown
|
||||
const containerScrollPos = this.dropdown.scrollTop + dropdownHeight;
|
||||
|
||||
// Difference between the option and scroll position
|
||||
const scrollDiff = optionPos - containerScrollPos;
|
||||
|
||||
// Scroll dropdown to top of option
|
||||
if(direction > 0) {
|
||||
const scrollDiff = optionPos - containerPos;
|
||||
this.dropdown.scrollTop += scrollDiff;
|
||||
this.dropdown.scrollTop += scrollDiff;
|
||||
} else {
|
||||
this.dropdown.scrollTop = option.offsetTop;
|
||||
}
|
||||
|
|
@ -498,24 +515,34 @@ export class Choices {
|
|||
highlightOption(el) {
|
||||
// Highlight first element in dropdown
|
||||
const options = Array.from(this.dropdown.querySelectorAll('[data-option-selectable]'));
|
||||
const highlightedOptions = Array.from(this.dropdown.querySelectorAll(`.${this.options.classNames.highlightedState}`));
|
||||
|
||||
// Remove any highlighted options
|
||||
highlightedOptions.forEach((el) => {
|
||||
el.classList.remove(this.options.classNames.highlightedState);
|
||||
});
|
||||
|
||||
if(el){
|
||||
this.highlightPosition = options.indexOf(el);
|
||||
el.classList.add(this.options.classNames.highlightedState);
|
||||
} else {
|
||||
let el = options[this.highlightPosition];
|
||||
if(!el) el = options[0];
|
||||
if(options.length) {
|
||||
const highlightedOptions = Array.from(this.dropdown.querySelectorAll(`.${this.options.classNames.highlightedState}`));
|
||||
|
||||
// Remove any highlighted options
|
||||
highlightedOptions.forEach((el) => {
|
||||
el.classList.remove(this.options.classNames.highlightedState);
|
||||
});
|
||||
|
||||
if(el){
|
||||
// Highlight given option
|
||||
el.classList.add(this.options.classNames.highlightedState);
|
||||
this.highlightPosition = options.indexOf(el);
|
||||
} else {
|
||||
// Highlight option based on last known highlight location
|
||||
let el;
|
||||
|
||||
if(el) {
|
||||
el.classList.add(this.options.classNames.highlightedState);
|
||||
}
|
||||
if(options.length > this.highlightPosition) {
|
||||
el = options[this.highlightPosition];
|
||||
} else {
|
||||
el = options[options.length - 1];
|
||||
}
|
||||
|
||||
if(!el) el = options[0];
|
||||
el.classList.add(this.options.classNames.highlightedState);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -908,6 +935,7 @@ export class Choices {
|
|||
containerOuter.appendChild(dropdown);
|
||||
|
||||
this.dropdown = dropdown;
|
||||
this.isSearching = false;
|
||||
|
||||
if(passedGroups.length) {
|
||||
passedGroups.forEach((group, index) => {
|
||||
|
|
@ -916,7 +944,6 @@ export class Choices {
|
|||
});
|
||||
} else {
|
||||
const passedOptions = Array.from(this.passedElement.options);
|
||||
|
||||
passedOptions.forEach((option) => {
|
||||
this.addOption(option);
|
||||
});
|
||||
|
|
@ -947,14 +974,11 @@ export class Choices {
|
|||
const activeOptions = this.getOptionsFilteredByActive();
|
||||
const activeGroups = this.getGroupsFilteredByActive();
|
||||
|
||||
// Clear options
|
||||
this.dropdown.innerHTML = '';
|
||||
|
||||
// Create a fragment to store our list items (so we don't have to update the DOM for each item)
|
||||
const optionListFragment = document.createDocumentFragment();
|
||||
|
||||
// If we have grouped options
|
||||
if(activeGroups.length >= 1) {
|
||||
if(activeGroups.length >= 1 && this.isSearching !== true) {
|
||||
activeGroups.forEach((group, i) => {
|
||||
// Grab options that are children of this group
|
||||
const groupOptions = activeOptions.filter((option) => {
|
||||
|
|
@ -978,17 +1002,17 @@ export class Choices {
|
|||
optionListFragment.appendChild(dropdownItem);
|
||||
});
|
||||
}
|
||||
|
||||
this.dropdown.appendChild(optionListFragment);
|
||||
|
||||
// If dropdown is empty, show a no content notice
|
||||
if(this.dropdown.innerHTML === "") {
|
||||
const dropdownItem = this.getTemplate('notice', 'No options to select');
|
||||
// Clear options
|
||||
this.dropdown.innerHTML = '';
|
||||
|
||||
optionListFragment.appendChild(dropdownItem);
|
||||
if(optionListFragment.children.length) {
|
||||
this.dropdown.appendChild(optionListFragment);
|
||||
} else {
|
||||
this.highlightOption();
|
||||
} else {
|
||||
// If dropdown is empty, show a no content notice
|
||||
const dropdownItem = this.getTemplate('notice', 'No options to select');
|
||||
this.dropdown.appendChild(dropdownItem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,8 +58,6 @@ const options = (state = [], action) => {
|
|||
return prev.score - next.score;
|
||||
});
|
||||
|
||||
console.log(filteredState);
|
||||
|
||||
return filteredState;
|
||||
|
||||
case 'ACTIVATE_OPTIONS':
|
||||
|
|
|
|||
|
|
@ -97,8 +97,24 @@ h1, h2, h3, h4, h5, h6 {
|
|||
opacity: .5; }
|
||||
.choices__list--dropdown .choices__item.is-selected:hover {
|
||||
background-color: #FFFFFF; }
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2; }
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
-webkit-transition: background-color .15s ease-in-out;
|
||||
transition: background-color .15s ease-in-out; }
|
||||
.choices__list--dropdown .choices__item--selectable:after {
|
||||
content: "Press to select";
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out; }
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2;
|
||||
-webkit-transition: background-color .15s ease-in-out;
|
||||
transition: background-color .15s ease-in-out; }
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
||||
opacity: .5;
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out; }
|
||||
.choices__list--dropdown.is-active {
|
||||
display: block; }
|
||||
.choices__list--dropdown.is-flipped {
|
||||
|
|
@ -126,6 +142,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
opacity: .5; }
|
||||
|
||||
.choices__group .choices__heading {
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
|
|
|
|||
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
|
|
@ -1 +1 @@
|
|||
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;cursor:text}.is-active .choices__inner{border-color:#b7b7b7}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--items{display:inline}.choices__list--items .choices__item{display:inline-block;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00b1c7;color:#fff;word-break:break-all}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;display:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto}.is-active .choices__list--dropdown{border-color:#b7b7b7}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0}
|
||||
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;cursor:text}.is-active .choices__inner{border-color:#b7b7b7}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--items{display:inline}.choices__list--items .choices__item{display:inline-block;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00b1c7;color:#fff;word-break:break-all}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;display:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto}.is-active .choices__list--dropdown{border-color:#b7b7b7}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable,.choices__list--dropdown .choices__item--selectable.is-highlighted{-webkit-transition:background-color .15s ease-in-out;transition:background-color .15s ease-in-out}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right;-webkit-transition:opacity .15s ease-in-out;transition:opacity .15s ease-in-out}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5;-webkit-transition:opacity .15s ease-in-out;transition:opacity .15s ease-in-out}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0}
|
||||
|
|
@ -114,7 +114,22 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
}
|
||||
.choices__item--selectable {
|
||||
&.is-highlighted { background-color: mix(#000000, #FFFFFF, 5%); }
|
||||
transition: background-color .15s ease-in-out;
|
||||
&:after {
|
||||
content: "Press to select";
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
transition: opacity .15s ease-in-out;
|
||||
}
|
||||
&.is-highlighted {
|
||||
background-color: mix(#000000, #FFFFFF, 5%);
|
||||
transition: background-color .15s ease-in-out;
|
||||
&:after {
|
||||
opacity: .5;
|
||||
transition: opacity .15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active { display: block; }
|
||||
|
|
@ -140,6 +155,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
|
||||
.choices__group {
|
||||
.choices__heading {
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Choices</title>
|
||||
<link rel="stylesheet" href="assets/styles/css/choices.css">
|
||||
<script src="assets/scripts/dist/bundle.js"></script>
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<!-- <label for="choices-8">Select box</label>
|
||||
<label for="choices-8">Select box</label>
|
||||
<select id="choices-8" name="choices-8" data-choice placeholder="This is a placeholder" multiple>
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
|
|
@ -44,11 +45,11 @@
|
|||
</select>
|
||||
|
||||
<label for="choices-9">Select box with pre-selected option</label>
|
||||
<select id="choices-9" name="choices-9" data-choice placeholder="This is a placeholder" multiple>
|
||||
<select id="choices-9" name="choices-9" data-choice placeholder="Choose an option" multiple>
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
<option value="Dropdown item 2" selected>Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select> -->
|
||||
</select>
|
||||
|
||||
<label for="choices-10">Select box with option groups</label>
|
||||
<select id="choices-10" name="choices-10" data-choice placeholder="This is a placeholder" multiple>
|
||||
|
|
|
|||
Loading…
Reference in a new issue