diff --git a/README.md b/README.md index 3034436..5f06067 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Choices +# Choices (in development) A vanilla JS customisable select box plugin ## To do diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 00aedee..f80889f 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -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() { diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css index b575dba..bcfd43f 100644 --- a/assets/styles/css/choices.css +++ b/assets/styles/css/choices.css @@ -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; } diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css index f475a39..d859dcd 100644 --- a/assets/styles/css/choices.min.css +++ b/assets/styles/css/choices.min.css @@ -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} \ No newline at end of file +*,: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} \ No newline at end of file diff --git a/assets/styles/scss/choices.scss b/assets/styles/scss/choices.scss index 46549a8..e9e108c 100644 --- a/assets/styles/scss/choices.scss +++ b/assets/styles/scss/choices.scss @@ -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%); } } \ No newline at end of file diff --git a/index.html b/index.html index e315947..228b39d 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,10 @@