mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-02 22:03:11 +02:00
Handle on one element per instance + remove list items on back space
This commit is contained in:
Josh Johnson
parent
8ea38d8d6b
commit
ecee8cff47
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,242 +1,287 @@
|
|||
'use strict';
|
||||
|
||||
import { wrap, getSiblings, isType } from './lib/utils.js';
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function() {
|
||||
return factory(root);
|
||||
});
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory;
|
||||
} else {
|
||||
root.Choices = factory(root);
|
||||
}
|
||||
})(this, function (root) {
|
||||
class Choices {
|
||||
constructor(options) {
|
||||
const fakeEl = document.createElement("fakeelement");
|
||||
const USER_OPTIONS = options || {};
|
||||
const DEFAULT_OPTIONS = {
|
||||
element: document.querySelector('[data-choice]'),
|
||||
disabled: false,
|
||||
maxItems: 5,
|
||||
debug: true,
|
||||
placeholder: false,
|
||||
callbackOnInit: function(){},
|
||||
callbackOnRender: function(){},
|
||||
callbackOnKeyUp: function(){},
|
||||
callbackOnKeyDown: function(){},
|
||||
callbackOnEntry: function(){},
|
||||
callbackOnRemove: function(){}
|
||||
};
|
||||
|
||||
'use strict';
|
||||
|
||||
class Choices {
|
||||
constructor() {
|
||||
const fakeEl = document.createElement("fakeelement");
|
||||
const DEFAULT_OPTIONS = {
|
||||
element: '[data-choice]',
|
||||
disabled: false,
|
||||
maxItems: 5,
|
||||
debug: true,
|
||||
placeholder: false,
|
||||
callbackOnInit: function(){},
|
||||
callbackOnRender: function(){},
|
||||
callbackOnKeyUp: function(){},
|
||||
callbackOnKeyDown: function(){},
|
||||
callbackOnEntry: function(){},
|
||||
callbackOnRemove: function(){}
|
||||
};
|
||||
|
||||
// Merge options with user options
|
||||
this.options = DEFAULT_OPTIONS;
|
||||
this.initialised = false;
|
||||
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
|
||||
|
||||
// Retrieve elements
|
||||
this.elements = document.querySelectorAll(this.options.element);
|
||||
|
||||
// Bind methods
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onChange.bind(this);
|
||||
}
|
||||
|
||||
/* State */
|
||||
|
||||
isOpen() {
|
||||
|
||||
}
|
||||
|
||||
isDisabled() {
|
||||
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
|
||||
}
|
||||
|
||||
clearInput(el) {
|
||||
if(el.value) el.value = '';
|
||||
}
|
||||
|
||||
/* Event handling */
|
||||
|
||||
onKeyDown(e) {
|
||||
// Handle enter key
|
||||
if(e.keyCode === 13 && e.target.value) {
|
||||
let el = e.target;
|
||||
let value = el.value;
|
||||
let list = e.target.parentNode.querySelector('.choice__list');
|
||||
|
||||
let handleEnterKey = () => {
|
||||
this.addItem(el, value, list);
|
||||
this.updateInputValue(el, value);
|
||||
this.clearInput(el);
|
||||
};
|
||||
|
||||
if(this.options.maxItems) {
|
||||
if(this.options.maxItems > list.children.length) {
|
||||
handleEnterKey();
|
||||
}
|
||||
} else {
|
||||
handleEnterKey();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onFocus(e) {
|
||||
|
||||
}
|
||||
|
||||
onClick(e) {
|
||||
|
||||
}
|
||||
|
||||
onChange(e) {
|
||||
|
||||
}
|
||||
|
||||
/* Event listeners */
|
||||
|
||||
addEventListeners(el) {
|
||||
el.addEventListener('click', this.onClick);
|
||||
el.addEventListener('keydown', this.onKeyDown);
|
||||
el.addEventListener('change', this.onChange);
|
||||
el.addEventListener('focus', this.onFocus);
|
||||
el.addEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
removeEventListeners(el) {
|
||||
el.removeEventListener('click', this.onClick);
|
||||
el.removeEventListener('keydown', this.onKeyDown);
|
||||
el.removeEventListener('change', this.onChange);
|
||||
el.removeEventListener('focus', this.onFocus);
|
||||
el.removeEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
/* Methods */
|
||||
|
||||
setPlaceholder() {
|
||||
|
||||
}
|
||||
|
||||
setValue() {
|
||||
|
||||
}
|
||||
|
||||
getValue() {
|
||||
|
||||
}
|
||||
|
||||
getPlaceholder() {
|
||||
|
||||
}
|
||||
|
||||
search() {
|
||||
|
||||
}
|
||||
|
||||
updateInputValue(el, value) {
|
||||
if(this.options.debug) console.debug('Update input value');
|
||||
// Find hidden element
|
||||
let hiddenInput = el.parentNode.querySelector('.choice__input--hidden');
|
||||
// If input already has values, parse the array, otherwise create a blank array
|
||||
let valueArray = hiddenInput.value !== '' && isType('Array', JSON.parse(hiddenInput.value)) ? JSON.parse(hiddenInput.value) : [];
|
||||
// Push new value to array
|
||||
valueArray.push(value);
|
||||
// Caste array to string and set it as the hidden inputs value
|
||||
hiddenInput.value = JSON.stringify(valueArray);
|
||||
}
|
||||
|
||||
addItem(el, value, list) {
|
||||
if(this.options.debug) console.debug('Add item');
|
||||
|
||||
// Create new list element
|
||||
let item = document.createElement('li');
|
||||
item.classList.add('choice__item');
|
||||
item.textContent = value;
|
||||
|
||||
// Append it to list
|
||||
list.appendChild(item);
|
||||
}
|
||||
// Merge options with user options
|
||||
this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
|
||||
this.initialised = false;
|
||||
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
|
||||
|
||||
removeItem() {
|
||||
// Retrieve elements
|
||||
this.element = this.options.element;
|
||||
// If input already has values, parse the array, otherwise create a blank array
|
||||
this.valueArray = this.element.value !== '' && isType('Array', JSON.parse(this.element.value)) ? JSON.parse(this.element.value) : [];
|
||||
|
||||
}
|
||||
// Bind methods
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onChange.bind(this);
|
||||
}
|
||||
|
||||
removeAllItems() {
|
||||
/**
|
||||
* Merges unspecified amount of objects into new object
|
||||
* @private
|
||||
* @return {Object} Merged object of arguments
|
||||
*/
|
||||
extend() {
|
||||
let extended = {};
|
||||
let length = arguments.length;
|
||||
|
||||
}
|
||||
/**
|
||||
* Merge one object into another
|
||||
* @param {Object} obj Object to merge into extended object
|
||||
*/
|
||||
let merge = function(obj) {
|
||||
for(let prop in obj) {
|
||||
extended[prop] = obj[prop];
|
||||
}
|
||||
};
|
||||
|
||||
createItemList() {
|
||||
// Loop through each passed argument
|
||||
for(let i = 0; i < length; i++) {
|
||||
// Store argument at position i
|
||||
let obj = arguments[i];
|
||||
|
||||
}
|
||||
|
||||
init() {
|
||||
if(!this.supports) console.error('Your browser doesn\'nt support shit');
|
||||
this.initialised = true;
|
||||
|
||||
let els = this.elements;
|
||||
for (let i = els.length - 1; i >= 0; i--) {
|
||||
let el = els[i];
|
||||
this.render(el);
|
||||
// If we are in fact dealing with an object, merge it. Otherwise throw error
|
||||
if(isType('Object', obj)) {
|
||||
merge(obj);
|
||||
} else {
|
||||
console.error('Custom options must be an object');
|
||||
}
|
||||
}
|
||||
|
||||
render(el) {
|
||||
if(this.options.debug) console.debug('Render');
|
||||
|
||||
let wrapper = document.createElement('div');
|
||||
let input = document.createElement('input');
|
||||
let list = document.createElement('ul');
|
||||
|
||||
wrapper.classList.add('choice', 'choice--active');
|
||||
|
||||
el.classList.add('choice__input', 'choice__input--hidden');
|
||||
el.tabIndex = '-1';
|
||||
el.setAttribute('style', 'display:none;');
|
||||
el.setAttribute('aria-hidden', 'true');
|
||||
|
||||
wrap(el, wrapper);
|
||||
|
||||
list.classList.add('choice__list');
|
||||
|
||||
if(el.value !== '') {
|
||||
let valueArray = JSON.parse(el.value);
|
||||
valueArray.map((v) => {
|
||||
this.addItem(el, v, list);
|
||||
});
|
||||
}
|
||||
|
||||
input.type = 'text';
|
||||
input.classList.add('choice__input', 'choice__input--cloned');
|
||||
|
||||
wrapper.appendChild(list);
|
||||
wrapper.appendChild(input);
|
||||
|
||||
this.addEventListeners(input);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.options = null;
|
||||
this.elements = null;
|
||||
|
||||
let els = this.elements;
|
||||
|
||||
for (let i = els.length - 1; i >= 0; i--) {
|
||||
let el = els[i];
|
||||
|
||||
this.removeEventListeners(el);
|
||||
}
|
||||
}
|
||||
return extended;
|
||||
};
|
||||
|
||||
var choices = new Choices();
|
||||
choices.init();
|
||||
/* State */
|
||||
|
||||
isOpen() {
|
||||
|
||||
}
|
||||
|
||||
isDisabled() {
|
||||
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
|
||||
}
|
||||
|
||||
clearInput() {
|
||||
if(this.input.value) this.input.value = '';
|
||||
}
|
||||
|
||||
/* Event handling */
|
||||
|
||||
onKeyDown(e) {
|
||||
// Handle enter key
|
||||
if(e.keyCode === 13 && e.target.value) {
|
||||
let value = this.input.value;
|
||||
|
||||
let handleEnterKey = () => {
|
||||
this.addItem(value);
|
||||
this.updateInputValue(value);
|
||||
this.clearInput(this.element);
|
||||
};
|
||||
|
||||
if(this.options.maxItems) {
|
||||
if(this.options.maxItems > this.list.children.length) {
|
||||
handleEnterKey();
|
||||
}
|
||||
} else {
|
||||
handleEnterKey();
|
||||
}
|
||||
}
|
||||
|
||||
if(e.keyCode === 8 && !e.target.value) {
|
||||
|
||||
let handleBackspaceKey = () => {
|
||||
let lastItem = this.list.children[this.list.children.length - 1];
|
||||
lastItem.parentNode.removeChild(lastItem);
|
||||
};
|
||||
|
||||
handleBackspaceKey();
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
onFocus(e) {
|
||||
|
||||
}
|
||||
|
||||
onClick(e) {
|
||||
|
||||
}
|
||||
|
||||
onChange(e) {
|
||||
|
||||
}
|
||||
|
||||
/* Event listeners */
|
||||
|
||||
addEventListeners(el) {
|
||||
el.addEventListener('click', this.onClick);
|
||||
el.addEventListener('keydown', this.onKeyDown);
|
||||
el.addEventListener('change', this.onChange);
|
||||
el.addEventListener('focus', this.onFocus);
|
||||
el.addEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
removeEventListeners(el) {
|
||||
el.removeEventListener('click', this.onClick);
|
||||
el.removeEventListener('keydown', this.onKeyDown);
|
||||
el.removeEventListener('change', this.onChange);
|
||||
el.removeEventListener('focus', this.onFocus);
|
||||
el.removeEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
/* Methods */
|
||||
|
||||
setPlaceholder() {
|
||||
|
||||
}
|
||||
|
||||
setValue() {
|
||||
|
||||
}
|
||||
|
||||
getValue() {
|
||||
|
||||
}
|
||||
|
||||
getPlaceholder() {
|
||||
|
||||
}
|
||||
|
||||
search() {
|
||||
|
||||
}
|
||||
|
||||
updateInputValue(value) {
|
||||
if(this.options.debug) console.debug('Update input value');
|
||||
|
||||
// Push new value to array
|
||||
this.valueArray.push(value);
|
||||
// Caste array to string and set it as the hidden inputs value
|
||||
this.element.value = JSON.stringify(this.valueArray);
|
||||
}
|
||||
|
||||
addItem(value) {
|
||||
if(this.options.debug) console.debug('Add item');
|
||||
|
||||
// Create new list element
|
||||
let item = document.createElement('li');
|
||||
item.classList.add('choice__item');
|
||||
item.textContent = value;
|
||||
|
||||
// Append it to list
|
||||
this.list.appendChild(item);
|
||||
}
|
||||
|
||||
removeItem() {
|
||||
|
||||
}
|
||||
|
||||
removeAllItems() {
|
||||
|
||||
}
|
||||
|
||||
createItemList() {
|
||||
|
||||
}
|
||||
|
||||
init() {
|
||||
if(!this.supports) console.error('Your browser doesn\'nt support shit');
|
||||
this.initialised = true;
|
||||
|
||||
this.render(this.element);
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.options.debug) console.debug('Render');
|
||||
|
||||
// Create DOM elements
|
||||
let container = document.createElement('div');
|
||||
let input = document.createElement('input');
|
||||
let list = document.createElement('ul');
|
||||
|
||||
container.className = 'choice choice--active';
|
||||
|
||||
// Hide passed input
|
||||
this.element.classList.add('choice__input', 'choice__input--hidden');
|
||||
this.element.tabIndex = '-1';
|
||||
this.element.setAttribute('style', 'display:none;');
|
||||
this.element.setAttribute('aria-hidden', 'true');
|
||||
|
||||
// Wrap input in container
|
||||
wrap(this.element, container);
|
||||
|
||||
list.className = 'choice__list';
|
||||
|
||||
input.type = 'text';
|
||||
input.placeholder = this.element.placeholder;
|
||||
input.className = 'choice__input choice__input--cloned';
|
||||
|
||||
container.appendChild(list);
|
||||
container.appendChild(input);
|
||||
|
||||
this.container = container;
|
||||
this.input = input;
|
||||
this.list = list;
|
||||
|
||||
if(this.element.value !== '') {
|
||||
let initialValues = JSON.parse(this.element.value);
|
||||
initialValues.forEach((value) => {
|
||||
this.addItem(value);
|
||||
});
|
||||
}
|
||||
|
||||
this.addEventListeners(this.input);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.options = null;
|
||||
this.element = null;
|
||||
|
||||
this.removeEventListeners(this.input);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
|
||||
let choiceInputs = document.querySelectorAll('[data-choice]');
|
||||
|
||||
for (let i = choiceInputs.length - 1; i >= 0; i--) {
|
||||
|
||||
let input = choiceInputs[i];
|
||||
|
||||
var choices = new Choices({
|
||||
element : input
|
||||
});
|
||||
|
||||
choices.init();
|
||||
};
|
||||
});
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
<title>Choices</title>
|
||||
</head>
|
||||
<body>
|
||||
<input id="1" type="text" data-choice value='["preset-1", "preset-2"]'>
|
||||
<input id="2" type="text" data-choice>
|
||||
<input id="1" type="text" data-choice value='["preset-1", "preset-2"]' placeholder="This is a placeholder" class="custom class">
|
||||
<input id="2" type="text" data-choice >
|
||||
<script src="assets/scripts/dist/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue