From 6228463c71f3329b1f2c59e07fe10927be107633 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@jshjohnson.com>
Date: Fri, 18 Mar 2016 12:26:38 +0000
Subject: [PATCH] Build

---
 assets/scripts/dist/bundle.js     |   2 +-
 assets/scripts/src/choices.js     | 111 +++++++++++++++---------------
 assets/styles/css/choices.css     |   4 +-
 assets/styles/css/choices.min.css |   2 +-
 assets/styles/scss/choices.scss   |   2 +
 5 files changed, 62 insertions(+), 59 deletions(-)

diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js
index d0c3f82..398fb57 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")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=n(2),a=function(){function e(t){i(this,e);var n=document.createElement("fakeelement"),o=t||{},s={element:document.querySelector("[data-choice]"),disabled:!1,create:!0,maxItems:!1,delimiter:",",allowDuplicates:!0,debug:!1,placeholder:!1,callbackOnInit:function(){},callbackOnRender:function(){},callbackOnKeyUp:function(){},callbackOnKeyDown:function(){},callbackOnEntry:function(){},callbackOnRemove:function(){}};this.options=this.extend(s,o||{}),this.initialised=!1,this.supports="querySelector"in document&&"addEventListener"in document&&"classList"in n,this.element=this.options.element,this.valueArray=""!==this.element.value?this.element.value.replace(/\s/g,"").split(","):[],console.log(this.valueArray),this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onChange=this.onChange.bind(this),this.onFocus=this.onFocus.bind(this),this.onBlur=this.onChange.bind(this)}return o(e,[{key:"extend",value:function(){for(var e={},t=arguments.length,n=function(t){for(var n in t)e[n]=t[n]},i=0;t>i;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(){}},{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<this.list.children.length;i++){var o=this.list.children[i];o.classList.add("is-selected")}if(13===e.keyCode&&e.target.value&&!function(){var e=t.input.value,n=function(){var n=!0;t.options.maxItems&&t.options.maxItems<=t.list.children.length&&(n=!1),t.options.allowDuplicates===!1&&t.element.value&&t.valueArray.indexOf(e)>-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<e.length;i++){var o=e[i];o.classList.contains("is-selected")&&(t.removeItem(o),t.removeInputValue(o.textContent))}};s(),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:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",value:function(){}},{key:"updateInputValue",value:function(e){this.options.debug&&console.debug("Update input value"),this.valueArray.push(e),this.element.value=this.valueArray.toString()}},{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.toString()}},{key:"addItem",value:function(e){this.options.debug&&console.debug("Add item");var t=document.createElement("li");t.classList.add("choices__item"),t.textContent=e,this.list.appendChild(t)}},{key:"removeItem",value:function(e){e&&e.parentNode.removeChild(e)}},{key:"init",value:function(){this.supports||console.error("Your browser doesn'nt support shit"),this.initialised=!0,this.render(this.element)}},{key:"renderTextInput",value:function(){var e=this,t=document.createElement("div");t.className="choices choices--active";var n=document.createElement("div");n.className="choices__inner",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"),(0,s.wrap)(this.element,n),(0,s.wrap)(n,t);var i=document.createElement("ul");i.className="choices__list";var o=document.createElement("input");o.type="text",o.className="choices__input choices__input--cloned",o.placeholder&&(o.placeholder=this.element.placeholder),n.appendChild(i),n.appendChild(o),t.appendChild(n),this.containerOuter=t,this.containerInner=n,this.input=o,this.list=i,""!==this.element.value&&this.valueArray.forEach(function(t){e.addItem(t)}),this.addEventListeners(this.input)}},{key:"renderSelectInput",value:function(){}},{key:"render",value:function(){switch(this.options.debug&&console.debug("Render"),this.element.type){case"text":this.renderTextInput();break;case"select-one":this.renderSelectInput();break;case"select-multiple":console.warn("Choices does not support multiple select boxes");break;default:rthis.renderTextInput()}}},{key:"destroy",value:function(){this.options=null,this.element=null,this.initialised=null,this.removeEventListeners(this.input)}}]),e}();window.addEventListener("load",function(){var e=document.getElementById(1),t=document.getElementById(2),n=document.getElementById(3),i=new a({element:e,delimiter:" ",maxItems:5}),o=new a({element:t,allowDuplicates:!1}),s=new a({element:n});i.init(),o.init(),s.init()})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=(t.hasClass=function(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")},t.capitalise=function(e){return e.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})},t.isType=function(e,t){var n=Object.prototype.toString.call(t).slice(8,-1);return void 0!==t&&null!==t&&n===e},t.whichTransitionEvent=function(){var e,t=document.createElement("fakeelement"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]},t.whichAnimationEvent=function(){var e,t=document.createElement("fakeelement"),n={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in n)if(void 0!==t.style[e])return n[e]});t.getParentsUntil=function(e,t,n){for(var i=[];e&&e!==document;e=e.parentNode){if(t){var o=t.charAt(0);if("."===o&&e.classList.contains(t.substr(1)))break;if("#"===o&&e.id===t.substr(1))break;if("["===o&&e.hasAttribute(t.substr(1,t.length-1)))break;if(e.tagName.toLowerCase()===t)break}if(n){var s=n.charAt(0);"."===s&&e.classList.contains(n.substr(1))&&i.push(e),"#"===s&&e.id===n.substr(1)&&i.push(e),"["===s&&e.hasAttribute(n.substr(1,n.length-1))&&i.push(e),e.tagName.toLowerCase()===n&&i.push(e)}else i.push(e)}return 0===i.length?null:i},t.wrap=function(e,t){return t=t||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e)},t.getSiblings=function(e){for(var t=[],n=e.parentNode.firstChild;n;n=n.nextSibling)1===n.nodeType&&n!==e&&t.push(n);return t},t.findAncestor=function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e},t.debounce=function(e,t,n){var i;return function(){var o=this,s=arguments,a=function(){i=null,n||e.apply(o,s)},r=n&&!i;clearTimeout(i),i=setTimeout(a,t),r&&e.apply(o,s)}},t.getElemDistance=function(e){var t=0;if(e.offsetParent)do t+=e.offsetTop,e=e.offsetParent;while(e);return 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(),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 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;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=n(2),a=t.Choices=function(){function e(t){i(this,e);var n=document.createElement("FAKE_ELement"),o=t||{},s={element:document.querySelector("[data-choice]"),disabled:!1,create:!0,maxItems:!1,delimiter:",",allowDuplicates:!0,debug:!1,placeholder:!1,callbackOnInit:function(){},callbackOnRender:function(){},callbackOnKeyUp:function(){},callbackOnKeyDown:function(){},callbackOnEntry:function(){},callbackOnRemove:function(){}};this.options=this.extend(s,o||{}),this.initialised=!1,this.supports="querySelector"in document&&"addEventListener"in document&&"classList"in n,this.element=this.options.element,this.valueArray=""!==this.element.value?this.cleanInputValue(this.element.value):[],this.valueCount=this.valueArray.length,this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onChange=this.onChange.bind(this),this.onFocus=this.onFocus.bind(this),this.onBlur=this.onChange.bind(this),this.init()}return o(e,[{key:"cleanInputValue",value:function(e){return e.replace(/\s/g,"").split(this.options.delimiter)}},{key:"extend",value:function(){for(var e={},t=arguments.length,n=function(t){for(var n in t)e[n]=t[n]},i=0;t>i;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<this.list.children.length;i++){var o=this.list.children[i];o.classList.add("is-selected")}if(13===e.keyCode&&e.target.value&&!function(){var e=t.input.value,n=function(){var n=!0;t.options.maxItems&&t.options.maxItems<=t.list.children.length&&(n=!1),t.options.allowDuplicates===!1&&t.element.value&&t.valueArray.indexOf(e)>-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<e.length;i++){var o=e[i];o.classList.contains("is-selected")&&(t.removeItem(o),t.removeInputValue(o.textContent))}};s(),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:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",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),console.log(this.element.value)}},{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){this.options.debug&&console.debug("Add item");var t=document.createElement("li");t.classList.add("choices__item"),t.textContent=e,this.list.appendChild(t)}},{key:"removeItem",value:function(e){e&&e.parentNode.removeChild(e)}},{key:"init",value:function(){this.supports||console.error("Your browser doesn'nt support shit"),this.initialised=!0,this.render(this.element)}},{key:"renderTextInput",value:function(){var e=this,t=document.createElement("div");t.className="choices choices--active";var n=document.createElement("div");n.className="choices__inner",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"),(0,s.wrap)(this.element,n),(0,s.wrap)(n,t);var i=document.createElement("ul");i.className="choices__list";var o=document.createElement("input");o.type="text",o.className="choices__input choices__input--cloned",o.placeholder&&(o.placeholder=this.element.placeholder),n.appendChild(i),n.appendChild(o),t.appendChild(n),this.containerOuter=t,this.containerInner=n,this.input=o,this.list=i,""!==this.element.value&&this.valueArray.forEach(function(t){e.addItem(t)}),this.addEventListeners(this.input)}},{key:"renderSelectInput",value:function(){}},{key:"render",value:function(){switch(this.options.debug&&console.debug("Render"),this.element.type){case"text":this.renderTextInput();break;case"select-one":this.renderSelectInput();break;case"select-multiple":console.warn("Choices does not support multiple select boxes");break;default:rthis.renderTextInput()}}},{key:"destroy",value:function(){this.options=null,this.element=null,this.initialised=null,this.removeEventListeners(this.input)}}]),e}();!function(){var e=document.getElementById(1),t=document.getElementById(2),n=document.getElementById(3);new a({element:e,delimiter:" ",maxItems:5}),new a({element:t,allowDuplicates:!1}),new a({element:n})}()},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=(t.hasClass=function(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")},t.capitalise=function(e){return e.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})},t.isType=function(e,t){var n=Object.prototype.toString.call(t).slice(8,-1);return void 0!==t&&null!==t&&n===e},t.whichTransitionEvent=function(){var e,t=document.createElement("fakeelement"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]},t.whichAnimationEvent=function(){var e,t=document.createElement("fakeelement"),n={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in n)if(void 0!==t.style[e])return n[e]});t.getParentsUntil=function(e,t,n){for(var i=[];e&&e!==document;e=e.parentNode){if(t){var o=t.charAt(0);if("."===o&&e.classList.contains(t.substr(1)))break;if("#"===o&&e.id===t.substr(1))break;if("["===o&&e.hasAttribute(t.substr(1,t.length-1)))break;if(e.tagName.toLowerCase()===t)break}if(n){var s=n.charAt(0);"."===s&&e.classList.contains(n.substr(1))&&i.push(e),"#"===s&&e.id===n.substr(1)&&i.push(e),"["===s&&e.hasAttribute(n.substr(1,n.length-1))&&i.push(e),e.tagName.toLowerCase()===n&&i.push(e)}else i.push(e)}return 0===i.length?null:i},t.wrap=function(e,t){return t=t||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e)},t.getSiblings=function(e){for(var t=[],n=e.parentNode.firstChild;n;n=n.nextSibling)1===n.nodeType&&n!==e&&t.push(n);return t},t.findAncestor=function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e},t.debounce=function(e,t,n){var i;return function(){var o=this,s=arguments,a=function(){i=null,n||e.apply(o,s)},r=n&&!i;clearTimeout(i),i=setTimeout(a,t),r&&e.apply(o,s)}},t.getElemDistance=function(e){var t=0;if(e.offsetParent)do t+=e.offsetTop,e=e.offsetParent;while(e);return 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(),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
diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
index be796d3..fc63fc9 100644
--- a/assets/scripts/src/choices.js
+++ b/assets/scripts/src/choices.js
@@ -10,9 +10,9 @@ import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
 
  */
 
-class Choices {
+export class Choices {
     constructor(options) {
-        const fakeEl = document.createElement("fakeelement");
+        const FAKE_EL = document.createElement("FAKE_ELement");
         const USER_OPTIONS = options || {};
         const DEFAULT_OPTIONS = {
             element: document.querySelector('[data-choice]'),
@@ -23,23 +23,25 @@ class Choices {
             allowDuplicates: true,
             debug: false,
             placeholder: false,
-            callbackOnInit: function(){},
-            callbackOnRender: function(){},
-            callbackOnKeyUp: function(){},
-            callbackOnKeyDown: function(){},
-            callbackOnEntry: function(){},
-            callbackOnRemove: function(){}
+            callbackOnInit: function() {},
+            callbackOnRender: function() {},
+            callbackOnKeyUp: function() {},
+            callbackOnKeyDown: function() {},
+            callbackOnEntry: function() {},
+            callbackOnRemove: function() {}
         };
 
         // Merge options with user options
         this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
         this.initialised = false;
-        this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
+        this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
 
         // Retrieve elements
         this.element = this.options.element;
         // If input already has values, parse the array, otherwise create a blank array
         this.valueArray = this.element.value !== '' ? this.cleanInputValue(this.element.value) : [];
+        // How many values in array
+        this.valueCount = this.valueArray.length;
 
         // Bind methods
         this.onClick = this.onClick.bind(this);
@@ -47,9 +49,12 @@ class Choices {
         this.onChange = this.onChange.bind(this);
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onChange.bind(this);
+
+        this.init();
     }
 
     cleanInputValue(value) {
+        // Remove spaces and split with delimiter
         return value.replace(/\s/g, '').split(this.options.delimiter);
     }
 
@@ -67,18 +72,18 @@ class Choices {
          * @param  {Object} obj  Object to merge into extended object
          */
         let merge = function(obj) {
-            for(let prop in obj) {
+            for (let prop in obj) {
                 extended[prop] = obj[prop];
             }
         };
 
         // Loop through each passed argument
-        for(let i = 0; i < length; i++) {
+        for (let i = 0; i < length; i++) {
             // Store argument at position i
             let obj = arguments[i];
 
             // If we are in fact dealing with an object, merge it. Otherwise throw error
-            if(isType('Object', obj)) {
+            if (isType('Object', obj)) {
                 merge(obj);
             } else {
                 console.error('Custom options must be an object');
@@ -91,19 +96,19 @@ class Choices {
     /* State */
 
     isOpen() {
-                
+
     }
 
     isDisabled() {
-        
+
     }
 
     isEmpty() {
-
+        return (this.valueCount.length === 0) ? true : false; 
     }
 
     clearInput() {
-        if(this.input.value) this.input.value = '';
+        if (this.input.value) this.input.value = '';
     }
 
     /* Event handling */
@@ -116,7 +121,7 @@ class Choices {
         let ctrlDown = e.ctrlKey || e.metaKey;
 
         // Handle select all 
-        if(ctrlDown && e.keyCode === 65) {
+        if (ctrlDown && e.keyCode === 65) {
             for (let i = 0; i < this.list.children.length; i++) {
                 let listItem = this.list.children[i];
 
@@ -125,7 +130,7 @@ class Choices {
         }
 
         // Handle enter key
-        if(e.keyCode === 13 && e.target.value) {
+        if (e.keyCode === 13 && e.target.value) {
             let value = this.input.value;
 
             let handleEnterKey = () => {
@@ -133,41 +138,41 @@ class Choices {
 
                 // If there is a max entry limit and we have reached that limit
                 // don't update
-                if(this.options.maxItems && this.options.maxItems <= this.list.children.length) {
+                if (this.options.maxItems && this.options.maxItems <= this.list.children.length) {
                     canUpdate = false;
                 }
 
                 // If no duplicates are allowed, and the value already exists
                 // in the array, don't update
-                if(this.options.allowDuplicates === false && this.element.value) {
-                    if(this.valueArray.indexOf(value) > -1) {
+                if (this.options.allowDuplicates === false && this.element.value) {
+                    if (this.valueArray.indexOf(value) > -1) {
                         canUpdate = false;
                     }
                 }
 
                 // All is good, update
-                if(canUpdate) {
+                if (canUpdate) {
                     this.addItem(value);
                     this.updateInputValue(value);
                     this.clearInput(this.element);
                 }
             };
 
-            handleEnterKey();              
+            handleEnterKey();
         }
 
-        if((e.keyCode === 8 || e.keyCode === 46) && !e.target.value) {
-            
+        if ((e.keyCode === 8 || e.keyCode === 46) && !e.target.value) {
+
             let handleBackspaceKey = () => {
                 let currentListItems = this.list.querySelectorAll('.choices__item');
                 let lastItem = currentListItems[currentListItems.length - 1];
 
                 lastItem.classList.add('is-selected');
-            
+
                 for (let i = 0; i < currentListItems.length; i++) {
                     let listItem = currentListItems[i];
 
-                    if(listItem.classList.contains('is-selected')) {
+                    if (listItem.classList.contains('is-selected')) {
                         this.removeItem(listItem);
                         this.removeInputValue(listItem.textContent);
                     }
@@ -235,10 +240,10 @@ class Choices {
     }
 
     updateInputValue(value) {
-        if(this.options.debug) console.debug('Update input value');
+        if (this.options.debug) console.debug('Update input value');
 
         // Push new value to array
-        this.valueArray.push(value); 
+        this.valueArray.push(value);
 
         // Caste array to string and set it as the hidden inputs value
         this.element.value = this.valueArray.join(this.options.delimiter);
@@ -247,8 +252,8 @@ class Choices {
     }
 
     removeInputValue(value) {
-        if(this.options.debug) console.debug('Remove input value');
-        
+        if (this.options.debug) console.debug('Remove input value');
+
         let index = this.valueArray.indexOf(value);
         this.valueArray.splice(index, 1);
 
@@ -256,8 +261,8 @@ class Choices {
     }
 
     addItem(value) {
-        if(this.options.debug) console.debug('Add item');
-    
+        if (this.options.debug) console.debug('Add item');
+
         // // Create new list element
         let item = document.createElement('li');
         item.classList.add('choices__item');
@@ -268,21 +273,21 @@ class Choices {
     }
 
     removeItem(item) {
-        if(item) item.parentNode.removeChild(item);
+        if (item) item.parentNode.removeChild(item);
     }
-    
+
     init() {
-        if(!this.supports) console.error('Your browser doesn\'nt support shit');
+        if (!this.supports) console.error('Your browser doesn\'nt support shit');
         this.initialised = true;
         this.render(this.element);
     }
 
     renderTextInput() {
         let containerOuter = document.createElement('div');
-            containerOuter.className = 'choices choices--active';
+        containerOuter.className = 'choices choices--active';
 
         let containerInner = document.createElement('div');
-            containerInner.className = 'choices__inner';
+        containerInner.className = 'choices__inner';
 
         // Hide passed input
         this.element.classList.add('choices__input', 'choices__input--hidden');
@@ -292,21 +297,21 @@ class Choices {
 
         // Wrap input in container preserving DOM ordering
         wrap(this.element, containerInner);
-        
+
         // Wrapper inner container with outer container
         wrap(containerInner, containerOuter);
 
         let list = document.createElement('ul');
-            list.className = 'choices__list';
+        list.className = 'choices__list';
 
         let input = document.createElement('input');
-            input.type = 'text';
-            input.className = 'choices__input choices__input--cloned';
+        input.type = 'text';
+        input.className = 'choices__input choices__input--cloned';
 
-        if(input.placeholder) {
-            input.placeholder = this.element.placeholder;    
+        if (input.placeholder) {
+            input.placeholder = this.element.placeholder;
         }
-            
+
         containerInner.appendChild(list);
         containerInner.appendChild(input);
         containerOuter.appendChild(containerInner);
@@ -316,7 +321,7 @@ class Choices {
         this.input = input;
         this.list = list;
 
-        if(this.element.value !== '') {
+        if (this.element.value !== '') {
             // Add any preset values
             this.valueArray.forEach((value) => {
                 this.addItem(value);
@@ -332,9 +337,9 @@ class Choices {
     }
 
     render() {
-        if(this.options.debug) console.debug('Render');
+        if (this.options.debug) console.debug('Render');
 
-        switch(this.element.type) {
+        switch (this.element.type) {
             case "text":
                 this.renderTextInput();
                 break;
@@ -359,8 +364,7 @@ class Choices {
     }
 };
 
-window.addEventListener('load', function() {
-
+(function(){
     let input1 = document.getElementById(1);
     let input2 = document.getElementById(2);
     let input3 = document.getElementById(3);
@@ -379,9 +383,4 @@ window.addEventListener('load', function() {
     let choices3 = new Choices({
         element : input3
     });
-
-    choices1.init();
-    choices2.init();
-    choices3.init();
-
-});
\ No newline at end of file
+})();
\ No newline at end of file
diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css
index 017a321..b575dba 100644
--- a/assets/styles/css/choices.css
+++ b/assets/styles/css/choices.css
@@ -62,6 +62,8 @@ label {
   background-color: #00BCD4;
   text-shadow: 0px 1px 0px #008fa1;
   border: 1px solid #00a5bb;
-  color: #FFFFFF; }
+  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 99c19fe..f475a39 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;color:#fff}.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;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
diff --git a/assets/styles/scss/choices.scss b/assets/styles/scss/choices.scss
index cbed131..46549a8 100644
--- a/assets/styles/scss/choices.scss
+++ b/assets/styles/scss/choices.scss
@@ -71,6 +71,8 @@ label {
     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