diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js index 205ec52..3c8b3a3 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 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 +!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),t.unselectAll(t.list.children))};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:"unselectAll",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 66c2ce9..144595f 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -127,7 +127,12 @@ export class Choices { for (let i = 0; i < this.list.children.length; i++) { let listItem = this.list.children[i]; - listItem.classList.add('is-selected'); + if(listItem.classList.contains('is-selected')) { + listItem.classList.remove('is-selected'); + } else { + listItem.classList.add('is-selected'); + } + } } } @@ -159,6 +164,7 @@ export class Choices { this.addItem(this.list, value); this.updateInputValue(value); this.clearInput(this.element); + this.unselectAll(this.list.children); } else { } @@ -265,6 +271,16 @@ export class Choices { parent.appendChild(item); } + unselectAll(items) { + for (let i = 0; i < items.length; i++) { + let item = items[i]; + + if (item.classList.contains('is-selected')) { + item.classList.remove('is-selected'); + } + }; + } + removeAll(items) { for (let i = 0; i < items.length; i++) { let item = items[i]; diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css index bcfd43f..b05f1b6 100644 --- a/assets/styles/css/choices.css +++ b/assets/styles/css/choices.css @@ -45,7 +45,7 @@ label { display: inline-block; border-radius: .4rem; padding: .4rem .8rem; - font-size: 1.4rem; + font-size: 1.2rem; margin-right: .375rem; margin-bottom: .375rem; background-color: #00BCD4; @@ -65,6 +65,7 @@ label { vertical-align: baseline; border: 0; border-radius: 0; - max-width: 100%; } + max-width: 100%; + padding: .4rem 0 .4rem .2rem; } .choices__input:focus { outline: 0; } diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css index d859dcd..379aae7 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}.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 +*,: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.2rem;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%;padding:.4rem 0 .4rem .2rem}.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 e9e108c..c589ff8 100644 --- a/assets/styles/scss/choices.scss +++ b/assets/styles/scss/choices.scss @@ -56,7 +56,7 @@ label { display: inline-block; border-radius: .4rem; padding: .4rem .8rem; - font-size: 1.4rem; + font-size: 1.2rem; margin-right: .375rem; margin-bottom: .375rem; background-color: #00BCD4; @@ -78,5 +78,6 @@ label { border: 0; border-radius: 0; max-width: 100%; + padding: .4rem 0 .4rem .2rem; &:focus { outline: 0; } } \ No newline at end of file