From 7774e8bb0da343ed1aac2184b1b87c526daed9bf Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Thu, 21 Apr 2016 14:42:57 +0100 Subject: [PATCH] Active state handling plus positioning of dropdown --- assets/scripts/dist/bundle.js | 2 +- assets/scripts/src/choices.js | 58 ++++++++++++++++++++++++++----- assets/styles/css/choices.css | 8 ++++- assets/styles/css/choices.min.css | 2 +- assets/styles/scss/choices.scss | 4 +++ index.html | 2 +- 6 files changed, 64 insertions(+), 12 deletions(-) diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js index ee35d95a..7cab2fc8 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){return e&&e.__esModule?e:{"default":e}}function o(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;n1)for(var d=1;d'),n=(0,u.strToEl)('
');this.passedElement.classList.add(this.options.classNames.input,this.options.classNames.hiddenState),this.passedElement.tabIndex="-1",this.passedElement.setAttribute("style","display:none;"),this.passedElement.setAttribute("aria-hidden","true"),(0,u.wrap)(this.passedElement,n),(0,u.wrap)(n,t);var i=(0,u.strToEl)('
    '),o=(0,u.strToEl)('');if(this.options.placeholder){var s=this.options.placeholderValue||this.passedElement.placeholder;s&&(o.placeholder=s,o.style.width=(0,u.getWidthOfInput)(o))}this.options.addItems||(o.disabled=!0,t.classList.add(this.options.classNames.disabledState)),t.appendChild(n),n.appendChild(i),n.appendChild(o),this.containerOuter=t,this.containerInner=n,this.input=o,this.list=i,this.presetItems.forEach(function(t){e.addItem(t)})}},{key:"generateMultipleSelectInput",value:function(){var e=this,t=(0,u.strToEl)('
    '),n=(0,u.strToEl)('
    ');this.passedElement.classList.add(this.options.classNames.input,this.options.classNames.hiddenState),this.passedElement.tabIndex="-1",this.passedElement.setAttribute("style","display:none;"),this.passedElement.setAttribute("aria-hidden","true"),(0,u.wrap)(this.passedElement,n),(0,u.wrap)(n,t);var i=(0,u.strToEl)('
      '),o=(0,u.strToEl)(''),s=(0,u.strToEl)('
      ');this.options.placeholder&&this.options.placeholderValue&&(o.placeholder=this.options.placeholderValue,o.style.width=(0,u.getWidthOfInput)(o)),this.options.addItems||(o.disabled=!0),t.appendChild(n),t.appendChild(s),n.appendChild(i),n.appendChild(o),this.containerOuter=t,this.containerInner=n,this.input=o,this.list=i,this.dropdown=s;var r=Array.from(this.passedElement.getElementsByTagName("OPTGROUP"));if(r.length)r.forEach(function(t,n){var i=Array.from(t.getElementsByTagName("OPTION")),o=n;e.addGroup(t.label,o),i.forEach(function(t){e.addOption(t,o)})});else{var a=Array.from(this.passedElement.options);a.forEach(function(t){e.addOption(t)})}}},{key:"addEventListeners",value:function(){document.addEventListener("keydown",this.onKeyDown),document.addEventListener("click",this.onClick),document.addEventListener("paste",this.onPaste)}},{key:"removeEventListeners",value:function(){document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("click",this.onClick),document.removeEventListener("paste",this.onPaste)}},{key:"render",value:function(){var e=this,t=arguments.length<=0||void 0===arguments[0]?this.options.callbackOnRender:arguments[0],n=this.options.classNames,i=this.getItemsFilteredByActive(),o=this.getOptions(),s=this.getGroups();this.dropdown&&!function(){e.dropdown.innerHTML="";var t=document.createDocumentFragment();if(s.length)s.forEach(function(e){var i=(0,u.strToEl)('\n
      \n
      '+e.value+"
      \n
      \n "),s=o.filter(function(t){return t.groupId===e.id});if(s)s.forEach(function(e){var t=(0,u.strToEl)('\n
      \n '+e.label+"\n
      \n ");i.appendChild(t)});else{var r=(0,u.strToEl)('
      No options to select
      ');i.appendChild(r)}t.appendChild(i)});else if(o)o.forEach(function(e){var i=(0,u.strToEl)('\n
      \n '+e.label+"\n
      \n ");t.appendChild(i)});else{var i=(0,u.strToEl)('
      No options to select
      ');t.appendChild(i)}e.dropdown.appendChild(t)}(),i&&!function(){var t=e.getItemsReducedToValues();e.passedElement.value=t.join(e.options.delimiter),e.list.innerHTML="";var o=document.createDocumentFragment();i.forEach(function(t){var i=(0,u.strToEl)('\n
    • \n '+t.label+"\n
      • \n ");o.appendChild(i)}),e.list.appendChild(o)}(),t&&((0,u.isType)("Function",t)?t(i,o,s):console.error("callbackOnRender: Callback is not a function"))}},{key:"renderInput",value:function(e){switch(this.options.debug&&console.debug("Render"),e.type){case"text":this.generateTextInput();break;case"select-one":break;case"select-multiple":this.generateMultipleSelectInput();break;default:console.error("renderInput: Input type is not supported")}}},{key:"init",value:function(){var e=arguments.length<=0||void 0===arguments[0]?this.options.callbackOnInit:arguments[0];this.initialised=!0,this.renderInput(this.passedElement),this.store.subscribe(this.render),this.render(),this.addEventListeners(),e&&((0,u.isType)("Function",e)?e():console.error("callbackOnInit: Callback is not a function"))}},{key:"destroy",value:function(){this.options=null,this.passedElement=null,this.initialised=null}}]),e}();document.addEventListener("DOMContentLoaded",function(){var e=document.getElementById("choices-1"),t=(new d(e,{delimiter:" ",editItems:!0,maxItems:5}),new d("#choices-2",{allowPaste:!1,allowDuplicates:!1,editItems:!0}),new d("#choices-3",{allowDuplicates:!1,editItems:!0,regexFilter:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/}),new d("#choices-4",{addItems:!1,removeItems:!1}),new d("#choices-5",{prependValue:"item-",appendValue:"-"+Date.now()}));t.removeAllItems();var n=new d("#choices-6",{items:["josh@joshuajohnson.co.uk","joe@bloggs.co.uk"],callbackOnRender:function(e,t,n){console.log(e)}});new d("#choices-7",{}),new d("[data-choice]",{placeholderValue:"This is a placeholder set in the config"});n.addItem("josh2@joshuajohnson.co.uk",null,null,function(){console.log("Custom add item callback")}),n.removeItemsByValue("josh@joshuajohnson.co.uk"),console.log(n.getItemById(3))})},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0,t.compose=t.applyMiddleware=t.bindActionCreators=t.combineReducers=t.createStore=void 0;var o=n(3),s=i(o),r=n(8),a=i(r),l=n(10),c=i(l),u=n(11),d=i(u),h=n(12),p=i(h),f=n(9);i(f);t.createStore=s.default,t.combineReducers=a.default,t.bindActionCreators=c.default,t.applyMiddleware=d.default,t.compose=p.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){function i(){f===p&&(f=p.slice())}function s(){return h}function l(e){if("function"!=typeof e)throw new Error("Expected listener to be a function.");var t=!0;return i(),f.push(e),function(){if(t){t=!1,i();var n=f.indexOf(e);f.splice(n,1)}}}function c(e){if(!(0,r.default)(e))throw new Error("Actions must be plain objects. Use custom middleware for async actions.");if("undefined"==typeof e.type)throw new Error('Actions may not have an undefined "type" property. Have you misspelled a constant?');if(v)throw new Error("Reducers may not dispatch actions.");try{v=!0,h=d(h,e)}finally{v=!1}for(var t=p=f,n=0;nn;n++)t[n]=arguments[n];return function(e){return function(n,i,o){var r=e(n,i,o),l=r.dispatch,c=[],u={getState:r.getState,dispatch:function(e){return l(e)}};return c=t.map(function(e){return e(u)}),l=a.default.apply(void 0,c)(r.dispatch),s({},r,{dispatch:l})}}}var s=Object.assign||function(e){for(var t=1;tn;n++)t[n]=arguments[n];return function(){if(0===t.length)return arguments.length<=0?void 0:arguments[0];var e=t[t.length-1],n=t.slice(0,-1);return n.reduceRight(function(e,t){return t(e)},e.apply(void 0,arguments))}}t.__esModule=!0,t.default=n},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),s=n(14),r=i(s),a=n(15),l=i(a),c=n(16),u=i(c),d=(0,o.combineReducers)({items:r.default,groups:l.default,options:u.default});t.default=d},function(e,t){"use strict";function n(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t-1?e.map(function(e){return e.id===parseInt(t.optionId)&&(e.selected=t.selected),e}):e;default:return e}};t.default=i},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.addItem=function(e,t,n,i){return{type:"ADD_ITEM",value:e,label:t,id:n,optionId:i}},t.removeItem=function(e,t){return{type:"REMOVE_ITEM",id:e,optionId:t}},t.selectItem=function(e,t){return{type:"SELECT_ITEM",id:e,selected:t}},t.addOption=function(e,t,n,i){return{type:"ADD_OPTION",value:e,label:t,id:n,groupId:i}},t.selectOption=function(e,t){return{type:"SELECT_OPTION",id:e,selected:t}},t.addGroup=function(e,t){return{type:"ADD_GROUP",value:e,id:t}}},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}),i=(t.extend=function s(){for(var e={},t=!1,i=arguments.length,o=function(i){for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t&&n("Object",i[o])?e[o]=s(!0,e[o],i[o]):e[o]=i[o])},r=0;i>r;r++){var a=arguments[r];n("Object",a)?o(a):console.error("Custom options must be an object")}return 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]}),o=(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,r=function(){i=null,n||e.apply(o,s)},a=n&&!i;clearTimeout(i),i=setTimeout(r,t),a&&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 n=i(),o=function s(){e.classList.remove(t),e.removeEventListener(n,s,!1)};e.classList.add(t),e.addEventListener(n,o,!1)},t.getRandomNumber=function(e,t){return Math.floor(Math.random()*(t-e)+e)},t.strToEl=function(){var e=document.createElement("div");return function(t){var n;for(e.innerHTML=t,n=e.children[0];e.firstChild;)e.removeChild(e.firstChild);return n}}());t.getWidthOfInput=function(e){var t=arguments.length<=1||void 0===arguments[1]?20:arguments[1],n=e.value||e.placeholder,i=e.offsetWidth;if(n){var s=o(''+n+"");s.style.position="absolute",s.style.top="-9999px",s.style.left="-9999px",s.style.padding="0",s.style.width="auto",document.body.appendChild(s),s.offsetWidth>t&&s.offsetWidth!=e.offsetWidth&&(i=s.offsetWidth+t/4),document.body.removeChild(s)}return i+"px"}}]); \ 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){return e&&e.__esModule?e:{"default":e}}function s(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;n1)for(var u=1;u=document.body.offsetHeight?this.dropdown.classList.add("is-flipped"):this.dropdown.classList.remove("is-flipped")}},{key:"hideDropdown",value:function(){var e=this.dropdown.classList.contains("is-flipped");this.dropdown.classList.remove("is-active"),e&&this.dropdown.classList.remove("is-flipped")}},{key:"toggleDropdown",value:function(){if(this.dropdown){var e=this.dropdown.classList.contains("is-active");e?this.hideDropdown():this.showDropdown()}}},{key:"addOption",value:function(e){var t=arguments.length<=1||void 0===arguments[1]?-1:arguments[1],n=this.store.getState(),i=n.options.length+1,s=e.value,o=e.innerHTML,r=e.selected;this.store.dispatch((0,c.addOption)(s,o,i,t)),r&&(this.selectOption(i),this.addItem(s,o,i))}},{key:"addGroup",value:function(e,t){this.store.dispatch((0,c.addGroup)(e,t))}},{key:"getItems",value:function(){var e=this.store.getState();return e.items}},{key:"getItemsFilteredByActive",value:function(){var e=this.getItems(),t=e.filter(function(e){return e.active===!0},[]);return t}},{key:"getItemsReducedToValues",value:function(){var e=this.getItems(),t=e.reduce(function(e,t){return e.push(t.value),e},[]);return t}},{key:"getOptions",value:function(){var e=this.store.getState();return e.options}},{key:"getGroups",value:function(){var e=this.store.getState();return e.groups}},{key:"generateTextInput",value:function(){var e=this,t=(0,d.strToEl)('
      '),n=(0,d.strToEl)('
      ');this.passedElement.classList.add(this.options.classNames.input,this.options.classNames.hiddenState),this.passedElement.tabIndex="-1",this.passedElement.setAttribute("style","display:none;"),this.passedElement.setAttribute("aria-hidden","true"),(0,d.wrap)(this.passedElement,n),(0,d.wrap)(n,t);var i=(0,d.strToEl)('
        '),s=(0,d.strToEl)('');if(this.options.placeholder){var o=this.options.placeholderValue||this.passedElement.placeholder;o&&(s.placeholder=o,s.style.width=(0,d.getWidthOfInput)(s))}this.options.addItems||(s.disabled=!0,t.classList.add(this.options.classNames.disabledState)),t.appendChild(n),n.appendChild(i),n.appendChild(s),this.containerOuter=t,this.containerInner=n,this.input=s,this.list=i,this.presetItems.forEach(function(t){e.addItem(t)})}},{key:"generateMultipleSelectInput",value:function(){var e=this,t=(0,d.strToEl)('
        '),n=(0,d.strToEl)('
        ');this.passedElement.classList.add(this.options.classNames.input,this.options.classNames.hiddenState),this.passedElement.tabIndex="-1",this.passedElement.setAttribute("style","display:none;"),this.passedElement.setAttribute("aria-hidden","true"),(0,d.wrap)(this.passedElement,n),(0,d.wrap)(n,t);var i=(0,d.strToEl)('
          '),s=(0,d.strToEl)(''),o=(0,d.strToEl)('
          ');this.options.placeholder&&this.options.placeholderValue&&(s.placeholder=this.options.placeholderValue,s.style.width=(0,d.getWidthOfInput)(s)),this.options.addItems||(s.disabled=!0),t.appendChild(n),t.appendChild(o),n.appendChild(i),n.appendChild(s),this.containerOuter=t,this.containerInner=n,this.input=s,this.list=i,this.dropdown=o;var r=Array.from(this.passedElement.getElementsByTagName("OPTGROUP"));if(r.length)r.forEach(function(t,n){var i=Array.from(t.getElementsByTagName("OPTION")),s=n;e.addGroup(t.label,s),i.forEach(function(t){e.addOption(t,s)})});else{var a=Array.from(this.passedElement.options);a.forEach(function(t){e.addOption(t)})}}},{key:"addEventListeners",value:function(){document.addEventListener("keydown",this.onKeyDown),document.addEventListener("click",this.onClick),document.addEventListener("paste",this.onPaste),this.input.addEventListener("focus",this.onFocus),this.input.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(){document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("click",this.onClick),document.removeEventListener("paste",this.onPaste),this.input.removeEventListener("focus",this.onFocus),this.input.removeEventListener("blur",this.onBlur)}},{key:"render",value:function(){var e=this,t=arguments.length<=0||void 0===arguments[0]?this.options.callbackOnRender:arguments[0],n=this.options.classNames,i=this.getItemsFilteredByActive(),s=this.getOptions(),o=this.getGroups();this.dropdown&&!function(){e.dropdown.innerHTML="";var t=document.createDocumentFragment();if(o.length)o.forEach(function(e){var i=(0,d.strToEl)('\n
          \n
          '+e.value+"
          \n
          \n "),o=s.filter(function(t){return t.groupId===e.id});if(o)o.forEach(function(e){var t=(0,d.strToEl)('\n
          \n '+e.label+"\n
          \n ");i.appendChild(t)});else{var r=(0,d.strToEl)('
          No options to select
          ');i.appendChild(r)}t.appendChild(i)});else if(s)s.forEach(function(e){var i=(0,d.strToEl)('\n
          \n '+e.label+"\n
          \n ");t.appendChild(i)});else{var i=(0,d.strToEl)('
          No options to select
          ');t.appendChild(i)}e.dropdown.appendChild(t)}(),i&&!function(){var t=e.getItemsReducedToValues();e.passedElement.value=t.join(e.options.delimiter),e.list.innerHTML="";var s=document.createDocumentFragment();i.forEach(function(t){var i=(0,d.strToEl)('\n
        • \n '+t.label+"\n
          • \n ");s.appendChild(i)}),e.list.appendChild(s)}(),t&&((0,d.isType)("Function",t)?t(i,s,o):console.error("callbackOnRender: Callback is not a function"))}},{key:"renderInput",value:function(e){switch(this.options.debug&&console.debug("Render"),e.type){case"text":this.generateTextInput();break;case"select-one":break;case"select-multiple":this.generateMultipleSelectInput();break;default:console.error("renderInput: Input type is not supported")}}},{key:"init",value:function(){var e=arguments.length<=0||void 0===arguments[0]?this.options.callbackOnInit:arguments[0];this.initialised=!0,this.renderInput(this.passedElement),this.store.subscribe(this.render),this.render(),this.addEventListeners(),e&&((0,d.isType)("Function",e)?e():console.error("callbackOnInit: Callback is not a function"))}},{key:"destroy",value:function(){this.options=null,this.passedElement=null,this.initialised=null}}]),e}();document.addEventListener("DOMContentLoaded",function(){var e=document.getElementById("choices-1"),t=(new u(e,{delimiter:" ",editItems:!0,maxItems:5}),new u("#choices-2",{allowPaste:!1,allowDuplicates:!1,editItems:!0}),new u("#choices-3",{allowDuplicates:!1,editItems:!0,regexFilter:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/}),new u("#choices-4",{addItems:!1,removeItems:!1}),new u("#choices-5",{prependValue:"item-",appendValue:"-"+Date.now()}));t.removeAllItems();var n=new u("#choices-6",{items:["josh@joshuajohnson.co.uk","joe@bloggs.co.uk"],callbackOnRender:function(e,t,n){console.log(e)}});new u("#choices-7",{}),new u("[data-choice]",{placeholderValue:"This is a placeholder set in the config"});n.addItem("josh2@joshuajohnson.co.uk",null,null,function(){console.log("Custom add item callback")}),n.removeItemsByValue("josh@joshuajohnson.co.uk"),console.log(n.getItemById(3))})},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0,t.compose=t.applyMiddleware=t.bindActionCreators=t.combineReducers=t.createStore=void 0;var s=n(3),o=i(s),r=n(7),a=i(r),l=n(9),c=i(l),d=n(10),u=i(d),h=n(11),p=i(h),f=n(8);i(f);t.createStore=o.default,t.combineReducers=a.default,t.bindActionCreators=c.default,t.applyMiddleware=u.default,t.compose=p.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function s(e,t,n){function i(){f===p&&(f=p.slice())}function o(){return h}function l(e){if("function"!=typeof e)throw new Error("Expected listener to be a function.");var t=!0;return i(),f.push(e),function(){if(t){t=!1,i();var n=f.indexOf(e);f.splice(n,1)}}}function c(e){if(!(0,r.default)(e))throw new Error("Actions must be plain objects. Use custom middleware for async actions.");if("undefined"==typeof e.type)throw new Error('Actions may not have an undefined "type" property. Have you misspelled a constant?');if(v)throw new Error("Reducers may not dispatch actions.");try{v=!0,h=u(h,e)}finally{v=!1}for(var t=p=f,n=0;nn;n++)t[n]=arguments[n];return function(e){return function(n,i,s){var r=e(n,i,s),l=r.dispatch,c=[],d={getState:r.getState,dispatch:function(e){return l(e)}};return c=t.map(function(e){return e(d)}),l=a.default.apply(void 0,c)(r.dispatch),o({},r,{dispatch:l})}}}var o=Object.assign||function(e){for(var t=1;tn;n++)t[n]=arguments[n];return function(){if(0===t.length)return arguments.length<=0?void 0:arguments[0];var e=t[t.length-1],n=t.slice(0,-1);return n.reduceRight(function(e,t){return t(e)},e.apply(void 0,arguments))}}t.__esModule=!0,t.default=n},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var s=n(2),o=n(13),r=i(o),a=n(14),l=i(a),c=n(15),d=i(c),u=(0,s.combineReducers)({items:r.default,groups:l.default,options:d.default});t.default=u},function(e,t){"use strict";function n(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t-1?e.map(function(e){return e.id===parseInt(t.optionId)&&(e.selected=t.selected),e}):e;default:return e}};t.default=i},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.addItem=function(e,t,n,i){return{type:"ADD_ITEM",value:e,label:t,id:n,optionId:i}},t.removeItem=function(e,t){return{type:"REMOVE_ITEM",id:e,optionId:t}},t.selectItem=function(e,t){return{type:"SELECT_ITEM",id:e,selected:t}},t.addOption=function(e,t,n,i){return{type:"ADD_OPTION",value:e,label:t,id:n,groupId:i}},t.selectOption=function(e,t){return{type:"SELECT_OPTION",id:e,selected:t}},t.addGroup=function(e,t){return{type:"ADD_GROUP",value:e,id:t}}},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}),i=(t.extend=function o(){for(var e={},t=!1,i=arguments.length,s=function(i){for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t&&n("Object",i[s])?e[s]=o(!0,e[s],i[s]):e[s]=i[s])},r=0;i>r;r++){var a=arguments[r];n("Object",a)?s(a):console.error("Custom options must be an object")}return 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]}),s=(t.getParentsUntil=function(e,t,n){for(var i=[];e&&e!==document;e=e.parentNode){if(t){var s=t.charAt(0);if("."===s&&e.classList.contains(t.substr(1)))break;if("#"===s&&e.id===t.substr(1))break;if("["===s&&e.hasAttribute(t.substr(1,t.length-1)))break;if(e.tagName.toLowerCase()===t)break}if(n){var o=n.charAt(0);"."===o&&e.classList.contains(n.substr(1))&&i.push(e),"#"===o&&e.id===n.substr(1)&&i.push(e),"["===o&&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 s=this,o=arguments,r=function(){i=null,n||e.apply(s,o)},a=n&&!i;clearTimeout(i),i=setTimeout(r,t),a&&e.apply(s,o)}},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 n=i(),s=function o(){e.classList.remove(t),e.removeEventListener(n,o,!1)};e.classList.add(t),e.addEventListener(n,s,!1)},t.getRandomNumber=function(e,t){return Math.floor(Math.random()*(t-e)+e)},t.strToEl=function(){var e=document.createElement("div");return function(t){var n;for(e.innerHTML=t,n=e.children[0];e.firstChild;)e.removeChild(e.firstChild);return n}}());t.getWidthOfInput=function(e){var t=arguments.length<=1||void 0===arguments[1]?20:arguments[1],n=e.value||e.placeholder,i=e.offsetWidth;if(n){var o=s(''+n+"");o.style.position="absolute",o.style.top="-9999px",o.style.left="-9999px",o.style.padding="0",o.style.width="auto",document.body.appendChild(o),o.offsetWidth>t&&o.offsetWidth!=e.offsetWidth&&(i=o.offsetWidth+t/4),document.body.removeChild(o)}return i+"px"}}]); \ No newline at end of file diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 8eb08673..1382671d 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -71,6 +71,7 @@ export class Choices { activeState: 'is-active', disabledState: 'is-disabled', hiddenState: 'is-hidden', + flippedState: 'is-flipped', selectedState: 'is-selected' }, callbackOnInit: function() {}, @@ -103,6 +104,9 @@ export class Choices { this.init = this.init.bind(this); this.render = this.render.bind(this); this.destroy = this.destroy.bind(this); + + this.onFocus = this.onFocus.bind(this); + this.onBlur = this.onBlur.bind(this); this.onKeyDown = this.onKeyDown.bind(this); this.onClick = this.onClick.bind(this); this.onPaste = this.onPaste.bind(this); @@ -277,12 +281,14 @@ export class Choices { } if(e.target.hasAttribute('data-choice-item')) { + // If we are clicking on an item const activeItems = this.getItemsFilteredByActive(); const target = e.target; this.handleClick(activeItems, target, shiftKey); - } else if(e.target.hasAttribute('data-choice-selectable')) { + } else if(e.target.hasAttribute('data-choice-option')) { + // If we are clicking on an option const options = this.getOptions(); const id = e.target.getAttribute('data-choice-id'); const option = options.find((option) => { @@ -308,11 +314,20 @@ export class Choices { } onPaste(e) { + // Disable pasting into the input if option has been set if(!this.options.allowPaste) { e.preventDefault(); } } + onFocus(e) { + this.containerOuter.classList.add('is-active'); + } + + onBlur(e) { + this.containerOuter.classList.remove('is-active'); + } + /* Methods */ /** @@ -508,15 +523,36 @@ export class Choices { }); } - toggleDropdown() { - if(!this.dropdown) { - console.error('No dropdown set'); - return; + showDropdown() { + this.dropdown.classList.add('is-active'); + + const dimensions = this.dropdown.getBoundingClientRect(); + if(dimensions.top + dimensions.height >= document.body.offsetHeight) { + this.dropdown.classList.add('is-flipped'); + } else { + this.dropdown.classList.remove('is-flipped'); + } + } + + hideDropdown() { + const isFlipped = this.dropdown.classList.contains('is-flipped'); + + this.dropdown.classList.remove('is-active'); + if(isFlipped) { + this.dropdown.classList.remove('is-flipped'); } + } + + toggleDropdown() { + if(!this.dropdown) return; const isActive = this.dropdown.classList.contains('is-active'); - this.dropdown.classList[isActive ? 'remove' : 'add']('is-active'); + if(isActive) { + this.hideDropdown(); + } else { + this.showDropdown(); + } } addOption(option, groupId = -1) { @@ -723,6 +759,9 @@ export class Choices { document.addEventListener('keydown', this.onKeyDown); document.addEventListener('click', this.onClick); document.addEventListener('paste', this.onPaste); + + this.input.addEventListener('focus', this.onFocus); + this.input.addEventListener('blur', this.onBlur); } /** @@ -732,6 +771,9 @@ export class Choices { document.removeEventListener('keydown', this.onKeyDown); document.removeEventListener('click', this.onClick); document.removeEventListener('paste', this.onPaste); + + this.input.removeEventListener('focus', this.onFocus); + this.input.removeEventListener('blur', this.onBlur); } /** @@ -769,7 +811,7 @@ export class Choices { if(childOptions) { childOptions.forEach((option) => { const dropdownItem = strToEl(` -
          +
          ${ option.label }
          `); @@ -787,7 +829,7 @@ export class Choices { if(options) { options.forEach((option) => { const dropdownItem = strToEl(` -
          +
          ${ option.label }
          `); diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css index b888bb37..78f210fc 100644 --- a/assets/styles/css/choices.css +++ b/assets/styles/css/choices.css @@ -48,6 +48,8 @@ h1, h2, h3, h4, h5, h6 { border-radius: .25rem; font-size: 1.4rem; cursor: text; } + .is-active .choices__inner { + border-color: #c4c4c4; } .choices__inner:focus { outline: 1px solid #00BCD4; outline-offset: -1px; } @@ -83,7 +85,11 @@ h1, h2, h3, h4, h5, h6 { margin-top: -1px; display: none; border-bottom-left-radius: .25rem; - border-bottom-right-radius: .25rem; } + border-bottom-right-radius: .25rem; + max-height: 300px; + overflow: auto; } + .is-active .choices__list--dropdown { + border-color: #c4c4c4; } .choices__list--dropdown .choices__item { padding: 1rem; font-size: 1.4rem; } diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css index 054675f9..5bd0e571 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:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;cursor:text}.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:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00b1c7;color:#fff;word-break:break-all}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;display:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable:hover{background-color:#f9f9f9}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices__group .choices__heading{font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.choices__input{background-color:#f9f9f9;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 +*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;cursor:text}.is-active .choices__inner{border-color:#c4c4c4}.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:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00b1c7;color:#fff;word-break:break-all}.choices__list--items .choices__item.is-selected{background-color:#00a5bb}.choices__list--dropdown{z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;display:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto}.is-active .choices__list--dropdown{border-color:#c4c4c4}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable:hover{background-color:#f9f9f9}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices__group .choices__heading{font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.choices__input{background-color:#f9f9f9;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 782c4f9b..baf78301 100644 --- a/assets/styles/scss/choices.scss +++ b/assets/styles/scss/choices.scss @@ -59,6 +59,7 @@ h1, h2, h3, h4, h5, h6 { border-radius: .25rem; font-size: 1.4rem; cursor: text; + .is-active & { border-color: darken(#DDDDDD, 10%); } &:focus { outline: 1px solid #00BCD4; outline-offset: -1px; @@ -101,6 +102,9 @@ h1, h2, h3, h4, h5, h6 { display: none; border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; + max-height: 300px; + overflow: auto; + .is-active & { border-color: darken(#DDDDDD, 10%); } .choices__item { padding: 1rem; font-size: 1.4rem; diff --git a/index.html b/index.html index 693a81eb..1a79069c 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ - +