diff --git a/README.md b/README.md
index 4e39afc..d07ad34 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ Coming soon.
item: 'choices__item',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
- itemOption: 'choices__item--choice',
+ itemChoice: 'choices__item--choice',
group: 'choices__group',
groupHeading : 'choices__heading',
button: 'choices__button',
@@ -59,7 +59,6 @@ Coming soon.
highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped',
- selectedState: 'is-selected',
},
callbackOnInit: () => {},
callbackOnAddItem: (id, value, passedInput) => {},
@@ -76,7 +75,7 @@ To install via NPM, run `npm install --save-dev choices.js`
| ------ | ---------- |
| Choice | A choice is a value a user can select. A choice would be equivelant to the `` element within a select input. |
| Group | A group is a collection of choices. A group should be seen as equivalent to a `` element within a select input.|
-| Item | An item is an inputted value (if you are using Choices with a text input) or a selected choice (if you are using Choices with a select element). |
+| Item | An item is an inputted value (if you are using Choices with a text input) or a selected choice (if you are using Choices with a select element). An item is equivelent to a selected option element: ``|
## Options
### items
@@ -135,17 +134,17 @@ Pass an array of objects:
Usage: What divides each value (only affects text input types).
-### allowDuplicates
+### duplicates
Type: `Boolean` Default:`true`
Usage: Whether a user can input a duplicate item (only affects text input types).
-### allowPaste
+### paste
Type: `Boolean` Default:`true`
Usage: Whether a user can paste into the input.
-### allowSearch
+### search
Type: `Boolean` Default:`true`
Usage: Whether a user can filter options by searching (only affects select input types).
@@ -178,7 +177,7 @@ Pass an array of objects:
### highlightAll
Type: `Boolean` Default:`true`
-Usage: Whether a user can highlight items.
+Usage: Whether a user can highlight items. Highlighted items can be deleted by pressing the backspace key.
### loadingText
Type: `String` Default:`Loading...`
@@ -212,7 +211,7 @@ classNames: {
highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped',
- selectedState: 'is-selected',
+ selectedState: 'is-highlighted',
}
```
@@ -265,7 +264,7 @@ choices.disable();
Usage: Remove each selectable item.
-### removeSelectedItems();
+### removeHighlightedItems();
Usage: Remove each item the user has selected.
diff --git a/assets/scripts/dist/choices.min.js b/assets/scripts/dist/choices.min.js
index 1db8f3f..ab71144 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.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)('