mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
Working version with minor bugs
This commit is contained in:
parent
5f0545d604
commit
760fbc9f9e
|
@ -19,6 +19,7 @@
|
|||
"no-console": "off",
|
||||
"consistent-return": "off",
|
||||
"no-param-reassign": ["error", { "props": false }],
|
||||
"no-unused-vars": ["error", { "args": "none" }]
|
||||
"no-unused-vars": ["error", { "args": "none" }],
|
||||
"no-lonely-if": "off"
|
||||
},
|
||||
}
|
||||
|
|
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -78,6 +78,7 @@ export default class Choices {
|
|||
itemSelectable: 'choices__item--selectable',
|
||||
itemDisabled: 'choices__item--disabled',
|
||||
itemChoice: 'choices__item--choice',
|
||||
placeholder: 'choices__placeholder',
|
||||
group: 'choices__group',
|
||||
groupHeading: 'choices__heading',
|
||||
button: 'choices__button',
|
||||
|
@ -424,9 +425,9 @@ export default class Choices {
|
|||
toggleDropdown() {
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
this.hideDropdown(true);
|
||||
} else {
|
||||
this.showDropdown();
|
||||
this.showDropdown(true);
|
||||
}
|
||||
|
||||
return this;
|
||||
|
@ -626,13 +627,7 @@ export default class Choices {
|
|||
this.containerOuter.classList.add(this.config.classNames.loadingState);
|
||||
this.containerOuter.setAttribute('aria-busy', 'true');
|
||||
if (this.passedElement.type === 'select-one') {
|
||||
const placeholderItem = this._getTemplate('item', {
|
||||
id: -1,
|
||||
value: 'Loading',
|
||||
label: this.config.loadingText,
|
||||
active: true,
|
||||
});
|
||||
|
||||
const placeholderItem = this._getTemplate('placeholder', this.config.loadingText);
|
||||
this.itemList.appendChild(placeholderItem);
|
||||
} else {
|
||||
this.input.placeholder = this.config.loadingText;
|
||||
|
@ -701,6 +696,7 @@ export default class Choices {
|
|||
*/
|
||||
_handleButtonAction(activeItems, element) {
|
||||
if (!activeItems || !element) return;
|
||||
|
||||
// If we are clicking on a button
|
||||
if (this.config.removeItems && this.config.removeItemButton) {
|
||||
const itemId = element.parentNode.getAttribute('data-id');
|
||||
|
@ -709,6 +705,14 @@ export default class Choices {
|
|||
// Remove item associated with button
|
||||
this._removeItem(itemToRemove);
|
||||
this._triggerChange(itemToRemove.value);
|
||||
|
||||
if (this.passedElement.type === 'select-one') {
|
||||
const placeholder = this.config.placeholderValue || this.passedElement.getAttribute('placeholder');
|
||||
if (placeholder) {
|
||||
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
||||
this.itemList.appendChild(placeholderItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -768,10 +772,10 @@ export default class Choices {
|
|||
this.clearInput(this.passedElement);
|
||||
this.isSearching = false;
|
||||
this.store.dispatch(activateChoices(true));
|
||||
}
|
||||
|
||||
if (this.passedElement.type === 'select-one') {
|
||||
this.hideDropdown();
|
||||
if (this.passedElement.type === 'select-one') {
|
||||
this.hideDropdown();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -999,6 +1003,7 @@ export default class Choices {
|
|||
}
|
||||
|
||||
if (target.hasAttribute('data-button')) {
|
||||
e.preventDefault();
|
||||
this._handleButtonAction(activeItems, target);
|
||||
}
|
||||
|
||||
|
@ -1011,6 +1016,7 @@ export default class Choices {
|
|||
} else if (this.passedElement.type === 'select-one') {
|
||||
// Show dropdown if focus
|
||||
e.preventDefault();
|
||||
console.log('Show 1');
|
||||
this.showDropdown(true);
|
||||
}
|
||||
|
||||
|
@ -1097,6 +1103,7 @@ export default class Choices {
|
|||
|
||||
if (canAddItem.response === true) {
|
||||
if (!hasActiveDropdown) {
|
||||
console.log('Show 3');
|
||||
this.showDropdown();
|
||||
}
|
||||
} else if (!canAddItem.notice && hasActiveDropdown) {
|
||||
|
@ -1199,16 +1206,13 @@ export default class Choices {
|
|||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
const hasShiftKey = e.shiftKey;
|
||||
|
||||
// Prevent input mouse down triggering focus event
|
||||
if (target !== this.input) e.preventDefault();
|
||||
|
||||
if (target.hasAttribute('data-button')) {
|
||||
this._handleButtonAction(activeItems, target);
|
||||
} else if (target.hasAttribute('data-item')) {
|
||||
if (target.hasAttribute('data-item')) {
|
||||
this._handleItemAction(activeItems, target, hasShiftKey);
|
||||
} else if (target.hasAttribute('data-choice')) {
|
||||
this._handleChoiceAction(activeItems, target);
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1221,21 +1225,30 @@ export default class Choices {
|
|||
_onClick(e) {
|
||||
const target = e.target;
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
|
||||
// If target is something that concerns us
|
||||
if (this.containerOuter.contains(target)) {
|
||||
if (target.hasAttribute('data-button')) {
|
||||
this._handleButtonAction(activeItems, target);
|
||||
}
|
||||
|
||||
if (!hasActiveDropdown) {
|
||||
if (this.passedElement.type === 'text') {
|
||||
if (document.activeElement !== this.input) {
|
||||
this.input.focus();
|
||||
}
|
||||
} else {
|
||||
this.showDropdown(true);
|
||||
if (this.canSearch) {
|
||||
this.showDropdown(true);
|
||||
} else {
|
||||
this.showDropdown();
|
||||
}
|
||||
}
|
||||
} else if (this.passedElement.type === 'select-one' && target !== this.input) {
|
||||
} else if (this.passedElement.type === 'select-one' && target !== this.input && !this.dropdown.contains(target)) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
} else {
|
||||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
||||
|
||||
// De-select any highlighted items
|
||||
|
@ -1248,7 +1261,7 @@ export default class Choices {
|
|||
|
||||
// Close all other dropdowns
|
||||
if (hasActiveDropdown) {
|
||||
this.toggleDropdown();
|
||||
this.hideDropdown();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1273,9 +1286,8 @@ export default class Choices {
|
|||
* @private
|
||||
*/
|
||||
_onPaste(e) {
|
||||
if (e.target !== this.input) return;
|
||||
// Disable pasting into the input if option has been set
|
||||
if (!this.config.paste) {
|
||||
if (e.target === this.input && !this.config.paste) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
@ -1288,53 +1300,57 @@ export default class Choices {
|
|||
*/
|
||||
_onFocus(e) {
|
||||
const target = e.target;
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
// If target is something that concerns us
|
||||
if (this.containerOuter.contains(target)) {
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
|
||||
if (!hasActiveDropdown) {
|
||||
switch (this.passedElement.type) {
|
||||
case 'text': {
|
||||
if (target === this.input) {
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 'select-one': {
|
||||
if (target === this.containerOuter) {
|
||||
// If element is a select box, the focussed element is the container and the dropdown
|
||||
// isn't already open, focus and show dropdown
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
this.showDropdown();
|
||||
|
||||
if (!this.focusAndHideDropdown && this.canSearch) {
|
||||
this.input.focus();
|
||||
if (!hasActiveDropdown) {
|
||||
switch (this.passedElement.type) {
|
||||
case 'text': {
|
||||
if (target === this.input) {
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
}
|
||||
|
||||
this.focusAndHideDropdown = false;
|
||||
break;
|
||||
}
|
||||
case 'select-one': {
|
||||
if (target === this.containerOuter) {
|
||||
// If element is a select box, the focussed element is the container and the dropdown
|
||||
// isn't already open, focus and show dropdown
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
|
||||
if (!this.focusAndHideDropdown && this.canSearch && document.activeElement !== this.input) {
|
||||
this.input.focus();
|
||||
} else {
|
||||
this.showDropdown();
|
||||
}
|
||||
|
||||
this.focusAndHideDropdown = false;
|
||||
}
|
||||
|
||||
if (target === this.input) {
|
||||
// If element is a select box, the focussed element is the container and the dropdown
|
||||
// isn't already open, focus and show dropdown
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
this.showDropdown();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 'select-multiple': {
|
||||
if (target === this.input) {
|
||||
// If element is a select box, the focussed element is the container and the dropdown
|
||||
// isn't already open, focus and show dropdown
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
this.showDropdown(true);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
if (target === this.input) {
|
||||
// If element is a select box, the focussed element is the container and the dropdown
|
||||
// isn't already open, focus and show dropdown
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
this.showDropdown();
|
||||
}
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
case 'select-multiple': {
|
||||
if (target === this.input) {
|
||||
// If element is a select box, the focussed element is the container and the dropdown
|
||||
// isn't already open, focus and show dropdown
|
||||
this.containerOuter.classList.add(this.config.classNames.focusState);
|
||||
this.showDropdown(true);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1347,59 +1363,70 @@ export default class Choices {
|
|||
*/
|
||||
_onBlur(e) {
|
||||
const target = e.target;
|
||||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
||||
// If target is something that concerns us
|
||||
if (this.containerOuter.contains(target)) {
|
||||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
||||
|
||||
switch (this.passedElement.type) {
|
||||
case 'text': {
|
||||
if (target === this.input) {
|
||||
// Remove the focus state
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
// De-select any highlighted items
|
||||
if (hasHighlightedItems) {
|
||||
this.unhighlightAll();
|
||||
switch (this.passedElement.type) {
|
||||
case 'text': {
|
||||
if (target === this.input) {
|
||||
// Remove the focus state
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
// De-select any highlighted items
|
||||
if (hasHighlightedItems) {
|
||||
this.unhighlightAll();
|
||||
}
|
||||
// Hide dropdown if it's open
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
|
||||
break;
|
||||
}
|
||||
case 'select-one': {
|
||||
if (target === this.containerOuter) {
|
||||
if (hasActiveDropdown && this.focusAndHideDropdown && !this.canSearch) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
return;
|
||||
}
|
||||
|
||||
if (target === this.input) {
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 'select-multiple': {
|
||||
if (target === this.input) {
|
||||
// Remove the focus state
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
// De-select any highlighted items
|
||||
if (hasHighlightedItems) {
|
||||
this.unhighlightAll();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
case 'select-one': {
|
||||
if (target === this.containerOuter) {
|
||||
if (hasActiveDropdown && (this.focusAndHideDropdown || !this.config.search)) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
}
|
||||
|
||||
if (target === this.input) {
|
||||
this.hideDropdown();
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 'select-multiple': {
|
||||
if (target === this.input) {
|
||||
// Remove the focus state
|
||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
// De-select any highlighted items
|
||||
if (hasHighlightedItems) {
|
||||
this.unhighlightAll();
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1686,15 +1713,21 @@ export default class Choices {
|
|||
<div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
|
||||
`);
|
||||
},
|
||||
placeholder: (value) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.placeholder}">
|
||||
${value}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
item: (data) => {
|
||||
if (this.config.removeItemButton && this.passedElement.type !== 'select-one') {
|
||||
if (this.config.removeItemButton) {
|
||||
return strToEl(`
|
||||
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
|
||||
${data.label}<button class="${classNames.button}" data-button>Remove item</button>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
return strToEl(`
|
||||
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
||||
${data.label}
|
||||
|
|
|
@ -37,11 +37,14 @@
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px; }
|
||||
width: 20px;
|
||||
opacity: .5; }
|
||||
.choices[data-type*="select-one"] .choices__button:hover {
|
||||
opacity: 1; }
|
||||
.choices[data-type*="select-one"].is-open:after {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
margin-top: -7.5px; }
|
||||
|
@ -74,11 +77,15 @@
|
|||
line-height: 1; }
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden; }
|
||||
.is-focused .choices__inner, .is-open .choices__inner {
|
||||
border-color: #b7b7b7; }
|
||||
|
@ -218,4 +225,7 @@
|
|||
.choices__input:focus {
|
||||
outline: 0; }
|
||||
|
||||
.choices__placeholder {
|
||||
opacity: .5; }
|
||||
|
||||
/*===== End of Choices ======*/
|
||||
|
|
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
|
@ -1 +1 @@
|
|||
.choices{font-size:16px;position:relative;margin-bottom:24px}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices:focus{outline:none}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(../../icons//cross-inverse.svg);padding:0;background-size:8px;position:absolute;top:50%;right:15px;margin-top:-10px;margin-right:25px;height:20px;width:20px}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-left:8px;margin-right:-4px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(../../icons//cross.svg);background-size:8px;width:8px;line-height:1}.choices__inner{background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:14px}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.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:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:14px;margin-bottom:5px;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}
|
||||
.choices{font-size:16px;position:relative;margin-bottom:24px}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices:focus{outline:none}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(../../icons//cross-inverse.svg);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;opacity:.5}.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-left:8px;margin-right:-4px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(../../icons//cross.svg);background-size:8px;width:8px;line-height:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:14px}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.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:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:14px;margin-bottom:5px;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}.choices__placeholder{opacity:.5}
|
|
@ -48,11 +48,13 @@ $choices-button-offset: 8px;
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
opacity: .5;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
&.is-open:after {
|
||||
border-color: transparent transparent $choices-text-color transparent;
|
||||
|
@ -90,11 +92,15 @@ $choices-button-offset: 8px;
|
|||
}
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background-color: $choices-bg-color;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid $choices-keyline-color;
|
||||
border-radius: $choices-border-radius;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden;
|
||||
.is-focused &, .is-open & { border-color: darken($choices-keyline-color, 15%); }
|
||||
.is-open & { border-radius: $choices-border-radius $choices-border-radius 0 0; }
|
||||
|
@ -237,5 +243,6 @@ $choices-button-offset: 8px;
|
|||
&:focus { outline: 0; }
|
||||
}
|
||||
|
||||
.choices__placeholder { opacity: .5; }
|
||||
|
||||
/*===== End of Choices ======*/
|
21
index.html
21
index.html
|
@ -68,7 +68,7 @@
|
|||
<option value="Dropdown item 3" selected>Dropdown item 3</option>
|
||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
|
||||
<label for="choices-9">Option groups</label>
|
||||
<select class="form-control" data-choice name="choices-9" id="choices-9" placeholder="This is a placeholder" multiple>
|
||||
<optgroup label="UK">
|
||||
|
@ -166,7 +166,7 @@
|
|||
|
||||
<label for="choices-17">Option selected via config</label>
|
||||
<select class="form-control" name="choices-17" id="choices-17" placeholder="This is a placeholder"></select>
|
||||
|
||||
|
||||
<p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'</p>
|
||||
<label for="cities">States</label>
|
||||
<select class="form-control" name="cities" id="cities" placeholder="Choose a state">
|
||||
|
@ -226,9 +226,9 @@
|
|||
var example7 = new Choices('#choices-6', {
|
||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||
});
|
||||
|
||||
var example9 = new Choices('#choices-10', {
|
||||
placeholder: true,
|
||||
|
||||
var example9 = new Choices('#choices-10', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
maxItemCount: 5,
|
||||
callbackOnChange: function(value, passedInput) { console.log(value) }
|
||||
|
@ -243,9 +243,9 @@
|
|||
console.log(error);
|
||||
});
|
||||
});
|
||||
|
||||
var example10 = new Choices('#choices-12', {
|
||||
placeholder: true,
|
||||
|
||||
var example10 = new Choices('#choices-12', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Arctic Monkeys record'
|
||||
}).ajax(function(callback) {
|
||||
fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
|
@ -289,6 +289,7 @@
|
|||
|
||||
var example13 = new Choices('#choices-15', {
|
||||
search: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{value: 'One', label: 'Label One'},
|
||||
{value: 'Two', label: 'Label Two', disabled: true},
|
||||
|
@ -301,7 +302,7 @@
|
|||
], 'value', 'label');
|
||||
|
||||
var example14 = new Choices('#choices-16', {
|
||||
placeholder: true,
|
||||
placeholder: true,
|
||||
}).setChoices([{
|
||||
label: 'Group one',
|
||||
id: 1,
|
||||
|
@ -311,7 +312,7 @@
|
|||
{value: 'Child Two', label: 'Child Two', disabled: true},
|
||||
{value: 'Child Three', label: 'Child Three'},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Group two',
|
||||
id: 2,
|
||||
|
|
|
@ -171,7 +171,9 @@ describe('Choices', function() {
|
|||
|
||||
document.body.appendChild(this.input);
|
||||
|
||||
this.choices = new Choices(this.input);
|
||||
this.choices = new Choices(this.input, {
|
||||
removeItemButton: true
|
||||
});
|
||||
});
|
||||
|
||||
it('should open the choice list on focussing', function() {
|
||||
|
@ -253,7 +255,7 @@ describe('Choices', function() {
|
|||
expect(document.activeElement === this.choices.input && container.classList.contains('is-open')).toBe(true);
|
||||
});
|
||||
|
||||
it('should open the dropdown on click', function() {
|
||||
it('should close the dropdown on double click', function() {
|
||||
const container = this.choices.containerOuter;
|
||||
|
||||
this.choices._onClick({
|
||||
|
|
Loading…
Reference in a new issue