diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js index 933650d..7c94d8d 100644 --- a/assets/scripts/dist/bundle.js +++ b/assets/scripts/dist/bundle.js @@ -1 +1 @@ -!function(e){function n(i){if(t[i])return t[i].exports;var o=t[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,n),o.loaded=!0,o.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 i(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var o,r=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 n=document.createElement("div"),t=document.createElement("input"),i=document.createElement("ul");n.classList.add("choice","choice--active"),e.classList.add("choice__input","choice__input--original"),e.tabIndex="-1",e.setAttribute("style","display:none;"),e.setAttribute("aria-hidden","true"),(0,s.wrap)(e,n),i.classList.add("choice__list"),t.type="text",t.classList.add("choice__input","choice__input--cloned"),n.appendChild(i),n.appendChild(t),this.addEventListeners(t)}},{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}(),t=new n;t.init(),console.log(t)})},function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=(n.capitalise=function(e){return e.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})},n.isType=function(e,n){var t=Object.prototype.toString.call(n).slice(8,-1);return void 0!==n&&null!==n&&t===e},n.whichTransitionEvent=function(){var e,n=document.createElement("fakeelement"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in t)if(void 0!==n.style[e])return t[e]},n.whichAnimationEvent=function(){var e,n=document.createElement("fakeelement"),t={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in t)if(void 0!==n.style[e])return t[e]});n.getParentsUntil=function(e,n,t){for(var i=[];e&&e!==document;e=e.parentNode){if(n){var o=n.charAt(0);if("."===o&&e.classList.contains(n.substr(1)))break;if("#"===o&&e.id===n.substr(1))break;if("["===o&&e.hasAttribute(n.substr(1,n.length-1)))break;if(e.tagName.toLowerCase()===n)break}if(t){var r=t.charAt(0);"."===r&&e.classList.contains(t.substr(1))&&i.push(e),"#"===r&&e.id===t.substr(1)&&i.push(e),"["===r&&e.hasAttribute(t.substr(1,t.length-1))&&i.push(e),e.tagName.toLowerCase()===t&&i.push(e)}else i.push(e)}return 0===i.length?null:i},n.wrap=function(e,n){return n=n||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(n,e.nextSibling):e.parentNode.appendChild(n),n.appendChild(e)},n.getSiblings=function(e){for(var n=[],t=e.parentNode.firstChild;t;t=t.nextSibling)1===t.nodeType&&t!==e&&n.push(t);return n},n.findAncestor=function(e,n){for(;(e=e.parentElement)&&!e.classList.contains(n););return e},n.debounce=function(e,n,t){var i;return function(){var o=this,r=arguments,s=function(){i=null,t||e.apply(o,r)},a=t&&!i;clearTimeout(i),i=setTimeout(s,n),a&&e.apply(o,r)}},n.getElemDistance=function(e){var n=0;if(e.offsetParent)do n+=e.offsetTop,e=e.offsetParent;while(e);return n>=0?n:0},n.getElementOffset=function(e,n){var t=n;return t>1&&(t=1),t>0&&(t=0),Math.max(e.offsetHeight*t)},n.getScrollPosition=function(e){return"bottom"===e?Math.max((window.scrollY||window.pageYOffset)+(window.innerHeight||document.documentElement.clientHeight)):window.scrollY||window.pageYOffset},n.isInView=function(e,n,t){return this.getScrollPosition(n)>this.getElemDistance(e)+this.getElementOffset(e,t)},n.stripHTML=function(e){var n=document.createElement("DIV");return n.innerHTML=e,n.textContent||n.innerText||""},n.addAnimation=function(e,n){var i=t(),o=function r(){e.classList.remove(n),e.removeEventListener(i,r,!1)};e.classList.add(n),e.addEventListener(i,o,!1)},n.getRandomNumber=function(e,n){return Math.floor(Math.random()*(n-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){function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o,r=function(){function e(e,t){for(var n=0;no.children.length&&r():r()}()}},{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("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:"updateInputValue",value:function(e,t){this.options.debug&&console.debug("Update input value");var n=e.parentNode.querySelector(".choice__input--hidden"),i=""!==n.value&&(0,a.isType)("Array",JSON.parse(n.value))?JSON.parse(n.value):[];i.push(t),n.value=JSON.stringify(i)}},{key:"addItem",value:function(e,t,n){this.options.debug&&console.debug("Add item");var i=document.createElement("li");i.classList.add("choice__item"),i.textContent=t,n.appendChild(i)}},{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,t=e.length-1;t>=0;t--){var n=e[t];this.render(n)}}},{key:"render",value:function(e){var t=this;this.options.debug&&console.debug("Render");var n=document.createElement("div"),i=document.createElement("input"),o=document.createElement("ul");if(n.classList.add("choice","choice--active"),e.classList.add("choice__input","choice__input--hidden"),e.tabIndex="-1",e.setAttribute("style","display:none;"),e.setAttribute("aria-hidden","true"),(0,a.wrap)(e,n),o.classList.add("choice__list"),""!==e.value){var r=JSON.parse(e.value);r.map(function(n){t.addItem(e,n,o)})}i.type="text",i.classList.add("choice__input","choice__input--cloned"),n.appendChild(o),n.appendChild(i),this.addEventListeners(i)}},{key:"destroy",value:function(){this.options=null,this.elements=null;for(var e=this.elements,t=e.length-1;t>=0;t--){var n=e[t];this.removeEventListeners(n)}}}]),e}(),n=new t;n.init()})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=(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 r=n.charAt(0);"."===r&&e.classList.contains(n.substr(1))&&i.push(e),"#"===r&&e.id===n.substr(1)&&i.push(e),"["===r&&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,r=arguments,a=function(){i=null,n||e.apply(o,r)},s=n&&!i;clearTimeout(i),i=setTimeout(a,t),s&&e.apply(o,r)}},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 r(){e.classList.remove(t),e.removeEventListener(i,r,!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 a6d6948..79e20e1 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -1,4 +1,4 @@ -import { wrap, getSiblings } from './lib/utils.js'; +import { wrap, getSiblings, isType } from './lib/utils.js'; (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -20,8 +20,8 @@ import { wrap, getSiblings } from './lib/utils.js'; const DEFAULT_OPTIONS = { element: '[data-choice]', disabled: false, - maxItems: 0, - debug: false, + maxItems: 5, + debug: true, placeholder: false, callbackOnInit: function(){}, callbackOnRender: function(){}, @@ -61,28 +61,45 @@ import { wrap, getSiblings } from './lib/utils.js'; } + clearInput(el) { + if(el.value) el.value = ''; + } + /* Event handling */ onKeyDown(e) { - // let input = - console.log('Key down') - + // Handle enter key if(e.keyCode === 13 && e.target.value) { - this.addItem(e.target, e.target.value); - e.target.value = ''; + let el = e.target; + let value = el.value; + let list = e.target.parentNode.querySelector('.choice__list'); + + let handleEnterKey = () => { + this.addItem(el, value, list); + this.updateInputValue(el, value); + this.clearInput(el); + }; + + if(this.options.maxItems) { + if(this.options.maxItems > list.children.length) { + handleEnterKey(); + } + } else { + handleEnterKey(); + } } } onFocus(e) { - console.log('Focus') + } onClick(e) { - console.log('Click') + } onChange(e) { - console.log('Change') + } /* Event listeners */ @@ -125,30 +142,28 @@ import { wrap, getSiblings } from './lib/utils.js'; } - addItem(el, value) { - console.log('Add item'); - let wrapper = el.parentNode; - let valueInput = wrapper.querySelector('.choice__input--original'); - - let list = wrapper.querySelector('.choice__list'); - + updateInputValue(el, value) { + if(this.options.debug) console.debug('Update input value'); + // Find hidden element + let hiddenInput = el.parentNode.querySelector('.choice__input--hidden'); + // If input already has values, parse the array, otherwise create a blank array + let valueArray = hiddenInput.value !== '' && isType('Array', JSON.parse(hiddenInput.value)) ? JSON.parse(hiddenInput.value) : []; + // Push new value to array + valueArray.push(value); + // Caste array to string and set it as the hidden inputs value + hiddenInput.value = JSON.stringify(valueArray); + } + + addItem(el, value, list) { + if(this.options.debug) console.debug('Add item'); + + // Create new list element let item = document.createElement('li'); item.classList.add('choice__item'); item.textContent = value; - if(valueInput.value === '') { - valueInput.value = JSON.stringify([]); - } - - let valueInputArray = JSON.parse(valueInput.value); - - valueInputArray.push(value); - - valueInput.value = JSON.stringify(valueInputArray); - - console.log(valueInput.value); - - wrapper.appendChild(item); + // Append it to list + list.appendChild(item); } removeItem() { @@ -175,7 +190,7 @@ import { wrap, getSiblings } from './lib/utils.js'; } render(el) { - console.log('Render'); + if(this.options.debug) console.debug('Render'); let wrapper = document.createElement('div'); let input = document.createElement('input'); @@ -183,7 +198,7 @@ import { wrap, getSiblings } from './lib/utils.js'; wrapper.classList.add('choice', 'choice--active'); - el.classList.add('choice__input', 'choice__input--original'); + el.classList.add('choice__input', 'choice__input--hidden'); el.tabIndex = '-1'; el.setAttribute('style', 'display:none;'); el.setAttribute('aria-hidden', 'true'); @@ -192,6 +207,13 @@ import { wrap, getSiblings } from './lib/utils.js'; list.classList.add('choice__list'); + if(el.value !== '') { + let valueArray = JSON.parse(el.value); + valueArray.map((v) => { + this.addItem(el, v, list); + }); + } + input.type = 'text'; input.classList.add('choice__input', 'choice__input--cloned'); @@ -217,5 +239,4 @@ import { wrap, getSiblings } from './lib/utils.js'; var choices = new Choices(); choices.init(); - console.log(choices); }); \ No newline at end of file diff --git a/index.html b/index.html index 282c55c..b75916f 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,8 @@ Choices - - + + \ No newline at end of file