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

Further updating of terminology

Browse source
This commit is contained in:
Josh Johnson 2016-06-27 14:57:33 +01:00
parent a2e45209a7
commit c1278e8f0d
5 changed files with 38 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -48,7 +48,7 @@ Coming soon.
item: 'choices__item', item: 'choices__item',
itemSelectable: 'choices__item--selectable', itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled', itemDisabled: 'choices__item--disabled',
itemOption: 'choices__item--option', itemOption: 'choices__item--choice',
group: 'choices__group', group: 'choices__group',
groupHeading : 'choices__heading', groupHeading : 'choices__heading',
button: 'choices__button', button: 'choices__button',
@ -201,7 +201,7 @@ classNames: {
item: 'choices__item', item: 'choices__item',
itemSelectable: 'choices__item--selectable', itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled', itemDisabled: 'choices__item--disabled',
itemOption: 'choices__item--option', itemOption: 'choices__item--choice',
group: 'choices__group', group: 'choices__group',
groupHeading : 'choices__heading', groupHeading : 'choices__heading',
button: 'choices__button', button: 'choices__button',

2
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -57,7 +57,7 @@ export class Choices {
item: 'choices__item', item: 'choices__item',
itemSelectable: 'choices__item--selectable', itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled', itemDisabled: 'choices__item--disabled',
itemOption: 'choices__item--option', itemChoice: 'choices__item--choice',
group: 'choices__group', group: 'choices__group',
groupHeading : 'choices__heading', groupHeading : 'choices__heading',
button: 'choices__button', button: 'choices__button',
@ -538,7 +538,7 @@ export class Choices {
const downKey = 40; const downKey = 40;
const activeItems = this.store.getItemsFilteredByActive(); const activeItems = this.store.getItemsFilteredByActive();
const activeOptions = this.store.getChoicesFilteredByActive(); const activeChoices = this.store.getChoicesFilteredByActive();
const hasFocusedInput = this.input === document.activeElement; const hasFocusedInput = this.input === document.activeElement;
const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState); const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState);
@ -684,7 +684,7 @@ export class Choices {
if(this.canSearch) { if(this.canSearch) {
if(this.input === document.activeElement) { if(this.input === document.activeElement) {
const options = this.store.getChoices(); const options = this.store.getChoices();
const hasUnactiveOptions = options.some((option) => option.active !== true); const hasUnactiveChoices = options.some((option) => option.active !== true);
// Check that we have a value to search and the input was an alphanumeric character // Check that we have a value to search and the input was an alphanumeric character
if(this.input.value && options.length && /[a-zA-Z0-9-_ ]/.test(keyString)) { if(this.input.value && options.length && /[a-zA-Z0-9-_ ]/.test(keyString)) {
@ -710,7 +710,7 @@ export class Choices {
}; };
handleFilter(); handleFilter();
} else if(hasUnactiveOptions) { } else if(hasUnactiveChoices) {
// Otherwise reset options to active // Otherwise reset options to active
this.isSearching = false; this.isSearching = false;
this.store.dispatch(activateChoices()); this.store.dispatch(activateChoices());
@ -1142,14 +1142,14 @@ export class Choices {
return strToEl(`<div class="${ classNames.list } ${ classNames.listDropdown }"></div>`); return strToEl(`<div class="${ classNames.list } ${ classNames.listDropdown }"></div>`);
}, },
notice: (label, clickable) => { notice: (label, clickable) => {
return strToEl(`<div class="${ classNames.item } ${ classNames.itemOption }">${ label }</div>`); return strToEl(`<div class="${ classNames.item } ${ classNames.itemChoice }">${ label }</div>`);
}, },
selectOption: (data) => { selectOption: (data) => {
return strToEl(`<option value="${ data.value }" selected>${ data.label.trim() }</option>`); return strToEl(`<option value="${ data.value }" selected>${ data.label.trim() }</option>`);
}, },
option: (data) => { option: (data) => {
return strToEl(` return strToEl(`
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.disabled ? classNames.itemDisabled : classNames.itemSelectable }" data-option ${ data.disabled ? 'data-option-disabled' : 'data-option-selectable' } data-id="${ data.id }" data-value="${ data.value }"> <div class="${ classNames.item } ${ classNames.itemChoice } ${ data.disabled ? classNames.itemDisabled : classNames.itemSelectable }" data-option ${ data.disabled ? 'data-option-disabled' : 'data-option-selectable' } data-id="${ data.id }" data-value="${ data.value }">
${ data.label } ${ data.label }
</div> </div>
`); `);
@ -1379,7 +1379,7 @@ export class Choices {
*/ */
render() { render() {
this.currentState = this.store.getState(); this.currentState = this.store.getState();
// Only render if our state has actually changed // Only render if our state has actually changed
if(this.currentState !== this.prevState) { if(this.currentState !== this.prevState) {
@ -1388,28 +1388,28 @@ export class Choices {
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') { if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
// Get active groups/options // Get active groups/options
const activeGroups = this.store.getGroupsFilteredByActive(); const activeGroups = this.store.getGroupsFilteredByActive();
const activeOptions = this.store.getChoicesFilteredByActive(); const activeChoices = this.store.getChoicesFilteredByActive();
let optListFragment = document.createDocumentFragment(); let choiceListFragment = document.createDocumentFragment();
// Clear options // Clear options
this.choiceList.innerHTML = ''; this.choiceList.innerHTML = '';
// If we have grouped options // If we have grouped options
if(activeGroups.length >= 1 && this.isSearching !== true) { if(activeGroups.length >= 1 && this.isSearching !== true) {
optListFragment = this.renderGroups(activeGroups, activeOptions, optListFragment); choiceListFragment = this.renderGroups(activeGroups, activeChoices, choiceListFragment);
} else if(activeOptions.length >= 1) { } else if(activeChoices.length >= 1) {
optListFragment = this.renderOptions(activeOptions, optListFragment); choiceListFragment = this.renderOptions(activeChoices, choiceListFragment);
} }
if(optListFragment.children.length) { if(choiceListFragment.children.length) {
// If we actually have anything to add to our dropdown // If we actually have anything to add to our dropdown
// append it and highlight the first option // append it and highlight the first option
this.choiceList.appendChild(optListFragment); this.choiceList.appendChild(choiceListFragment);
this._highlightChoice(); this._highlightChoice();
} else { } else {
// Otherwise show a notice // Otherwise show a notice
const dropdownItem = this.isSearching ? this._getTemplate('notice', 'No results found') : this._getTemplate('notice', 'No options to select'); const dropdownItem = this.isSearching ? this._getTemplate('notice', 'No results found') : this._getTemplate('notice', 'No choices to choose from');
this.choiceList.appendChild(dropdownItem); this.choiceList.appendChild(dropdownItem);
} }
} }

38
assets/scripts/src/reducers/choices.js
View file

@ -13,28 +13,28 @@ const choices = (state = [], action) => {
}]; }];
case 'ADD_ITEM': case 'ADD_ITEM':
// When an item is added and it has an associated option, // When an item is added and it has an associated choice,
// we want to disable it so it can't be chosen again // we want to disable it so it can't be chosen again
if(action.choiceId > -1) { if(action.choiceId > -1) {
return state.map((option) => { return state.map((choice) => {
if(option.id === parseInt(action.choiceId)) { if(choice.id === parseInt(action.choiceId)) {
option.selected = true; choice.selected = true;
} }
return option; return choice;
}); });
} else { } else {
return state; return state;
} }
case 'REMOVE_ITEM': case 'REMOVE_ITEM':
// When an item is removed and it has an associated option, // When an item is removed and it has an associated choice,
// we want to re-enable it so it can be chosen again // we want to re-enable it so it can be chosen again
if(action.choiceId > -1) { if(action.choiceId > -1) {
return state.map((option) => { return state.map((choice) => {
if(option.id === parseInt(action.choiceId)) { if(choice.id === parseInt(action.choiceId)) {
option.selected = false; choice.selected = false;
} }
return option; return choice;
}); });
} else { } else {
return state; return state;
@ -42,18 +42,18 @@ const choices = (state = [], action) => {
case 'FILTER_CHOICES': case 'FILTER_CHOICES':
const filteredResults = action.results; const filteredResults = action.results;
const filteredState = state.map((option, index) => { const filteredState = state.map((choice, index) => {
// Set active state based on whether option is // Set active state based on whether choice is
// within filtered results // within filtered results
option.active = filteredResults.some((result) => { choice.active = filteredResults.some((result) => {
if(result.item.id === option.id) { if(result.item.id === choice.id) {
option.score = result.score; choice.score = result.score;
return true; return true;
} }
}); });
return option; return choice;
}).sort((prev, next) => { }).sort((prev, next) => {
return prev.score - next.score; return prev.score - next.score;
}); });
@ -61,10 +61,10 @@ const choices = (state = [], action) => {
return filteredState; return filteredState;
case 'ACTIVATE_CHOICES': case 'ACTIVATE_CHOICES':
return state.map((option) => { return state.map((choice) => {
option.active = action.active; choice.active = action.active;
return option; return choice;
}); });

2
index.html
View file

@ -176,7 +176,7 @@
}); });
}) })
.catch((error) => { .catch((error) => {
callback(); console.log(error);
}); });
}) })