mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-04 06:43:15 +02:00
Resolve broken cancel buttons
This commit is contained in:
parent
779d2e0292
commit
7efd189c7d
|
@ -511,6 +511,13 @@ example.passedElement.addEventListener('addItem', function(event) {
|
|||
|
||||
**Usage:** Triggered each time an item is unhighlighted.
|
||||
|
||||
### choice
|
||||
**Arguments:** `value`
|
||||
|
||||
**Input types affected:** `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** Triggered each time a chouce is selected **by a user**, regardless if it changes the value of the input.
|
||||
|
||||
### change
|
||||
**Arguments:** `value`
|
||||
|
||||
|
|
|
@ -1019,6 +1019,10 @@ class Choices {
|
|||
const choice = this.store.getChoiceById(id);
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
|
||||
triggerEvent(this.passedElement, 'choice', {
|
||||
choice,
|
||||
});
|
||||
|
||||
if (choice && !choice.selected && !choice.disabled) {
|
||||
const canAddItem = this._canAddItem(activeItems, choice.value);
|
||||
|
||||
|
@ -1582,7 +1586,9 @@ class Choices {
|
|||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
const hasShiftKey = e.shiftKey;
|
||||
|
||||
if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
|
||||
if(foundTarget = findAncestorByAttrName(target, 'data-button')) {
|
||||
this._handleButtonAction(activeItems, foundTarget);
|
||||
} else if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
|
||||
this._handleItemAction(activeItems, foundTarget, hasShiftKey);
|
||||
} else if (foundTarget = findAncestorByAttrName(target, 'data-choice')) {
|
||||
this._handleChoiceAction(activeItems, foundTarget);
|
||||
|
@ -1603,6 +1609,7 @@ class Choices {
|
|||
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)) {
|
||||
// Handle button delete
|
||||
|
@ -2073,76 +2080,76 @@ class Choices {
|
|||
const templates = {
|
||||
containerOuter: (direction) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
|
||||
`);
|
||||
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
|
||||
`);
|
||||
},
|
||||
containerInner: () => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.containerInner}"></div>
|
||||
`);
|
||||
<div class="${classNames.containerInner}"></div>
|
||||
`);
|
||||
},
|
||||
itemList: () => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
|
||||
`);
|
||||
<div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
|
||||
`);
|
||||
},
|
||||
placeholder: (value) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.placeholder}">${value}</div>
|
||||
`);
|
||||
<div class="${classNames.placeholder}">${value}</div>
|
||||
`);
|
||||
},
|
||||
item: (data) => {
|
||||
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 type="button" class="${classNames.button}" data-button>Remove item</button>
|
||||
</div>
|
||||
`);
|
||||
<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 type="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}
|
||||
</div>
|
||||
`);
|
||||
`);
|
||||
},
|
||||
choiceList: () => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
|
||||
`);
|
||||
<div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
|
||||
`);
|
||||
},
|
||||
choiceGroup: (data) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
|
||||
<div class="${classNames.groupHeading}">${data.value}</div>
|
||||
</div>
|
||||
`);
|
||||
<div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
|
||||
<div class="${classNames.groupHeading}">${data.value}</div>
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
choice: (data) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
||||
${data.label}
|
||||
</div>
|
||||
`);
|
||||
${data.label}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
input: () => {
|
||||
return strToEl(`
|
||||
<input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
|
||||
`);
|
||||
`);
|
||||
},
|
||||
dropdown: () => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
|
||||
`);
|
||||
<div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
|
||||
`);
|
||||
},
|
||||
notice: (label) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
|
||||
`);
|
||||
<div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
|
||||
`);
|
||||
},
|
||||
option: (data) => {
|
||||
return strToEl(`
|
||||
<option value="${data.value}" selected>${data.label}</option>
|
||||
`);
|
||||
<option value="${data.value}" selected>${data.label}</option>
|
||||
`);
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -138,4 +138,12 @@ h6, .h6 {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.zero-bottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.zero-top {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*===== End of Section comment block ======*/
|
||||
|
|
2
assets/styles/css/base.min.css
vendored
2
assets/styles/css/base.min.css
vendored
|
@ -1 +1 @@
|
|||
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:36px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}
|
||||
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:36px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.choices[data-type*="select-one"] .choices__button {
|
||||
background-image: url("../../icons//cross-inverse.svg");
|
||||
background-image: url("../../icons/cross-inverse.svg");
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
height: 100%;
|
||||
|
@ -113,7 +113,7 @@
|
|||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #008fa1;
|
||||
background-image: url("../../icons//cross.svg");
|
||||
background-image: url("../../icons/cross.svg");
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
|
|
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -118,5 +118,7 @@ h6, .h6 { font-size: $global-font-size-h6; }
|
|||
}
|
||||
|
||||
.visible-ie { display: none; }
|
||||
.zero-bottom { margin-bottom: 0; }
|
||||
.zero-top { margin-top: 0; }
|
||||
|
||||
/*===== End of Section comment block ======*/
|
||||
|
|
74
index.html
74
index.html
|
@ -137,6 +137,10 @@
|
|||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<label for="label-event">Use label in event (add/remove)</label>
|
||||
<p id="message"></p>
|
||||
<select id="choices-multiple-labels" multiple></select>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Single select input</h2>
|
||||
|
@ -230,8 +234,8 @@
|
|||
<option value="Michigan">Michigan</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-custom-templates">Custom templates</label>
|
||||
<select class="form-control" name="choices-custom-templates" id="choices-custom-templates" placeholder="This is a placeholder">
|
||||
<label for="choices-single-custom-templates">Custom templates</label>
|
||||
<select class="form-control" name="choices-single-custom-templates" id="choices-single-custom-templates" placeholder="This is a placeholder">
|
||||
<option value="React">React</option>
|
||||
<option value="React">Angular</option>
|
||||
<option value="React">Ember</option>
|
||||
|
@ -256,11 +260,6 @@
|
|||
<option value="Queens">Queens</option>
|
||||
<option value="Staten Island">Staten Island</option>
|
||||
</select>
|
||||
|
||||
<label for="label-event">Use label in event (add/remove)</label>
|
||||
<select id="choices-select" multiple></select>
|
||||
<p id="message"></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
@ -330,7 +329,30 @@
|
|||
|
||||
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
|
||||
removeItemButton: true,
|
||||
})
|
||||
});
|
||||
|
||||
/* Use label on event */
|
||||
var choicesSelect = new Choices('#choices-multiple-labels', {
|
||||
search: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{value: 'One', label: 'Label One'},
|
||||
{value: 'Two', label: 'Label Two', disabled: true},
|
||||
{value: 'Three', label: 'Label Three'},
|
||||
],
|
||||
}).setChoices([
|
||||
{value: 'Four', label: 'Label Four', disabled: true},
|
||||
{value: 'Five', label: 'Label Five'},
|
||||
{value: 'Six', label: 'Label Six', selected: true},
|
||||
], 'value', 'label', false);
|
||||
|
||||
choicesSelect.passedElement.addEventListener('addItem', function(event) {
|
||||
document.getElementById('message').innerHTML = 'You just added "' + event.detail.label + '"';
|
||||
});
|
||||
|
||||
choicesSelect.passedElement.addEventListener('removeItem', function(event) {
|
||||
document.getElementById('message').innerHTML = 'You just removed "' + event.detail.label + '"';
|
||||
});
|
||||
|
||||
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
||||
placeholder: true,
|
||||
|
@ -433,7 +455,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
|
||||
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
|
||||
callbackOnCreateTemplates: function (strToEl) {
|
||||
var classNames = this.config.classNames;
|
||||
return {
|
||||
|
@ -442,44 +464,20 @@
|
|||
<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"' : ''}>
|
||||
<span style="margin-right:10px;">🎉</span> ${data.label}
|
||||
</div>
|
||||
`);
|
||||
`);
|
||||
},
|
||||
choice: (data) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
||||
<span style="margin-right:10px;">👉🏽</span> ${data.label}
|
||||
</div>
|
||||
`);
|
||||
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
||||
<span style="margin-right:10px;">👉🏽</span> ${data.label}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var boroughs = new Choices(document.getElementById('boroughs')).disable();
|
||||
|
||||
/* Use label on event */
|
||||
var choicesSelect = new Choices('#choices-select', {
|
||||
search: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{value: 'One', label: 'Label One'},
|
||||
{value: 'Two', label: 'Label Two', disabled: true},
|
||||
{value: 'Three', label: 'Label Three'},
|
||||
],
|
||||
}).setChoices([
|
||||
{value: 'Four', label: 'Label Four', disabled: true},
|
||||
{value: 'Five', label: 'Label Five'},
|
||||
{value: 'Six', label: 'Label Six', selected: true},
|
||||
], 'value', 'label', false);
|
||||
function useLabelOnAddItem (event) {
|
||||
document.getElementById('message').innerHTML = 'You just added ' + event.detail.label;
|
||||
};
|
||||
function useLabelOnRemoveItem (event) {
|
||||
document.getElementById('message').innerHTML = 'You just removed ' + event.detail.label;
|
||||
};
|
||||
choicesSelect.passedElement.addEventListener('addItem',useLabelOnAddItem);
|
||||
choicesSelect.passedElement.addEventListener('removeItem',useLabelOnRemoveItem);
|
||||
/* End of use label on event*/
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in a new issue