deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-04-30 13:02:48 +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',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemOption: 'choices__item--option',
itemOption: 'choices__item--choice',
group: 'choices__group',
groupHeading : 'choices__heading',
button: 'choices__button',
@ -201,7 +201,7 @@ classNames: {
item: 'choices__item',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemOption: 'choices__item--option',
itemOption: 'choices__item--choice',
group: 'choices__group',
groupHeading : 'choices__heading',
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',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemOption: 'choices__item--option',
itemChoice: 'choices__item--choice',
group: 'choices__group',
groupHeading : 'choices__heading',
button: 'choices__button',
@ -538,7 +538,7 @@ export class Choices {
const downKey = 40;
const activeItems = this.store.getItemsFilteredByActive();
const activeOptions = this.store.getChoicesFilteredByActive();
const activeChoices = this.store.getChoicesFilteredByActive();
const hasFocusedInput = this.input === document.activeElement;
const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState);
@ -684,7 +684,7 @@ export class Choices {
if(this.canSearch) {
if(this.input === document.activeElement) {
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
if(this.input.value && options.length && /[a-zA-Z0-9-_ ]/.test(keyString)) {
@ -710,7 +710,7 @@ export class Choices {
};
handleFilter();
} else if(hasUnactiveOptions) {
} else if(hasUnactiveChoices) {
// Otherwise reset options to active
this.isSearching = false;
this.store.dispatch(activateChoices());
@ -1142,14 +1142,14 @@ export class Choices {
return strToEl(`<div class="${ classNames.list } ${ classNames.listDropdown }"></div>`);
},
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) => {
return strToEl(`<option value="${ data.value }" selected>${ data.label.trim() }</option>`);
},
option: (data) => {
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 }
</div>
`);
@ -1379,7 +1379,7 @@ export class Choices {
*/
render() {
this.currentState = this.store.getState();
// Only render if our state has actually changed
if(this.currentState !== this.prevState) {
@ -1388,28 +1388,28 @@ export class Choices {
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
// Get active groups/options
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
this.choiceList.innerHTML = '';
// If we have grouped options
if(activeGroups.length >= 1 && this.isSearching !== true) {
optListFragment = this.renderGroups(activeGroups, activeOptions, optListFragment);
} else if(activeOptions.length >= 1) {
optListFragment = this.renderOptions(activeOptions, optListFragment);
choiceListFragment = this.renderGroups(activeGroups, activeChoices, choiceListFragment);
} else if(activeChoices.length >= 1) {
choiceListFragment = this.renderOptions(activeChoices, choiceListFragment);
}
if(optListFragment.children.length) {
if(choiceListFragment.children.length) {
// If we actually have anything to add to our dropdown
// append it and highlight the first option
this.choiceList.appendChild(optListFragment);
this.choiceList.appendChild(choiceListFragment);
this._highlightChoice();
} else {
// 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);
}
}

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

@ -13,28 +13,28 @@ const choices = (state = [], action) => {
}];
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
if(action.choiceId > -1) {
return state.map((option) => {
if(option.id === parseInt(action.choiceId)) {
option.selected = true;
return state.map((choice) => {
if(choice.id === parseInt(action.choiceId)) {
choice.selected = true;
}
return option;
return choice;
});
} else {
return state;
}
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
if(action.choiceId > -1) {
return state.map((option) => {
if(option.id === parseInt(action.choiceId)) {
option.selected = false;
return state.map((choice) => {
if(choice.id === parseInt(action.choiceId)) {
choice.selected = false;
}
return option;
return choice;
});
} else {
return state;
@ -42,18 +42,18 @@ const choices = (state = [], action) => {
case 'FILTER_CHOICES':
const filteredResults = action.results;
const filteredState = state.map((option, index) => {
// Set active state based on whether option is
const filteredState = state.map((choice, index) => {
// Set active state based on whether choice is
// within filtered results
option.active = filteredResults.some((result) => {
if(result.item.id === option.id) {
option.score = result.score;
choice.active = filteredResults.some((result) => {
if(result.item.id === choice.id) {
choice.score = result.score;
return true;
}
});
return option;
return choice;
}).sort((prev, next) => {
return prev.score - next.score;
});
@ -61,10 +61,10 @@ const choices = (state = [], action) => {
return filteredState;
case 'ACTIVATE_CHOICES':
return state.map((option) => {
option.active = action.active;
return state.map((choice) => {
choice.active = action.active;
return option;
return choice;
});

2
index.html
View file

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