mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-07 16:32:32 +02:00
Don't store input values as array for text inputs + handle different input types
This commit is contained in:
parent
449b735461
commit
152b4283dc
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
|
@ -2,6 +2,14 @@
|
||||||
|
|
||||||
import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
|
import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
|
||||||
|
TODO:
|
||||||
|
- Handle select input
|
||||||
|
- Handle multiple select input ?
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
class Choices {
|
class Choices {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
const fakeEl = document.createElement("fakeelement");
|
const fakeEl = document.createElement("fakeelement");
|
||||||
|
@ -10,8 +18,9 @@ class Choices {
|
||||||
element: document.querySelector('[data-choice]'),
|
element: document.querySelector('[data-choice]'),
|
||||||
disabled: false,
|
disabled: false,
|
||||||
create: true,
|
create: true,
|
||||||
maxItems: 10,
|
maxItems: false,
|
||||||
allowDuplicates: false,
|
delimiter: ',',
|
||||||
|
allowDuplicates: true,
|
||||||
debug: false,
|
debug: false,
|
||||||
placeholder: false,
|
placeholder: false,
|
||||||
callbackOnInit: function(){},
|
callbackOnInit: function(){},
|
||||||
|
@ -30,7 +39,9 @@ class Choices {
|
||||||
// Retrieve elements
|
// Retrieve elements
|
||||||
this.element = this.options.element;
|
this.element = this.options.element;
|
||||||
// If input already has values, parse the array, otherwise create a blank array
|
// 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) : [];
|
this.valueArray = this.element.value !== '' ? this.element.value.replace(/\s/g, '').split(',') : [];
|
||||||
|
|
||||||
|
console.log(this.valueArray);
|
||||||
|
|
||||||
// Bind methods
|
// Bind methods
|
||||||
this.onClick = this.onClick.bind(this);
|
this.onClick = this.onClick.bind(this);
|
||||||
|
@ -127,9 +138,7 @@ class Choices {
|
||||||
// If no duplicates are allowed, and the value already exists
|
// If no duplicates are allowed, and the value already exists
|
||||||
// in the array, don't update
|
// in the array, don't update
|
||||||
if(this.options.allowDuplicates === false && this.element.value) {
|
if(this.options.allowDuplicates === false && this.element.value) {
|
||||||
let currentValues = JSON.parse(this.element.value);
|
if(this.valueArray.indexOf(value) > -1) {
|
||||||
|
|
||||||
if(currentValues.indexOf(value) > -1) {
|
|
||||||
canUpdate = false;
|
canUpdate = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -228,8 +237,9 @@ class Choices {
|
||||||
|
|
||||||
// Push new value to array
|
// Push new value to array
|
||||||
this.valueArray.push(value);
|
this.valueArray.push(value);
|
||||||
|
|
||||||
// Caste array to string and set it as the hidden inputs value
|
// Caste array to string and set it as the hidden inputs value
|
||||||
this.element.value = JSON.stringify(this.valueArray);
|
this.element.value = this.valueArray.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
removeInputValue(value) {
|
removeInputValue(value) {
|
||||||
|
@ -238,13 +248,13 @@ class Choices {
|
||||||
let index = this.valueArray.indexOf(value);
|
let index = this.valueArray.indexOf(value);
|
||||||
this.valueArray.splice(index, 1);
|
this.valueArray.splice(index, 1);
|
||||||
|
|
||||||
this.element.value = JSON.stringify(this.valueArray);
|
this.element.value = this.valueArray.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
addItem(value) {
|
addItem(value) {
|
||||||
if(this.options.debug) console.debug('Add item');
|
if(this.options.debug) console.debug('Add item');
|
||||||
|
|
||||||
// Create new list element
|
// // Create new list element
|
||||||
let item = document.createElement('li');
|
let item = document.createElement('li');
|
||||||
item.classList.add('choices__item');
|
item.classList.add('choices__item');
|
||||||
item.textContent = value;
|
item.textContent = value;
|
||||||
|
@ -263,16 +273,11 @@ class Choices {
|
||||||
this.render(this.element);
|
this.render(this.element);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderTextInput() {
|
||||||
if(this.options.debug) console.debug('Render');
|
|
||||||
|
|
||||||
// Create DOM elements
|
|
||||||
let containerOuter = document.createElement('div');
|
let containerOuter = document.createElement('div');
|
||||||
let containerInner = document.createElement('div');
|
|
||||||
let input = document.createElement('input');
|
|
||||||
let list = document.createElement('ul');
|
|
||||||
|
|
||||||
containerOuter.className = 'choices choices--active';
|
containerOuter.className = 'choices choices--active';
|
||||||
|
|
||||||
|
let containerInner = document.createElement('div');
|
||||||
containerInner.className = 'choices__inner';
|
containerInner.className = 'choices__inner';
|
||||||
|
|
||||||
// Hide passed input
|
// Hide passed input
|
||||||
|
@ -284,14 +289,20 @@ class Choices {
|
||||||
// Wrap input in container preserving DOM ordering
|
// Wrap input in container preserving DOM ordering
|
||||||
wrap(this.element, containerInner);
|
wrap(this.element, containerInner);
|
||||||
|
|
||||||
|
// Wrapper inner container with outer container
|
||||||
wrap(containerInner, containerOuter);
|
wrap(containerInner, containerOuter);
|
||||||
|
|
||||||
|
let list = document.createElement('ul');
|
||||||
list.className = 'choices__list';
|
list.className = 'choices__list';
|
||||||
|
|
||||||
|
let input = document.createElement('input');
|
||||||
input.type = 'text';
|
input.type = 'text';
|
||||||
input.placeholder = this.element.placeholder;
|
|
||||||
input.className = 'choices__input choices__input--cloned';
|
input.className = 'choices__input choices__input--cloned';
|
||||||
|
|
||||||
|
if(input.placeholder) {
|
||||||
|
input.placeholder = this.element.placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
containerInner.appendChild(list);
|
containerInner.appendChild(list);
|
||||||
containerInner.appendChild(input);
|
containerInner.appendChild(input);
|
||||||
containerOuter.appendChild(containerInner);
|
containerOuter.appendChild(containerInner);
|
||||||
|
@ -302,15 +313,40 @@ class Choices {
|
||||||
this.list = list;
|
this.list = list;
|
||||||
|
|
||||||
if(this.element.value !== '') {
|
if(this.element.value !== '') {
|
||||||
let initialValues = JSON.parse(this.element.value);
|
// Add any preset values
|
||||||
initialValues.forEach((value) => {
|
this.valueArray.forEach((value) => {
|
||||||
this.addItem(value);
|
this.addItem(value);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Trigger event listeners
|
||||||
this.addEventListeners(this.input);
|
this.addEventListeners(this.input);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderSelectInput() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if(this.options.debug) console.debug('Render');
|
||||||
|
|
||||||
|
switch(this.element.type) {
|
||||||
|
case "text":
|
||||||
|
this.renderTextInput();
|
||||||
|
break;
|
||||||
|
case "select-one":
|
||||||
|
this.renderSelectInput();
|
||||||
|
break;
|
||||||
|
case "select-multiple":
|
||||||
|
console.warn('Choices does not support multiple select boxes');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
rthis.renderTextInput();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
this.options = null;
|
this.options = null;
|
||||||
this.element = null;
|
this.element = null;
|
||||||
|
@ -321,16 +357,27 @@ class Choices {
|
||||||
|
|
||||||
window.addEventListener('load', function() {
|
window.addEventListener('load', function() {
|
||||||
|
|
||||||
let choiceInputs = document.querySelectorAll('[data-choice]');
|
let input1 = document.getElementById(1);
|
||||||
|
let input2 = document.getElementById(2);
|
||||||
|
let input3 = document.getElementById(3);
|
||||||
|
|
||||||
for (let i = choiceInputs.length - 1; i >= 0; i--) {
|
let choices1 = new Choices({
|
||||||
|
element : input1,
|
||||||
let input = choiceInputs[i];
|
delimiter: ' ',
|
||||||
|
maxItems: 5,
|
||||||
var choices = new Choices({
|
|
||||||
element : input
|
|
||||||
});
|
});
|
||||||
|
|
||||||
choices.init();
|
let choices2 = new Choices({
|
||||||
};
|
element : input2,
|
||||||
|
allowDuplicates: false
|
||||||
|
});
|
||||||
|
|
||||||
|
let choices3 = new Choices({
|
||||||
|
element : input3
|
||||||
|
});
|
||||||
|
|
||||||
|
choices1.init();
|
||||||
|
choices2.init();
|
||||||
|
choices3.init();
|
||||||
|
|
||||||
});
|
});
|
|
@ -16,6 +16,10 @@ body {
|
||||||
color: #222222;
|
color: #222222;
|
||||||
padding: 2.4rem; }
|
padding: 2.4rem; }
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .8rem; }
|
||||||
|
|
||||||
.choices {
|
.choices {
|
||||||
margin-bottom: 2.4rem;
|
margin-bottom: 2.4rem;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
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:#fafafa;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6rem;color:#222;padding:2.4rem}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#fff;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;display:inline}.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%}.choices__input:focus{outline:0}.choices__item{display:inline-block;border-radius:.4rem;padding:.4rem .8rem;font-size:1.4rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;text-shadow:0 1px 0 #008fa1;border:1px solid #00a5bb;color:#fff}.choices__item.is-selected{background-color:#00a5bb}
|
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#fafafa;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6rem;color:#222;padding:2.4rem}label{display:block;margin-bottom:.8rem}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#fff;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;display:inline}.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%}.choices__input:focus{outline:0}.choices__item{display:inline-block;border-radius:.4rem;padding:.4rem .8rem;font-size:1.4rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;text-shadow:0 1px 0 #008fa1;border:1px solid #00a5bb;color:#fff}.choices__item.is-selected{background-color:#00a5bb}
|
|
@ -20,6 +20,10 @@ body {
|
||||||
padding: 2.4rem;
|
padding: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.choices {
|
.choices {
|
||||||
margin-bottom: 2.4rem;
|
margin-bottom: 2.4rem;
|
||||||
|
|
20
index.html
20
index.html
|
@ -6,8 +6,24 @@
|
||||||
<link rel="stylesheet" href="assets/styles/css/choices.css">
|
<link rel="stylesheet" href="assets/styles/css/choices.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input id="1" type="text" data-choice value='["preset-1", "preset-2"]' placeholder="This is a placeholder" class="custom class">
|
<label for="1">Text input with no values and a limit of 5 items</label>
|
||||||
<input id="2" type="text" data-choice >
|
<input id="1" type="text" data-choice>
|
||||||
|
|
||||||
|
<label for="2">Text input with preset values, custom classes and a placeholder. No duplicate values allowed</label>
|
||||||
|
<input id="2" type="text" data-choice value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class">
|
||||||
|
|
||||||
|
<label for="3">Select input with two options</label>
|
||||||
|
<select id="3" name="3" data-choice>
|
||||||
|
<option value="Value 1">Value 1</option>
|
||||||
|
<option value="Value 2">Value 2</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- <label for="4">Multiple select input with two options</label>
|
||||||
|
<select id="4" name="4" data-choice multiple>
|
||||||
|
<option value="Value 1">Value 1</option>
|
||||||
|
<option value="Value 2">Value 2</option>
|
||||||
|
</select>
|
||||||
|
-->
|
||||||
<script src="assets/scripts/dist/bundle.js"></script>
|
<script src="assets/scripts/dist/bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in a new issue