deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-19 14:06:33 +02:00
Code Issues Projects Releases Wiki Activity

Deep merge of user config

Browse source
This commit is contained in:
Josh Johnson 2016-09-15 21:04:15 +01:00
parent efd70a72ea
commit c8f12bc942
7 changed files with 485 additions and 472 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
assets/scripts/src/choices.js
View file

@ -164,7 +164,8 @@ default class Choices {
if (!cuttingTheMustard) console.error('Choices: Your browser doesn\'t support Choices'); if (!cuttingTheMustard) console.error('Choices: Your browser doesn\'t support Choices');
// Input type check // Input type check
const canInit = this.passedElement && isElement(this.passedElement) && ['select-one', 'select-multiple', 'text'].some(type => type === this.passedElement.type); const canInit = this.passedElement && isElement(this.passedElement) && ['select-one', 'select-multiple', 'text'].some(type => type === this.passedElement
.type);
if (canInit) { if (canInit) {
// If element has already been initalised with Choices // If element has already been initalised with Choices
@ -657,7 +658,8 @@ default class Choices {
// Remove loading states/text // Remove loading states/text
this.containerOuter.classList.remove(this.config.classNames.loadingState); this.containerOuter.classList.remove(this.config.classNames.loadingState);
if (this.passedElement.type === 'select-multiple') { if (this.passedElement.type === 'select-multiple') {
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false; const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
false;
if (placeholder) { if (placeholder) {
this.input.placeholder = placeholder; this.input.placeholder = placeholder;
} }
@ -1697,9 +1699,11 @@ default class Choices {
const classNames = this.config.classNames; const classNames = this.config.classNames;
const templates = { const templates = {
containerOuter: (direction) => { containerOuter: (direction) => {
return strToEl(` 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: () => { containerInner: () => {
return strToEl(` return strToEl(`
@ -1707,9 +1711,11 @@ default class Choices {
`); `);
}, },
itemList: () => { itemList: () => {
return strToEl(` 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) => { placeholder: (value) => {
return strToEl(` return strToEl(`
@ -1718,41 +1724,53 @@ default class Choices {
}, },
item: (data) => { item: (data) => {
if (this.config.removeItemButton) { if (this.config.removeItemButton) {
return strToEl(` 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> <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> ${data.label}<button class="${classNames.button}" data-button>Remove item</button>
</div> </div>
`); `
);
} }
return strToEl(` 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"' : ''}> <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} ${data.label}
</div> </div>
`); `
);
}, },
choiceList: () => { choiceList: () => {
return strToEl(` 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) => { choiceGroup: (data) => {
return strToEl(` 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.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 class="${classNames.groupHeading}">${data.value}</div>
</div> </div>
`); `
);
}, },
choice: (data) => { choice: (data) => {
return strToEl(` return strToEl(
`
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" 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"'}> <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" 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} ${data.label}
</div> </div>
`); `
);
}, },
input: () => { input: () => {
return strToEl(` return strToEl(
`
<input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list"> <input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
`); `
);
}, },
dropdown: () => { dropdown: () => {
return strToEl(` return strToEl(`

7
assets/scripts/src/lib/utils.js
View file

@ -52,7 +52,6 @@ export const isElement = (o) => {
*/ */
export const extend = function() { export const extend = function() {
let extended = {}; let extended = {};
let deep = false;
let length = arguments.length; let length = arguments.length;
/** /**
@ -63,7 +62,7 @@ export const extend = function() {
for (let prop in obj) { for (let prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) { if (Object.prototype.hasOwnProperty.call(obj, prop)) {
// If deep merge and property is an object, merge properties // If deep merge and property is an object, merge properties
if (deep && isType('Object', obj[prop])) { if (isType('Object', obj[prop])) {
extended[prop] = extend(true, extended[prop], obj[prop]); extended[prop] = extend(true, extended[prop], obj[prop]);
} else { } else {
extended[prop] = obj[prop]; extended[prop] = obj[prop];
@ -77,11 +76,9 @@ export const extend = function() {
// store argument at position i // store argument at position i
let obj = arguments[i]; let obj = arguments[i];
// If we are in fact dealing with an object, merge it. Otherwise throw error // If we are in fact dealing with an object, merge it.
if (isType('Object', obj)) { if (isType('Object', obj)) {
merge(obj); merge(obj);
} else {
console.error('Custom options must be an object');
} }
} }

6
package.json
View file

@ -63,14 +63,12 @@
"fuse.js": "^2.2.0" "fuse.js": "^2.2.0"
}, },
"npmName": "choices.js", "npmName": "choices.js",
"npmFileMap": [ "npmFileMap": [{
{
"basePath": "assets", "basePath": "assets",
"files": [ "files": [
"scripts/dist/*", "scripts/dist/*",
"styles/css/*", "styles/css/*",
"icons/*" "icons/*"
] ]
} }]
]
} }