deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-02 22:03:11 +02:00
Code Issues Projects Releases Wiki Activity

Begun handling select element + disabled state

Browse source
This commit is contained in:
Josh Johnson 2016-03-21 19:27:52 +00:00
parent 3f3580bb13
commit a3bda138a9
6 changed files with 107 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,4 +1,4 @@
# Choices
# Choices (in development)
A vanilla JS customisable select box plugin
## To do

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

@ -5,6 +5,7 @@ import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
/**
TODO:
- Dynamically set input width to contents
- Handle select input
- Handle multiple select input ?
@ -115,7 +116,6 @@ export class Choices {
/* Event handling */
onKeyUp(e) {
// console.log('Keyup');
}
onKeyDown(e) {
@ -153,9 +153,14 @@ export class Choices {
// All is good, update
if (canUpdate) {
this.addItem(value);
this.updateInputValue(value);
this.clearInput(this.element);
if(this.element.type === 'text') {
this.addItem(this.list, value);
this.updateInputValue(value);
this.clearInput(this.element);
} else {
}
}
};
@ -168,9 +173,11 @@ export class Choices {
let currentListItems = this.list.querySelectorAll('.choices__item');
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.removeItem(lastItem);
} else {
@ -257,7 +264,7 @@ export class Choices {
this.element.value = this.valueArray.join(this.options.delimiter);
}
addItem(value) {
addItem(parent, value) {
if (this.options.debug) console.debug('Add item');
// // Create new list element
@ -266,7 +273,7 @@ export class Choices {
item.textContent = value;
// Append it to list
this.list.appendChild(item);
parent.appendChild(item);
}
removeAll(items) {
@ -310,7 +317,7 @@ export class Choices {
wrap(containerInner, containerOuter);
let list = document.createElement('ul');
list.className = 'choices__list';
list.className = 'choices__list choices__list--items';
let input = document.createElement('input');
input.type = 'text';
@ -332,7 +339,7 @@ export class Choices {
if (this.element.value !== '') {
// Add any preset values
this.valueArray.forEach((value) => {
this.addItem(value);
this.addItem(this.list, value);
});
}
@ -341,7 +348,53 @@ export class Choices {
}
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() {

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

@ -37,8 +37,25 @@ label {
.choices__list {
margin: 0;
padding-left: 0;
list-style-type: none;
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: 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 {
font-size: 1.4rem;
@ -51,19 +68,3 @@ label {
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: 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
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:#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}

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

@ -46,7 +46,27 @@ label {
margin: 0;
padding-left: 0;
list-style-type: none;
}
.choices__list--options {}
.choices__list--items {
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 {
@ -59,20 +79,4 @@ label {
border-radius: 0;
max-width: 100%;
&: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%); }
}

4
index.html
View file

@ -16,6 +16,10 @@
<select id="3" name="3" data-choice>
<option value="Value 1">Value 1</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>
<!-- <label for="4">Multiple select input with two options</label>