Add event listeners to each element in this.elements + wrap them in div

.eslintrc

@@ -1,6 +1,5 @@
 {
   "ecmaFeatures": {
-    "jsx": true,
     "modules": true
   },
   "env": {
@@ -11,11 +10,5 @@
   "rules": {
     "quotes": [2, "single"],
     "strict": [2, "never"],
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/react-in-jsx-scope": 2
   },
-  "plugins": [
-    "react"
-  ]
 }

assets/scripts/dist/bundle.js

@@ -1 +1 @@
-!function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="/assets/scripts/dist/",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var i,c=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}();"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,c){i=function(){return c(o)}.call(n,t,n,e),!(void 0!==i&&(e.exports=i))}(void 0,function(e){"use strict";var n=function(){function e(){o(this,e);var n={element:"[data-choice]",disabled:!1,maxItems:0,debug:!1,callbackOnInit:function(){},callbackOnRender:function(){},callbackOnKeyUp:function(){},callbackOnKeyDown:function(){},callbackOnEntry:function(){},callbackOnRemove:function(){}};this.options=n,this.elements=document.querySelectorAll(this.options.element),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.addEventListeners(),this.render()}return c(e,[{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"onKeyDown",value:function(){console.log("Key down")}},{key:"onFocus",value:function(){console.log("Focus")}},{key:"onClick",value:function(){console.log("Click")}},{key:"onChange",value:function(){console.log("Change")}},{key:"addEventListeners",value:function(){document.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("change",this.onChange),document.addEventListener("focus",this.onFocus),document.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(){document.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("change",this.onChange),document.removeEventListener("focus",this.onFocus),document.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:"addItem",value:function(){}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"render",value:function(){console.log("Render")}},{key:"destroy",value:function(){}}]),e}();new n})}]);
+!function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="/assets/scripts/dist/",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var i,s=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}();"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,s){i=function(){return s(o)}.call(n,t,n,e),!(void 0!==i&&(e.exports=i))}(void 0,function(e){"use strict";var n=function(e,n){return n=n||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(n,e.nextSibling):e.parentNode.appendChild(n),n.appendChild(e)},t=function(){function e(){o(this,e);var n=document.createElement("fakeelement"),t={element:"[data-choice]",disabled:!1,maxItems:0,debug:!1,placeholder:!1,callbackOnInit:function(){},callbackOnRender:function(){},callbackOnKeyUp:function(){},callbackOnKeyDown:function(){},callbackOnEntry:function(){},callbackOnRemove:function(){}};this.options=t,this.initialised=!1,this.supports="querySelector"in document&&"addEventListener"in document&&"classList"in n,this.elements=document.querySelectorAll(this.options.element),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 s(e,[{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"onKeyDown",value:function(e){console.log("Key down"),console.log(e.target)}},{key:"onFocus",value:function(e){console.log("Focus"),console.log(e.target)}},{key:"onClick",value:function(e){console.log("Click"),console.log(e.target)}},{key:"onChange",value:function(e){console.log("Change"),console.log(e.target)}},{key:"addEventListeners",value:function(e){e.addEventListener("click",this.onClick),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("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:"addItem",value:function(){}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"init",value:function(){this.supports||console.error("Your browser doesn'nt support shit"),this.initialised=!0;for(var e=this.elements,n=e.length-1;n>=0;n--){var t=e[n];this.render(t)}}},{key:"render",value:function(e){console.log("Render");var t=document.createElement("div");t.classList.add("choice","choice--active"),e.classList.add("choice__input","choice__input--original"),e.tabIndex="-1",e.setAttribute("style","display:none;"),n(e,t);var o=document.createElement("input");o.type="text",o.classList.add("choice__input","choice__input--cloned"),t.appendChild(o),this.addEventListeners(e)}},{key:"destroy",value:function(){this.options=null,this.elements=null;for(var e=this.elements,n=e.length-1;n>=0;n--){var t=e[n];this.removeEventListeners(t)}}}]),e}(),i=new t;i.init(),console.log(i)})}]);

assets/scripts/src/choices.js

@@ -12,13 +12,25 @@
 
     'use strict';
 
+    let wrap = function (element, wrapper) {
+        wrapper = wrapper || document.createElement('div');
+        if (element.nextSibling) {
+            element.parentNode.insertBefore(wrapper, element.nextSibling);
+        } else {
+            element.parentNode.appendChild(wrapper);
+        }
+        return wrapper.appendChild(element);
+    };
+
     class Choices {
         constructor() {
+            const fakeEl = document.createElement("fakeelement");
             const DEFAULT_OPTIONS = {
                 element: '[data-choice]',
                 disabled: false,
                 maxItems: 0,
                 debug: false,
+                placeholder: false,
                 callbackOnInit: function(){},
                 callbackOnRender: function(){},
                 callbackOnKeyUp: function(){},
@@ -29,6 +41,8 @@
 
             // Merge options with user options
             this.options = DEFAULT_OPTIONS;
+            this.initialised = false;
+            this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
 
             // Retrieve elements
             this.elements = document.querySelectorAll(this.options.element);
@@ -39,10 +53,6 @@
             this.onChange = this.onChange.bind(this);
             this.onFocus = this.onFocus.bind(this);
             this.onBlur = this.onChange.bind(this);
-
-            // Init
-            this.addEventListeners();
-            this.render();
         }
 
         /* State */
@@ -61,38 +71,42 @@
 
         /* Event handling */
 
-        onKeyDown() {
-            console.log('Key down');
+        onKeyDown(e) {
+            console.log('Key down')
+            console.log(e.target);
         }
 
-        onFocus() {
-            console.log('Focus');
+        onFocus(e) {
+            console.log('Focus')
+            console.log(e.target);
         }
 
-        onClick() {
-            console.log('Click');
+        onClick(e) {
+            console.log('Click')
+            console.log(e.target);
         }
 
-        onChange() {
-            console.log('Change');
+        onChange(e) {
+            console.log('Change')
+            console.log(e.target);
         }
 
         /* Event listeners */
 
-        addEventListeners() {
-            document.addEventListener('click', this.onClick);
-            document.addEventListener('keydown', this.onKeyDown);
-            document.addEventListener('change', this.onChange);
-            document.addEventListener('focus', this.onFocus);
-            document.addEventListener('blur', this.onBlur);
+        addEventListeners(el) {
+            el.addEventListener('click', this.onClick);
+            el.addEventListener('keydown', this.onKeyDown);
+            el.addEventListener('change', this.onChange);
+            el.addEventListener('focus', this.onFocus);
+            el.addEventListener('blur', this.onBlur);
         }
 
-        removeEventListeners() {
-            document.removeEventListener('click', this.onClick);
-            document.removeEventListener('keydown', this.onKeyDown);
-            document.removeEventListener('change', this.onChange);
-            document.removeEventListener('focus', this.onFocus);
-            document.removeEventListener('blur', this.onBlur);
+        removeEventListeners(el) {
+            el.removeEventListener('click', this.onClick);
+            el.removeEventListener('keydown', this.onKeyDown);
+            el.removeEventListener('change', this.onChange);
+            el.removeEventListener('focus', this.onFocus);
+            el.removeEventListener('blur', this.onBlur);
         }
 
         /* Methods */
@@ -133,14 +147,52 @@
 
         }
 
-        render() {
+        init() {
+            if(!this.supports) console.error('Your browser doesn\'nt support shit');
+            this.initialised = true;
+
+            let els = this.elements;
+            for (let i = els.length - 1; i >= 0; i--) {
+                let el = els[i];    
+                this.render(el);
+            }
+        }
+
+        render(el) {
             console.log('Render');
+
+            let wrapper = document.createElement('div');
+            wrapper.classList.add('choice', 'choice--active')
+
+            el.classList.add('choice__input', 'choice__input--original');
+            el.tabIndex = '-1';
+            el.setAttribute('style', 'display:none;');
+
+            wrap(el, wrapper);
+
+            let input = document.createElement('input');
+            input.type = 'text';
+            input.classList.add('choice__input', 'choice__input--cloned');
+            wrapper.appendChild(input);
+
+            this.addEventListeners(el);
         }
 
         destroy() {
+            this.options = null;
+            this.elements = null;
 
+            let els = this.elements;
+
+            for (let i = els.length - 1; i >= 0; i--) {
+                let el = els[i];
+
+                this.removeEventListeners(el);
+            }
         }
     };
 
-    new Choices();
+    var choices = new Choices();
+    choices.init();
+    console.log(choices);
 });

index.html

@@ -6,6 +6,7 @@
 </head>
 <body>
 <input type="text" data-choice>
+<input type="text" data-choice>
 <script src="assets/scripts/dist/bundle.js"></script>
 </body>
 </html>

webpack.config.dev.js

@@ -14,7 +14,6 @@ module.exports = {
     },
     plugins: [
         new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoErrorsPlugin(),
         new webpack.DefinePlugin({
             'process.env': {
                 'NODE_ENV': JSON.stringify('development')