diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js index 398fb57..205ec52 100644 --- a/assets/scripts/dist/bundle.js +++ b/assets/scripts/dist/bundle.js @@ -1 +1 @@ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/assets/scripts/dist/",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),t.Choices=void 0;var o=function(){function e(e,t){for(var n=0;ni;i++){var o=arguments[i];(0,s.isType)("Object",o)?n(o):console.error("Custom options must be an object")}return e}},{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){return 0===this.valueCount.length}},{key:"clearInput",value:function(){this.input.value&&(this.input.value="")}},{key:"onKeyUp",value:function(e){}},{key:"onKeyDown",value:function(e){var t=this,n=e.ctrlKey||e.metaKey;if(n&&65===e.keyCode)for(var i=0;i-1&&(n=!1),n&&(t.addItem(e),t.updateInputValue(e),t.clearInput(t.element))};n()}(),(8===e.keyCode||46===e.keyCode)&&!e.target.value){var s=function(){var e=t.list.querySelectorAll(".choices__item"),n=e[e.length-1];n.classList.add("is-selected");for(var i=0;i=0?t:0},t.getElementOffset=function(e,t){var n=t;return n>1&&(n=1),n>0&&(n=0),Math.max(e.offsetHeight*n)},t.getScrollPosition=function(e){return"bottom"===e?Math.max((window.scrollY||window.pageYOffset)+(window.innerHeight||document.documentElement.clientHeight)):window.scrollY||window.pageYOffset},t.isInView=function(e,t,n){return this.getScrollPosition(t)>this.getElemDistance(e)+this.getElementOffset(e,n)},t.stripHTML=function(e){var t=document.createElement("DIV");return t.innerHTML=e,t.textContent||t.innerText||""},t.addAnimation=function(e,t){var i=n(),o=function s(){e.classList.remove(t),e.removeEventListener(i,s,!1)};e.classList.add(t),e.addEventListener(i,o,!1)},t.getRandomNumber=function(e,t){return Math.floor(Math.random()*(t-e)+e)}}]); \ No newline at end of file +!function(e){function t(i){if(n[i])return n[i].exports;var s=n[i]={exports:{},id:i,loaded:!1};return e[i].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var n={};return t.m=e,t.c=n,t.p="/assets/scripts/dist/",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),t.Choices=void 0;var s=function(){function e(e,t){for(var n=0;ni;i++){var s=arguments[i];(0,o.isType)("Object",s)?n(s):console.error("Custom options must be an object")}return e}},{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){return 0===this.valueCount.length}},{key:"clearInput",value:function(){this.input.value&&(this.input.value="")}},{key:"onKeyUp",value:function(e){}},{key:"onKeyDown",value:function(e){var t=this,n=e.ctrlKey||e.metaKey;if(n&&65===e.keyCode&&this.list&&this.list.children)for(var i=0;i-1&&(n=!1),n&&"text"===t.element.type&&(t.addItem(t.list,e),t.updateInputValue(e),t.clearInput(t.element))};n()}(),(8===e.keyCode||46===e.keyCode)&&!e.target.value){var o=function(){var e=t.list.querySelectorAll(".choices__item"),n=e[e.length-1];n&&n.classList.add("is-selected"),t.options.editItems&&n?(t.input.value=n.innerHTML,t.removeItem(n)):t.removeAll(e)};o(),e.preventDefault()}}},{key:"onFocus",value:function(e){}},{key:"onClick",value:function(e){}},{key:"onChange",value:function(e){}},{key:"addEventListeners",value:function(e){e.addEventListener("click",this.onClick),e.addEventListener("keyup",this.onKeyUp),e.addEventListener("keydown",this.onKeyDown),e.addEventListener("change",this.onChange),e.addEventListener("focus",this.onFocus),e.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(e){e.removeEventListener("click",this.onClick),e.removeEventListener("keyup",this.onKeyUp),e.removeEventListener("keydown",this.onKeyDown),e.removeEventListener("change",this.onChange),e.removeEventListener("focus",this.onFocus),e.removeEventListener("blur",this.onBlur)}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getValues",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"updateInputValue",value:function(e){this.options.debug&&console.debug("Update input value"),this.valueArray.push(e),this.element.value=this.valueArray.join(this.options.delimiter)}},{key:"removeInputValue",value:function(e){this.options.debug&&console.debug("Remove input value");var t=this.valueArray.indexOf(e);this.valueArray.splice(t,1),this.element.value=this.valueArray.join(this.options.delimiter)}},{key:"addItem",value:function(e,t){this.options.debug&&console.debug("Add item");var n=document.createElement("li");n.classList.add("choices__item"),n.textContent=t,e.appendChild(n)}},{key:"removeAll",value:function(e){for(var t=0;t=0?t:0},t.getElementOffset=function(e,t){var n=t;return n>1&&(n=1),n>0&&(n=0),Math.max(e.offsetHeight*n)},t.getScrollPosition=function(e){return"bottom"===e?Math.max((window.scrollY||window.pageYOffset)+(window.innerHeight||document.documentElement.clientHeight)):window.scrollY||window.pageYOffset},t.isInView=function(e,t,n){return this.getScrollPosition(t)>this.getElemDistance(e)+this.getElementOffset(e,n)},t.stripHTML=function(e){var t=document.createElement("DIV");return t.innerHTML=e,t.textContent||t.innerText||""},t.addAnimation=function(e,t){var i=n(),s=function o(){e.classList.remove(t),e.removeEventListener(i,o,!1)};e.classList.add(t),e.addEventListener(i,s,!1)},t.getRandomNumber=function(e,t){return Math.floor(Math.random()*(t-e)+e)}}]); \ No newline at end of file diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index f80889f..66c2ce9 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -123,10 +123,12 @@ export class Choices { // Handle select all if (ctrlDown && e.keyCode === 65) { - for (let i = 0; i < this.list.children.length; i++) { - let listItem = this.list.children[i]; + if(this.list && this.list.children) { + for (let i = 0; i < this.list.children.length; i++) { + let listItem = this.list.children[i]; - listItem.classList.add('is-selected'); + listItem.classList.add('is-selected'); + } } } @@ -224,26 +226,13 @@ export class Choices { } /* Methods */ + setValue() {} - setPlaceholder() { + getValue() {} - } + getValues() {} - setValue() { - - } - - getValue() { - - } - - getPlaceholder() { - - } - - search() { - - } + getPlaceholder() {} updateInputValue(value) { if (this.options.debug) console.debug('Update input value'); @@ -298,6 +287,16 @@ export class Choices { } renderTextInput() { + // Template: + // + //
+ //
+ // + //
    + // + //
    + //
    + let containerOuter = document.createElement('div'); containerOuter.className = 'choices choices--active'; @@ -383,13 +382,21 @@ export class Choices { this.list = null; this.options = options; - let initialOptions = this.element.options; + let initialOptions = this.element.children; if (initialOptions) { - // Add any preset values for (let i = 0; i < initialOptions.length; i++) { - let option = initialOptions[i]; - this.addItem(this.options, option.innerHTML); + let parentOption = initialOptions[i]; + + if(parentOption.tagName === 'OPTGROUP') { + this.addItem(this.options, parentOption.label); + for (let j = 0; j < parentOption.children.length; j++) { + let childOption = parentOption.children[j]; + this.addItem(this.options, childOption.innerHTML); + } + } else if(parentOption.tagName === 'OPTION') { + this.addItem(this.options, parentOption.innerHTML); + } } } @@ -397,6 +404,10 @@ export class Choices { this.addEventListeners(this.input); } + renderMultipleSelectInput() { + + } + render() { if (this.options.debug) console.debug('Render'); @@ -408,7 +419,7 @@ export class Choices { this.renderSelectInput(); break; case "select-multiple": - console.warn('Choices does not support multiple select boxes'); + this.renderMultipleSelectInput(); break; default: rthis.renderTextInput(); @@ -429,6 +440,7 @@ export class Choices { let input1 = document.getElementById(1); let input2 = document.getElementById(2); let input3 = document.getElementById(3); + let input4 = document.getElementById(4); let choices1 = new Choices({ element : input1, @@ -445,4 +457,9 @@ export class Choices { let choices3 = new Choices({ element : input3 }); + + + let choices4 = new Choices({ + element : input4 + }); })(); \ No newline at end of file diff --git a/index.html b/index.html index 228b39d..41919a7 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,19 @@ + +