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

Less querying of the DOM - use state instead + deselect all items if click outside

Browse source
This commit is contained in:
Josh Johnson 2016-04-12 20:16:36 +01:00
parent 4947da2b43
commit cd43799258
5 changed files with 75 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -2,22 +2,22 @@ export const addItem = (value, id) => {
return {
type: 'ADD_ITEM',
value: value,
id: id
id: id,
}
};
export const removeItem = (id) => {
return {
type: 'REMOVE_ITEM',
id: id
id: id,
}
};
export const selectItem = (id, value) => {
export const selectItem = (id, selected) => {
return {
type: 'SELECT_ITEM',
id: id,
value: value
selected: selected,
}
};
@ -25,6 +25,14 @@ export const addOption = (value, id) => {
return {
type: 'ADD_OPTION',
value: value,
id: id
id: id,
}
};
export const selectOption = (id, selected) => {
return {
type: 'SELECT_OPTION',
id: id,
selected: selected,
}
};

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

@ -2,7 +2,7 @@
import { createStore } from 'redux';
import rootReducer from './reducers/index.js';
import { addItem, removeItem, selectItem, addOption } from './actions/index';
import { addItem, removeItem, selectItem, addOption, selectOption } from './actions/index';
import { hasClass, wrap, getSiblings, isType, strToEl, extend } from './lib/utils.js';
export class Choices {
@ -191,13 +191,12 @@ export class Choices {
let handleBackspaceKey = () => {
if(this.options.removeItems) {
let inputIsFocussed = this.input === document.activeElement;
let lastItem = items[items.length - 1];
let selectedItems = items.filter((item) => {
return item.selected === true;
});
let inputIsFocussed = this.input === document.activeElement;
if(items && lastItem && !this.options.editItems && inputIsFocussed && this.options.removeItems) {
this.selectItem(lastItem);
}
@ -229,6 +228,10 @@ export class Choices {
onClick(e) {
// If click is affecting a child node of our element
if(this.containerOuter.contains(e.target)) {
const state = this.store.getState();
const items = state.items;
const options = state.options;
if(this.input !== document.activeElement) {
this.input.focus();
}
@ -239,20 +242,16 @@ export class Choices {
let handleClick = (item) => {
if(this.options.removeItems) {
let passedId = item.getAttribute('data-choice-id');
let items = this.list.children;
// We only want to select one item with a click
// so we deselect any items that aren't the target
for (var i = 0; i < items.length; i++) {
let singleItem = items[i];
let id = singleItem.getAttribute('data-choice-id');;
if(id === passedId && !singleItem.classList.contains(this.options.classNames.selectedState)) {
this.selectItem(singleItem);
items.forEach((item) => {
if(item.id === parseInt(passedId) && !item.selected) {
this.selectItem(item);
} else {
this.deselectItem(singleItem);
this.deselectItem(item);
}
}
});
}
}
@ -260,13 +259,24 @@ export class Choices {
}
if(e.target.hasAttribute('data-choice-selectable')) {
let item = e.target;
let value = e.target.getAttribute('data-choice-value');
this.addItem(value);
let id = e.target.getAttribute('data-choice-id');
let option = options.find((option) => {
return option.id === parseInt(id);
});
if(option) {
this.selectOption(id);
this.addItem(option.value);
}
}
} else if(this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState)) {
this.toggleDropdown();
} else {
// Click is outside of our element so close dropdown and de-select items
this.deselectAll();
if(this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState)) {
this.toggleDropdown();
}
}
}
@ -328,7 +338,8 @@ export class Choices {
* @return
*/
selectItem(item) {
let id = item.getAttribute('data-choice-id');
if(!item) return;
let id = item.id;
this.store.dispatch(selectItem(id, true));
}
@ -338,7 +349,8 @@ export class Choices {
* @return
*/
deselectItem(item) {
let id = item.getAttribute('data-choice-id');
if(!item) return;
let id = item.id;
this.store.dispatch(selectItem(id, false));
}
@ -347,11 +359,25 @@ export class Choices {
* @param {Array} items Array of items to select
* @return
*/
selectAll(items) {
for (let i = 0; i < items.length; i++) {
let item = items[i];
selectAll() {
const state = this.store.getState();
const items = state.items;
items.forEach((item) => {
this.selectItem(item);
};
});
}
deselectAll() {
const state = this.store.getState();
const items = state.items;
items.forEach((item) => {
this.deselectItem(item);
});
}
selectOption(id) {
if(!id) return;
this.store.dispatch(selectOption(id));
}
/**
@ -632,7 +658,7 @@ export class Choices {
// Add each option to dropdown
options.forEach((option) => {
const dropdownItem = strToEl(`<li class="${ this.options.classNames.item } ${ this.options.classNames.itemSelectable }" data-choice-selectable data-choice-value="${ option.value }">${ option.value }</li>`);
const dropdownItem = strToEl(`<li class="${ this.options.classNames.item } ${ this.options.classNames.itemSelectable }" data-choice-selectable data-choice-id="${ option.id }" data-choice-value="${ option.value }">${ option.value }</li>`);
this.dropdown.appendChild(dropdownItem);
});
}

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

@ -28,7 +28,7 @@ const items = (state = [], action) => {
case 'SELECT_ITEM':
return state.map((item) => {
if(item.id === parseInt(action.id)) {
item.selected = action.value;
item.selected = action.selected;
}
return item;

10
assets/scripts/src/reducers/options.js
View file

@ -10,6 +10,16 @@ const options = (state = [], action) => {
}];
return newState;
case 'SELECT_OPTION':
return state.map((option) => {
if(option.id === parseInt(action.id)) {
option.selected = action.value;
}
return option;
});
default:
return state;
}