From de33f6b6e3cb9761efcae5c3da049a184204d6ce Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Wed, 19 Oct 2016 07:33:38 +0100 Subject: [PATCH] Ability to remove choices when setting + callback improvements --- assets/scripts/src/choices.js | 50 ++++++++++++++++----------- assets/scripts/src/reducers/groups.js | 4 +++ index.html | 2 +- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 750936f..50510ab 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -192,9 +192,11 @@ class Choices { * @return * @public */ - init(callback = this.config.callbackOnInit) { + init() { if (this.initialised === true) return; + const callback = this.config.callbackOnInit; + // Set initialise flag this.initialised = true; // Create required elements @@ -432,13 +434,14 @@ class Choices { highlightItem(item) { if (!item) return; const id = item.id; + const groupId = item.groupId; + const callback = this.config.callbackOnHighlightItem; this.store.dispatch(highlightItem(id, true)); // Run callback if it is a function - if (this.config.callbackOnHighlightItem) { - const callback = this.config.callbackOnHighlightItem; + if (callback) { if (isType('Function', callback)) { - const group = this.store.getGroupById(item.groupId); + const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; if(group && group.value) { callback(id, item.value, group.value); } else { @@ -447,8 +450,6 @@ class Choices { } else { console.error('callbackOnHighlightItem: Callback is not a function'); } - - } return this; @@ -463,13 +464,15 @@ class Choices { unhighlightItem(item) { if (!item) return; const id = item.id; + const groupId = item.groupId; + const callback = this.config.callbackOnUnhighlightItem; + this.store.dispatch(highlightItem(id, false)); // Run callback if it is a function - if (this.config.callbackOnUnhighlightItem) { - const callback = this.config.callbackOnUnhighlightItem; + if (callback) { if (isType('Function', callback)) { - const group = this.store.getGroupById(item.groupId); + const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; if(group && group.value) { callback(id, item.value, group.value); } else { @@ -748,14 +751,19 @@ class Choices { * @param {Array} choices - Choices to insert * @param {String} value - Name of 'value' property * @param {String} label - Name of 'label' property + * @param {Boolean} replaceChoices Whether existing choices should be removed * @return {Object} Class instance * @public */ - setChoices(choices, value, label) { + setChoices(choices, value, label, replaceChoices) { if (this.initialised === true) { if (this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') { if (!isType('Array', choices) || !value) return; - + // Clear choices if needed + if(replaceChoices) { + this._clearChoices(); + } + // Add choices if passed if (choices && choices.length) { this.containerOuter.classList.remove(this.config.classNames.loadingState); choices.forEach((result, index) => { @@ -868,10 +876,10 @@ class Choices { */ _triggerChange(value) { if (!value) return; + const callback = this.config.callbackOnChange; // Run callback if it is a function - if (this.config.callbackOnChange) { - const callback = this.config.callbackOnChange; + if (callback) { if (isType('Function', callback)) { callback(value); } else { @@ -1146,6 +1154,7 @@ class Choices { if (!value) return; const choices = this.store.getChoices(); const hasUnactiveChoices = choices.some((option) => option.active !== true); + const callback = this.config.callbackOnSearch; // Run callback if it is a function if (this.input === document.activeElement) { @@ -1154,8 +1163,7 @@ class Choices { // Filter available choices this._searchChoices(value); // Run callback if it is a function - if (this.config.callbackOnSearch) { - const callback = this.config.callbackOnSearch; + if (callback) { if (isType('Function', callback)) { callback(value); } else { @@ -1817,6 +1825,7 @@ class Choices { const items = this.store.getItems(); const passedLabel = label || passedValue; const passedOptionId = parseInt(choiceId, 10) || -1; + const callback = this.config.callbackOnAddItem; // If a prepended value has been passed, prepend it if (this.config.prependValue) { @@ -1838,9 +1847,8 @@ class Choices { } // Run callback if it is a function - if (this.config.callbackOnAddItem) { - const callback = this.config.callbackOnAddItem; - const group = this.store.getGroupById(groupId); + if (callback) { + const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; if (isType('Function', callback)) { if(group && group.value) { callback(id, passedValue, group.value); @@ -1862,7 +1870,7 @@ class Choices { * @return {Object} Class instance * @public */ - _removeItem(item, callback = this.config.callbackOnRemoveItem) { + _removeItem(item) { if (!item || !isType('Object', item)) { console.error('removeItem: No item object was passed to be removed'); return; @@ -1871,13 +1879,15 @@ class Choices { const id = item.id; const value = item.value; const choiceId = item.choiceId; + const groupId = item.groupId; + const callback = this.config.callbackOnRemoveItem; this.store.dispatch(removeItem(id, choiceId)); // Run callback if (callback) { if (isType('Function', callback)) { - const group = this.store.getGroupById(item.groupId); + const group = groupId >= 0 ? this.store.getGroupById(groupId) : null; if(group && group.value) { callback(id, value, group.value); } else { diff --git a/assets/scripts/src/reducers/groups.js b/assets/scripts/src/reducers/groups.js index 4048993..eab35b0 100644 --- a/assets/scripts/src/reducers/groups.js +++ b/assets/scripts/src/reducers/groups.js @@ -9,6 +9,10 @@ const groups = (state = [], action) => { }]; } + case 'CLEAR_CHOICES': { + return state.groups = []; + } + default: { return state; } diff --git a/index.html b/index.html index c2545c5..6ef779a 100644 --- a/index.html +++ b/index.html @@ -381,7 +381,7 @@ {value: 'Four', label: 'Label Four', disabled: true}, {value: 'Five', label: 'Label Five'}, {value: 'Six', label: 'Label Six', selected: true}, - ], 'value', 'label'); + ], 'value', 'label', false); var singlePresetOpts = new Choices('#choices-single-preset-options', { placeholder: true,