mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-01 13:32:23 +02:00
Begun handling select element + disabled state
This commit is contained in:
parent
3f3580bb13
commit
a3bda138a9
|
@ -1,4 +1,4 @@
|
||||||
# Choices
|
# Choices (in development)
|
||||||
A vanilla JS customisable select box plugin
|
A vanilla JS customisable select box plugin
|
||||||
|
|
||||||
## To do
|
## To do
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
|
||||||
/**
|
/**
|
||||||
|
|
||||||
TODO:
|
TODO:
|
||||||
|
- Dynamically set input width to contents
|
||||||
- Handle select input
|
- Handle select input
|
||||||
- Handle multiple select input ?
|
- Handle multiple select input ?
|
||||||
|
|
||||||
|
@ -115,7 +116,6 @@ export class Choices {
|
||||||
/* Event handling */
|
/* Event handling */
|
||||||
|
|
||||||
onKeyUp(e) {
|
onKeyUp(e) {
|
||||||
// console.log('Keyup');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onKeyDown(e) {
|
onKeyDown(e) {
|
||||||
|
@ -153,9 +153,14 @@ export class Choices {
|
||||||
|
|
||||||
// All is good, update
|
// All is good, update
|
||||||
if (canUpdate) {
|
if (canUpdate) {
|
||||||
this.addItem(value);
|
if(this.element.type === 'text') {
|
||||||
this.updateInputValue(value);
|
this.addItem(this.list, value);
|
||||||
this.clearInput(this.element);
|
this.updateInputValue(value);
|
||||||
|
this.clearInput(this.element);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -168,9 +173,11 @@ export class Choices {
|
||||||
let currentListItems = this.list.querySelectorAll('.choices__item');
|
let currentListItems = this.list.querySelectorAll('.choices__item');
|
||||||
let lastItem = currentListItems[currentListItems.length - 1];
|
let lastItem = currentListItems[currentListItems.length - 1];
|
||||||
|
|
||||||
lastItem.classList.add('is-selected');
|
if(lastItem) {
|
||||||
|
lastItem.classList.add('is-selected');
|
||||||
|
}
|
||||||
|
|
||||||
if(this.options.editItems) {
|
if(this.options.editItems && lastItem) {
|
||||||
this.input.value = lastItem.innerHTML;
|
this.input.value = lastItem.innerHTML;
|
||||||
this.removeItem(lastItem);
|
this.removeItem(lastItem);
|
||||||
} else {
|
} else {
|
||||||
|
@ -257,7 +264,7 @@ export class Choices {
|
||||||
this.element.value = this.valueArray.join(this.options.delimiter);
|
this.element.value = this.valueArray.join(this.options.delimiter);
|
||||||
}
|
}
|
||||||
|
|
||||||
addItem(value) {
|
addItem(parent, 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
|
||||||
|
@ -266,7 +273,7 @@ export class Choices {
|
||||||
item.textContent = value;
|
item.textContent = value;
|
||||||
|
|
||||||
// Append it to list
|
// Append it to list
|
||||||
this.list.appendChild(item);
|
parent.appendChild(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
removeAll(items) {
|
removeAll(items) {
|
||||||
|
@ -310,7 +317,7 @@ export class Choices {
|
||||||
wrap(containerInner, containerOuter);
|
wrap(containerInner, containerOuter);
|
||||||
|
|
||||||
let list = document.createElement('ul');
|
let list = document.createElement('ul');
|
||||||
list.className = 'choices__list';
|
list.className = 'choices__list choices__list--items';
|
||||||
|
|
||||||
let input = document.createElement('input');
|
let input = document.createElement('input');
|
||||||
input.type = 'text';
|
input.type = 'text';
|
||||||
|
@ -332,7 +339,7 @@ export class Choices {
|
||||||
if (this.element.value !== '') {
|
if (this.element.value !== '') {
|
||||||
// Add any preset values
|
// Add any preset values
|
||||||
this.valueArray.forEach((value) => {
|
this.valueArray.forEach((value) => {
|
||||||
this.addItem(value);
|
this.addItem(this.list, value);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -341,7 +348,53 @@ export class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderSelectInput() {
|
renderSelectInput() {
|
||||||
|
let containerOuter = document.createElement('div');
|
||||||
|
containerOuter.className = 'choices choices--active';
|
||||||
|
|
||||||
|
let containerInner = document.createElement('div');
|
||||||
|
containerInner.className = 'choices__inner';
|
||||||
|
|
||||||
|
// Hide passed input
|
||||||
|
this.element.classList.add('choices__input', 'choices__input--hidden');
|
||||||
|
this.element.tabIndex = '-1';
|
||||||
|
this.element.setAttribute('style', 'display:none;');
|
||||||
|
this.element.setAttribute('aria-hidden', 'true');
|
||||||
|
|
||||||
|
// Wrap input in container preserving DOM ordering
|
||||||
|
wrap(this.element, containerInner);
|
||||||
|
|
||||||
|
// Wrapper inner container with outer container
|
||||||
|
wrap(containerInner, containerOuter);
|
||||||
|
|
||||||
|
let options = document.createElement('ul');
|
||||||
|
options.className = 'choices__list choices__list--options';
|
||||||
|
|
||||||
|
let input = document.createElement('input');
|
||||||
|
input.type = 'text';
|
||||||
|
input.className = 'choices__input choices__input--cloned';
|
||||||
|
|
||||||
|
containerInner.appendChild(input);
|
||||||
|
containerInner.appendChild(options);
|
||||||
|
containerOuter.appendChild(containerInner);
|
||||||
|
|
||||||
|
this.containerOuter = containerOuter;
|
||||||
|
this.containerInner = containerInner;
|
||||||
|
this.input = input;
|
||||||
|
this.list = null;
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
|
let initialOptions = this.element.options;
|
||||||
|
|
||||||
|
if (initialOptions) {
|
||||||
|
// Add any preset values
|
||||||
|
for (let i = 0; i < initialOptions.length; i++) {
|
||||||
|
let option = initialOptions[i];
|
||||||
|
this.addItem(this.options, option.innerHTML);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger event listeners
|
||||||
|
this.addEventListeners(this.input);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -37,8 +37,25 @@ label {
|
||||||
.choices__list {
|
.choices__list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style-type: none;
|
list-style-type: none; }
|
||||||
|
|
||||||
|
.choices__list--items {
|
||||||
display: inline; }
|
display: inline; }
|
||||||
|
.choices__list--items .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: 0px 1px 0px #008fa1;
|
||||||
|
border: 1px solid #00a5bb;
|
||||||
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
color: #FFFFFF;
|
||||||
|
cursor: pointer; }
|
||||||
|
.choices__list--items .choices__item.is-selected {
|
||||||
|
background-color: #00a5bb; }
|
||||||
|
|
||||||
.choices__input {
|
.choices__input {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
|
@ -51,19 +68,3 @@ label {
|
||||||
max-width: 100%; }
|
max-width: 100%; }
|
||||||
.choices__input:focus {
|
.choices__input:focus {
|
||||||
outline: 0; }
|
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: 0px 1px 0px #008fa1;
|
|
||||||
border: 1px solid #00a5bb;
|
|
||||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
color: #FFFFFF;
|
|
||||||
cursor: pointer; }
|
|
||||||
.choices__item.is-selected {
|
|
||||||
background-color: #00a5bb; }
|
|
||||||
|
|
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}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;box-shadow:0 1px 1px rgba(0,0,0,.2);color:#fff;cursor:pointer}.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}.choices__list--items{display:inline}.choices__list--items .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;box-shadow:0 1px 1px rgba(0,0,0,.2);color:#fff;cursor:pointer}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.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}
|
|
@ -46,7 +46,27 @@ label {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--options {}
|
||||||
|
|
||||||
|
.choices__list--items {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
.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: 0px 1px 0px darken(#00BCD4, 10%);
|
||||||
|
border: 1px solid darken(#00BCD4, 5%);
|
||||||
|
box-shadow: 0px 1px 1px rgba(#000000, 0.2);
|
||||||
|
color: #FFFFFF;
|
||||||
|
cursor: pointer;
|
||||||
|
&.is-selected { background-color: darken(#00BCD4, 5%); }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.choices__input {
|
.choices__input {
|
||||||
|
@ -60,19 +80,3 @@ label {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
&:focus { outline: 0; }
|
&: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: 0px 1px 0px darken(#00BCD4, 10%);
|
|
||||||
border: 1px solid darken(#00BCD4, 5%);
|
|
||||||
box-shadow: 0px 1px 1px rgba(#000000, 0.2);
|
|
||||||
color: #FFFFFF;
|
|
||||||
cursor: pointer;
|
|
||||||
&.is-selected { background-color: darken(#00BCD4, 5%); }
|
|
||||||
}
|
|
|
@ -16,6 +16,10 @@
|
||||||
<select id="3" name="3" data-choice>
|
<select id="3" name="3" data-choice>
|
||||||
<option value="Value 1">Value 1</option>
|
<option value="Value 1">Value 1</option>
|
||||||
<option value="Value 2">Value 2</option>
|
<option value="Value 2">Value 2</option>
|
||||||
|
<option value="Value 3">Value 3</option>
|
||||||
|
<option value="Value 4">Value 4</option>
|
||||||
|
<option value="Value 5">Value 5</option>
|
||||||
|
<option value="Value 6">Value 6</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<!-- <label for="4">Multiple select input with two options</label>
|
<!-- <label for="4">Multiple select input with two options</label>
|
||||||
|
|
Loading…
Reference in a new issue