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

Associate options and items

Browse source
This commit is contained in:
Josh Johnson 2016-04-14 14:43:36 +01:00
parent c7ff02146a
commit 9679a42966
5 changed files with 69 additions and 46 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

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

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

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

@ -278,7 +278,7 @@ export class Choices {
if(!option.selected) {
this.selectOption(id, true);
this.addItem(option.value);
this.addItem(option.value, option.id);
}
}
@ -376,7 +376,7 @@ export class Choices {
});
}
selectOption(id, value) {
selectOption(id, value = true) {
if(!id) return;
this.store.dispatch(selectOption(id, value));
}
@ -385,7 +385,7 @@ export class Choices {
* Add item to store with correct value
* @param {String} value Value to add to store
*/
addItem(value, callback = this.options.callbackOnAddItem) {
addItem(value, optionId = -1, callback = this.options.callbackOnAddItem) {
if (this.options.debug) console.debug('Add item');
let passedValue = value;
@ -417,7 +417,7 @@ export class Choices {
}
}
this.store.dispatch(addItem(passedValue, id));
this.store.dispatch(addItem(passedValue, id, optionId));
}
/**
@ -432,6 +432,7 @@ export class Choices {
let id = item.id;
let value = item.value;
let optionId = item.optionId;
// Run callback
if(callback){
@ -442,7 +443,7 @@ export class Choices {
}
}
this.store.dispatch(removeItem(id));
this.store.dispatch(removeItem(id, optionId));
}
/**
@ -477,11 +478,19 @@ export class Choices {
this.dropdown.classList[isActive ? 'remove' : 'add']('is-active');
}
addOptionToDropdown(value) {
addOptionToDropdown(option) {
// Generate unique id
let state = this.store.getState();
let id = state.options.length + 1;
const state = this.store.getState();
const id = state.options.length + 1;
const value = option.value;
const isSelected = option.selected;
this.store.dispatch(addOption(value, id));
if(isSelected) {
this.selectOption(id);
this.addItem(option.value, id);
}
}
/* Getters */
@ -645,15 +654,10 @@ export class Choices {
this.input = input;
this.list = list;
this.dropdown = dropdown;
// Add any preset values seperated by delimiter
this.presetItems.forEach((value) => {
this.addItem(value);
});
const passedOptions = Array.prototype.slice.call(this.passedElement.options);
passedOptions.forEach((option) => {
this.addOptionToDropdown(option.value);
this.addOptionToDropdown(option);
});
// Subscribe to store
@ -807,15 +811,15 @@ document.addEventListener('DOMContentLoaded', () => {
delimiter: ' ',
editItems: true,
maxItems: 5,
callbackOnRemoveItem: function(value) {
console.log(value);
},
callbackOnAddItem: function(id, value) {
console.log(id, value);
},
callbackOnRender: function(items) {
console.log(items);
}
// callbackOnRemoveItem: function(value) {
// console.log(value);
// },
// callbackOnAddItem: function(id, value) {
// console.log(id, value);
// },
// callbackOnRender: function(items) {
// console.log(items);
// }
});
const choices2 = new Choices('#choices-2', {
@ -846,14 +850,18 @@ document.addEventListener('DOMContentLoaded', () => {
});
const choices7 = new Choices('#choices-7', {
callbackOnRender: function(items, options) {
console.log(items);
}
// callbackOnRender: function(items, options) {
// console.log(items);
// },
});
const choicesMultiple = new Choices();
const choicesMultiple = new Choices('[data-choice]', {
callbackOnRender: function(items, options) {
console.log(items);
},
});
choices6.addItem('josh2@joshuajohnson.co.uk', () => { console.log('Custom add item callback')});
choices6.removeItem('josh@joshuajohnson.co.uk');
console.log(choices6.getItemById(1));
// choices6.addItem('josh2@joshuajohnson.co.uk', () => { console.log('Custom add item callback')});
// choices6.removeItem('josh@joshuajohnson.co.uk');
// console.log(choices6.getItemById(1));
});

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

@ -3,7 +3,8 @@ const items = (state = [], action) => {
case 'ADD_ITEM':
// Add object to items array
let newState = [...state, {
id: parseInt(action.id),
id: action.id,
optionId: action.optionId,
value: action.value,
active: true,
selected: false
@ -19,7 +20,7 @@ const items = (state = [], action) => {
case 'REMOVE_ITEM':
// Set item to inactive
return state.map((item) => {
if(item.id === parseInt(action.id)) {
if(item.id === action.id) {
item.active = false;
}
return item;
@ -27,7 +28,7 @@ const items = (state = [], action) => {
case 'SELECT_ITEM':
return state.map((item) => {
if(item.id === parseInt(action.id)) {
if(item.id === action.id) {
item.selected = action.selected;
}

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

@ -1,15 +1,12 @@
const options = (state = [], action) => {
switch (action.type) {
case 'ADD_OPTION':
// Add object to items array
let newState = [...state, {
return [...state, {
id: parseInt(action.id),
value: action.value,
disabled: false,
selected: false
}];
return newState;
}];;
case 'SELECT_OPTION':
return state.map((option) => {
@ -20,6 +17,21 @@ const options = (state = [], action) => {
return option;
});
case 'REMOVE_ITEM':
// When an item is removed and it has an associated option,
// we want to re-enable it so it can be chosen again
if(action.optionId > -1) {
return state.map((option) => {
if(option.id === parseInt(action.optionId)) {
option.selected = action.selected;
}
return option;
});
} else {
return state;
}
default:
return state;
}