From b45715c5bea8bd195d9e5e6eea711b3067128a4f Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Wed, 29 Jun 2016 14:47:58 +0100 Subject: [PATCH] Sort choices by label --- assets/scripts/dist/choices.min.js | 4 +- assets/scripts/src/actions/index.js | 2 +- assets/scripts/src/choices.js | 231 +++++++++++++------------ assets/scripts/src/lib/utils.js | 11 +- assets/scripts/src/reducers/choices.js | 7 +- index.html | 12 +- 6 files changed, 144 insertions(+), 123 deletions(-) diff --git a/assets/scripts/dist/choices.min.js b/assets/scripts/dist/choices.min.js index b05a18d..1db8f3f 100644 --- a/assets/scripts/dist/choices.min.js +++ b/assets/scripts/dist/choices.min.js @@ -1,2 +1,2 @@ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return e[n].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var i={};return t.m=e,t.c=i,t.p="/assets/scripts/dist/",t(0)}([function(e,t,i){e.exports=i(1)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function s(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t1)for(var s=1;s=document.body.offsetHeight;return t?this.containerOuter.classList.add(this.options.classNames.flippedState):this.containerOuter.classList.remove(this.options.classNames.flippedState),this}},{key:"hideDropdown",value:function(){var e=this.containerOuter.classList.contains(this.options.classNames.flippedState);return this.containerOuter.classList.remove(this.options.classNames.openState),this.dropdown.classList.remove(this.options.classNames.activeState),e&&this.containerOuter.classList.remove(this.options.classNames.flippedState),this}},{key:"toggleDropdown",value:function(){var e=this.dropdown.classList.contains(this.options.classNames.activeState);return e?this.hideDropdown():this.showDropdown(),this}},{key:"setValue",value:function(e){var t=this,i=[].concat(s(e));return i.forEach(function(e,i){if((0,c.isType)("Object",e)){if(!e.value)return;"text"!==t.passedElement.type?t._addChoice(!0,!1,e.value,e.label,-1):t._addItem(e.value,e.label,e.id)}else(0,c.isType)("String",e)&&("text"!==t.passedElement.type?t._addChoice(!0,!1,e,e,-1):t._addItem(e))}),this}},{key:"clearValue",value:function(){return this.store.dispatch((0,a.clearAll)()),this}},{key:"disable",value:function(){return this.passedElement.disabled=!0,this.initialised&&(this.input.disabled=!0,this.containerOuter.classList.add(this.options.classNames.disabledState)),this}},{key:"ajax",value:function(e){var t=this;if("select-one"===this.passedElement.type||"select-multiple"===this.passedElement.type){this.containerOuter.classList.add("is-loading");var i=this._getTemplate("item",{id:-1,value:"Loading",label:this.options.loadingText,active:!0});this.itemList.appendChild(i);var n=function(e,i,n){e&&e.length&&(t.containerOuter.classList.remove("is-loading"),t.input.placeholder="",e.forEach(function(e,s){0===s&&"select-one"===t.passedElement.type?t._addChoice(!0,!1,e[i],e[n]):t._addChoice(!1,!1,e[i],e[n])}))};e(n)}return this}},{key:"clearInput",value:function(){return this.input.value&&(this.input.value=""),"select-one"!==this.passedElement.type&&(this.input.style.width=(0,c.getWidthOfInput)(this.input)),this}},{key:"_handleEnter",value:function(e,t){var i=!0;if(this.options.addItems?this.options.maxItemCount&&this.options.maxItemCount>0&&this.options.maxItemCount<=this.itemList.children.length?i=!1:this.options.duplicateItems===!1&&this.passedElement.value&&(i=!e.some(function(e){return e.value===t})):i=!1,i){var n=!0;this.options.regexFilter&&(n=this._regexFilter(t)),n&&(this.toggleDropdown(),this._addItem(t),this.clearInput(this.passedElement))}}},{key:"_handleBackspace",value:function(e){if(this.options.removeItems&&e){var t=e[e.length-1],i=e.some(function(e){return e.selected===!0});this.options.editItems&&!i&&t?(this.input.value=t.value,this._removeItem(t)):(i||this.selectItem(t),this.removeSelectedItems())}}},{key:"_onKeyDown",value:function(e){if(e.target===this.input){var t=e.ctrlKey||e.metaKey,i=46,n=8,s=13,o=65,r=27,l=38,u=40,h=this.store.getItemsFilteredByActive(),d=(this.store.getChoicesFilteredByActive(),this.input===document.activeElement),p=this.dropdown.classList.contains(this.options.classNames.activeState),f=this.itemList&&this.itemList.children,v=String.fromCharCode(event.keyCode);switch("text"!==this.passedElement.type&&/[a-zA-Z0-9-_ ]/.test(v)&&!p&&this.showDropdown(),this.canSearch=this.options.searchOptions,e.keyCode){case o:t&&f&&(this.canSearch=!1,this.options.removeItems&&!this.input.value&&this.input===document.activeElement&&this.highlightAll(this.itemList.children));break;case s:if(e.target.value&&"text"===this.passedElement.type){var m=this.input.value;this._handleEnter(h,m)}if(p){var g=this.dropdown.querySelector("."+this.options.classNames.highlightedState);if(g){var y=g.getAttribute("data-value"),b=g.innerHTML,_=g.getAttribute("data-id");this._addItem(y,b,_),this.clearInput(this.passedElement),"select-one"===this.passedElement.type&&(this.isSearching=!1,this.store.dispatch((0,a.activateChoices)()),this.toggleDropdown())}}break;case r:p&&this.toggleDropdown();break;case u:case l:if(p){var E=this.dropdown.querySelector("."+this.options.classNames.highlightedState),I=e.keyCode===u?1:-1,w=void 0;this.canSearch=!1,w=E?(0,c.getAdjacentEl)(E,"[data-option-selectable]",I):this.dropdown.querySelector("[data-option-selectable]"),w&&((0,c.isScrolledIntoView)(w,this.choiceList,I)||this._scrollToChoice(w,I),this._highlightChoice(w)),e.preventDefault()}break;case i:case n:d&&!e.target.value&&"select-one"!==this.passedElement.type&&(this._handleBackspace(h),e.preventDefault())}}}},{key:"_onKeyUp",value:function(e){var t=this;if(e.target===this.input){var i=String.fromCharCode(event.keyCode);if("text"===this.passedElement.type){var n=this.dropdown.classList.contains(this.options.classNames.activeState),s=void 0;if(this.input.value){var o=this.store.getItemsFilteredByActive(),r=!o.some(function(e){return e.value===t.input.value});s=this.options.maxItemCount&&this.options.maxItemCount>0&&this.options.maxItemCount<=this.itemList.children.length?this._getTemplate("notice","Only "+this.options.maxItemCount+" options can be added."):this.options.duplicateItems||r?this._getTemplate("notice",'Add "'+this.input.value+'"'):this._getTemplate("notice","Only unique values can be added."),(this.options.regexFilter&&this._regexFilter(this.input.value)||!this.options.regexFilter)&&(this.dropdown.innerHTML=s.outerHTML,this.dropdown.classList.contains(this.options.classNames.activeState)||this.showDropdown())}else n&&this.hideDropdown()}if(this.canSearch&&this.input===document.activeElement){var c=this.store.getChoices(),l=c.some(function(e){return e.active!==!0});if(this.input.value&&c.length&&/[a-zA-Z0-9-_ ]/.test(i)){var h=function(){var e=t.input.value.trim(),i=t.currentValue.trim();if(e.length>=1&&e!==i+" "){var n=t.store.getChoicesFiltedBySelectable(),s=e,o=new u.default(n,{keys:["label","value"],shouldSort:!0,include:"score"}),r=o.search(s);t.currentValue=e,t.highlightPosition=0,t.isSearching=!0,t.store.dispatch((0,a.filterChoices)(r))}};h()}else l&&(this.isSearching=!1,this.store.dispatch((0,a.activateChoices)()))}}}},{key:"_onInput",value:function(e){"select-one"!==this.passedElement.type&&(this.input.style.width=(0,c.getWidthOfInput)(this.input))}},{key:"_onMouseDown",value:function(e){var t=this;if(2!==e.button){var i=this.store.getItemsFilteredByActive();if(this.containerOuter.contains(e.target))!function(){e.preventDefault();var n=!!e.shiftKey;"text"===t.passedElement.type||t.dropdown.classList.contains(t.options.classNames.activeState)||t.showDropdown(),t.input!==document.activeElement&&t.input.focus(),e.target.hasAttribute("data-button")?t.options.removeItems&&t.options.removeItemButton&&!function(){var n=e.target.parentNode.getAttribute("data-id"),s=i.find(function(e){return e.id===parseInt(n)});t._removeItem(s)}():e.target.hasAttribute("data-item")?t.options.removeItems&&!function(){var s=e.target.getAttribute("data-id");i.forEach(function(e){e.id!==parseInt(s)||e.selected?n||t.deselectItem(e):t.selectItem(e)})}():e.target.hasAttribute("data-option")&&!function(){var i=t.store.getChoicesFilteredByActive(),n=e.target.getAttribute("data-id"),s=i.find(function(e){return e.id===parseInt(n)});s.selected||s.disabled||(t._addItem(s.value,s.label,s.id),"select-one"===t.passedElement.type&&(t.input.value="",t.isSearching=!1,t.store.dispatch((0,a.activateChoices)(!0)),t.toggleDropdown()))}()}();else{var n=this.dropdown.classList.contains(this.options.classNames.activeState),s=i.some(function(e){return e.selected===!0});s&&this.unhighlightAll(),this.containerOuter.classList.remove(this.options.classNames.focusState),n&&this.toggleDropdown()}}}},{key:"_onMouseOver",value:function(e){(e.target===this.dropdown||(0,c.findAncestor)(e.target,this.options.classNames.listDropdown))&&e.target.hasAttribute("data-option")&&this._highlightChoice(e.target)}},{key:"_onPaste",value:function(e){e.target===this.input&&(this.options.paste||e.preventDefault())}},{key:"_onFocus",value:function(e){var t=this.dropdown.classList.contains(this.options.classNames.activeState);e.target!==this.input||t||(this.containerOuter.classList.add(this.options.classNames.focusState),"select-one"!==this.passedElement.type&&"select-multiple"!==this.passedElement.type||this.showDropdown())}},{key:"_onBlur",value:function(e){var t=this.dropdown.classList.contains(this.options.classNames.activeState);e.target!==this.input||t?this.hideDropdown():this.containerOuter.classList.remove(this.options.classNames.focusState)}},{key:"_regexFilter",value:function(e){if(e){var t=new RegExp(this.options.regexFilter,"i");return t.test(e)}}},{key:"_scrollToChoice",value:function(e,t){var i=this;if(e){var n=this.choiceList.offsetHeight,s=e.offsetHeight,o=e.offsetTop+s,r=this.choiceList.scrollTop+n,a=t>0?this.choiceList.scrollTop+o-r:e.offsetTop,c=function l(e,t,n){var s=!1,o=void 0,r=void 0,a=4;n>0?(o=(t-i.choiceList.scrollTop)/a,r=o>1?o:1,i.choiceList.scrollTop=i.choiceList.scrollTop+r,i.choiceList.scrollTop1?o:1,i.choiceList.scrollTop=i.choiceList.scrollTop-r,i.choiceList.scrollTop>t&&(s=!0)),s&&requestAnimationFrame(function(e){l(e,t,n)})};requestAnimationFrame(function(e){c(e,a,t)})}}},{key:"_highlightChoice",value:function(e){var t=this,i=Array.from(this.dropdown.querySelectorAll("[data-option-selectable]"));if(i&&i.length){var n=Array.from(this.dropdown.querySelectorAll("."+this.options.classNames.highlightedState));if(n.forEach(function(e){e.classList.remove(t.options.classNames.highlightedState)}),e)e.classList.add(this.options.classNames.highlightedState),this.highlightPosition=i.indexOf(e);else{var s=void 0;s=i.length>this.highlightPosition?i[this.highlightPosition]:i[i.length-1],s||(s=i[0]),s.classList.add(this.options.classNames.highlightedState)}}}},{key:"_addItem",value:function(e,t){var i=arguments.length<=2||void 0===arguments[2]?-1:arguments[2],n=arguments.length<=3||void 0===arguments[3]?this.options.callbackOnAddItem:arguments[3],s=this.store.getItems(),o=e.trim(),r=t||o,l=i||-1;this.options.prependValue&&(o=this.options.prependValue+o.toString()),this.options.appendValue&&(o+=this.options.appendValue.toString());var u=s?s.length+1:1;return this.store.dispatch((0,a.addItem)(o,r,u,l)),"select-one"===this.passedElement.type&&this.removeActiveItems(u),n&&((0,c.isType)("Function",n)?n(u,o,this.passedElement):console.error("callbackOnAddItem: Callback is not a function")),this}},{key:"_removeItem",value:function(e){var t=arguments.length<=1||void 0===arguments[1]?this.options.callbackOnRemoveItem:arguments[1];if(!e||!(0,c.isType)("Object",e))return void console.error("removeItem: No item object was passed to be removed");var i=e.id,n=(e.value,e.choiceId);return this.store.dispatch((0,a.removeItem)(i,n)),t?void((0,c.isType)("Function",t)||console.error("callbackOnRemoveItem: Callback is not a function")):this}},{key:"_addChoice",value:function(e,t,i,n){var s=arguments.length<=4||void 0===arguments[4]?-1:arguments[4];if(i){n||(n=i);var o=this.store.getChoices(),r=o?o.length+1:1;this.store.dispatch((0,a.addChoice)(i,n,r,s,t)),e&&!t&&this._addItem(i,n,r)}}},{key:"_addGroup",value:function(e,t,i){var n=this,s=Array.from(e.getElementsByTagName("OPTION")),o=t;s?(this.store.dispatch((0,a.addGroup)(e.label,o,!0,e.disabled)),s.forEach(function(e,t){var i=e.disabled||e.parentNode.disabled;n._addChoice(e.selected,i,e.value,e.innerHTML,o)})):this.store.dispatch((0,a.addGroup)(e.label,e.id,!1,e.disabled))}},{key:"_getTemplate",value:function(e){if(e){for(var t=this.options.templates,i=arguments.length,n=Array(i>1?i-1:0),s=1;i>s;s++)n[s-1]=arguments[s];return t[e].apply(t,n)}}},{key:"_createTemplates",value:function(){var e=this,t=this.options.classNames,i={containerOuter:function(){return(0,c.strToEl)('
')},containerInner:function(){return(0,c.strToEl)('
')},itemList:function(){return(0,c.strToEl)('
')},choiceList:function(){return(0,c.strToEl)('
')},input:function(){return(0,c.strToEl)('')},dropdown:function(){return(0,c.strToEl)('
')},notice:function(e,i){return(0,c.strToEl)('
'+e+"
")},selectOption:function(e){return(0,c.strToEl)('")},option:function(e){return(0,c.strToEl)('\n
\n '+e.label+"\n
\n ")},optgroup:function(e){return(0,c.strToEl)('\n
\n
'+e.value+"
\n
\n ")},item:function(i){return e.options.removeItemButton&&"select-one"!==e.passedElement.type?(0,c.strToEl)('\n
\n '+i.label+'\n \n
\n '):(0,c.strToEl)('\n
\n '+i.label+"\n
\n ")}};this.options.templates=(0,c.extend)(this.options.templates,i)}},{key:"_createInput",value:function(){var e=this,t=this._getTemplate("containerOuter"),i=this._getTemplate("containerInner"),n=this._getTemplate("itemList"),s=this._getTemplate("choiceList"),o=this._getTemplate("input"),r=this._getTemplate("dropdown");if(this.containerOuter=t,this.containerInner=i,this.input=o,this.choiceList=s,this.itemList=n,this.dropdown=r,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"),this.passedElement.removeAttribute("data-choice"),(0,c.wrap)(this.passedElement,i),(0,c.wrap)(i,t),this.options.placeholder&&(this.options.placeholderValue||this.passedElement.placeholder)){var a=this.options.placeholderValue||this.passedElement.placeholder;o.placeholder=a,"select-one"!==this.passedElement.type&&(o.style.width=(0,c.getWidthOfInput)(o))}if(this.options.addItems||this.disable(),t.appendChild(i),t.appendChild(r),i.appendChild(n),r.appendChild(s),"select-multiple"===this.passedElement.type||"text"===this.passedElement.type?i.appendChild(o):this.options.searchOptions&&r.insertBefore(o,r.firstChild),"select-multiple"===this.passedElement.type||"select-one"===this.passedElement.type){this.highlightPosition=0;var l=Array.from(this.passedElement.getElementsByTagName("OPTGROUP"));if(this.isSearching=!1,l&&l.length)l.forEach(function(t,i){var n=0===i;e._addGroup(t,i,n)});else{var u=Array.from(this.passedElement.options);u.forEach(function(t){var i=t.disabled||t.parentNode.disabled;e._addChoice(t.selected,i,t.value,t.innerHTML)})}}else"text"===this.passedElement.type&&this.presetItems.forEach(function(t){if((0,c.isType)("Object",t)){if(!t.value)return;e._addItem(t.value,t.label,t.id)}else(0,c.isType)("String",t)&&e._addItem(t)})}},{key:"renderGroups",value:function(e,t,i){var n=this,s=i||document.createDocumentFragment();return e.forEach(function(e,i){var o=t.filter(function(t){return"select-one"===n.passedElement.type?t.groupId===e.id:t.groupId===e.id&&!t.selected});if(o.length>=1){var r=n._getTemplate("optgroup",e);s.appendChild(r),n.renderChoices(o,s)}}),s}},{key:"renderChoices",value:function(e,t){var i=this,n=t||document.createDocumentFragment();return e.forEach(function(e,t){var s=i._getTemplate("option",e);"select-one"===i.passedElement.type?n.appendChild(s):e.selected||n.appendChild(s)}),n}},{key:"renderItems",value:function(e,t){var i=this,n=t||document.createDocumentFragment(),s=this.store.getItemsReducedToValues(e);return"text"===this.passedElement.type?this.passedElement.setAttribute("value",s.join(this.options.delimiter)):!function(){var t=document.createDocumentFragment();e.forEach(function(e){var n=i._getTemplate("selectOption",e);t.appendChild(n)}),i.passedElement.innerHTML="",i.passedElement.appendChild(t)}(),e.forEach(function(e){var t=i._getTemplate("item",e);n.appendChild(t)}),n}},{key:"render",value:function(){if(this.currentState=this.store.getState(),this.currentState!==this.prevState){if(!(this.currentState.choices===this.prevState.choices&&this.currentState.groups===this.prevState.groups||"select-multiple"!==this.passedElement.type&&"select-one"!==this.passedElement.type)){var e=this.store.getGroupsFilteredByActive(),t=this.store.getChoicesFilteredByActive(),i=document.createDocumentFragment();if(this.choiceList.innerHTML="",e.length>=1&&this.isSearching!==!0?i=this.renderGroups(e,t,i):t.length>=1&&(i=this.renderChoices(t,i)),i.children.length)this.choiceList.appendChild(i),this._highlightChoice();else{var n=this.isSearching?this._getTemplate("notice","No results found"):this._getTemplate("notice","No choices to choose from");this.choiceList.appendChild(n)}}if(this.currentState.items!==this.prevState.items){var s=this.store.getItemsFilteredByActive();if(s){var o=this.renderItems(s);this.itemList.innerHTML="",o.children.length&&this.itemList.appendChild(o)}}this.prevState=this.currentState}}},{key:"_addEventListeners",value:function(){document.addEventListener("keyup",this._onKeyUp),document.addEventListener("keydown",this._onKeyDown),document.addEventListener("mousedown",this._onMouseDown),document.addEventListener("mouseover",this._onMouseOver),this.input.addEventListener("input",this._onInput),this.input.addEventListener("paste",this._onPaste),this.input.addEventListener("focus",this._onFocus),this.input.addEventListener("blur",this._onBlur)}},{key:"_removeEventListeners",value:function(){document.removeEventListener("keyup",this._onKeyUp),document.removeEventListener("keydown",this._onKeyDown),document.removeEventListener("mousedown",this._onMouseDown),document.removeEventListener("mouseover",this._onMouseOver),this.input.removeEventListener("input",this._onInput),this.input.removeEventListener("paste",this._onPaste),this.input.removeEventListener("focus",this._onFocus),this.input.removeEventListener("blur",this._onBlur)}}]),e}();window.Choices=e.exports=p},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.addItem=function(e,t,i,n){return{type:"ADD_ITEM",value:e,label:t,id:i,choiceId:n}},t.removeItem=function(e,t){return{type:"REMOVE_ITEM",id:e,choiceId:t}},t.selectItem=function(e,t){return{type:"SELECT_ITEM",id:e,selected:t}},t.addChoice=function(e,t,i,n,s){return{type:"ADD_CHOICE",value:e,label:t,id:i,groupId:n,disabled:s}},t.filterChoices=function(e){return{type:"FILTER_CHOICES",results:e}},t.activateChoices=function(){var e=arguments.length<=0||void 0===arguments[0]?!0:arguments[0];return{type:"ACTIVATE_OPTIONS",active:e}},t.addGroup=function(e,t,i,n){return{type:"ADD_GROUP",value:e,id:t,active:i,disabled:n}},t.clearAll=function(){return{type:"CLEAR_ALL"}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=(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 i=Object.prototype.toString.call(t).slice(8,-1);return void 0!==t&&null!==t&&i===e}),n=(t.extend=function o(){for(var e={},t=!1,n=arguments.length,s=function(n){for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t&&i("Object",n[s])?e[s]=o(!0,e[s],n[s]):e[s]=n[s])},r=0;n>r;r++){var a=arguments[r];i("Object",a)?s(a):console.error("Custom options must be an object")}return e},t.whichTransitionEvent=function(){var e,t=document.createElement("fakeelement"),i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in i)if(void 0!==t.style[e])return i[e]},t.whichAnimationEvent=function(){var e,t=document.createElement("fakeelement"),i={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in i)if(void 0!==t.style[e])return i[e]}),s=(t.getParentsUntil=function(e,t,i){for(var n=[];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(i){var o=i.charAt(0);"."===o&&e.classList.contains(i.substr(1))&&n.push(e),"#"===o&&e.id===i.substr(1)&&n.push(e),"["===o&&e.hasAttribute(i.substr(1,i.length-1))&&n.push(e),e.tagName.toLowerCase()===i&&n.push(e)}else n.push(e)}return 0===n.length?null:n},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=[],i=e.parentNode.firstChild;i;i=i.nextSibling)1===i.nodeType&&i!==e&&t.push(i);return t},t.findAncestor=function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e},t.debounce=function(e,t,i){var n;return function(){var s=this,o=arguments,r=function(){n=null,i||e.apply(s,o)},a=i&&!n;clearTimeout(n),n=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 i=t;return i>1&&(i=1),i>0&&(i=0),Math.max(e.offsetHeight*i)},t.getAdjacentEl=function(e,t){var i=arguments.length<=2||void 0===arguments[2]?1:arguments[2];if(e&&t){var n=e.parentNode.parentNode,s=Array.from(n.querySelectorAll(t)),o=s.indexOf(e),r=i>0?1:-1;return s[o+r]}},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,i){return this.getScrollPosition(t)>this.getElemDistance(e)+this.getElementOffset(e,i)},t.isScrolledIntoView=function(e,t){var i=arguments.length<=2||void 0===arguments[2]?1:arguments[2];if(e){var n=void 0;return n=i>0?t.scrollTop+t.offsetHeight>=e.offsetTop+e.offsetHeight:e.offsetTop>=t.scrollTop}},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(),s=function o(){e.classList.remove(t),e.removeEventListener(i,o,!1)};e.classList.add(t),e.addEventListener(i,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 i;for(e.innerHTML=t,i=e.children[0];e.firstChild;)e.removeChild(e.firstChild);return i}}());t.getWidthOfInput=function(e){var t=e.value||e.placeholder,i=e.offsetWidth;if(t){var n=s(""+t+"");n.style.position="absolute",n.style.padding="0",n.style.top="-9999px",n.style.left="-9999px",n.style.width="auto",n.style.whiteSpace="pre",document.body.appendChild(n),t&&n.offsetWidth!==e.offsetWidth&&(i=n.offsetWidth+4),document.body.removeChild(n)}return i+"px"}},function(e,t,i){!function(t){"use strict";function i(){console.log.apply(console,arguments)}function n(e,t){var i,n,s,o;for(this.list=e,this.options=t=t||{},i=0,o=["sort","shouldSort","verbose","tokenize"],n=o.length;n>i;i++)s=o[i],this.options[s]=s in t?t[s]:c[s];for(i=0,o=["searchFn","sortFn","keys","getFn","include"],n=o.length;n>i;i++)s=o[i],this.options[s]=t[s]||c[s]}function s(e,t,i){var n,r,a,c,l,u;if(t){if(a=t.indexOf("."),-1!==a?(n=t.slice(0,a),r=t.slice(a+1)):n=t,c=e[n],null!==c&&void 0!==c)if(r||"string"!=typeof c&&"number"!=typeof c)if(o(c))for(l=0,u=c.length;u>l;l++)s(c[l],r,i);else r&&s(c,r,i);else i.push(c)}else i.push(e);return i}function o(e){return"[object Array]"===Object.prototype.toString.call(e)}function r(e,t){t=t||{},this.options=t,this.options.location=t.location||r.defaultOptions.location,this.options.distance="distance"in t?t.distance:r.defaultOptions.distance,this.options.threshold="threshold"in t?t.threshold:r.defaultOptions.threshold,this.options.maxPatternLength=t.maxPatternLength||r.defaultOptions.maxPatternLength,this.pattern=t.caseSensitive?e:e.toLowerCase(),this.patternLen=e.length,this.patternLen<=this.options.maxPatternLength&&(this.matchmask=1<s;s++)this.tokenSearchers.push(new i(n[s],e));this.fullSeacher=new i(t,e)},n.prototype._startSearch=function(){var e,t,i,n,s=this.options,o=s.getFn,r=this.list,a=r.length,c=this.options.keys,l=c.length,u=null;if("string"==typeof r[0])for(i=0;a>i;i++)this._analyze("",r[i],i,i);else for(this._keyMap={},i=0;a>i;i++)for(u=r[i],n=0;l>n;n++){if(e=c[n],"string"!=typeof e){if(t=1-e.weight||1,this._keyMap[e.name]={weight:t},e.weight<=0||e.weight>1)throw new Error("Key weight has to be > 0 and <= 1");e=e.name}else this._keyMap[e]={weight:1};this._analyze(e,o(u,e,[]),u,i)}},n.prototype._analyze=function(e,t,n,s){var r,c,l,u,h,d,p,f,v,m,g,y,b,_,E,I=this.options,w=!1; -if(void 0!==t&&null!==t)if(c=[],"string"==typeof t){if(r=t.split(a),I.verbose&&i("---------\nKey:",e),I.verbose&&i("Record:",r),this.options.tokenize){for(l=this.tokenSearchers,u=l.length,_=0;__;_++)d+=c[_];d/=f,I.verbose&&i("Token score average:",d)}v=this.fullSeacher.search(t),I.verbose&&i("Full text score:",v.score),p=v.score,void 0!==d&&(p=(p+d)/2),I.verbose&&i("Score average:",p),(w||v.isMatch)&&(h=this.resultMap[s],h?h.output.push({key:e,score:p,matchedIndices:v.matchedIndices}):(this.resultMap[s]={item:n,output:[{key:e,score:p,matchedIndices:v.matchedIndices}]},this.results.push(this.resultMap[s])))}else if(o(t))for(_=0;_t;t++)r=s[t].score,a=u?u[s[t].key].weight:1,l=r*a,1!==a?c=Math.min(c,l):(n+=l,s[t].nScore=l);1===c?h[e].score=n/o:h[e].score=c,this.options.verbose&&i(h[e])}},n.prototype._sort=function(){var e=this.options;e.shouldSort&&(e.verbose&&i("\n\nSorting...."),this.results.sort(e.sortFn))},n.prototype._format=function(){var e,t,n,s,o,r=this.options,a=r.getFn,c=[],l=this.results,u=r.include;for(r.verbose&&i("\n\nOutput:\n\n",l),s=r.id?function(e){l[e].item=a(l[e].item,r.id,[])[0]}:function(){},o=function(e){var t,i,n,s,o,r=l[e];if(u.length>0){if(t={item:r.item},-1!==u.indexOf("matches"))for(n=r.output,t.matches=[],i=0;it;t++)s(t),e=o(t),c.push(e);return c},r.defaultOptions={location:0,distance:100,threshold:.6,maxPatternLength:32},r.prototype._calculatePatternAlphabet=function(){var e={},t=0;for(t=0;tS.maxPatternLength){if(y=e.match(new RegExp(this.pattern.replace(a,"|"))),b=!!y)for(E=[],t=0,I=y.length;I>t;t++)w=y[t],E.push([e.indexOf(w),w.length-1]);return{isMatch:b,score:b?.5:1,matchedIndices:E}}for(s=S.location,n=e.length,o=S.threshold,r=e.indexOf(this.pattern,s),_=[],t=0;n>t;t++)_[t]=0;for(-1!=r&&(o=Math.min(this._bitapScore(0,r),o),r=e.lastIndexOf(this.pattern,s+this.patternLen),-1!=r&&(o=Math.min(this._bitapScore(0,r),o))),r=-1,m=1,g=[],u=this.patternLen+n,t=0;tc;)this._bitapScore(t,s+l)<=o?c=l:u=l,l=Math.floor((u-c)/2+c);for(u=l,h=Math.max(1,s-l+1),d=Math.min(s+l,n)+this.patternLen,p=Array(d+2),p[d+1]=(1<=h;i--)if(v=this.patternAlphabet[e.charAt(i-1)],v&&(_[i-1]=1),0===t?p[i]=(p[i+1]<<1|1)&v:p[i]=(p[i+1]<<1|1)&v|((f[i+1]|f[i])<<1|1)|f[i+1],p[i]&this.matchmask&&(m=this._bitapScore(t,i-1),o>=m)){if(o=m,r=i-1,g.push(r),!(r>s))break;h=Math.max(1,2*s-r)}if(this._bitapScore(t+1,s)>o)break;f=p}return E=this._getMatchedIndices(_),{isMatch:r>=0,score:0===m?.001:m,matchedIndices:E}},r.prototype._getMatchedIndices=function(e){for(var t,i=[],n=-1,s=-1,o=0,r=r=e.length;r>o;o++)t=e[o],t&&-1===n?n=o:t||-1===n||(s=o-1,i.push([n,s]),n=-1);return e[o-1]&&i.push([n,o-1]),i},e.exports=n}(this)},function(e,t,i){"use strict";function n(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.Store=void 0;var o=function(){function e(e,t){for(var i=0;ii;i++)t[i]=arguments[i];return function(e){return function(i,n,s){var r=e(i,n,s),c=r.dispatch,l=[],u={getState:r.getState,dispatch:function(e){return c(e)}};return l=t.map(function(e){return e(u)}),c=a.default.apply(void 0,l)(r.dispatch),o({},r,{dispatch:c})}}}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;ti;i++)t[i]=arguments[i];if(0===t.length)return function(e){return e};var n=function(){var e=t[t.length-1],i=t.slice(0,-1);return{v:function(){return i.reduceRight(function(e,t){return t(e)},e.apply(void 0,arguments))}}}();return"object"==typeof n?n.v:void 0}t.__esModule=!0,t.default=i},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),o=i(20),r=n(o),a=i(21),c=n(a),l=i(22),u=n(l),h=(0,s.combineReducers)({items:r.default,groups:c.default,choices:u.default}),d=function(e,t){return"CLEAR_ALL"===t.type&&(e=void 0),h(e,t)};t.default=d},function(e,t){"use strict";function i(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t-1?e.map(function(e){return e.id===parseInt(t.choiceId)&&(e.selected=!0),e}):e;case"REMOVE_ITEM":return t.choiceId>-1?e.map(function(e){return e.id===parseInt(t.choiceId)&&(e.selected=!1),e}):e;case"FILTER_CHOICES":var n=t.results,s=e.map(function(e,t){return e.active=n.some(function(t){return t.item.id===e.id?(e.score=t.score,!0):void 0}),e}).sort(function(e,t){return e.score-t.score});return s;case"ACTIVATE_CHOICES":return e.map(function(e){return e.active=t.active,e});default:return e}};t.default=n}]); \ No newline at end of file +!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return e[n].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var i={};return t.m=e,t.c=i,t.p="/assets/scripts/dist/",t(0)}([function(e,t,i){e.exports=i(1)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function s(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t1)for(var s=1;s=document.body.offsetHeight;return t?this.containerOuter.classList.add(this.config.classNames.flippedState):this.containerOuter.classList.remove(this.config.classNames.flippedState),this}},{key:"hideDropdown",value:function(){var e=this.containerOuter.classList.contains(this.config.classNames.flippedState);return this.containerOuter.classList.remove(this.config.classNames.openState),this.dropdown.classList.remove(this.config.classNames.activeState),e&&this.containerOuter.classList.remove(this.config.classNames.flippedState),this}},{key:"toggleDropdown",value:function(){return this.dropdown.classList.contains(this.config.classNames.activeState)?this.hideDropdown():this.showDropdown(),this}},{key:"setValue",value:function(e){var t=this,i=[].concat(s(e));return i.forEach(function(e,i){if((0,c.isType)("Object",e)){if(!e.value)return;"text"!==t.passedElement.type?t._addChoice(!0,!1,e.value,e.label,-1):t._addItem(e.value,e.label,e.id)}else(0,c.isType)("String",e)&&("text"!==t.passedElement.type?t._addChoice(!0,!1,e,e,-1):t._addItem(e))}),this}},{key:"clearValue",value:function(){return this.store.dispatch((0,a.clearAll)()),this}},{key:"disable",value:function(){return this.passedElement.disabled=!0,this.initialised&&(this.input.disabled=!0,this.containerOuter.classList.add(this.config.classNames.disabledState)),this}},{key:"ajax",value:function(e){var t=this;if(this.initialised===!0&&("select-one"===this.passedElement.type||"select-multiple"===this.passedElement.type)){this.containerOuter.classList.add("is-loading");var i=this._getTemplate("item",{id:-1,value:"Loading",label:this.config.loadingText,active:!0});this.itemList.appendChild(i);var n=function(e,i,n){(0,c.isType)("Array",e)&&i&&e&&e.length&&(t.containerOuter.classList.remove("is-loading"),t.input.placeholder="",e.forEach(function(e,s){0===s&&"select-one"===t.passedElement.type?t._addChoice(!0,!1,e[i],e[n]):t._addChoice(!1,!1,e[i],e[n])}))};e(n)}return this}},{key:"clearInput",value:function(){return this.input.value&&(this.input.value=""),"select-one"!==this.passedElement.type&&(this.input.style.width=(0,c.getWidthOfInput)(this.input)),this}},{key:"_handleEnter",value:function(e,t){var i=!0;if(this.config.addItems?this.config.maxItemCount&&this.config.maxItemCount>0&&this.config.maxItemCount<=this.itemList.children.length?i=!1:this.config.duplicateItems===!1&&this.passedElement.value&&(i=!e.some(function(e){return e.value===t})):i=!1,i){var n=!0;this.config.regexFilter&&(n=this._regexFilter(t)),n&&(this.toggleDropdown(),this._addItem(t),this.clearInput(this.passedElement))}}},{key:"_handleBackspace",value:function(e){if(this.config.removeItems&&e){var t=e[e.length-1],i=e.some(function(e){return e.selected===!0});this.config.editItems&&!i&&t?(this.input.value=t.value,this._removeItem(t)):(i||this.selectItem(t),this.removeSelectedItems())}}},{key:"_onKeyDown",value:function(e){if(e.target===this.input){var t=e.ctrlKey||e.metaKey,i=46,n=8,s=13,o=65,r=27,l=38,u=40,h=this.store.getItemsFilteredByActive(),d=(this.store.getChoicesFilteredByActive(),this.input===document.activeElement),p=this.dropdown.classList.contains(this.config.classNames.activeState),f=this.itemList&&this.itemList.children,v=String.fromCharCode(event.keyCode);switch("text"!==this.passedElement.type&&/[a-zA-Z0-9-_ ]/.test(v)&&!p&&this.showDropdown(),this.canSearch=this.config.searchOptions,e.keyCode){case o:t&&f&&(this.canSearch=!1,this.config.removeItems&&!this.input.value&&this.input===document.activeElement&&this.highlightAll(this.itemList.children));break;case s:if(e.target.value&&"text"===this.passedElement.type){var m=this.input.value;this._handleEnter(h,m)}if(p){var g=this.dropdown.querySelector("."+this.config.classNames.highlightedState);if(g){var y=g.getAttribute("data-value"),b=g.innerHTML,_=g.getAttribute("data-id");this._addItem(y,b,_),this.clearInput(this.passedElement),"select-one"===this.passedElement.type&&(this.isSearching=!1,this.store.dispatch((0,a.activateChoices)()),this.toggleDropdown())}}break;case r:p&&this.toggleDropdown();break;case u:case l:if(p){var E=this.dropdown.querySelector("."+this.config.classNames.highlightedState),I=e.keyCode===u?1:-1,w=void 0;this.canSearch=!1,w=E?(0,c.getAdjacentEl)(E,"[data-option-selectable]",I):this.dropdown.querySelector("[data-option-selectable]"),w&&((0,c.isScrolledIntoView)(w,this.choiceList,I)||this._scrollToChoice(w,I),this._highlightChoice(w)),e.preventDefault()}break;case i:case n:d&&!e.target.value&&"select-one"!==this.passedElement.type&&(this._handleBackspace(h),e.preventDefault())}}}},{key:"_onKeyUp",value:function(e){var t=this;if(e.target===this.input){var i=String.fromCharCode(event.keyCode);if("text"===this.passedElement.type){var n=this.dropdown.classList.contains(this.config.classNames.activeState),s=void 0;if(this.input.value){var o=this.store.getItemsFilteredByActive(),r=!o.some(function(e){return e.value===t.input.value});s=this.config.maxItemCount&&this.config.maxItemCount>0&&this.config.maxItemCount<=this.itemList.children.length?this._getTemplate("notice","Only "+this.config.maxItemCount+" options can be added."):this.config.duplicateItems||r?this._getTemplate("notice",'Add "'+this.input.value+'"'):this._getTemplate("notice","Only unique values can be added."),(this.config.regexFilter&&this._regexFilter(this.input.value)||!this.config.regexFilter)&&(this.dropdown.innerHTML=s.outerHTML,this.dropdown.classList.contains(this.config.classNames.activeState)||this.showDropdown())}else n&&this.hideDropdown()}if(this.canSearch&&this.input===document.activeElement){var c=this.store.getChoices(),l=c.some(function(e){return e.active!==!0});if(this.input.value&&c.length&&/[a-zA-Z0-9-_ ]/.test(i)){var h=function(){var e=t.input.value.trim(),i=t.currentValue.trim();if(e.length>=1&&e!==i+" "){var n=t.store.getChoicesFiltedBySelectable(),s=e,o=new u.default(n,{keys:["label","value"],shouldSort:!0,include:"score"}),r=o.search(s);t.currentValue=e,t.highlightPosition=0,t.isSearching=!0,t.store.dispatch((0,a.filterChoices)(r))}};h()}else l&&(this.isSearching=!1,this.store.dispatch((0,a.activateChoices)(!0)))}}}},{key:"_onInput",value:function(e){"select-one"!==this.passedElement.type&&(this.input.style.width=(0,c.getWidthOfInput)(this.input))}},{key:"_onMouseDown",value:function(e){var t=this;if(2!==e.button){var i=this.store.getItemsFilteredByActive();if(this.containerOuter.contains(e.target))!function(){e.preventDefault();var n=!!e.shiftKey;"text"===t.passedElement.type||t.dropdown.classList.contains(t.config.classNames.activeState)||t.showDropdown(),t.input!==document.activeElement&&t.input.focus(),e.target.hasAttribute("data-button")?t.config.removeItems&&t.config.removeItemButton&&!function(){var n=e.target.parentNode.getAttribute("data-id"),s=i.find(function(e){return e.id===parseInt(n)});t._removeItem(s)}():e.target.hasAttribute("data-item")?t.config.removeItems&&!function(){var s=e.target.getAttribute("data-id");i.forEach(function(e){e.id!==parseInt(s)||e.selected?n||t.deselectItem(e):t.selectItem(e)})}():e.target.hasAttribute("data-option")&&!function(){var i=t.store.getChoicesFilteredByActive(),n=e.target.getAttribute("data-id"),s=i.find(function(e){return e.id===parseInt(n)});s.selected||s.disabled||(t._addItem(s.value,s.label,s.id),"select-one"===t.passedElement.type&&(t.input.value="",t.isSearching=!1,t.store.dispatch((0,a.activateChoices)(!0)),t.toggleDropdown()))}()}();else{var n=this.dropdown.classList.contains(this.config.classNames.activeState),s=i.some(function(e){return e.selected===!0});s&&this.unhighlightAll(),this.containerOuter.classList.remove(this.config.classNames.focusState),n&&this.toggleDropdown()}}}},{key:"_onMouseOver",value:function(e){(e.target===this.dropdown||(0,c.findAncestor)(e.target,this.config.classNames.listDropdown))&&e.target.hasAttribute("data-option")&&this._highlightChoice(e.target)}},{key:"_onPaste",value:function(e){e.target===this.input&&(this.config.paste||e.preventDefault())}},{key:"_onFocus",value:function(e){var t=this.dropdown.classList.contains(this.config.classNames.activeState);e.target!==this.input||t||(this.containerOuter.classList.add(this.config.classNames.focusState),"select-one"!==this.passedElement.type&&"select-multiple"!==this.passedElement.type||this.showDropdown())}},{key:"_onBlur",value:function(e){var t=this.dropdown.classList.contains(this.config.classNames.activeState);e.target!==this.input||t?this.hideDropdown():this.containerOuter.classList.remove(this.config.classNames.focusState)}},{key:"_regexFilter",value:function(e){if(e){var t=new RegExp(this.config.regexFilter,"i");return t.test(e)}}},{key:"_scrollToChoice",value:function(e,t){var i=this;if(e){var n=this.choiceList.offsetHeight,s=e.offsetHeight,o=e.offsetTop+s,r=this.choiceList.scrollTop+n,a=t>0?this.choiceList.scrollTop+o-r:e.offsetTop,c=function l(e,t,n){var s=!1,o=void 0,r=void 0,a=4;n>0?(o=(t-i.choiceList.scrollTop)/a,r=o>1?o:1,i.choiceList.scrollTop=i.choiceList.scrollTop+r,i.choiceList.scrollTop1?o:1,i.choiceList.scrollTop=i.choiceList.scrollTop-r,i.choiceList.scrollTop>t&&(s=!0)),s&&requestAnimationFrame(function(e){l(e,t,n)})};requestAnimationFrame(function(e){c(e,a,t)})}}},{key:"_highlightChoice",value:function(e){var t=this,i=Array.from(this.dropdown.querySelectorAll("[data-option-selectable]"));if(i&&i.length){var n=Array.from(this.dropdown.querySelectorAll("."+this.config.classNames.highlightedState));if(n.forEach(function(e){e.classList.remove(t.config.classNames.highlightedState)}),e)e.classList.add(this.config.classNames.highlightedState),this.highlightPosition=i.indexOf(e);else{var s=void 0;s=i.length>this.highlightPosition?i[this.highlightPosition]:i[i.length-1],s||(s=i[0]),s.classList.add(this.config.classNames.highlightedState)}}}},{key:"_addItem",value:function(e,t){var i=arguments.length<=2||void 0===arguments[2]?-1:arguments[2],n=arguments.length<=3||void 0===arguments[3]?this.config.callbackOnAddItem:arguments[3],s=this.store.getItems(),o=e.trim(),r=t||o,l=i||-1;this.config.prependValue&&(o=this.config.prependValue+o.toString()),this.config.appendValue&&(o+=this.config.appendValue.toString());var u=s?s.length+1:1;return this.store.dispatch((0,a.addItem)(o,r,u,l)),"select-one"===this.passedElement.type&&this.removeActiveItems(u),n&&((0,c.isType)("Function",n)?n(u,o,this.passedElement):console.error("callbackOnAddItem: Callback is not a function")),this}},{key:"_removeItem",value:function(e){var t=arguments.length<=1||void 0===arguments[1]?this.config.callbackOnRemoveItem:arguments[1];if(!e||!(0,c.isType)("Object",e))return void console.error("removeItem: No item object was passed to be removed");var i=e.id,n=(e.value,e.choiceId);return this.store.dispatch((0,a.removeItem)(i,n)),t?void((0,c.isType)("Function",t)||console.error("callbackOnRemoveItem: Callback is not a function")):this}},{key:"_addChoice",value:function(e,t,i,n){var s=arguments.length<=4||void 0===arguments[4]?-1:arguments[4];if(i){n||(n=i);var o=this.store.getChoices(),r=o?o.length+1:1;this.store.dispatch((0,a.addChoice)(i,n,r,s,t)),e&&!t&&this._addItem(i,n,r)}}},{key:"_addGroup",value:function(e,t,i){var n=this,s=Array.from(e.getElementsByTagName("OPTION")),o=t;s?(this.store.dispatch((0,a.addGroup)(e.label,o,!0,e.disabled)),s.forEach(function(e,t){var i=e.disabled||e.parentNode.disabled;n._addChoice(e.selected,i,e.value,e.innerHTML,o)})):this.store.dispatch((0,a.addGroup)(e.label,e.id,!1,e.disabled))}},{key:"_getTemplate",value:function(e){if(e){for(var t=this.config.templates,i=arguments.length,n=Array(i>1?i-1:0),s=1;i>s;s++)n[s-1]=arguments[s];return t[e].apply(t,n)}}},{key:"_createTemplates",value:function(){var e=this,t=this.config.classNames,i={containerOuter:function(){return(0,c.strToEl)('
')},containerInner:function(){return(0,c.strToEl)('
')},itemList:function(){return(0,c.strToEl)('
')},choiceList:function(){return(0,c.strToEl)('
')},input:function(){return(0,c.strToEl)('')},dropdown:function(){return(0,c.strToEl)('
')},notice:function(e,i){return(0,c.strToEl)('
'+e+"
")},selectOption:function(e){return(0,c.strToEl)('")},option:function(e){return(0,c.strToEl)('\n
\n '+e.label+"\n
\n ")},optgroup:function(e){return(0,c.strToEl)('\n
\n
'+e.value+"
\n
\n ")},item:function(i){return e.config.removeItemButton&&"select-one"!==e.passedElement.type?(0,c.strToEl)('\n
\n '+i.label+'\n \n
\n '):(0,c.strToEl)('\n
\n '+i.label+"\n
\n ")}};this.config.templates=(0,c.extend)(this.config.templates,i)}},{key:"_createInput",value:function(){var e=this,t=this._getTemplate("containerOuter"),i=this._getTemplate("containerInner"),n=this._getTemplate("itemList"),s=this._getTemplate("choiceList"),o=this._getTemplate("input"),r=this._getTemplate("dropdown");if(this.containerOuter=t,this.containerInner=i,this.input=o,this.choiceList=s,this.itemList=n,this.dropdown=r,this.passedElement.classList.add(this.config.classNames.input,this.config.classNames.hiddenState),this.passedElement.tabIndex="-1",this.passedElement.setAttribute("style","display:none;"),this.passedElement.setAttribute("aria-hidden","true"),this.passedElement.setAttribute("data-choice",""),(0,c.wrap)(this.passedElement,i),(0,c.wrap)(i,t),this.config.placeholder&&(this.config.placeholderValue||this.passedElement.placeholder)){var a=this.config.placeholderValue||this.passedElement.placeholder;o.placeholder=a,"select-one"!==this.passedElement.type&&(o.style.width=(0,c.getWidthOfInput)(o))}if(this.config.addItems||this.disable(),t.appendChild(i),t.appendChild(r),i.appendChild(n),r.appendChild(s),"select-multiple"===this.passedElement.type||"text"===this.passedElement.type?i.appendChild(o):this.config.searchOptions&&r.insertBefore(o,r.firstChild),"select-multiple"===this.passedElement.type||"select-one"===this.passedElement.type){this.highlightPosition=0;var l=Array.from(this.passedElement.getElementsByTagName("OPTGROUP"));if(this.isSearching=!1,l&&l.length)l.forEach(function(t,i){var n=0===i;e._addGroup(t,i,n)});else{var u=Array.from(this.passedElement.options);u.forEach(function(t){var i=t.disabled||t.parentNode.disabled;e._addChoice(t.selected,i,t.value,t.innerHTML)})}}else"text"===this.passedElement.type&&this.presetItems.forEach(function(t){if((0,c.isType)("Object",t)){if(!t.value)return;e._addItem(t.value,t.label,t.id)}else(0,c.isType)("String",t)&&e._addItem(t)})}},{key:"renderGroups",value:function(e,t,i){var n=this,s=i||document.createDocumentFragment();return e.forEach(function(e,i){var o=t.filter(function(t){return"select-one"===n.passedElement.type?t.groupId===e.id:t.groupId===e.id&&!t.selected});if(o.length>=1){var r=n._getTemplate("optgroup",e);s.appendChild(r),n.renderChoices(o,s)}}),s}},{key:"renderChoices",value:function(e,t){var i=this,n=t||document.createDocumentFragment();return e.forEach(function(e,t){var s=i._getTemplate("option",e);"select-one"===i.passedElement.type?n.appendChild(s):e.selected||n.appendChild(s)}),n}},{key:"renderItems",value:function(e,t){var i=this,n=t||document.createDocumentFragment(),s=this.store.getItemsReducedToValues(e);return"text"===this.passedElement.type?this.passedElement.setAttribute("value",s.join(this.config.delimiter)):!function(){var t=document.createDocumentFragment();e.forEach(function(e){var n=i._getTemplate("selectOption",e);t.appendChild(n)}),i.passedElement.innerHTML="",i.passedElement.appendChild(t)}(),e.forEach(function(e){var t=i._getTemplate("item",e);n.appendChild(t)}),n}},{key:"render",value:function(){if(this.currentState=this.store.getState(),this.currentState!==this.prevState){if(!(this.currentState.choices===this.prevState.choices&&this.currentState.groups===this.prevState.groups||"select-multiple"!==this.passedElement.type&&"select-one"!==this.passedElement.type)){var e=this.store.getGroupsFilteredByActive(),t=this.store.getChoicesFilteredByActive(),i=document.createDocumentFragment();if(this.choiceList.innerHTML="",e.length>=1&&this.isSearching!==!0?i=this.renderGroups(e,t,i):t.length>=1&&(i=this.renderChoices(t,i)),i.children.length)this.choiceList.appendChild(i),this._highlightChoice();else{var n=this.isSearching?this._getTemplate("notice","No results found"):this._getTemplate("notice","No choices to choose from");this.choiceList.appendChild(n)}}if(this.currentState.items!==this.prevState.items){var s=this.store.getItemsFilteredByActive();if(s){var o=this.renderItems(s);this.itemList.innerHTML="",o.children.length&&this.itemList.appendChild(o)}}this.prevState=this.currentState}}},{key:"_addEventListeners",value:function(){document.addEventListener("keyup",this._onKeyUp),document.addEventListener("keydown",this._onKeyDown),document.addEventListener("mousedown",this._onMouseDown),document.addEventListener("mouseover",this._onMouseOver),this.input.addEventListener("input",this._onInput),this.input.addEventListener("paste",this._onPaste),this.input.addEventListener("focus",this._onFocus),this.input.addEventListener("blur",this._onBlur)}},{key:"_removeEventListeners",value:function(){document.removeEventListener("keyup",this._onKeyUp),document.removeEventListener("keydown",this._onKeyDown),document.removeEventListener("mousedown",this._onMouseDown),document.removeEventListener("mouseover",this._onMouseOver),this.input.removeEventListener("input",this._onInput),this.input.removeEventListener("paste",this._onPaste),this.input.removeEventListener("focus",this._onFocus),this.input.removeEventListener("blur",this._onBlur)}}]),e}();window.Choices=e.exports=p},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.addItem=function(e,t,i,n){return{type:"ADD_ITEM",value:e,label:t,id:i,choiceId:n}},t.removeItem=function(e,t){return{type:"REMOVE_ITEM",id:e,choiceId:t}},t.selectItem=function(e,t){return{type:"SELECT_ITEM",id:e,selected:t}},t.addChoice=function(e,t,i,n,s){return{type:"ADD_CHOICE",value:e,label:t,id:i,groupId:n,disabled:s}},t.filterChoices=function(e){return{type:"FILTER_CHOICES",results:e}},t.activateChoices=function(){var e=arguments.length<=0||void 0===arguments[0]?!0:arguments[0];return{type:"ACTIVATE_CHOICES",active:e}},t.addGroup=function(e,t,i,n){return{type:"ADD_GROUP",value:e,id:t,active:i,disabled:n}},t.clearAll=function(){return{type:"CLEAR_ALL"}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=(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 i=Object.prototype.toString.call(t).slice(8,-1);return void 0!==t&&null!==t&&i===e}),n=(t.extend=function o(){for(var e={},t=!1,n=arguments.length,s=function(n){for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t&&i("Object",n[s])?e[s]=o(!0,e[s],n[s]):e[s]=n[s])},r=0;n>r;r++){var a=arguments[r];i("Object",a)?s(a):console.error("Custom options must be an object")}return e},t.whichTransitionEvent=function(){var e,t=document.createElement("fakeelement"),i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in i)if(void 0!==t.style[e])return i[e]},t.whichAnimationEvent=function(){var e,t=document.createElement("fakeelement"),i={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in i)if(void 0!==t.style[e])return i[e]}),s=(t.getParentsUntil=function(e,t,i){for(var n=[];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(i){var o=i.charAt(0);"."===o&&e.classList.contains(i.substr(1))&&n.push(e),"#"===o&&e.id===i.substr(1)&&n.push(e),"["===o&&e.hasAttribute(i.substr(1,i.length-1))&&n.push(e),e.tagName.toLowerCase()===i&&n.push(e)}else n.push(e)}return 0===n.length?null:n},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=[],i=e.parentNode.firstChild;i;i=i.nextSibling)1===i.nodeType&&i!==e&&t.push(i);return t},t.findAncestor=function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e},t.debounce=function(e,t,i){var n;return function(){var s=this,o=arguments,r=function(){n=null,i||e.apply(s,o)},a=i&&!n;clearTimeout(n),n=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 i=t;return i>1&&(i=1),i>0&&(i=0),Math.max(e.offsetHeight*i)},t.getAdjacentEl=function(e,t){var i=arguments.length<=2||void 0===arguments[2]?1:arguments[2];if(e&&t){var n=e.parentNode.parentNode,s=Array.from(n.querySelectorAll(t)),o=s.indexOf(e),r=i>0?1:-1;return s[o+r]}},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,i){return this.getScrollPosition(t)>this.getElemDistance(e)+this.getElementOffset(e,i)},t.isScrolledIntoView=function(e,t){var i=arguments.length<=2||void 0===arguments[2]?1:arguments[2];if(e){var n=void 0;return n=i>0?t.scrollTop+t.offsetHeight>=e.offsetTop+e.offsetHeight:e.offsetTop>=t.scrollTop}},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(),s=function o(){e.classList.remove(t),e.removeEventListener(i,o,!1)};e.classList.add(t),e.addEventListener(i,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 i;for(e.innerHTML=t,i=e.children[0];e.firstChild;)e.removeChild(e.firstChild);return i}}());t.getWidthOfInput=function(e){var t=e.value||e.placeholder,i=e.offsetWidth;if(t){var n=s(""+t+"");n.style.position="absolute",n.style.padding="0",n.style.top="-9999px",n.style.left="-9999px",n.style.width="auto",n.style.whiteSpace="pre",document.body.appendChild(n),t&&n.offsetWidth!==e.offsetWidth&&(i=n.offsetWidth+4),document.body.removeChild(n)}return i+"px"},t.sortByAlpha=function(e,t){var i=e.label.toLowerCase(),n=t.label.toLowerCase();return n>i?-1:i>n?1:0}},function(e,t,i){!function(t){"use strict";function i(){console.log.apply(console,arguments)}function n(e,t){var i,n,s,o;for(this.list=e,this.options=t=t||{},i=0,o=["sort","shouldSort","verbose","tokenize"],n=o.length;n>i;i++)s=o[i],this.options[s]=s in t?t[s]:c[s];for(i=0,o=["searchFn","sortFn","keys","getFn","include"],n=o.length;n>i;i++)s=o[i],this.options[s]=t[s]||c[s]}function s(e,t,i){var n,r,a,c,l,u;if(t){if(a=t.indexOf("."),-1!==a?(n=t.slice(0,a),r=t.slice(a+1)):n=t,c=e[n],null!==c&&void 0!==c)if(r||"string"!=typeof c&&"number"!=typeof c)if(o(c))for(l=0,u=c.length;u>l;l++)s(c[l],r,i);else r&&s(c,r,i);else i.push(c)}else i.push(e);return i}function o(e){return"[object Array]"===Object.prototype.toString.call(e)}function r(e,t){t=t||{},this.options=t,this.options.location=t.location||r.defaultOptions.location,this.options.distance="distance"in t?t.distance:r.defaultOptions.distance,this.options.threshold="threshold"in t?t.threshold:r.defaultOptions.threshold,this.options.maxPatternLength=t.maxPatternLength||r.defaultOptions.maxPatternLength,this.pattern=t.caseSensitive?e:e.toLowerCase(),this.patternLen=e.length,this.patternLen<=this.options.maxPatternLength&&(this.matchmask=1<s;s++)this.tokenSearchers.push(new i(n[s],e));this.fullSeacher=new i(t,e)},n.prototype._startSearch=function(){var e,t,i,n,s=this.options,o=s.getFn,r=this.list,a=r.length,c=this.options.keys,l=c.length,u=null;if("string"==typeof r[0])for(i=0;a>i;i++)this._analyze("",r[i],i,i);else for(this._keyMap={},i=0;a>i;i++)for(u=r[i],n=0;l>n;n++){if(e=c[n],"string"!=typeof e){if(t=1-e.weight||1,this._keyMap[e.name]={weight:t},e.weight<=0||e.weight>1)throw new Error("Key weight has to be > 0 and <= 1"); +e=e.name}else this._keyMap[e]={weight:1};this._analyze(e,o(u,e,[]),u,i)}},n.prototype._analyze=function(e,t,n,s){var r,c,l,u,h,d,p,f,v,m,g,y,b,_,E,I=this.options,w=!1;if(void 0!==t&&null!==t)if(c=[],"string"==typeof t){if(r=t.split(a),I.verbose&&i("---------\nKey:",e),I.verbose&&i("Record:",r),this.options.tokenize){for(l=this.tokenSearchers,u=l.length,_=0;__;_++)d+=c[_];d/=f,I.verbose&&i("Token score average:",d)}v=this.fullSeacher.search(t),I.verbose&&i("Full text score:",v.score),p=v.score,void 0!==d&&(p=(p+d)/2),I.verbose&&i("Score average:",p),(w||v.isMatch)&&(h=this.resultMap[s],h?h.output.push({key:e,score:p,matchedIndices:v.matchedIndices}):(this.resultMap[s]={item:n,output:[{key:e,score:p,matchedIndices:v.matchedIndices}]},this.results.push(this.resultMap[s])))}else if(o(t))for(_=0;_t;t++)r=s[t].score,a=u?u[s[t].key].weight:1,l=r*a,1!==a?c=Math.min(c,l):(n+=l,s[t].nScore=l);1===c?h[e].score=n/o:h[e].score=c,this.options.verbose&&i(h[e])}},n.prototype._sort=function(){var e=this.options;e.shouldSort&&(e.verbose&&i("\n\nSorting...."),this.results.sort(e.sortFn))},n.prototype._format=function(){var e,t,n,s,o,r=this.options,a=r.getFn,c=[],l=this.results,u=r.include;for(r.verbose&&i("\n\nOutput:\n\n",l),s=r.id?function(e){l[e].item=a(l[e].item,r.id,[])[0]}:function(){},o=function(e){var t,i,n,s,o,r=l[e];if(u.length>0){if(t={item:r.item},-1!==u.indexOf("matches"))for(n=r.output,t.matches=[],i=0;it;t++)s(t),e=o(t),c.push(e);return c},r.defaultOptions={location:0,distance:100,threshold:.6,maxPatternLength:32},r.prototype._calculatePatternAlphabet=function(){var e={},t=0;for(t=0;tS.maxPatternLength){if(y=e.match(new RegExp(this.pattern.replace(a,"|"))),b=!!y)for(E=[],t=0,I=y.length;I>t;t++)w=y[t],E.push([e.indexOf(w),w.length-1]);return{isMatch:b,score:b?.5:1,matchedIndices:E}}for(s=S.location,n=e.length,o=S.threshold,r=e.indexOf(this.pattern,s),_=[],t=0;n>t;t++)_[t]=0;for(-1!=r&&(o=Math.min(this._bitapScore(0,r),o),r=e.lastIndexOf(this.pattern,s+this.patternLen),-1!=r&&(o=Math.min(this._bitapScore(0,r),o))),r=-1,m=1,g=[],u=this.patternLen+n,t=0;tc;)this._bitapScore(t,s+l)<=o?c=l:u=l,l=Math.floor((u-c)/2+c);for(u=l,h=Math.max(1,s-l+1),d=Math.min(s+l,n)+this.patternLen,p=Array(d+2),p[d+1]=(1<=h;i--)if(v=this.patternAlphabet[e.charAt(i-1)],v&&(_[i-1]=1),0===t?p[i]=(p[i+1]<<1|1)&v:p[i]=(p[i+1]<<1|1)&v|((f[i+1]|f[i])<<1|1)|f[i+1],p[i]&this.matchmask&&(m=this._bitapScore(t,i-1),o>=m)){if(o=m,r=i-1,g.push(r),!(r>s))break;h=Math.max(1,2*s-r)}if(this._bitapScore(t+1,s)>o)break;f=p}return E=this._getMatchedIndices(_),{isMatch:r>=0,score:0===m?.001:m,matchedIndices:E}},r.prototype._getMatchedIndices=function(e){for(var t,i=[],n=-1,s=-1,o=0,r=r=e.length;r>o;o++)t=e[o],t&&-1===n?n=o:t||-1===n||(s=o-1,i.push([n,s]),n=-1);return e[o-1]&&i.push([n,o-1]),i},e.exports=n}(this)},function(e,t,i){"use strict";function n(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.Store=void 0;var o=function(){function e(e,t){for(var i=0;ii;i++)t[i]=arguments[i];return function(e){return function(i,n,s){var r=e(i,n,s),c=r.dispatch,l=[],u={getState:r.getState,dispatch:function(e){return c(e)}};return l=t.map(function(e){return e(u)}),c=a.default.apply(void 0,l)(r.dispatch),o({},r,{dispatch:c})}}}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;ti;i++)t[i]=arguments[i];if(0===t.length)return function(e){return e};var n=function(){var e=t[t.length-1],i=t.slice(0,-1);return{v:function(){return i.reduceRight(function(e,t){return t(e)},e.apply(void 0,arguments))}}}();return"object"==typeof n?n.v:void 0}t.__esModule=!0,t.default=i},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),o=i(20),r=n(o),a=i(21),c=n(a),l=i(22),u=n(l),h=(0,s.combineReducers)({items:r.default,groups:c.default,choices:u.default}),d=function(e,t){return"CLEAR_ALL"===t.type&&(e=void 0),h(e,t)};t.default=d},function(e,t){"use strict";function i(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t-1?e.map(function(e){return e.id===parseInt(t.choiceId)&&(e.selected=!0),e}):e;case"REMOVE_ITEM":return t.choiceId>-1?e.map(function(e){return e.id===parseInt(t.choiceId)&&(e.selected=!1),e}):e;case"FILTER_CHOICES":var i=t.results,o=e.map(function(e,t){return e.active=i.some(function(t){return t.item.id===e.id?(e.score=t.score,!0):void 0}),e}).sort(function(e,t){return e.score-t.score});return o;case"ACTIVATE_CHOICES":return e.map(function(e){return e.active=t.active,e}).sort(s.sortByAlpha);default:return e}};t.default=o}]); \ No newline at end of file diff --git a/assets/scripts/src/actions/index.js b/assets/scripts/src/actions/index.js index e1b235c..c78b811 100644 --- a/assets/scripts/src/actions/index.js +++ b/assets/scripts/src/actions/index.js @@ -44,7 +44,7 @@ export const filterChoices = (results) => { export const activateChoices = (active = true) => { return { - type: 'ACTIVATE_OPTIONS', + type: 'ACTIVATE_CHOICES', active, } }; diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 6c9c30a..3a00952 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -13,7 +13,7 @@ import Store from './store/index.js'; * - Single select box search in dropdown */ export class Choices { - constructor(element = '[data-choice]', userOptions = {}) { + constructor(element = '[data-option]', userConfig = {}) { // If there are multiple elements, create a new instance // for each element besides the first one (as that already has an instance) @@ -22,12 +22,12 @@ export class Choices { if(elements.length > 1) { for (let i = 1; i < elements.length; i++) { const el = elements[i]; - new Choices(el, userOptions); + new Choices(el, userConfig); } } } - const defaultOptions = { + const defaultConfig = { items: [], maxItemCount: -1, addItems: true, @@ -76,7 +76,7 @@ export class Choices { }; // Merge options with user options - this.options = extend(defaultOptions, userOptions); + this.config = extend(defaultConfig, userConfig); // Create data store this.store = new Store(this.render); @@ -87,17 +87,17 @@ export class Choices { this.prevState = {}; this.currentValue = ''; - // Retrieve triggering element (i.e. element with 'data-choice' trigger) + // Retrieve triggering element (i.e. element with 'data-option' trigger) this.passedElement = isType('String', element) ? document.querySelector(element) : element; this.highlightPosition = 0; - this.canSearch = this.options.searchOptions; + this.canSearch = this.config.searchOptions; // Assign preset items from passed object first - this.presetItems = this.options.items; + this.presetItems = this.config.items; // Then add any values passed from attribute - if(this.passedElement.value !== '') { - this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.options.delimiter)); + if(this.passedElement.value) { + this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter)); } // Bind methods @@ -124,10 +124,13 @@ export class Choices { const canInit = this.passedElement && ['select-one', 'select-multiple', 'text'].includes(this.passedElement.type); if(canInit) { - // Let's have it large - this.init(); + // If element has already been initalised with Choices + if(this.passedElement.hasAttribute('data-choice')) return + + // Let's go + this.init(); } else { - console.error('Choices: Incompatible input passed'); + console.error('Incompatible input passed'); } } @@ -156,7 +159,7 @@ export class Choices { this._addEventListeners(); // Run callback if it is a function - if(callback = this.options.callbackOnInit){ + if(callback = this.config.callbackOnInit){ if(isType('Function', callback)) { callback(); } else { @@ -172,7 +175,7 @@ export class Choices { * @public */ destroy() { - this.passedElement.classList.remove(this.options.classNames.input, this.options.classNames.hiddenState); + this.passedElement.classList.remove(this.config.classNames.input, this.config.classNames.hiddenState); this.passedElement.tabIndex = ''; this.passedElement.removeAttribute('style', 'display:none;'); this.passedElement.removeAttribute('aria-hidden'); @@ -180,8 +183,8 @@ export class Choices { this.containerOuter.outerHTML = this.passedElement.outerHTML; this.passedElement = null; - this.userOptions = null; - this.options = null; + this.userConfig = null; + this.config = null; this.store = null; this._removeEventListeners(); @@ -306,17 +309,17 @@ export class Choices { * @public */ showDropdown() { - this.containerOuter.classList.add(this.options.classNames.openState); - this.dropdown.classList.add(this.options.classNames.activeState); + this.containerOuter.classList.add(this.config.classNames.openState); + this.dropdown.classList.add(this.config.classNames.activeState); const dimensions = this.dropdown.getBoundingClientRect(); const shouldFlip = dimensions.top + dimensions.height >= document.body.offsetHeight; // Whether or not the dropdown should appear above or below input if(shouldFlip) { - this.containerOuter.classList.add(this.options.classNames.flippedState); + this.containerOuter.classList.add(this.config.classNames.flippedState); } else { - this.containerOuter.classList.remove(this.options.classNames.flippedState); + this.containerOuter.classList.remove(this.config.classNames.flippedState); } return this; @@ -329,13 +332,13 @@ export class Choices { */ hideDropdown() { // A dropdown flips if it does not have space below the input - const isFlipped = this.containerOuter.classList.contains(this.options.classNames.flippedState); + const isFlipped = this.containerOuter.classList.contains(this.config.classNames.flippedState); - this.containerOuter.classList.remove(this.options.classNames.openState); - this.dropdown.classList.remove(this.options.classNames.activeState); + this.containerOuter.classList.remove(this.config.classNames.openState); + this.dropdown.classList.remove(this.config.classNames.activeState); if(isFlipped) { - this.containerOuter.classList.remove(this.options.classNames.flippedState); + this.containerOuter.classList.remove(this.config.classNames.flippedState); } return this; @@ -347,9 +350,11 @@ export class Choices { * @public */ toggleDropdown() { - const isActive = this.dropdown.classList.contains(this.options.classNames.activeState); - - isActive ? this.hideDropdown() : this.showDropdown(); + if(this.dropdown.classList.contains(this.config.classNames.activeState)) { + this.hideDropdown() + } else { + this.showDropdown(); + } return this; } @@ -405,7 +410,7 @@ export class Choices { this.passedElement.disabled = true; if(this.initialised) { this.input.disabled = true; - this.containerOuter.classList.add(this.options.classNames.disabledState); + this.containerOuter.classList.add(this.config.classNames.disabledState); } return this; } @@ -417,29 +422,33 @@ export class Choices { * @public */ ajax(fn) { - if(this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') { - this.containerOuter.classList.add('is-loading'); - // this.input.placeholder = this.options.loadingText; + if(this.initialised === true) { + if(this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') { + this.containerOuter.classList.add('is-loading'); + // this.input.placeholder = this.config.loadingText; - const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.options.loadingText, active: true}); - this.itemList.appendChild(placeholderItem); + const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.config.loadingText, active: true}); + this.itemList.appendChild(placeholderItem); - const callback = (results, value, label) => { - if(results && results.length) { - this.containerOuter.classList.remove('is-loading'); - this.input.placeholder = ""; - results.forEach((result, index) => { - // Select first choice in list if single select input - if(index === 0 && this.passedElement.type === 'select-one') { - this._addChoice(true, false, result[value], result[label]); - } else { - this._addChoice(false, false, result[value], result[label]); - } - }); - } - }; + const callback = (results, value, label) => { + if(!isType('Array', results) || !value) return; - fn(callback); + if(results && results.length) { + this.containerOuter.classList.remove('is-loading'); + this.input.placeholder = ""; + results.forEach((result, index) => { + // Select first choice in list if single select input + if(index === 0 && this.passedElement.type === 'select-one') { + this._addChoice(true, false, result[value], result[label]); + } else { + this._addChoice(false, false, result[value], result[label]); + } + }); + } + }; + + fn(callback); + } } return this; @@ -468,12 +477,12 @@ export class Choices { _handleEnter(activeItems, value) { let canUpdate = true; - if(this.options.addItems) { - if (this.options.maxItemCount && this.options.maxItemCount > 0 && this.options.maxItemCount <= this.itemList.children.length) { + if(this.config.addItems) { + if (this.config.maxItemCount && this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) { // If there is a max entry limit and we have reached that limit // don't update canUpdate = false; - } else if(this.options.duplicateItems === false && this.passedElement.value) { + } else if(this.config.duplicateItems === false && this.passedElement.value) { // If no duplicates are allowed, and the value already exists // in the array, don't update canUpdate = !activeItems.some((item) => item.value === value ); @@ -486,7 +495,7 @@ export class Choices { let canAddItem = true; // If a user has supplied a regular expression filter - if(this.options.regexFilter) { + if(this.config.regexFilter) { // Determine whether we can update based on whether // our regular expression passes canAddItem = this._regexFilter(value); @@ -508,13 +517,13 @@ export class Choices { * @private */ _handleBackspace(activeItems) { - if(this.options.removeItems && activeItems) { + if(this.config.removeItems && activeItems) { const lastItem = activeItems[activeItems.length - 1]; const hasSelectedItems = activeItems.some((item) => item.selected === true); // If editing the last item is allowed and there are not other selected items, // we can edit the item value. Otherwise if we can remove items, remove all selected items - if(this.options.editItems && !hasSelectedItems && lastItem) { + if(this.config.editItems && !hasSelectedItems && lastItem) { this.input.value = lastItem.value; this._removeItem(lastItem); } else { @@ -545,7 +554,7 @@ export class Choices { const activeChoices = this.store.getChoicesFilteredByActive(); const hasFocusedInput = this.input === document.activeElement; - const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState); + const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); const hasItems = this.itemList && this.itemList.children; const keyString = String.fromCharCode(event.keyCode); @@ -554,14 +563,14 @@ export class Choices { this.showDropdown(); } - this.canSearch = this.options.searchOptions; + this.canSearch = this.config.searchOptions; switch (e.keyCode) { case aKey: // If CTRL + A or CMD + A have been pressed and there are items to select if(ctrlDownKey && hasItems) { this.canSearch = false; - if(this.options.removeItems && !this.input.value && this.input === document.activeElement) { + if(this.config.removeItems && !this.input.value && this.input === document.activeElement) { // Highlight items this.highlightAll(this.itemList.children); } @@ -576,7 +585,7 @@ export class Choices { } if(hasActiveDropdown) { - const highlighted = this.dropdown.querySelector(`.${this.options.classNames.highlightedState}`); + const highlighted = this.dropdown.querySelector(`.${this.config.classNames.highlightedState}`); if(highlighted) { const value = highlighted.getAttribute('data-value'); @@ -595,16 +604,14 @@ export class Choices { break; case escapeKey: - if(hasActiveDropdown) { - this.toggleDropdown(); - } + if(hasActiveDropdown) this.toggleDropdown(); break; case downKey: case upKey: // If up or down key is pressed, traverse through options if(hasActiveDropdown) { - const currentEl = this.dropdown.querySelector(`.${this.options.classNames.highlightedState}`); + const currentEl = this.dropdown.querySelector(`.${this.config.classNames.highlightedState}`); const directionInt = e.keyCode === downKey ? 1 : -1; let nextEl; @@ -658,29 +665,31 @@ export class Choices { // We are typing into a text input and have a value, we want to show a dropdown // notice. Otherwise hide the dropdown if(this.passedElement.type === 'text') { - const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState); + const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); let dropdownItem; if(this.input.value) { const activeItems = this.store.getItemsFilteredByActive(); const isUnique = !activeItems.some((item) => item.value === this.input.value); - if (this.options.maxItemCount && this.options.maxItemCount > 0 && this.options.maxItemCount <= this.itemList.children.length) { - dropdownItem = this._getTemplate('notice', `Only ${ this.options.maxItemCount } options can be added.`); - } else if(!this.options.duplicateItems && !isUnique) { + if (this.config.maxItemCount && this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) { + dropdownItem = this._getTemplate('notice', `Only ${ this.config.maxItemCount } options can be added.`); + } else if(!this.config.duplicateItems && !isUnique) { dropdownItem = this._getTemplate('notice', `Only unique values can be added.`); } else { dropdownItem = this._getTemplate('notice', `Add "${ this.input.value }"`); } - if((this.options.regexFilter && this._regexFilter(this.input.value)) || !this.options.regexFilter) { + if((this.config.regexFilter && this._regexFilter(this.input.value)) || !this.config.regexFilter) { this.dropdown.innerHTML = dropdownItem.outerHTML; - if(!this.dropdown.classList.contains(this.options.classNames.activeState)) { + if(!this.dropdown.classList.contains(this.config.classNames.activeState)) { this.showDropdown(); } } } else { - if(hasActiveDropdown) this.hideDropdown(); + if(hasActiveDropdown) { + this.hideDropdown(); + } } } @@ -717,7 +726,7 @@ export class Choices { } else if(hasUnactiveChoices) { // Otherwise reset options to active this.isSearching = false; - this.store.dispatch(activateChoices()); + this.store.dispatch(activateChoices(true)); } } } @@ -731,7 +740,7 @@ export class Choices { */ _onInput(e) { if(this.passedElement.type !== 'select-one') { - this.input.style.width = getWidthOfInput(this.input); + this.input.style.width = getWidthOfInput(this.input); } } @@ -755,7 +764,7 @@ export class Choices { const hasShiftKey = e.shiftKey ? true : false; - if(this.passedElement.type !== 'text' && !this.dropdown.classList.contains(this.options.classNames.activeState)) { + if(this.passedElement.type !== 'text' && !this.dropdown.classList.contains(this.config.classNames.activeState)) { // For select inputs we always want to show the dropdown if it isn't already showing this.showDropdown(); } @@ -766,14 +775,14 @@ export class Choices { } if(e.target.hasAttribute('data-button')) { - if(this.options.removeItems && this.options.removeItemButton) { + if(this.config.removeItems && this.config.removeItemButton) { const itemId = e.target.parentNode.getAttribute('data-id'); const itemToRemove = activeItems.find((item) => item.id === parseInt(itemId)); this._removeItem(itemToRemove); } } else if(e.target.hasAttribute('data-item')) { // If we are clicking on an item - if(this.options.removeItems) { + if(this.config.removeItems) { const passedId = e.target.getAttribute('data-id'); // We only want to select one item with a click @@ -806,17 +815,21 @@ export class Choices { } else { // Click is outside of our element so close dropdown and de-select items - const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState); + const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); const hasSelectedItems = activeItems.some((item) => item.selected === true); // De-select any highlighted items - if(hasSelectedItems) this.unhighlightAll(); + if(hasSelectedItems) { + this.unhighlightAll(); + } // Remove focus state - this.containerOuter.classList.remove(this.options.classNames.focusState); + this.containerOuter.classList.remove(this.config.classNames.focusState); // Close all other dropdowns - if(hasActiveDropdown) this.toggleDropdown(); + if(hasActiveDropdown) { + this.toggleDropdown(); + } } } } @@ -829,10 +842,8 @@ export class Choices { */ _onMouseOver(e) { // If the dropdown is either the target or one of its children is the target - if((e.target === this.dropdown || findAncestor(e.target, this.options.classNames.listDropdown))) { - if(e.target.hasAttribute('data-option')) { - this._highlightChoice(e.target); - } + if((e.target === this.dropdown || findAncestor(e.target, this.config.classNames.listDropdown))) { + if(e.target.hasAttribute('data-option')) this._highlightChoice(e.target); } } @@ -845,8 +856,8 @@ export class Choices { _onPaste(e) { if(e.target !== this.input) return; // Disable pasting into the input if option has been set - if(!this.options.paste) { - e.preventDefault(); + if(!this.config.paste) { + e.preventDefault(); } } @@ -858,9 +869,9 @@ export class Choices { * @private */ _onFocus(e) { - const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState); + const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); if(e.target === this.input && !hasActiveDropdown) { - this.containerOuter.classList.add(this.options.classNames.focusState); + this.containerOuter.classList.add(this.config.classNames.focusState); if(this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple'){ this.showDropdown(); } @@ -874,9 +885,9 @@ export class Choices { * @private */ _onBlur(e) { - const hasActiveDropdown = this.dropdown.classList.contains(this.options.classNames.activeState); + const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState); if(e.target === this.input && !hasActiveDropdown) { - this.containerOuter.classList.remove(this.options.classNames.focusState); + this.containerOuter.classList.remove(this.config.classNames.focusState); } else { this.hideDropdown(); } @@ -891,7 +902,7 @@ export class Choices { */ _regexFilter(value) { if(!value) return; - const expression = new RegExp(this.options.regexFilter, 'i'); + const expression = new RegExp(this.config.regexFilter, 'i'); return expression.test(value); } @@ -963,16 +974,16 @@ export class Choices { const options = Array.from(this.dropdown.querySelectorAll('[data-option-selectable]')); if(options && options.length) { - const highlightedOptions = Array.from(this.dropdown.querySelectorAll(`.${this.options.classNames.highlightedState}`)); + const highlightedOptions = Array.from(this.dropdown.querySelectorAll(`.${this.config.classNames.highlightedState}`)); // Remove any highlighted options highlightedOptions.forEach((el) => { - el.classList.remove(this.options.classNames.highlightedState); + el.classList.remove(this.config.classNames.highlightedState); }); if(el){ // Highlight given option - el.classList.add(this.options.classNames.highlightedState); + el.classList.add(this.config.classNames.highlightedState); this.highlightPosition = options.indexOf(el); } else { // Highlight option based on last known highlight location @@ -987,7 +998,7 @@ export class Choices { } if(!el) el = options[0]; - el.classList.add(this.options.classNames.highlightedState); + el.classList.add(this.config.classNames.highlightedState); } } } @@ -999,20 +1010,20 @@ export class Choices { * @return {Object} Class instance * @public */ - _addItem(value, label, choiceId = -1, callback = this.options.callbackOnAddItem) { + _addItem(value, label, choiceId = -1, callback = this.config.callbackOnAddItem) { const items = this.store.getItems(); let passedValue = value.trim(); let passedLabel = label || passedValue; let passedOptionId = choiceId || -1; // If a prepended value has been passed, prepend it - if(this.options.prependValue) { - passedValue = this.options.prependValue + passedValue.toString(); + if(this.config.prependValue) { + passedValue = this.config.prependValue + passedValue.toString(); } // If an appended value has been passed, append it - if(this.options.appendValue) { - passedValue = passedValue + this.options.appendValue.toString(); + if(this.config.appendValue) { + passedValue = passedValue + this.config.appendValue.toString(); } // Generate unique id @@ -1042,7 +1053,7 @@ export class Choices { * @return {Object} Class instance * @public */ - _removeItem(item, callback = this.options.callbackOnRemoveItem) { + _removeItem(item, callback = this.config.callbackOnRemoveItem) { if(!item || !isType('Object', item)) { console.error('removeItem: No item object was passed to be removed'); return; @@ -1115,7 +1126,7 @@ export class Choices { */ _getTemplate(template, ...args) { if(!template) return; - const templates = this.options.templates; + const templates = this.config.templates; return templates[template](...args); } @@ -1125,7 +1136,7 @@ export class Choices { * @private */ _createTemplates() { - const classNames = this.options.classNames; + const classNames = this.config.classNames; const templates = { containerOuter: () => { return strToEl(`
`); @@ -1166,7 +1177,7 @@ export class Choices { `); }, item: (data) => { - if(this.options.removeItemButton && this.passedElement.type !== 'select-one') { + if(this.config.removeItemButton && this.passedElement.type !== 'select-one') { return strToEl(`
${ data.label } @@ -1183,7 +1194,7 @@ export class Choices { }, }; - this.options.templates = extend(this.options.templates, templates); + this.config.templates = extend(this.config.templates, templates); } /** @@ -1207,11 +1218,11 @@ export class Choices { this.dropdown = dropdown; // Hide passed input - this.passedElement.classList.add(this.options.classNames.input, this.options.classNames.hiddenState); + this.passedElement.classList.add(this.config.classNames.input, this.config.classNames.hiddenState); this.passedElement.tabIndex = '-1'; this.passedElement.setAttribute('style', 'display:none;'); this.passedElement.setAttribute('aria-hidden', 'true'); - this.passedElement.removeAttribute('data-choice'); + this.passedElement.setAttribute('data-choice', ''); // Wrap input in container preserving DOM ordering wrap(this.passedElement, containerInner); @@ -1220,15 +1231,15 @@ export class Choices { wrap(containerInner, containerOuter); // If placeholder has been enabled and we have a value - if (this.options.placeholder && (this.options.placeholderValue || this.passedElement.placeholder)) { - const placeholder = this.options.placeholderValue || this.passedElement.placeholder; + if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.placeholder)) { + const placeholder = this.config.placeholderValue || this.passedElement.placeholder; input.placeholder = placeholder; if(this.passedElement.type !== 'select-one') { input.style.width = getWidthOfInput(input); } } - if(!this.options.addItems) this.disable(); + if(!this.config.addItems) this.disable(); containerOuter.appendChild(containerInner); containerOuter.appendChild(dropdown); @@ -1237,7 +1248,7 @@ export class Choices { if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') { containerInner.appendChild(input); - } else if(this.options.searchOptions) { + } else if(this.config.searchOptions) { dropdown.insertBefore(input, dropdown.firstChild); } @@ -1346,7 +1357,7 @@ export class Choices { if(this.passedElement.type === 'text') { // Assign hidden input array of values - this.passedElement.setAttribute('value', itemsFiltered.join(this.options.delimiter)); + this.passedElement.setAttribute('value', itemsFiltered.join(this.config.delimiter)); } else { const selectedOptionsFragment = document.createDocumentFragment(); diff --git a/assets/scripts/src/lib/utils.js b/assets/scripts/src/lib/utils.js index 9940312..4247e1f 100644 --- a/assets/scripts/src/lib/utils.js +++ b/assets/scripts/src/lib/utils.js @@ -439,4 +439,13 @@ export const getWidthOfInput = (input) => { } return `${width}px`; -} \ No newline at end of file +}; + +export const sortByAlpha = (a, b) => { + const labelA = a.label.toLowerCase(); + const labelB = b.label.toLowerCase(); + + if (labelA < labelB) return -1; + if (labelA > labelB) return 1; + return 0; +}; \ No newline at end of file diff --git a/assets/scripts/src/reducers/choices.js b/assets/scripts/src/reducers/choices.js index d3dd5f4..a1bded2 100644 --- a/assets/scripts/src/reducers/choices.js +++ b/assets/scripts/src/reducers/choices.js @@ -1,3 +1,5 @@ +import { sortByAlpha } from './../lib/utils.js'; + const choices = (state = [], action) => { switch (action.type) { case 'ADD_CHOICE': @@ -10,7 +12,7 @@ const choices = (state = [], action) => { selected: false, active: true, score: 9999, - }]; + }].sort(sortByAlpha); case 'ADD_ITEM': // When an item is added and it has an associated choice, @@ -63,9 +65,8 @@ const choices = (state = [], action) => { case 'ACTIVATE_CHOICES': return state.map((choice) => { choice.active = action.active; - return choice; - }); + }).sort(sortByAlpha); default: diff --git a/index.html b/index.html index eb4d02a..2d8dd8b 100644 --- a/index.html +++ b/index.html @@ -42,14 +42,14 @@ - - @@ -86,17 +86,17 @@

Single select input

- - + - @@ -180,7 +180,7 @@ }); }) - const choicesMultiple = new Choices('[data-choice]', { + const choicesMultiple = new Choices('select', { placeholderValue: 'This is a placeholder set in the config', removeButton: true });