mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 13:06:34 +02:00
Test for removeItems options to enable/disable selecting items
This commit is contained in:
Josh Johnson
parent
4b889f9e4d
commit
210744a301
2
assets/scripts/dist/bundle.js
vendored
2
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
import { createStore } from 'redux';
|
||||
import choices from './reducers/index.js';
|
||||
import items from './reducers/index.js';
|
||||
import { addItemToStore, removeItemFromStore, selectItemFromStore } from './actions/index';
|
||||
import { hasClass, wrap, getSiblings, isType, strToEl, extend } from './lib/utils.js';
|
||||
|
||||
|
|
@ -11,7 +11,6 @@ export class Choices {
|
|||
const userOptions = options || {};
|
||||
const defaultOptions = {
|
||||
element: document.querySelector('[data-choice]'),
|
||||
disabled: false,
|
||||
items: [],
|
||||
addItems: true,
|
||||
removeItems: true,
|
||||
|
|
@ -38,7 +37,7 @@ export class Choices {
|
|||
this.options = extend(defaultOptions, userOptions || {});
|
||||
|
||||
// Create data store
|
||||
this.store = createStore(choices);
|
||||
this.store = createStore(items);
|
||||
|
||||
// Cutting the mustard
|
||||
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
|
||||
|
|
@ -46,7 +45,7 @@ export class Choices {
|
|||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||
this.passedInput = this.options.element;
|
||||
|
||||
// Set preset items
|
||||
// Set preset items - this looks out of place
|
||||
this.presetItems = [];
|
||||
if(this.options.items.length) {
|
||||
this.presetItems = this.options.items;
|
||||
|
|
@ -135,7 +134,7 @@ export class Choices {
|
|||
}
|
||||
|
||||
// All is good, update
|
||||
if (canUpdate) {
|
||||
if (canUpdate && this.options.addItems) {
|
||||
if(this.passedInput.type === 'text') {
|
||||
let canAddItem = true;
|
||||
|
||||
|
|
@ -169,15 +168,14 @@ export class Choices {
|
|||
let lastItem = currentListItems[currentListItems.length - 1];
|
||||
let inputIsFocussed = this.input === document.activeElement;
|
||||
|
||||
if(lastItem && !this.options.editItems && inputIsFocussed) {
|
||||
if(lastItem && !this.options.editItems && inputIsFocussed && this.options.removeItems) {
|
||||
this.selectItem(lastItem);
|
||||
}
|
||||
|
||||
// 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
|
||||
// the item value. Otherwise if we can remove items, remove all items
|
||||
|
||||
if(this.options.editItems && lastItem && selectedItems.length === 0 && inputIsFocussed) {
|
||||
if(this.options.removeItems && this.options.editItems && lastItem && selectedItems.length === 0 && inputIsFocussed) {
|
||||
this.input.value = lastItem.innerHTML;
|
||||
this.removeItem(lastItem);
|
||||
} else {
|
||||
|
|
@ -203,22 +201,24 @@ export class Choices {
|
|||
if(e.target.hasAttribute('data-choice-item')) {
|
||||
let item = e.target;
|
||||
|
||||
let handleClick = (item) => {
|
||||
let passedId = item.getAttribute('data-choice-id');
|
||||
let items = this.list.children;
|
||||
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');;
|
||||
// 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('is-selected')) {
|
||||
this.selectItem(singleItem);
|
||||
} else {
|
||||
this.deselectItem(singleItem);
|
||||
}
|
||||
}
|
||||
if(id === passedId && !singleItem.classList.contains('is-selected')) {
|
||||
this.selectItem(singleItem);
|
||||
} else {
|
||||
this.deselectItem(singleItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleClick(item);
|
||||
|
|
@ -460,6 +460,7 @@ export class Choices {
|
|||
|
||||
if(!this.options.addItems) {
|
||||
input.disabled = true;
|
||||
containerOuter.classList.add('is-disabled');
|
||||
}
|
||||
|
||||
containerOuter.appendChild(containerInner);
|
||||
|
|
@ -599,7 +600,7 @@ export class Choices {
|
|||
state.forEach((item) => {
|
||||
if(item.active) {
|
||||
// Create new list element
|
||||
let listItem = strToEl(`<div class="choices__item ${ item.selected ? 'is-selected' : '' }" data-choice-item data-choice-id="${ item.id }" data-choice-selected="${ item.selected }">${ item.value }</div>`);
|
||||
let listItem = strToEl(`<div class="choices__item ${ this.options.removeItems ? 'choices__item--selectable' : '' } ${ item.selected ? 'is-selected' : '' }" data-choice-item data-choice-id="${ item.id }" data-choice-selected="${ item.selected }">${ item.value }</div>`);
|
||||
|
||||
// Append it to list
|
||||
this.list.appendChild(listItem);
|
||||
|
|
@ -690,7 +691,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
let choices4 = new Choices({
|
||||
element : input4,
|
||||
addItems: false
|
||||
addItems: false,
|
||||
removeItems: false
|
||||
});
|
||||
|
||||
let choices5 = new Choices({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
const initialState = [];
|
||||
|
||||
const choices = (state = initialState, action) => {
|
||||
const items = (state = [], action) => {
|
||||
switch (action.type) {
|
||||
case 'ADD_ITEM':
|
||||
// Add object to items array
|
||||
|
|
@ -16,7 +14,7 @@ const choices = (state = initialState, action) => {
|
|||
item.selected = false;
|
||||
}
|
||||
return item;
|
||||
});;
|
||||
});
|
||||
|
||||
case 'REMOVE_ITEM':
|
||||
// Set item to inactive
|
||||
|
|
@ -41,4 +39,25 @@ const choices = (state = initialState, action) => {
|
|||
}
|
||||
}
|
||||
|
||||
export default choices
|
||||
const initialState = {
|
||||
dropdownItems: [],
|
||||
items: []
|
||||
}
|
||||
|
||||
const choices = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case 'ADD_ITEM':
|
||||
return state;
|
||||
|
||||
case 'REMOVE_ITEM':
|
||||
return state;
|
||||
|
||||
case 'SELECT_ITEM':
|
||||
return state;
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default items;
|
||||
|
|
@ -56,9 +56,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||
padding-left: 0;
|
||||
list-style-type: none; }
|
||||
|
||||
.choices__item--selectable {
|
||||
cursor: pointer; }
|
||||
|
||||
.choices__list--items {
|
||||
display: inline; }
|
||||
.choices__list--items .choices__item {
|
||||
|
|
@ -70,8 +67,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
margin-bottom: .375rem;
|
||||
background-color: #00BCD4;
|
||||
border: 1px solid #00b1c7;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer; }
|
||||
color: #FFFFFF; }
|
||||
.choices__list--items .choices__item.is-selected {
|
||||
background-color: #00a5bb; }
|
||||
|
||||
|
|
@ -92,6 +88,12 @@ h1, h2, h3, h4, h5, h6 {
|
|||
.choices__list--dropdown.is-active {
|
||||
display: block; }
|
||||
|
||||
.choices__item {
|
||||
cursor: default; }
|
||||
|
||||
.choices__item--selectable {
|
||||
cursor: pointer; }
|
||||
|
||||
.choices__input {
|
||||
background-color: #f9f9f9;
|
||||
font-size: 1.4rem;
|
||||
|
|
|
|||
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
|
|
@ -1 +1 @@
|
|||
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__item--selectable{cursor:pointer}.choices__list--items{display:inline}.choices__list--items .choices__item{display:inline-block;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00b1c7;color:#fff;cursor:pointer}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;margin-top:-1px;display:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__input,.choices__list--dropdown .choices__item:hover{background-color:#f9f9f9}.choices__list--dropdown.is-active{display:block}.choices__input{font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0}
|
||||
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--items{display:inline}.choices__list--items .choices__item{display:inline-block;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00b1c7;color:#fff}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;margin-top:-1px;display:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item:hover{background-color:#f9f9f9}.choices__list--dropdown.is-active{display:block}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0}
|
||||
|
|
@ -70,9 +70,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||
list-style-type: none;
|
||||
}
|
||||
|
||||
.choices__item {}
|
||||
.choices__item--selectable { cursor: pointer; }
|
||||
|
||||
.choices__list--options {}
|
||||
|
||||
.choices__list--items {
|
||||
|
|
@ -87,7 +84,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||
background-color: #00BCD4;
|
||||
border: 1px solid darken(#00BCD4, 2.5%);
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
&.is-selected { background-color: darken(#00BCD4, 5%); }
|
||||
}
|
||||
}
|
||||
|
|
@ -111,6 +107,9 @@ h1, h2, h3, h4, h5, h6 {
|
|||
&.is-active { display: block; }
|
||||
}
|
||||
|
||||
.choices__item { cursor: default; }
|
||||
.choices__item--selectable { cursor: pointer; }
|
||||
|
||||
.choices__input {
|
||||
background-color: mix(#000000, #FFFFFF, 2.5%);
|
||||
font-size: 1.4rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue