diff --git a/.eslintrc b/.eslintrc index 329eec0..d7f615e 100644 --- a/.eslintrc +++ b/.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" - ] } diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js index c60657d..6d51289 100644 --- a/assets/scripts/dist/bundle.js +++ b/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=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)})}]); \ No newline at end of file diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index dee1cc5..e37431c 100644 --- a/assets/scripts/src/choices.js +++ b/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); }); \ No newline at end of file diff --git a/index.html b/index.html index d91ad00..282c55c 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + \ No newline at end of file diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 9b713a5..0eca3c3 100644 --- a/webpack.config.dev.js +++ b/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')