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

Only remove items by object - focus input if click registered within container

Browse source
This commit is contained in:
Josh Johnson 2016-04-12 19:45:41 +01:00
parent 1f0b0e467f
commit 4947da2b43
2 changed files with 47 additions and 54 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

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

@ -190,19 +190,22 @@ export class Choices {
let handleBackspaceKey = () => { let handleBackspaceKey = () => {
if(this.options.removeItems) { if(this.options.removeItems) {
let currentListItems = this.list.querySelectorAll('[data-choice-item]');
let selectedItems = this.list.querySelectorAll(this.options.classNames.selectedState); let lastItem = items[items.length - 1];
let lastItem = currentListItems[currentListItems.length - 1]; let selectedItems = items.filter((item) => {
return item.selected === true;
});
let inputIsFocussed = this.input === document.activeElement; let inputIsFocussed = this.input === document.activeElement;
if(currentListItems && lastItem && !this.options.editItems && inputIsFocussed && this.options.removeItems) { if(items && lastItem && !this.options.editItems && inputIsFocussed && this.options.removeItems) {
this.selectItem(lastItem); this.selectItem(lastItem);
} }
// If editing the last item is allowed and there is a last item and // If editing the last item is allowed and there is a last item and
// there are not other selected items (minus the last item), we can edit // there are not other selected items (minus the last item), we can edit
// the item value. Otherwise if we can remove items, remove all items // the item value. Otherwise if we can remove items, remove all items
if(currentListItems && this.options.removeItems && this.options.editItems && lastItem && selectedItems.length === 0 && inputIsFocussed) { if(items && this.options.removeItems && this.options.editItems && lastItem && selectedItems.length === 0 && inputIsFocussed) {
this.input.value = lastItem.innerHTML; this.input.value = lastItem.innerHTML;
this.removeItem(lastItem); this.removeItem(lastItem);
} else { } else {
@ -226,6 +229,10 @@ export class Choices {
onClick(e) { onClick(e) {
// If click is affecting a child node of our element // If click is affecting a child node of our element
if(this.containerOuter.contains(e.target)) { if(this.containerOuter.contains(e.target)) {
if(this.input !== document.activeElement) {
this.input.focus();
}
if(e.target.hasAttribute('data-choice-item')) { if(e.target.hasAttribute('data-choice-item')) {
let item = e.target; let item = e.target;
@ -297,15 +304,20 @@ export class Choices {
* @param {String} value Value to search for * @param {String} value Value to search for
* @return {Element} First Element with given value * @return {Element} First Element with given value
*/ */
getItemByValue(value) { getItemById(id) {
if(!id) {
console.error('getItemById: An id must be a number');
return;
}
let state = this.store.getState(); let state = this.store.getState();
let items = state.items; let items = state.items;
let stateObject = items.find((item) => { let itemObject = items.find((item) => {
return item.value === value; return item.id === parseInt(id);
}); });
let item = this.list.querySelector(`[data-choice-id='${stateObject.id}']`) let item = this.list.querySelector(`[data-choice-id='${ itemObject.id }']`);
return item; return item;
} }
@ -385,45 +397,26 @@ export class Choices {
* Remove item from store * Remove item from store
* @param * @param
*/ */
removeItem(itemOrValue, callback = this.options.callbackOnRemoveItem) { removeItem(item, callback = this.options.callbackOnRemoveItem) {
if(!itemOrValue) { if(!item) {
console.error('removeItem: No item or value was passed to be removed'); console.error('removeItem: No item or value was passed to be removed');
return; return;
} }
// We are re-assigning a variable here. Probably shouldn't be doing that... let id = item.id;
let item; let value = item.value;
if(itemOrValue.nodeType) { // Run callback
item = itemOrValue; if(callback){
} else { if(isType('Function', callback)) {
for (var i = this.list.children.length - 1; i >= 0; i--) { callback(value);
let listItem = this.list.children[i]; } else {
if(listItem.innerHTML === itemOrValue.toString()) { console.error('callbackOnRemoveItem: Callback is not a function');
item = listItem;
break;
}
} }
} }
if(item) { this.store.dispatch(removeItem(id));
let id = item.getAttribute('data-choice-id');
let value = item.innerHTML;
// Run callback
if(callback){
if(isType('Function', callback)) {
callback(value);
} else {
console.error('callbackOnRemoveItem: Callback is not a function');
}
}
this.store.dispatch(removeItem(id));
} else {
console.error('Item not found');
}
} }
/** /**
@ -437,12 +430,12 @@ export class Choices {
items.forEach((item) => { items.forEach((item) => {
if(selectedOnly) { if(selectedOnly) {
if(item.selected && item.active && item.value){ if(item.selected && item.active){
this.removeItem(item.value); this.removeItem(item);
} }
} else { } else {
if(item.active && item.value) { if(item.active) {
this.removeItem(item.value); this.removeItem(item);
} }
} }
}); });
@ -736,15 +729,15 @@ document.addEventListener('DOMContentLoaded', () => {
delimiter: ' ', delimiter: ' ',
editItems: true, editItems: true,
maxItems: 5, maxItems: 5,
callbackOnRemoveItem: function(value) { // callbackOnRemoveItem: function(value) {
console.log(value); // console.log(value);
}, // },
callbackOnAddItem: function(item, value) { // callbackOnAddItem: function(item, value) {
console.log(item, value); // console.log(item, value);
}, // },
callbackOnRender: function(items) { // callbackOnRender: function(items) {
console.log(items); // console.log(items);
} // }
}); });
let choices2 = new Choices('#choices-2', { let choices2 = new Choices('#choices-2', {
@ -799,5 +792,5 @@ document.addEventListener('DOMContentLoaded', () => {
choices6.addItem('josh2@joshuajohnson.co.uk', () => { console.log('Custom add item callback')}); choices6.addItem('josh2@joshuajohnson.co.uk', () => { console.log('Custom add item callback')});
choices6.removeItem('josh@joshuajohnson.co.uk'); choices6.removeItem('josh@joshuajohnson.co.uk');
console.log(choices6.getItemByValue('josh2@joshuajohnson.co.uk')); console.log(choices6.getItemById(1));
}); });