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

Ensure this is returned when checking for init

Browse source
This commit is contained in:
Josh Johnson 2016-09-04 12:25:43 +01:00
parent d60bf1c86c
commit 50396b4374
1 changed files with 108 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,6 +42,12 @@ export default class Choices {
} }
} }
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
// If element has already been initalised with Choices, return it silently
if (this.passedElement.getAttribute('data-choice') === 'active') return;
const defaultConfig = { const defaultConfig = {
items: [], items: [],
choices: [], choices: [],
@ -126,9 +132,6 @@ export default class Choices {
// Assign preset items from passed object first // Assign preset items from passed object first
this.presetItems = this.config.items; this.presetItems = this.config.items;
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
// Then add any values passed from attribute // Then add any values passed from attribute
if (this.passedElement.value) { if (this.passedElement.value) {
this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter)); this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter));
@ -162,8 +165,6 @@ export default class Choices {
const isValidType = ['select-one', 'select-multiple', 'text'].some(type => type === this.passedElement.type); const isValidType = ['select-one', 'select-multiple', 'text'].some(type => type === this.passedElement.type);
if (isValidElement && isValidType) { if (isValidElement && isValidType) {
// If element has already been initalised with Choices, return it silently
if (this.passedElement.getAttribute('data-choice') === 'active') return;
// Let's go // Let's go
this.init(); this.init();
} else { } else {
@ -173,60 +174,62 @@ export default class Choices {
/** /**
* Initialise Choices * Initialise Choices
* @return * @return {Object} Class instance
* @public * @public
*/ */
init(callback = this.config.callbackOnInit) { init(callback = this.config.callbackOnInit) {
if (this.initialised === true) return; if (this.initialised === false) {
// Set initialise flag
this.initialised = true;
// Set initialise flag // Create required elements
this.initialised = true; this._createTemplates();
// Create required elements // Generate input markup
this._createTemplates(); this._createInput();
// Generate input markup this.store.subscribe(this.render);
this._createInput();
this.store.subscribe(this.render); // Render any items
this.render();
// Render any items // Trigger event listeners
this.render(); this._addEventListeners();
// Trigger event listeners // Run callback if it is a function
this._addEventListeners(); if (callback) {
if (isType('Function', callback)) {
// Run callback if it is a function callback();
if (callback) { } else {
if (isType('Function', callback)) { console.error('callbackOnInit: Callback is not a function');
callback(); }
} else {
console.error('callbackOnInit: Callback is not a function');
} }
} }
return this;
} }
/** /**
* Destroy Choices and nullify values * Destroy Choices and nullify values
* @return * @return {Object} Class instance
* @public * @public
*/ */
destroy() { destroy() {
if (this.initialised !== true) return; if (this.initialised === true) {
this._removeEventListeners();
this._removeEventListeners(); this.passedElement.classList.remove(this.config.classNames.input, this.config.classNames.hiddenState);
this.passedElement.tabIndex = '';
this.passedElement.removeAttribute('style', 'display:none;');
this.passedElement.removeAttribute('aria-hidden');
this.passedElement.classList.remove(this.config.classNames.input, this.config.classNames.hiddenState); this.containerOuter.outerHTML = this.passedElement.outerHTML;
this.passedElement.tabIndex = '';
this.passedElement.removeAttribute('style', 'display:none;');
this.passedElement.removeAttribute('aria-hidden');
this.containerOuter.outerHTML = this.passedElement.outerHTML; this.passedElement = null;
this.userConfig = null;
this.passedElement = null; this.config = null;
this.userConfig = null; this.store = null;
this.config = null; }
this.store = null; return this;
} }
/** /**
@ -473,30 +476,29 @@ export default class Choices {
* @public * @public
*/ */
setValue(args) { setValue(args) {
if (this.initialised !== true) return; if (this.initialised === true) {
// Convert args to an itterable array
const values = [...args];
// Convert args to an itterable array values.forEach((item) => {
const values = [...args]; if (isType('Object', item)) {
if (!item.value) return;
values.forEach((item) => { // If we are dealing with a select input, we need to create an option first
if (isType('Object', item)) { // that is then selected. For text inputs we can just add items normally.
if (!item.value) return; if (this.passedElement.type !== 'text') {
// If we are dealing with a select input, we need to create an option first this._addChoice(true, false, item.value, item.label, -1);
// that is then selected. For text inputs we can just add items normally. } else {
if (this.passedElement.type !== 'text') { this._addItem(item.value, item.label, item.id);
this._addChoice(true, false, item.value, item.label, -1); }
} else { } else if (isType('String', item)) {
this._addItem(item.value, item.label, item.id); if (this.passedElement.type !== 'text') {
this._addChoice(true, false, item, item, -1);
} else {
this._addItem(item);
}
} }
} else if (isType('String', item)) { });
if (this.passedElement.type !== 'text') { }
this._addChoice(true, false, item, item, -1);
} else {
this._addItem(item);
}
}
});
return this; return this;
} }
@ -542,20 +544,20 @@ export default class Choices {
* @public * @public
*/ */
setChoices(choices, value, label) { setChoices(choices, value, label) {
if (this.initialised !== true) return; if (this.initialised === true) {
if (this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') {
if (!isType('Array', choices) || !value) return;
if (this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') { if (choices && choices.length) {
if (!isType('Array', choices) || !value) return; this.containerOuter.classList.remove(this.config.classNames.loadingState);
choices.forEach((result, index) => {
if (choices && choices.length) { if (result.choices) {
this.containerOuter.classList.remove(this.config.classNames.loadingState); this._addGroup(result, index);
choices.forEach((result, index) => { } else {
if (result.choices) { this._addChoice(result.selected ? result.selected : false, result.disabled ? result.disabled : false, result[value], result[label]);
this._addGroup(result, index); }
} else { });
this._addChoice(result.selected ? result.selected : false, result.disabled ? result.disabled : false, result[value], result[label]); }
}
});
} }
} }
return this; return this;
@ -592,7 +594,7 @@ export default class Choices {
*/ */
disable() { disable() {
this.passedElement.disabled = true; this.passedElement.disabled = true;
if (this.initialised) { if (this.initialised === true) {
if (!this.containerOuter.classList.contains(this.config.classNames.disabledState)) { if (!this.containerOuter.classList.contains(this.config.classNames.disabledState)) {
this._removeEventListeners(); this._removeEventListeners();
this.passedElement.setAttribute('disabled', ''); this.passedElement.setAttribute('disabled', '');
@ -610,7 +612,7 @@ export default class Choices {
*/ */
enable() { enable() {
this.passedElement.disabled = false; this.passedElement.disabled = false;
if (this.initialised) { if (this.initialised === true) {
if (this.containerOuter.classList.contains(this.config.classNames.disabledState)) { if (this.containerOuter.classList.contains(this.config.classNames.disabledState)) {
this._addEventListeners(); this._addEventListeners();
this.passedElement.removeAttribute('disabled'); this.passedElement.removeAttribute('disabled');
@ -629,40 +631,39 @@ export default class Choices {
* @public * @public
*/ */
ajax(fn) { ajax(fn) {
if (this.initialised !== true) return; if (this.initialised === true) {
if (this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') {
if (this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') { this.containerOuter.classList.add(this.config.classNames.loadingState);
this.containerOuter.classList.add(this.config.classNames.loadingState); this.containerOuter.setAttribute('aria-busy', 'true');
this.containerOuter.setAttribute('aria-busy', 'true'); if (this.passedElement.type === 'select-one') {
if (this.passedElement.type === 'select-one') { const placeholderItem = this._getTemplate('placeholder', this.config.loadingText);
const placeholderItem = this._getTemplate('placeholder', this.config.loadingText); this.itemList.appendChild(placeholderItem);
this.itemList.appendChild(placeholderItem); } else {
} else { this.input.placeholder = this.config.loadingText;
this.input.placeholder = this.config.loadingText;
}
const callback = (results, value, label) => {
if (!isType('Array', results) || !value) return;
if (results && results.length) {
// Remove loading states/text
this.containerOuter.classList.remove(this.config.classNames.loadingState);
if (this.passedElement.type === 'select-multiple') {
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
if (placeholder) {
this.input.placeholder = placeholder;
}
}
// Add each result as a choice
results.forEach((result, index) => {
this._addChoice(false, false, result[value], result[label]);
});
} }
this.containerOuter.removeAttribute('aria-busy');
};
fn(callback); const callback = (results, value, label) => {
if (!isType('Array', results) || !value) return;
if (results && results.length) {
// Remove loading states/text
this.containerOuter.classList.remove(this.config.classNames.loadingState);
if (this.passedElement.type === 'select-multiple') {
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
if (placeholder) {
this.input.placeholder = placeholder;
}
}
// Add each result as a choice
results.forEach((result, index) => {
this._addChoice(false, false, result[value], result[label]);
});
}
this.containerOuter.removeAttribute('aria-busy');
};
fn(callback);
}
} }
return this; return this;
} }