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

ESLint entire project

Browse source
This commit is contained in:
Josh Johnson 2016-08-14 22:14:37 +01:00
parent 330eb73594
commit 9f0dc2c8dc
14 changed files with 629 additions and 608 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.eslintrc
View file

@ -10,5 +10,15 @@
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"indent": ["error", 4, {"SwitchCase": 1}],
"eol-last": "off",
"arrow-body-style": "off",
"no-underscore-dangle": "off",
"no-new": 0,
"max-len": "off",
"no-console": ["error", { allow: ["warn", "error"] }],
"consistent-return": "off",
"no-param-reassign": ["error", { "props": false }],
"no-unused-vars": ["error", { "args": "none" }]
},
}

8
.eslintrc.js Normal file
View file

@ -0,0 +1,8 @@
module.exports = {
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
]
};

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

File diff suppressed because one or more lines are too long

16
assets/scripts/src/actions/index.js
View file

@ -6,7 +6,7 @@ export const addItem = (value, label, id, choiceId, activateOptions) => {
id,
choiceId,
activateOptions,
}
};
};
export const removeItem = (id, choiceId) => {
@ -14,7 +14,7 @@ export const removeItem = (id, choiceId) => {
type: 'REMOVE_ITEM',
id,
choiceId,
}
};
};
export const highlightItem = (id, highlighted) => {
@ -22,7 +22,7 @@ export const highlightItem = (id, highlighted) => {
type: 'HIGHLIGHT_ITEM',
id,
highlighted,
}
};
};
export const addChoice = (value, label, id, groupId, disabled) => {
@ -33,21 +33,21 @@ export const addChoice = (value, label, id, groupId, disabled) => {
id,
groupId,
disabled,
}
};
};
export const filterChoices = (results) => {
return {
type: 'FILTER_CHOICES',
results,
}
};
};
export const activateChoices = (active = true) => {
return {
type: 'ACTIVATE_CHOICES',
active,
}
};
};
export const addGroup = (value, id, active, disabled) => {
@ -57,11 +57,11 @@ export const addGroup = (value, id, active, disabled) => {
id,
active,
disabled,
}
};
};
export const clearAll = () => {
return {
type: 'CLEAR_ALL',
}
};
};

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

@ -1,17 +1,36 @@
'use strict';
import './lib/polyfills.js';
import { addItem, removeItem, highlightItem, addChoice, filterChoices, activateChoices, addGroup, clearAll } from './actions/index';
import { isScrolledIntoView, getAdjacentEl, findAncestor, wrap, isType, isElement, strToEl, extend, getWidthOfInput, debounce, sortByAlpha, sortByScore } from './lib/utils.js';
import Fuse from 'fuse.js';
import Store from './store/index.js';
import {
addItem,
removeItem,
highlightItem,
addChoice,
filterChoices,
activateChoices,
addGroup,
clearAll,
} from './actions/index';
import {
isScrolledIntoView,
getAdjacentEl,
wrap,
isType,
isElement,
strToEl,
extend,
getWidthOfInput,
sortByAlpha,
sortByScore,
} from './lib/utils.js';
import './lib/polyfills.js';
/**
* Choices
*/
export class Choices {
export default class Choices {
constructor(element = '[data-choice]', userConfig = {}) {
// If there are multiple elements, create a new instance
// for each element besides the first one (as that already has an instance)
if (isType('String', element)) {
@ -135,7 +154,7 @@ export class Choices {
this.wasTap = true;
// Cutting the mustard
const cuttingTheMustard = 'querySelector' in document && 'addEventListener' in document && 'classList' in document.createElement("div");
const cuttingTheMustard = 'querySelector' in document && 'addEventListener' in document && 'classList' in document.createElement('div');
if (!cuttingTheMustard) console.error('Choices: Your browser doesn\'t support Choices');
// Input type check
@ -157,9 +176,9 @@ export class Choices {
* @return
* @public
*/
init(callback) {
init(callback = this.config.callbackOnInit) {
if (this.initialised !== true) {
// Set initialise flag
this.initialised = true;
// Create required elements
@ -177,7 +196,7 @@ export class Choices {
this._addEventListeners();
// Run callback if it is a function
if(callback = this.config.callbackOnInit){
if (callback) {
if (isType('Function', callback)) {
callback();
} else {
@ -401,7 +420,7 @@ export class Choices {
toggleDropdown() {
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
if (hasActiveDropdown) {
this.hideDropdown()
this.hideDropdown();
} else {
this.showDropdown();
}
@ -417,7 +436,7 @@ export class Choices {
*/
getValue(valueOnly = false) {
const items = this.store.getItemsFilteredByActive();
let selectedItems = [];
const selectedItems = [];
items.forEach((item) => {
if (this.passedElement.type === 'text') {
@ -427,11 +446,11 @@ export class Choices {
}
});
if (this.passedElement.type == 'select-one') {
if (this.passedElement.type === 'select-one') {
return selectedItems[0];
} else {
return selectedItems;
}
return selectedItems;
}
/**
@ -446,7 +465,7 @@ export class Choices {
// Convert args to an itterable array
const values = [...args];
values.forEach((item, index) => {
values.forEach((item) => {
if (isType('Object', item)) {
if (!item.value) return;
// If we are dealing with a select input, we need to create an option first
@ -478,15 +497,11 @@ export class Choices {
setValueByChoice(value) {
if (this.passedElement.type !== 'text') {
const choices = this.store.getChoices();
// If only one value has been passed, convert to array
if (!isType('Array', value)) {
value = [value];
}
const choiceValue = isType('Array', value) ? value : [value];
// Loop through each value and
value.forEach((val, index) => {
choiceValue.forEach((val) => {
const foundChoice = choices.find((choice) => {
// Check 'value' property exists and the choice isn't already selected
return choice.value === val;
@ -501,7 +516,7 @@ export class Choices {
} else {
console.warn('Attempting to select choice that does not exist');
}
})
});
}
return this;
}
@ -523,8 +538,7 @@ export class Choices {
this.containerOuter.classList.remove(this.config.classNames.loadingState);
choices.forEach((result, index) => {
if (result.choices) {
const isFirst = index === 0 ? true : false;
this._addGroup(result, index, isFirst);
this._addGroup(result, index);
} else {
this._addChoice(result.selected ? result.selected : false, result.disabled ? result.disabled : false, result[value], result[label]);
}
@ -608,7 +622,13 @@ export class Choices {
this.containerOuter.classList.add(this.config.classNames.loadingState);
this.containerOuter.setAttribute('aria-busy', 'true');
if (this.passedElement.type === 'select-one') {
const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.config.loadingText, active: true});
const placeholderItem = this._getTemplate('item', {
id: -1,
value: 'Loading',
label: this.config.loadingText,
active: true,
});
this.itemList.appendChild(placeholderItem);
} else {
this.input.placeholder = this.config.loadingText;
@ -680,7 +700,7 @@ export class Choices {
// If we are clicking on a button
if (this.config.removeItems && this.config.removeItemButton) {
const itemId = element.parentNode.getAttribute('data-id');
const itemToRemove = activeItems.find((item) => item.id === parseInt(itemId));
const itemToRemove = activeItems.find((item) => item.id === parseInt(itemId, 10));
// Remove item associated with button
this._removeItem(itemToRemove);
@ -707,7 +727,7 @@ export class Choices {
// so we deselect any items that aren't the target
// unless shift is being pressed
activeItems.forEach((item) => {
if(item.id === parseInt(passedId) && !item.highlighted) {
if (item.id === parseInt(passedId, 10) && !item.highlighted) {
this.highlightItem(item);
} else if (!hasShiftKey) {
if (item.highlighted) {
@ -736,8 +756,6 @@ export class Choices {
const choice = this.store.getChoiceById(id);
if (choice && !choice.selected && !choice.disabled) {
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
let canAddItem = true;
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= activeItems.length && this.passedElement.type === 'select-multiple') {
@ -751,14 +769,13 @@ export class Choices {
if (this.passedElement.type === 'select-one') {
if (this.canSearch) {
this.input.value = "";
this.input.value = '';
}
this.isSearching = false;
this.store.dispatch(activateChoices(true));
this.hideDropdown();
}
}
}
/**
@ -783,7 +800,7 @@ export class Choices {
this.removeHighlightedItems();
}
}
};
}
/**
* Validates whether an item can be added by a user
@ -819,13 +836,13 @@ export class Choices {
// in the array
if (this.config.duplicateItems === false && !isUnique) {
canAddItem = false;
notice = `Only unique values can be added.`;
notice = 'Only unique values can be added.';
}
}
return {
response: canAddItem,
notice: notice,
notice,
};
}
@ -847,12 +864,12 @@ export class Choices {
const newValue = isType('String', value) ? value.trim() : value;
const currentValue = isType('String', this.currentValue) ? this.currentValue.trim() : this.currentValue;
if(newValue.length >= 1 && newValue !== currentValue + ' ') {
if (newValue.length >= 1 && newValue !== `${currentValue} `) {
const haystack = this.store.getChoicesFilteredBySelectable();
const needle = newValue;
const keys = isType('Array', this.config.sortFields) ? this.config.sortFields : [this.config.sortFields];
const fuse = new Fuse(haystack, {
keys: keys,
keys,
shouldSort: true,
include: 'score',
});
@ -944,8 +961,6 @@ export class Choices {
const downKey = 40;
const activeItems = this.store.getItemsFilteredByActive();
const activeChoices = this.store.getChoicesFilteredByActive();
const hasFocusedInput = this.input === document.activeElement;
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
const hasItems = this.itemList && this.itemList.children;
@ -1029,7 +1044,6 @@ export class Choices {
case upKey:
// If up or down key is pressed, traverse through options
if (hasActiveDropdown || this.passedElement.type === 'select-one') {
// Show dropdown if focus
if (!hasActiveDropdown) {
this.showDropdown();
@ -1063,7 +1077,7 @@ export class Choices {
// traversing dropdown options
e.preventDefault();
}
break
break;
case backKey:
case deleteKey:
@ -1071,7 +1085,7 @@ export class Choices {
if (hasFocusedInput && !e.target.value && this.passedElement.type !== 'select-one') {
this._handleBackspace(activeItems);
e.preventDefault();
};
}
break;
@ -1095,8 +1109,6 @@ export class Choices {
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
const value = this.input.value;
let dropdownItem;
if (value) {
const activeItems = this.store.getItemsFilteredByActive();
const canAddItem = this._canAddItem(activeItems, value);
@ -1110,17 +1122,12 @@ export class Choices {
if (!hasActiveDropdown) {
this.showDropdown();
}
} else {
if(!canAddItem.notice && hasActiveDropdown) {
} else if (!canAddItem.notice && hasActiveDropdown) {
this.hideDropdown();
}
}
} else {
if(hasActiveDropdown) {
} else if (hasActiveDropdown) {
this.hideDropdown();
}
}
} else {
const backKey = 46;
const deleteKey = 8;
@ -1132,14 +1139,10 @@ export class Choices {
this.isSearching = false;
this.store.dispatch(activateChoices(true));
}
} else {
// If we have enabled text search
if(this.canSearch) {
} else if (this.canSearch) {
this._searchChoices(this.input.value);
}
}
}
}
/**
@ -1148,7 +1151,7 @@ export class Choices {
* @return
* @private
*/
_onInput(e) {
_onInput() {
if (this.passedElement.type !== 'select-one') {
if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.getAttribute('placeholder'))) {
// If there is a placeholder, we only want to set the width of the input when it is a greater
@ -1170,7 +1173,7 @@ export class Choices {
* @return
* @private
*/
_onTouchMove(e) {
_onTouchMove() {
if (this.wasTap === true) {
this.wasTap = false;
}
@ -1187,7 +1190,6 @@ export class Choices {
// If a user tapped within our container...
if (this.wasTap === true && this.containerOuter.contains(target)) {
// ...and we aren't dealing with a single select box, show dropdown/focus input
if ((target === this.containerOuter || target === this.containerInner) && this.passedElement.type !== 'select-one') {
if (this.passedElement.type === 'text') {
@ -1203,7 +1205,6 @@ export class Choices {
}
}
}
// Prevents focus event firing
e.stopPropagation();
}
@ -1221,9 +1222,8 @@ export class Choices {
const target = e.target;
if (this.containerOuter.contains(target) && target !== this.input) {
const activeItems = this.store.getItemsFilteredByActive();
const hasShiftKey = e.shiftKey ? true : false;
const hasShiftKey = e.shiftKey;
// Prevent input mouse down triggering focus event
if (target !== this.input) e.preventDefault();
@ -1249,11 +1249,6 @@ export class Choices {
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
if (this.containerOuter.contains(target)) {
// If click is affecting a child node of our element
const hasShiftKey = e.shiftKey ? true : false;
// If dropdown is not active...
if (!hasActiveDropdown) {
if (this.passedElement.type === 'text') {
if (document.activeElement !== this.input) {
@ -1265,17 +1260,10 @@ export class Choices {
this.input.focus();
}
}
} else {
if(this.passedElement.type === 'select-one') {
if(target !== this.input) {
} else if (this.passedElement.type === 'select-one' && target !== this.input) {
this.hideDropdown();
}
}
}
} else {
// Click is outside of our element so close dropdown and de-select items
const activeItems = this.store.getItemsFilteredByActive();
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
@ -1302,7 +1290,7 @@ export class Choices {
*/
_onMouseOver(e) {
// If the dropdown is either the target or one of its children is the target
if((e.target === this.dropdown || findAncestor(e.target, this.config.classNames.listDropdown))) {
if (e.target === this.dropdown || this.dropdown.contains(e.target)) {
if (e.target.hasAttribute('data-choice')) this._highlightChoice(e.target);
}
}
@ -1347,13 +1335,11 @@ export class Choices {
this.input.focus();
}
this.focusAndHideDropdown = false;
} else {
if(this.canSearch) {
} else if (this.canSearch) {
this.input.focus();
}
}
}
}
/**
* Blur event
@ -1373,7 +1359,7 @@ export class Choices {
// Close the dropdown if it is active, the input is the target (select-multiple, text, select-one (with search))
// or the outer container is the target with no search (select-one)
if(hasActiveDropdown && (e.target === this.input || e.target === this.containerOuter && !this.canSearch)) {
if (hasActiveDropdown && (e.target === this.input || (e.target === this.containerOuter && !this.canSearch))) {
this.hideDropdown();
}
@ -1417,12 +1403,13 @@ export class Choices {
const containerScrollPos = this.choiceList.scrollTop + dropdownHeight;
// Difference between the choice and scroll position
let endPoint = direction > 0 ? ((this.choiceList.scrollTop + choicePos) - containerScrollPos) : choice.offsetTop;
const endPoint = direction > 0 ? ((this.choiceList.scrollTop + choicePos) - containerScrollPos) : choice.offsetTop;
const animateScroll = (time, endPoint, direction) => {
let continueAnimation = false;
let easing, distance;
const animateScroll = () => {
const strength = 4;
let continueAnimation = false;
let easing;
let distance;
if (direction > 0) {
easing = (endPoint - this.choiceList.scrollTop) / strength;
@ -1468,9 +1455,9 @@ export class Choices {
const highlightedChoices = Array.from(this.dropdown.querySelectorAll(`.${this.config.classNames.highlightedState}`));
// Remove any highlighted choices
highlightedChoices.forEach((el) => {
el.classList.remove(this.config.classNames.highlightedState);
el.setAttribute('aria-selected', 'false');
highlightedChoices.forEach((choice) => {
choice.classList.remove(this.config.classNames.highlightedState);
choice.setAttribute('aria-selected', 'false');
});
if (el) {
@ -1478,20 +1465,20 @@ export class Choices {
el.classList.add(this.config.classNames.highlightedState);
this.highlightPosition = choices.indexOf(el);
} else {
// Highlight option based on last known highlight location
let el;
// Highlight choice based on last known highlight location
let choice;
if (choices.length > this.highlightPosition) {
// If we have an option to highlight
el = choices[this.highlightPosition];
choice = choices[this.highlightPosition];
} else {
// Otherwise highlight the option before
el = choices[choices.length - 1];
choice = choices[choices.length - 1];
}
if(!el) el = choices[0];
el.classList.add(this.config.classNames.highlightedState);
el.setAttribute('aria-selected', 'true');
if (!choice) choice = choices[0];
choice.classList.add(this.config.classNames.highlightedState);
choice.setAttribute('aria-selected', 'true');
}
}
}
@ -1504,10 +1491,10 @@ export class Choices {
* @public
*/
_addItem(value, label, choiceId = -1) {
const items = this.store.getItems();
let passedValue = isType('String', value) ? value.trim() : value;
let passedLabel = label || passedValue;
let passedOptionId = parseInt(choiceId) || -1;
const items = this.store.getItems();
const passedLabel = label || passedValue;
const passedOptionId = parseInt(choiceId, 10) || -1;
// If a prepended value has been passed, prepend it
if (this.config.prependValue) {
@ -1516,7 +1503,7 @@ export class Choices {
// If an appended value has been passed, append it
if (this.config.appendValue) {
passedValue = passedValue + this.config.appendValue.toString();
passedValue += this.config.appendValue.toString();
}
// Generate unique id
@ -1583,18 +1570,17 @@ export class Choices {
* @private
*/
_addChoice(isSelected, isDisabled, value, label, groupId = -1) {
if(!value) return
if(!label) { label = value; }
if (!value) return;
// Generate unique id
const choices = this.store.getChoices();
const id = choices ? choices.length + 1 : 1;
const choiceLabel = label || value;
const choiceId = choices ? choices.length + 1 : 1;
this.store.dispatch(addChoice(value, label, id, groupId, isDisabled));
this.store.dispatch(addChoice(value, choiceLabel, choiceId, groupId, isDisabled));
if (isSelected && !isDisabled) {
this._addItem(value, label, id);
this._addItem(value, choiceLabel, choiceId);
}
}
@ -1602,11 +1588,10 @@ export class Choices {
* Add group to dropdown
* @param {Object} group Group to add
* @param {Number} id Group ID
* @param {Boolean} isFirst Whether this is the first group to add
* @return
* @private
*/
_addGroup(group, id, isFirst) {
_addGroup(group, id) {
const groupChoices = isType('Object', group) ? group.choices : Array.from(group.getElementsByTagName('OPTION'));
const groupId = id;
const isDisabled = group.disabled ? group.disabled : false;
@ -1614,10 +1599,9 @@ export class Choices {
if (groupChoices) {
this.store.dispatch(addGroup(group.label, groupId, true, isDisabled));
groupChoices.forEach((option, index) => {
const isDisabled = (option.disabled || option.parentNode && option.parentNode.disabled) || false;
const isSelected = option.selected ? option.selected : false;
groupChoices.forEach((option) => {
const isOptDisabled = (option.disabled || (option.parentNode && option.parentNode.disabled)) || false;
const isOptSelected = option.selected ? option.selected : false;
let label;
if (isType('Object', option)) {
@ -1626,8 +1610,7 @@ export class Choices {
label = option.innerHTML;
}
this._addChoice(isSelected, isDisabled, option.value, label, groupId);
this._addChoice(isOptSelected, isOptDisabled, option.value, label, groupId);
});
} else {
this.store.dispatch(addGroup(group.label, group.id, false, group.disabled));
@ -1678,13 +1661,13 @@ export class Choices {
<button class="${classNames.button}" data-button>Remove item</button>
</div>
`);
} else {
}
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"' : ''}>
${data.label}
</div>
`);
}
},
choiceList: () => {
return strToEl(`
@ -1715,7 +1698,7 @@ export class Choices {
<div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
`);
},
notice: (label, clickable) => {
notice: (label) => {
return strToEl(`
<div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
`);
@ -1796,12 +1779,11 @@ export class Choices {
if (passedGroups && passedGroups.length) {
passedGroups.forEach((group, index) => {
const isFirst = index === 0 ? true : false;
this._addGroup(group, index, isFirst);
this._addGroup(group, index);
});
} else {
const passedOptions = Array.from(this.passedElement.options);
let allChoices = [];
const allChoices = [];
// Create array of options from option elements
passedOptions.forEach((o) => {
@ -1809,7 +1791,7 @@ export class Choices {
value: o.value,
label: o.innerHTML,
selected: o.selected,
disabled: o.disabled || o.parentNode.disabled
disabled: o.disabled || o.parentNode.disabled,
});
});
@ -1851,19 +1833,18 @@ export class Choices {
groups
.sort(filter)
.forEach((group, i) => {
.forEach((group) => {
// Grab options that are children of this group
const groupChoices = choices.filter((choice) => {
if (this.passedElement.type === 'select-one') {
return choice.groupId === group.id
} else {
return choice.groupId === group.id && !choice.selected;
return choice.groupId === group.id;
}
return choice.groupId === group.id && !choice.selected;
});
if (groupChoices.length >= 1) {
const dropdownGroup = this._getTemplate('choiceGroup', group);
groupFragment.appendChild(dropdownGroup);
this.renderChoices(groupChoices, groupFragment);
@ -1887,9 +1868,8 @@ export class Choices {
choices
.sort(filter)
.forEach((choice, i) => {
.forEach((choice) => {
const dropdownItem = this._getTemplate('choice', choice);
if (this.passedElement.type === 'select-one') {
choicesFragment.appendChild(dropdownItem);
} else if (!choice.selected) {
@ -1929,7 +1909,7 @@ export class Choices {
});
// Update selected choices
this.passedElement.innerHTML = "";
this.passedElement.innerHTML = '';
this.passedElement.appendChild(selectedOptionsFragment);
}
@ -1955,7 +1935,6 @@ export class Choices {
// Only render if our state has actually changed
if (this.currentState !== this.prevState) {
// Choices
if ((this.currentState.choices !== this.prevState.choices || this.currentState.groups !== this.prevState.groups)) {
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
@ -1994,7 +1973,8 @@ export class Choices {
if (this.currentState.items !== this.prevState.items) {
const activeItems = this.store.getItemsFilteredByActive();
if (activeItems) {
// Create a fragment to store our list items (so we don't have to update the DOM for each item)
// Create a fragment to store our list items
// (so we don't have to update the DOM for each item)
const itemListFragment = this.renderItems(activeItems);
// Clear list
@ -2011,6 +1991,6 @@ export class Choices {
this.prevState = this.currentState;
}
}
};
}
window.Choices = module.exports = Choices;

2
assets/scripts/src/lib/polyfills.js
View file

@ -1,3 +1,5 @@
/* eslint-disable */
// Production steps of ECMA-262, Edition 6, 22.1.2.1
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
if (!Array.from) {

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

@ -1,6 +1,4 @@
export const hasClass = (elem, className) => {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
/* eslint-disable */
/**
* Capitalises the first letter of each word in a string
@ -46,7 +44,7 @@ export const isElement = (o) => {
typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
);
}
};
/**
* Merges unspecified amount of objects into new object
@ -111,7 +109,7 @@ export const whichTransitionEvent = function(){
return transitions[t];
}
}
}
};
/**
* CSS animation end event listener
@ -374,7 +372,7 @@ export const isScrolledIntoView = (el, parent, direction = 1) => {
}
return isVisible;
}
};
/**
* Remove html tags from a string
@ -414,7 +412,7 @@ export const addAnimation = (el, animation) => {
*/
export const getRandomNumber = function(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
};
/**
* Turn a string into a node

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

@ -1,18 +1,24 @@
const choices = (state = [], action) => {
switch (action.type) {
case 'ADD_CHOICE':
case 'ADD_CHOICE': {
/*
A disabled choice appears in the choice dropdown but cannot be selected
A selected choice has been added to the passed input's value (added as an item)
An active choice appears within the choice dropdown
*/
return [...state, {
id: action.id,
groupId: action.groupId,
value: action.value,
label: action.label,
disabled: action.disabled, // A disabled choice appears in the choice dropdown but cannot be selected
selected: false, // A selected choice has been added to the passed input's value (added as an item)
active: true, // An active choice appears within the choice dropdown
disabled: action.disabled,
selected: false,
active: true,
score: 9999,
}];
}
case 'ADD_ITEM':
case 'ADD_ITEM': {
let newState = state;
// If all choices need to be activated
@ -26,7 +32,7 @@ const choices = (state = [], action) => {
// we want to disable it so it can't be chosen again
if (action.choiceId > -1) {
newState = state.map((choice) => {
if(choice.id === parseInt(action.choiceId)) {
if (choice.id === parseInt(action.choiceId, 10)) {
choice.selected = true;
}
return choice;
@ -34,24 +40,26 @@ const choices = (state = [], action) => {
}
return newState;
}
case 'REMOVE_ITEM':
case 'REMOVE_ITEM': {
// 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((choice) => {
if(choice.id === parseInt(action.choiceId)) {
if (choice.id === parseInt(action.choiceId, 10)) {
choice.selected = false;
}
return choice;
});
} else {
}
return state;
}
case 'FILTER_CHOICES':
case 'FILTER_CHOICES': {
const filteredResults = action.results;
const filteredState = state.map((choice, index) => {
const filteredState = state.map((choice) => {
// Set active state based on whether choice is
// within filtered results
@ -60,22 +68,26 @@ const choices = (state = [], action) => {
choice.score = result.score;
return true;
}
return false;
});
return choice;
});
return filteredState;
}
case 'ACTIVATE_CHOICES':
case 'ACTIVATE_CHOICES': {
return state.map((choice) => {
choice.active = action.active;
return choice;
});
}
default:
default: {
return state;
}
}
};
export default choices;

6
assets/scripts/src/reducers/groups.js
View file

@ -1,16 +1,18 @@
const groups = (state = [], action) => {
switch (action.type) {
case 'ADD_GROUP':
case 'ADD_GROUP': {
return [...state, {
id: action.id,
value: action.value,
active: action.active,
disabled: action.disabled,
}];
}
default:
default: {
return state;
}
}
};
export default groups;

8
assets/scripts/src/reducers/index.js
View file

@ -6,14 +6,14 @@ import choices from './choices';
const appReducer = combineReducers({
items,
groups,
choices
choices,
});
const rootReducer = (state, action) => {
const rootReducer = (passedState, action) => {
let state = passedState;
// If we are clearing all items, groups and options we reassign
// state and then pass that state to our proper reducer. This isn't
// mutating our actual state.
//
// mutating our actual state
// See: http://stackoverflow.com/a/35641992
if (action.type === 'CLEAR_ALL') {
state = undefined;

16
assets/scripts/src/reducers/items.js
View file

@ -1,14 +1,14 @@
const items = (state = [], action) => {
switch (action.type) {
case 'ADD_ITEM':
case 'ADD_ITEM': {
// Add object to items array
let newState = [...state, {
const newState = [...state, {
id: action.id,
choiceId: action.choiceId,
value: action.value,
label: action.label,
active: true,
highlighted: false
highlighted: false,
}];
return newState.map((item) => {
@ -17,8 +17,9 @@ const items = (state = [], action) => {
}
return item;
});
}
case 'REMOVE_ITEM':
case 'REMOVE_ITEM': {
// Set item to inactive
return state.map((item) => {
if (item.id === action.id) {
@ -26,18 +27,21 @@ const items = (state = [], action) => {
}
return item;
});
}
case 'HIGHLIGHT_ITEM':
case 'HIGHLIGHT_ITEM': {
return state.map((item) => {
if (item.id === action.id) {
item.highlighted = action.highlighted;
}
return item;
});
}
default:
default: {
return state;
}
}
};
export default items;

19
assets/scripts/src/store/index.js
View file

@ -1,10 +1,7 @@
'use strict';
import { createStore } from 'redux';
import rootReducer from './../reducers/index.js';
export class Store {
export default class Store {
constructor() {
this.store = createStore(
rootReducer,
@ -53,7 +50,6 @@ export class Store {
*/
getItemsFilteredByActive() {
const items = this.getItems();
const values = items.filter((item) => {
return item.active === true;
}, []);
@ -80,7 +76,6 @@ export class Store {
*/
getChoices() {
const state = this.store.getState();
return state.choices;
}
@ -90,7 +85,6 @@ export class Store {
*/
getChoicesFilteredByActive() {
const choices = this.getChoices();
const values = choices.filter((choice) => {
return choice.active === true;
}, []);
@ -116,12 +110,13 @@ export class Store {
* @return {Object} Found choice
*/
getChoiceById(id) {
if(!id) return;
if (id) {
const choices = this.getChoicesFilteredByActive();
const foundChoice = choices.find((choice) => choice.id === parseInt(id));
const foundChoice = choices.find((choice) => choice.id === parseInt(id, 10));
return foundChoice;
}
return false;
}
/**
* Get groups from store
@ -145,11 +140,11 @@ export class Store {
const hasActiveOptions = choices.some((choice) => {
return choice.active === true && choice.disabled === false;
});
return isActive && hasActiveOptions ? true : false;
return isActive && hasActiveOptions;
}, []);
return values;
}
};
}
module.exports = Store;

13
package.json
View file

@ -27,12 +27,18 @@
"devDependencies": {
"autoprefixer": "^6.3.3",
"babel-core": "^6.7.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-stage-0": "^6.5.0",
"csso": "^1.7.0",
"csso": "^1.8.2",
"es6-promise": "^3.2.1",
"fuse.js": "^2.2.0",
"eslint": "^3.3.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-import": "^1.13.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-react": "^6.1.0",
"jasmine-core": "^2.4.1",
"karma": "^1.1.0",
"karma-coverage": "^1.0.0",
@ -52,6 +58,7 @@
"wrapper-webpack-plugin": "^0.1.7"
},
"dependencies": {
"redux": "^3.3.1"
"redux": "^3.3.1",
"fuse.js": "^2.2.0"
}
}

5
webpack.config.dev.js
View file

@ -12,6 +12,9 @@ module.exports = {
filename: 'choices.min.js',
publicPath: '/assets/scripts/dist/'
},
eslint: {
configFile: '.eslintrc'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
@ -24,7 +27,7 @@ module.exports = {
loaders: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loaders: ['babel'],
loaders: ['babel', 'eslint-loader'],
include: path.join(__dirname, 'assets/scripts/src')
}]
}