deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-04-30 13:02:48 +02:00
Code Issues Projects Releases Wiki Activity

Single select box support

Browse source
This commit is contained in:
Josh Johnson 2016-05-07 12:36:50 +01:00
parent db5d35790c
commit c4ed167a02
10 changed files with 131 additions and 91 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

2
assets/scripts/dist/choices.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

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

@ -3,7 +3,7 @@
import { addItem, removeItem, selectItem, addOption, filterOptions, activateOptions, addGroup } from './actions/index';
import { isScrolledIntoView, getAdjacentEl, findAncestor, wrap, isType, strToEl, extend, getWidthOfInput, debounce } from './lib/utils.js';
import Fuse from 'fuse.js';
import Store from './store.js';
import Store from './store/index.js';
/**
* Choices
@ -16,10 +16,6 @@ import Store from './store.js';
*/
export class Choices {
constructor(element = '[data-choice]', userOptions = {}) {
// Cutting the mustard
const cuttingTheMustard = 'querySelector' in document && 'addEventListener' in document && 'classList' in document.createElement("div");
if (!cuttingTheMustard) console.error('init: Your browser doesn\'t support Choices');
// If there are multiple elements, create a new instance
// for each element besides the first one (as that already has an instance)
@ -49,13 +45,15 @@ export class Choices {
prependValue: false,
appendValue: false,
selectAll: true,
templates: {},
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
input: 'choices__input',
inputCloned: 'choices__input--cloned',
list: 'choices__list',
listItems: 'choices__list--items',
listItems: 'choices__list--multiple',
listSingle: 'choices__list--single',
listDropdown: 'choices__list--dropdown',
item: 'choices__item',
itemSelectable: 'choices__item--selectable',
@ -72,7 +70,6 @@ export class Choices {
flippedState: 'is-flipped',
selectedState: 'is-selected'
},
templates: {},
callbackOnInit: function() {},
callbackOnRender: function() {},
callbackOnRemoveItem: function() {},
@ -116,8 +113,21 @@ export class Choices {
this.onPaste = this.onPaste.bind(this);
this.onMouseOver = this.onMouseOver.bind(this);
// Let's have it large
this.init();
// Cutting the mustard
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
const inputTypes = ['select-one', 'select-multiple', 'text'];
const canInit = this.passedElement && inputTypes.includes(this.passedElement.type);
if(canInit) {
// Let's have it large
this.init();
} else {
console.error('Choices: Incompatible input passed');
}
}
/**
@ -169,7 +179,7 @@ export class Choices {
* @param {Array} Active items
* @return
*/
handleBackspaceKey(activeItems) {
handleBackspace(activeItems) {
if(this.options.removeItems && activeItems) {
const lastItem = activeItems[activeItems.length - 1];
const hasSelectedItems = activeItems.some((item) => {
@ -183,34 +193,11 @@ export class Choices {
this.removeItem(lastItem);
} else {
this.selectItem(lastItem);
this.removeAllSelectedItems();
this.removeSelectedItems();
}
}
};
/**
* Handle what happens on a click event
* @param {Array} activeItems Items that are active
* @param {HTMLElement} target What triggered the click
* @param {Boolean} hasShiftKey Whether shift key is active
* @return
*/
handleClick(activeItems, target, hasShiftKey) {
if(this.options.removeItems && target) {
const passedId = target.getAttribute('data-id');
// We only want to select one item with a click
// so we deselect any items that aren't the target
// unless shift is being pressed
activeItems.forEach((item) => {
if(item.id === parseInt(passedId) && !item.selected) {
this.selectItem(item);
} else if(!hasShiftKey) {
this.deselectItem(item);
}
});
}
}
/**
* Key down event
@ -219,7 +206,7 @@ export class Choices {
*/
onKeyDown(e) {
if(e.target !== this.input) return;
const ctrlDownKey = e.ctrlKey || e.metaKey;
const backKey = 46;
const deleteKey = 8;
@ -259,7 +246,7 @@ export class Choices {
this.handleEnter(activeItems, value);
}
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
if(this.dropdown && hasActiveDropdown) {
const highlighted = this.dropdown.querySelector(`.${this.options.classNames.highlightedState}`);
if(highlighted) {
@ -273,7 +260,7 @@ export class Choices {
break;
case escapeKey:
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
if(this.dropdown && hasActiveDropdown) {
this.toggleDropdown();
}
break;
@ -281,7 +268,7 @@ export class Choices {
case downKey:
case upKey:
// If up or down key is pressed, traverse through options
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
if(this.dropdown && hasActiveDropdown) {
const currentEl = this.dropdown.querySelector(`.${this.options.classNames.highlightedState}`);
const directionInt = e.keyCode === downKey ? 1 : -1;
let nextEl;
@ -308,7 +295,7 @@ export class Choices {
case deleteKey:
// If backspace or delete key is pressed and the input has no value
if(hasFocussedInput && !e.target.value) {
this.handleBackspaceKey(activeItems);
this.handleBackspace(activeItems);
e.preventDefault();
}
break;
@ -325,8 +312,8 @@ export class Choices {
*/
onKeyUp(e) {
if(e.target !== this.input) return;
if(this.passedElement.type === 'select-multiple' && this.options.allowSearch) {
if(this.dropdown && this.options.allowSearch) {
if(this.input === document.activeElement) {
const options = this.store.getOptions();
const hasUnactiveOptions = options.some((option) => {
@ -373,7 +360,7 @@ export class Choices {
const activeItems = this.store.getItemsFilteredByActive();
const hasShiftKey = e.shiftKey ? true : false;
if(this.passedElement.type === 'select-multiple' && !this.dropdown.classList.contains(this.options.classNames.activeState)) {
if(this.dropdown && !this.dropdown.classList.contains(this.options.classNames.activeState)) {
this.toggleDropdown();
}
@ -386,7 +373,20 @@ export class Choices {
if(e.target.hasAttribute('data-item')) {
// If we are clicking on an item
this.handleClick(activeItems, e.target, hasShiftKey);
if(this.options.removeItems) {
const passedId = e.target.getAttribute('data-id');
// We only want to select one item with a click
// so we deselect any items that aren't the target
// unless shift is being pressed
activeItems.forEach((item) => {
if(item.id === parseInt(passedId) && !item.selected) {
this.selectItem(item);
} else if(!hasShiftKey) {
this.deselectItem(item);
}
});
}
} else if(e.target.hasAttribute('data-option')) {
// If we are clicking on an option
const options = this.store.getOptionsFilteredByActive();
@ -396,7 +396,10 @@ export class Choices {
});
if(!option.selected && !option.disabled) {
this.addItem(option.value, option.label, option.id);
this.addItem(option.value, option.label, option.id);
if(this.passedElement.type === 'select-one') {
this.toggleDropdown();
}
}
}
@ -413,7 +416,7 @@ export class Choices {
this.containerOuter.classList.remove(this.options.classNames.focusState);
// Close all other dropodowns
if(this.passedElement.type === 'select-multiple' && this.dropdown.classList.contains(this.options.classNames.activeState)) {
if(this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState)) {
this.toggleDropdown();
}
}
@ -658,6 +661,10 @@ export class Choices {
this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId));
if(this.passedElement.type === 'select-one') {
this.removeActiveItems(id);
}
// Run callback if it is a function
if(callback){
if(isType('Function', callback)) {
@ -714,13 +721,13 @@ export class Choices {
* @param {Boolean} selectedOnly Optionally remove only selected items
* @return
*/
removeAllItems() {
removeActiveItems(excludedId) {
const items = this.store.getItemsFilteredByActive();
items.forEach((item) => {
if(item.active) {
this.removeItem(item);
}
if(item.active && excludedId !== item.id) {
this.removeItem(item);
}
});
}
@ -729,7 +736,7 @@ export class Choices {
* Note: removed items are soft deleted
* @return
*/
removeAllSelectedItems() {
removeSelectedItems() {
const items = this.store.getItemsFilteredByActive();
items.forEach((item) => {
@ -848,13 +855,13 @@ export class Choices {
const classNames = this.options.classNames;
const templates = {
containerOuter: () => {
return strToEl(`<div class="${ classNames.containerOuter }"></div>`);
return strToEl(`<div class="${ classNames.containerOuter }" data-type="${ this.passedElement.type }"></div>`);
},
containerInner: () => {
return strToEl(`<div class="${ classNames.containerInner }"></div>`);
},
list: () => {
return strToEl(`<ul class="${ classNames.list } ${ classNames.listItems }"></ul>`);
return strToEl(`<div class="${ classNames.list } ${ this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems }"></div>`);
},
input: () => {
return strToEl(`<input type="text" class="${ classNames.input } ${ classNames.inputCloned }">`);
@ -881,7 +888,7 @@ export class Choices {
},
item: (data) => {
return strToEl(`
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState : classNames.itemSelectable }" data-item data-id="${ data.id }" data-value="${ data.value }">
<div class="${ classNames.item } ${ data.selected ? classNames.selectedState : classNames.itemSelectable }" data-item data-id="${ data.id }" data-value="${ data.value }">
${ data.label }
</div>
`);
@ -914,7 +921,7 @@ export class Choices {
wrap(containerInner, containerOuter);
// If placeholder has been enabled and we have a value
if (this.options.placeholder && this.options.placeholderValue) {
if (this.options.placeholder && this.options.placeholderValue && this.passedElement.type !== 'select-one') {
input.placeholder = this.options.placeholderValue;
input.style.width = getWidthOfInput(input);
}
@ -928,7 +935,7 @@ export class Choices {
containerInner.appendChild(list);
containerInner.appendChild(input);
if(this.passedElement.type === 'select-multiple') {
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
this.highlightPosition = 0;
const dropdown = this.getTemplate('dropdown');
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
@ -949,6 +956,9 @@ export class Choices {
this.addOption(option);
});
}
} else if(this.passedElement.type === 'select-one') {
console.log('select element');
} else if(this.passedElement.type === 'text') {
// Add any preset values seperated by delimiter
this.presetItems.forEach((value) => {
@ -984,8 +994,12 @@ export class Choices {
renderOptions(options, fragment) {
options.forEach((option, i) => {
const dropdownItem = this.getTemplate('option', option);
fragment.appendChild(dropdownItem);
const dropdownItem = this.getTemplate('option', option);
if(this.passedElement.type === 'select-one') {
fragment.appendChild(dropdownItem);
} else if(!option.selected) {
fragment.appendChild(dropdownItem);
}
});
}
@ -1020,32 +1034,40 @@ export class Choices {
if(this.currentState !== this.prevState) {
// OPTIONS
if((this.currentState.options !== this.prevState.options || this.currentState.groups !== this.prevState.groups) && this.passedElement.type === 'select-multiple') {
// Get active groups/options
const activeGroups = this.store.getGroupsFilteredByActive();
const activeOptions = this.store.getOptionsFilteredByActive();
if((this.currentState.options !== this.prevState.options || this.currentState.groups !== this.prevState.groups)) {
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
// Get active groups/options
const activeGroups = this.store.getGroupsFilteredByActive();
const activeOptions = this.store.getOptionsFilteredByActive();
// Create a fragment to store our list items (so we don't have to update the DOM for each item)
const optionListFragment = document.createDocumentFragment();
// Create a fragment to store our list items (so we don't have to update the DOM for each item)
const optionListFragment = document.createDocumentFragment();
// Clear options
this.dropdown.innerHTML = '';
// Clear options
this.dropdown.innerHTML = '';
// If we have grouped options
if(activeGroups.length >= 1 && this.isSearching !== true) {
this.renderGroups(activeGroups, activeOptions, optionListFragment);
} else if(activeOptions.length >= 1) {
this.renderOptions(activeOptions, optionListFragment);
}
// If we have grouped options
if(activeGroups.length >= 1 && this.isSearching !== true) {
this.renderGroups(activeGroups, activeOptions, optionListFragment);
} else if(activeOptions.length >= 1) {
this.renderOptions(activeOptions, optionListFragment);
}
// If we actually have anything to add to our dropdown
if(optionListFragment.children.length) {
this.dropdown.appendChild(optionListFragment);
this.highlightOption();
} else {
// If dropdown is empty, show a no content notice
const dropdownItem = this.getTemplate('notice', 'No options to select');
this.dropdown.appendChild(dropdownItem);
// If we actually have anything to add to our dropdown
if(optionListFragment.children.length) {
this.dropdown.appendChild(optionListFragment);
this.highlightOption();
} else {
let dropdownItem;
if(this.isSearching) {
// If dropdown is empty, show a no content notice
dropdownItem = this.getTemplate('notice', 'No results found');
} else {
// If dropdown is empty, show a no content notice
dropdownItem = this.getTemplate('notice', 'No options to select');
}
this.dropdown.appendChild(dropdownItem);
}
}
}

4
assets/scripts/src/store.js → assets/scripts/src/store/index.js
View file

@ -1,7 +1,7 @@
'use strict';
import { createStore } from 'redux';
import rootReducer from './reducers/index.js';
import rootReducer from './../reducers/index.js';
export class Store {
@ -92,7 +92,7 @@ export class Store {
getOptionsFilteredByActive() {
const options = this.getOptions();
const values = options.filter((option) => {
return option.active === true && option.selected !== true;
return option.active === true;
},[]);
return values;

10
assets/styles/css/choices.css
View file

@ -59,9 +59,13 @@ h1, h2, h3, h4, h5, h6 {
padding-left: 0;
list-style-type: none; }
.choices__list--items {
.choices__list--single {
display: inline-block;
padding: .4rem; }
.choices__list--multiple {
display: inline; }
.choices__list--items .choices__item {
.choices__list--multiple .choices__item {
display: inline-block;
border-radius: 2rem;
padding: .4rem 1rem;
@ -72,7 +76,7 @@ h1, h2, h3, h4, h5, h6 {
border: 1px solid #00b1c7;
color: #FFFFFF;
word-break: break-all; }
.choices__list--items .choices__item.is-selected {
.choices__list--multiple .choices__item.is-selected {
background-color: #00a5bb; }
.choices__list--dropdown {

2
assets/styles/css/choices.min.css vendored
View file

@ -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;cursor:text}.is-focused .choices__inner{border-color:#b7b7b7}.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;word-break:break-all}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto;will-change:scroll-position}.is-open .choices__list--dropdown{border-color:#b7b7b7}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item--selectable.is-highlighted:after,.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.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}
*,: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;cursor:text}.is-focused .choices__inner{border-color:#b7b7b7}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:.4rem}.choices__list--multiple{display:inline}.choices__list--multiple .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;word-break:break-all}.choices__list--multiple .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto;will-change:scroll-position}.is-open .choices__list--dropdown{border-color:#b7b7b7}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item--selectable.is-highlighted:after,.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.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}

7
assets/styles/scss/choices.scss
View file

@ -74,7 +74,12 @@ h1, h2, h3, h4, h5, h6 {
.choices__list--options {}
.choices__list--items {
.choices__list--single {
display: inline-block;
padding: .4rem;
}
.choices__list--multiple {
display: inline;
.choices__item {
display: inline-block;

11
index.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Choices</title>
<link rel="stylesheet" href="assets/styles/css/choices.css">
<script src="assets/scripts/dist/bundle.js"></script>
<script src="assets/scripts/dist/choices.js"></script>
</head>
<body>
<div class="container">
@ -29,6 +29,13 @@
<label for="choices-6">Text input with preset values passed through options</label>
<input id="choices-6" type="text" placeholder="This is a placeholder">
<label for="choices-11">Single select box</label>
<select id="choices-11" name="choices-11" data-choice placeholder="This is a placeholder">
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
</select>
<label for="choices-7">Select box</label>
<select name="choices-7" id="choices-7" placeholder="This is a placeholder" multiple>
<option value="Dropdown item 1">Dropdown item 1</option>
@ -129,7 +136,7 @@
// },
});
choices5.removeAllItems();
choices5.removeActiveItems();
const choices6 = new Choices('#choices-6', {
items: ['josh@joshuajohnson.co.uk', 'joe@bloggs.co.uk'],

2
webpack.config.dev.js
View file

@ -9,7 +9,7 @@ module.exports = {
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
filename: 'choices.js',
publicPath: '/assets/scripts/dist/'
},
plugins: [

2
webpack.config.prod.js
View file

@ -8,7 +8,7 @@ module.exports = {
],
output: {
path: path.join(__dirname, '/assets/scripts/dist'),
filename: 'bundle.js',
filename: 'choices.min.js',
publicPath: '/assets/scripts/dist/'
},
plugins: [