mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-20 14:36:34 +02:00
230 lines
5.6 KiB
JavaScript
230 lines
5.6 KiB
JavaScript
|
import classNames from 'classnames';
|
||
|
import { strToEl } from './lib/utils';
|
||
|
|
||
|
export const TEMPLATES = {
|
||
|
containerOuter(globalClasses, direction) {
|
||
|
const tabIndex = this.isSelectOneElement ? 'tabindex="0"' : '';
|
||
|
let role = this.isSelectElement ? 'role="listbox"' : '';
|
||
|
let ariaAutoComplete = '';
|
||
|
|
||
|
if (this.isSelectElement && this.config.searchEnabled) {
|
||
|
role = 'role="combobox"';
|
||
|
ariaAutoComplete = 'aria-autocomplete="list"';
|
||
|
}
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${globalClasses.containerOuter}"
|
||
|
data-type="${this.passedElement.type}"
|
||
|
${role}
|
||
|
${tabIndex}
|
||
|
${ariaAutoComplete}
|
||
|
aria-haspopup="true"
|
||
|
aria-expanded="false"
|
||
|
dir="${direction}"
|
||
|
>
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
containerInner(globalClasses) {
|
||
|
return strToEl(`
|
||
|
<div class="${globalClasses.containerInner}"></div>
|
||
|
`);
|
||
|
},
|
||
|
itemList(globalClasses) {
|
||
|
const localClasses = classNames(
|
||
|
globalClasses.list, {
|
||
|
[globalClasses.listSingle]: (this.isSelectOneElement),
|
||
|
[globalClasses.listItems]: (!this.isSelectOneElement),
|
||
|
},
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<div class="${localClasses}"></div>
|
||
|
`);
|
||
|
},
|
||
|
placeholder(globalClasses, value) {
|
||
|
return strToEl(`
|
||
|
<div class="${globalClasses.placeholder}">
|
||
|
${value}
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
item(globalClasses, data) {
|
||
|
const ariaSelected = data.active ? 'aria-selected="true"' : '';
|
||
|
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
|
||
|
|
||
|
let localClasses = classNames(
|
||
|
globalClasses.item, {
|
||
|
[globalClasses.highlightedState]: data.highlighted,
|
||
|
[globalClasses.itemSelectable]: !data.highlighted,
|
||
|
[globalClasses.placeholder]: data.placeholder,
|
||
|
},
|
||
|
);
|
||
|
|
||
|
if (this.config.removeItemButton) {
|
||
|
localClasses = classNames(
|
||
|
globalClasses.item, {
|
||
|
[globalClasses.highlightedState]: data.highlighted,
|
||
|
[globalClasses.itemSelectable]: !data.disabled,
|
||
|
[globalClasses.placeholder]: data.placeholder,
|
||
|
},
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${localClasses}"
|
||
|
data-item
|
||
|
data-id="${data.id}"
|
||
|
data-value="${data.value}"
|
||
|
data-deletable
|
||
|
${ariaSelected}
|
||
|
${ariaDisabled}
|
||
|
>
|
||
|
${data.label}<!--
|
||
|
--><button
|
||
|
type="button"
|
||
|
class="${globalClasses.button}"
|
||
|
data-button
|
||
|
aria-label="Remove item: '${data.value}'"
|
||
|
>
|
||
|
Remove item
|
||
|
</button>
|
||
|
</div>
|
||
|
`);
|
||
|
}
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${localClasses}"
|
||
|
data-item
|
||
|
data-id="${data.id}"
|
||
|
data-value="${data.value}"
|
||
|
${ariaSelected}
|
||
|
${ariaDisabled}
|
||
|
>
|
||
|
${data.label}
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
choiceList(globalClasses) {
|
||
|
const ariaMultiSelectable = !this.isSelectOneElement ?
|
||
|
'aria-multiselectable="true"' :
|
||
|
'';
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${globalClasses.list}"
|
||
|
dir="ltr"
|
||
|
role="listbox"
|
||
|
${ariaMultiSelectable}
|
||
|
>
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
choiceGroup(globalClasses, data) {
|
||
|
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
|
||
|
const localClasses = classNames(
|
||
|
globalClasses.group, {
|
||
|
[globalClasses.itemDisabled]: data.disabled,
|
||
|
},
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${localClasses}"
|
||
|
data-group
|
||
|
data-id="${data.id}"
|
||
|
data-value="${data.value}"
|
||
|
role="group"
|
||
|
${ariaDisabled}
|
||
|
>
|
||
|
<div class="${globalClasses.groupHeading}">${data.value}</div>
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
choice(globalClasses, data) {
|
||
|
const role = data.groupId > 0 ? 'role="treeitem"' : 'role="option"';
|
||
|
const localClasses = classNames(
|
||
|
globalClasses.item,
|
||
|
globalClasses.itemChoice, {
|
||
|
[globalClasses.itemDisabled]: data.disabled,
|
||
|
[globalClasses.itemSelectable]: !data.disabled,
|
||
|
[globalClasses.placeholder]: data.placeholder,
|
||
|
},
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${localClasses}"
|
||
|
data-select-text="${this.config.itemSelectText}"
|
||
|
data-choice
|
||
|
data-id="${data.id}"
|
||
|
data-value="${data.value}"
|
||
|
${data.disabled ?
|
||
|
'data-choice-disabled aria-disabled="true"' :
|
||
|
'data-choice-selectable'
|
||
|
}
|
||
|
id="${data.elementId}"
|
||
|
${role}
|
||
|
>
|
||
|
${data.label}
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
input(globalClasses) {
|
||
|
const localClasses = classNames(
|
||
|
globalClasses.input,
|
||
|
globalClasses.inputCloned,
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<input
|
||
|
type="text"
|
||
|
class="${localClasses}"
|
||
|
autocomplete="off"
|
||
|
autocapitalize="off"
|
||
|
spellcheck="false"
|
||
|
role="textbox"
|
||
|
aria-autocomplete="list"
|
||
|
>
|
||
|
`);
|
||
|
},
|
||
|
dropdown(globalClasses) {
|
||
|
const localClasses = classNames(
|
||
|
globalClasses.list,
|
||
|
globalClasses.listDropdown,
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<div
|
||
|
class="${localClasses}"
|
||
|
aria-expanded="false"
|
||
|
>
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
notice(globalClasses, label, type = '') {
|
||
|
const localClasses = classNames(
|
||
|
globalClasses.item,
|
||
|
globalClasses.itemChoice, {
|
||
|
[globalClasses.noResults]: (type === 'no-results'),
|
||
|
[globalClasses.noChoices]: (type === 'no-choices'),
|
||
|
},
|
||
|
);
|
||
|
|
||
|
return strToEl(`
|
||
|
<div class="${localClasses}">
|
||
|
${label}
|
||
|
</div>
|
||
|
`);
|
||
|
},
|
||
|
option(globalClasses, data) {
|
||
|
return strToEl(`
|
||
|
<option value="${data.value}" selected>${data.label}</option>
|
||
|
`);
|
||
|
},
|
||
|
};
|
||
|
|
||
|
export default TEMPLATES;
|