From 6d03c22f3b654953173d8fdd918261beef8d19cc Mon Sep 17 00:00:00 2001 From: Cara Michele Ryan Date: Wed, 20 Feb 2019 18:11:19 -0600 Subject: [PATCH 1/3] Allow user-created choices for selects --- public/assets/scripts/choices.js | 45 +++++++++++++++++++++------- public/assets/scripts/choices.min.js | 22 +++++++------- src/scripts/choices.js | 41 ++++++++++++++++++++----- src/scripts/constants.js | 1 + 4 files changed, 79 insertions(+), 30 deletions(-) diff --git a/public/assets/scripts/choices.js b/public/assets/scripts/choices.js index bf1497b50..1931fcb33 100644 --- a/public/assets/scripts/choices.js +++ b/public/assets/scripts/choices.js @@ -446,6 +446,7 @@ var DEFAULT_CONFIG = { removeItemButton: false, editItems: false, duplicateItemsAllowed: true, + addChoices: false, delimiter: ',', paste: true, searchEnabled: true, @@ -2252,12 +2253,11 @@ function () { choiceListFragment = this._createGroupsFragment(activeGroups, activeChoices, choiceListFragment); } else if (activeChoices.length >= 1) { choiceListFragment = this._createChoicesFragment(activeChoices, choiceListFragment); - } // If we have choices to show + } + var activeItems = this._store.activeItems; // If we have choices to show if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) { - var activeItems = this._store.activeItems; - var canAddItem = this._canAddItem(activeItems, this.input.value); // ...and we can select them @@ -2272,10 +2272,15 @@ function () { } } else { // Otherwise show a notice + var canAddChoice = this._canAddChoice(activeItems, this.input.value); + var dropdownItem; var notice; - if (this._isSearching) { + if (canAddChoice.response) { + notice = canAddChoice.notice; + dropdownItem = this._getTemplate('notice', notice); + } else if (this._isSearching) { notice = (0, _utils.isType)('Function', this.config.noResultsText) ? this.config.noResultsText() : this.config.noResultsText; dropdownItem = this._getTemplate('notice', notice, 'no-results'); } else { @@ -2691,6 +2696,16 @@ function () { notice: notice }; } + }, { + key: "_canAddChoice", + value: function _canAddChoice(activeItems, value) { + var canAddItem = this._canAddItem(activeItems, value); + + return { + response: this.config.addChoices && canAddItem.response, + notice: canAddItem.notice + }; + } }, { key: "_ajaxCallback", value: function _ajaxCallback() { @@ -2940,13 +2955,16 @@ function () { hasActiveDropdown = _ref4.hasActiveDropdown; var enterKey = _constants.KEY_CODES.ENTER_KEY; var targetWasButton = target.hasAttribute('data-button'); + var addedItem; - if (this._isTextElement && target.value) { + if (target.value) { var value = this.input.value; var canAddItem = this._canAddItem(activeItems, value); - if (canAddItem.response) { + var canAddChoice = this._canAddChoice(activeItems, value); + + if (this._isTextElement && canAddItem.response || !this._isTextElement && canAddChoice.response) { this.hideDropdown(true); this._addItem({ @@ -2956,6 +2974,7 @@ function () { this._triggerChange(value); this.clearInput(); + addedItem = true; } } @@ -2969,12 +2988,16 @@ function () { var highlightedChoice = this.dropdown.getChild(".".concat(this.config.classNames.highlightedState)); if (highlightedChoice) { - // add enter keyCode value - if (activeItems[0]) { - activeItems[0].keyCode = enterKey; // eslint-disable-line no-param-reassign - } + if (addedItem) { + this.unhighlightAll(); + } else { + // add enter keyCode value + if (activeItems[0]) { + activeItems[0].keyCode = enterKey; // eslint-disable-line no-param-reassign + } - this._handleChoiceAction(activeItems, highlightedChoice); + this._handleChoiceAction(activeItems, highlightedChoice); + } } event.preventDefault(); diff --git a/public/assets/scripts/choices.min.js b/public/assets/scripts/choices.min.js index 2f3baf012..758e19876 100644 --- a/public/assets/scripts/choices.min.js +++ b/public/assets/scripts/choices.min.js @@ -1,5 +1,5 @@ /*! choices.js v6.0.3 | (c) 2019 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Choices=t():e.Choices=t()}(window,function(){return function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/public/assets/scripts/",i(i.s=9)}([function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.diff=t.cloneObject=t.existsInArray=t.isIE11=t.fetchFromObject=t.getWindowHeight=t.dispatchEvent=t.sortByScore=t.sortByAlpha=t.calcWidthOfInput=t.strToEl=t.sanitise=t.isScrolledIntoView=t.getAdjacentEl=t.findAncestorByAttrName=t.wrap=t.isElement=t.isType=t.getType=t.generateId=t.generateChars=t.getRandomNumber=void 0;var n=function(e,t){return Math.floor(Math.random()*(t-e)+e)};t.getRandomNumber=n;var r=function(e){for(var t="",i=0;i1&&void 0!==arguments[1]?arguments[1]:document.createElement("div");return e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e)};t.findAncestorByAttrName=function(e,t){for(var i=e;i;){if(i.hasAttribute(t))return i;i=i.parentElement}return null};t.getAdjacentEl=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(e&&t){var n=e.parentNode.parentNode,r=Array.from(n.querySelectorAll(t)),o=r.indexOf(e);return r[o+(i>0?1:-1)]}};t.isScrolledIntoView=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(e)return i>0?t.scrollTop+t.offsetHeight>=e.offsetTop+e.offsetHeight:e.offsetTop>=t.scrollTop};var a=function(e){return s("String",e)?e.replace(/&/g,"&").replace(/>/g,"&rt;").replace(/".concat(a(i),""));if(r.style.position="absolute",r.style.padding="0",r.style.top="-9999px",r.style.left="-9999px",r.style.width="auto",r.style.whiteSpace="pre",document.body.contains(e)&&window.getComputedStyle){var o=window.getComputedStyle(e);o&&(r.style.fontSize=o.fontSize,r.style.fontFamily=o.fontFamily,r.style.fontWeight=o.fontWeight,r.style.fontStyle=o.fontStyle,r.style.letterSpacing=o.letterSpacing,r.style.textTransform=o.textTransform,r.style.padding=o.padding)}document.body.appendChild(r),requestAnimationFrame(function(){i&&r.offsetWidth!==e.offsetWidth&&(n=r.offsetWidth+4),document.body.removeChild(r),t.call(void 0,"".concat(n,"px"))})}else t.call(void 0,"".concat(n,"px"))};t.sortByAlpha=function(e,t){var i="".concat(e.label||e.value).toLowerCase(),n="".concat(t.label||t.value).toLowerCase();return in?1:0};t.sortByScore=function(e,t){return e.score-t.score};t.dispatchEvent=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=new CustomEvent(t,{detail:i,bubbles:!0,cancelable:!0});return e.dispatchEvent(n)};t.getWindowHeight=function(){var e=document.body,t=document.documentElement;return Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight)};t.fetchFromObject=function e(t,i){var n=i.indexOf(".");return n>-1?e(t[i.substring(0,n)],i.substr(n+1)):t[i]};t.isIE11=function(){return!(!navigator.userAgent.match(/Trident/)||!navigator.userAgent.match(/rv[ :]11/))};t.existsInArray=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"value";return e.some(function(e){return s("String",t)?e[i]===t.trim():e[i]===t})};t.cloneObject=function(e){return JSON.parse(JSON.stringify(e))};t.diff=function(e,t){var i=Object.keys(e).sort(),n=Object.keys(t).sort();return i.filter(function(e){return n.indexOf(e)<0})}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.SCROLLING_SPEED=t.KEY_CODES=t.ACTION_TYPES=t.EVENTS=t.DEFAULT_CONFIG=t.DEFAULT_CLASSNAMES=void 0;var n=i(0),r={containerOuter:"choices",containerInner:"choices__inner",input:"choices__input",inputCloned:"choices__input--cloned",list:"choices__list",listItems:"choices__list--multiple",listSingle:"choices__list--single",listDropdown:"choices__list--dropdown",item:"choices__item",itemSelectable:"choices__item--selectable",itemDisabled:"choices__item--disabled",itemChoice:"choices__item--choice",placeholder:"choices__placeholder",group:"choices__group",groupHeading:"choices__heading",button:"choices__button",activeState:"is-active",focusState:"is-focused",openState:"is-open",disabledState:"is-disabled",highlightedState:"is-highlighted",hiddenState:"is-hidden",flippedState:"is-flipped",loadingState:"is-loading",noResults:"has-no-results",noChoices:"has-no-choices"};t.DEFAULT_CLASSNAMES=r;var o={items:[],choices:[],silent:!1,renderChoiceLimit:-1,maxItemCount:-1,addItems:!0,addItemFilterFn:null,removeItems:!0,removeItemButton:!1,editItems:!1,duplicateItemsAllowed:!0,delimiter:",",paste:!0,searchEnabled:!0,searchChoices:!0,searchFloor:1,searchResultLimit:4,searchFields:["label","value"],position:"auto",resetScrollPosition:!0,shouldSort:!0,shouldSortItems:!1,sortFn:n.sortByAlpha,placeholder:!0,placeholderValue:null,searchPlaceholderValue:null,prependValue:null,appendValue:null,renderSelectedChoices:"auto",loadingText:"Loading...",noResultsText:"No results found",noChoicesText:"No choices to choose from",itemSelectText:"Press to select",uniqueItemText:"Only unique values can be added",customAddItemText:"Only values matching specific conditions can be added",addItemText:function(e){return'Press Enter to add "'.concat((0,n.sanitise)(e),'"')},maxItemText:function(e){return"Only ".concat(e," values can be added")},itemComparer:function(e,t){return e===t},fuseOptions:{includeScore:!0},callbackOnInit:null,callbackOnCreateTemplates:null,classNames:r};t.DEFAULT_CONFIG=o;t.EVENTS={showDropdown:"showDropdown",hideDropdown:"hideDropdown",change:"change",choice:"choice",search:"search",addItem:"addItem",removeItem:"removeItem",highlightItem:"highlightItem",highlightChoice:"highlightChoice"};t.ACTION_TYPES={ADD_CHOICE:"ADD_CHOICE",FILTER_CHOICES:"FILTER_CHOICES",ACTIVATE_CHOICES:"ACTIVATE_CHOICES",CLEAR_CHOICES:"CLEAR_CHOICES",ADD_GROUP:"ADD_GROUP",ADD_ITEM:"ADD_ITEM",REMOVE_ITEM:"REMOVE_ITEM",HIGHLIGHT_ITEM:"HIGHLIGHT_ITEM",CLEAR_ALL:"CLEAR_ALL"};t.KEY_CODES={BACK_KEY:46,DELETE_KEY:8,ENTER_KEY:13,A_KEY:65,ESC_KEY:27,UP_KEY:38,DOWN_KEY:40,PAGE_UP_KEY:33,PAGE_DOWN_KEY:34};t.SCROLLING_SPEED=4},function(e,t,i){"use strict";(function(e,n){var r,o=i(7);r="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==e?e:n;var s=Object(o.a)(r);t.a=s}).call(this,i(3),i(16)(e))},function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=i(0);function r(e,t){for(var i=0;i