flotsam-autocomplete
Advanced tools
Comparing version 0.1.0 to 0.1.1
@@ -1,2 +0,2 @@ | ||
class t{constructor(t){this.eventName=t,this.callbacks=[]}registerCallback(t){this.callbacks.push(t)}unregisterCallback(t){const e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)}fire(t){this.callbacks.slice(0).forEach(e=>{e(t)})}}class e{constructor(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}dispatch(t,e){const s=this.events[t];s&&s.fire(e)}on(e,s){let i=this.events[e];i||(i=new t(e),this.events[e]=i),i.registerCallback(s)}off(t,e){const s=this.events[t];s&&s.callbacks.indexOf(e)>-1&&(s.unregisterCallback(e),0===s.callbacks.length&&delete this.events[t])}}const s="is-open";class i extends e{constructor(t){super(),this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.inputPreview=!t.inputPreview||t.inputPreview,this.onAjax=t.onAjax,this.isEmpty=!0,this.hasEmptyState=!0,this.isOpen=!1,this.init()}setUp(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns",`modal-${super.uid}-list`),this.$input.id=`autocomplete-input-${super.uid}`}initModal(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector(`#modal-${super.uid}`),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"}initInputCheck(){this.isDisabled||this.$input.addEventListener("input",this.onAjax?t=>{this.value=t.target.value,this.minCharsExcceded()?(super.dispatch("loadingData",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}),this.onAjax(this.value).then(t=>{this.data=t,super.dispatch("loadedData",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}),this.update()})):this.isOpen&&this.closeModal()}:t=>{this.value=t.target.value,this.minCharsExcceded()?this.update():this.isOpen&&this.closeModal()})}update(){0!==this.data.length&&(this.data=this.data.filter(t=>{if(t.toLowerCase().includes(this.value.toLowerCase()))return t})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())}preventSubmit(t){t.preventDefault()}showEmptyState(){this.removeListItems(),this.$empty.innerHTML=`<div>Sorry there are no results for <strong>"${this.value}"</strong> please search again</div>`,this.$empty.style.display="block",this.isOpen||this.openModal()}hideEmptyState(){this.$empty.innerHTML="",this.$empty.style.display="none"}openModal(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(s),this.$input.setAttribute("aira-expanded","true"),super.dispatch("openModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}))}closeModal(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(s),this.$input.focus(),this.isOpen=!1,super.dispatch("closeModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})}checkKey(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))}selectItem(){[...this.list.querySelectorAll("li")].forEach((t,e)=>{e===this.currentSelected?(t.classList.add("selected-item"),t.setAttribute("aira-selected","true"),this.$input.setAttribute("aira-activedescendant",t.id),this.inputPreview&&this.setInput(t.innerText),super.dispatch("selectKey",{selected:t.textContent,input:this.$input,modal:this.$modal,floatsam:this,options:this.options})):(t.classList.remove("selected-item"),t.setAttribute("aira-selected","false"))})}selectNext(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,console.log(this.currentSelected),this.selectItem()}selectPrev(){this.currentSelected=this.currentSelected-1,this.selectItem()}unsetSelected(){this.currentSelected=null;const t=[...this.list.querySelectorAll("li")];this.$input.removeAttribute("aira-activedescendant"),t.forEach(t=>{t.classList.remove("selected-item")})}generateModal(){return`\n <div class="autocomplete-modal" id="modal-${super.uid}" >\n <div class="autocomplete-modal__inner">\n <ul \n class="autocomplete-modal__list" \n role="listbox" \n id="modal-${super.uid}-list">\n </ul>\n <div class="autocomplete-modal__empty" style="display: none"></div>\n </div>\n </div>\n `}generateListItems(){this.unsetSelected();let t="";this.data.forEach((e,s)=>{const i=new RegExp(this.value,"gi"),a=e.replace(i,t=>'<span class="autocomplete-modal__list-highlight">'+t+"</span>");t+=`\n <li class="autocomplete-modal__list-item" role="option" aria-posinset="${s+1}" aira-selected="false" id="list-item--${this.uid}">\n <button tab-index="-1">\n ${a}\n </button>\n </li>`}),this.list.innerHTML=t,[...this.list.querySelectorAll("li")].forEach(t=>{t.addEventListener("click",()=>{this.setInput(t.innerText),this.closeModal()})})}removeListItems(){this.list.innerHTML=""}setInput(t){this.$input.value=t}triggerClose(){this.closeModal()}triggerDisable(){this.isDisabled=!0,this.closeModal(),super.dispatch("disabled",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})}triggerEnable(){this.isDisabled=!1}minCharsExcceded(){return this.value.length>=this.minChars}init(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(()=>{super.dispatch("init",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},0)}}export{i as default}; | ||
class t{constructor(t){this.eventName=t,this.callbacks=[]}registerCallback(t){this.callbacks.push(t)}unregisterCallback(t){const e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)}fire(t){this.callbacks.slice(0).forEach(e=>{e(t)})}}class e{constructor(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}dispatch(t,e){const s=this.events[t];s&&s.fire(e)}on(e,s){let i=this.events[e];i||(i=new t(e),this.events[e]=i),i.registerCallback(s)}off(t,e){const s=this.events[t];s&&s.callbacks.indexOf(e)>-1&&(s.unregisterCallback(e),0===s.callbacks.length&&delete this.events[t])}}const s="is-open";class i extends e{constructor(t){super(),this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.inputPreview=!t.inputPreview||t.inputPreview,this.onAjax=t.onAjax,this.isEmpty=!0,this.hasEmptyState=!0,this.isOpen=!1,this.init()}setUp(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns",`modal-${super.uid}-list`),this.$input.id=`autocomplete-input-${super.uid}`}initModal(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector(`#modal-${super.uid}`),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"}initInputCheck(){this.isDisabled||this.$input.addEventListener("input",this.onAjax?t=>{this.value=t.target.value,this.minCharsExcceded()?(super.dispatch("loadingData",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}),this.onAjax(this.value).then(t=>{this.data=t,super.dispatch("loadedData",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}),this.update()})):this.isOpen&&this.closeModal()}:t=>{this.value=t.target.value,this.minCharsExcceded()?this.update():this.isOpen&&this.closeModal()})}update(){0!==this.data.length&&(this.data=this.data.filter(t=>{if(t.toLowerCase().includes(this.value.toLowerCase()))return t})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())}preventSubmit(t){t.preventDefault()}showEmptyState(){this.removeListItems(),this.$empty.innerHTML=`<div>Sorry there are no results for <strong>"${this.value}"</strong> please search again</div>`,this.$empty.style.display="block",this.isOpen||this.openModal()}hideEmptyState(){this.$empty.innerHTML="",this.$empty.style.display="none"}openModal(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(s),this.$input.setAttribute("aira-expanded","true"),super.dispatch("openModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}))}closeModal(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(s),this.$input.focus(),this.isOpen=!1,super.dispatch("closeModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})}checkKey(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))}selectItem(){[...this.list.querySelectorAll("li")].forEach((t,e)=>{e===this.currentSelected?(t.classList.add("selected-item"),t.setAttribute("aira-selected","true"),this.$input.setAttribute("aira-activedescendant",t.id),this.inputPreview&&this.setInput(t.innerText),super.dispatch("selectKey",{selected:t.textContent,input:this.$input,modal:this.$modal,floatsam:this,options:this.options})):(t.classList.remove("selected-item"),t.setAttribute("aira-selected","false"))})}selectNext(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()}selectPrev(){this.currentSelected=this.currentSelected-1,this.selectItem()}unsetSelected(){this.currentSelected=null;const t=[...this.list.querySelectorAll("li")];this.$input.removeAttribute("aira-activedescendant"),t.forEach(t=>{t.classList.remove("selected-item")})}generateModal(){return`\n <div class="autocomplete-modal" id="modal-${super.uid}" >\n <div class="autocomplete-modal__inner">\n <ul \n class="autocomplete-modal__list" \n role="listbox" \n id="modal-${super.uid}-list">\n </ul>\n <div class="autocomplete-modal__empty" style="display: none"></div>\n </div>\n </div>\n `}generateListItems(){this.unsetSelected();let t="";this.data.forEach((e,s)=>{const i=new RegExp(this.value,"gi"),a=e.replace(i,t=>'<span class="autocomplete-modal__list-highlight">'+t+"</span>");t+=`\n <li class="autocomplete-modal__list-item" role="option" aria-posinset="${s+1}" aira-selected="false" id="list-item--${this.uid}">\n <button tab-index="-1">\n ${a}\n </button>\n </li>`}),this.list.innerHTML=t,[...this.list.querySelectorAll("li")].forEach(t=>{t.addEventListener("click",()=>{this.setInput(t.innerText),this.closeModal()})})}removeListItems(){this.list.innerHTML=""}setInput(t){this.$input.value=t}triggerClose(){this.closeModal()}triggerDisable(){this.isDisabled=!0,this.closeModal(),super.dispatch("disabled",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})}triggerEnable(){this.isDisabled=!1}minCharsExcceded(){return this.value.length>=this.minChars}init(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(()=>{super.dispatch("init",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},0)}}export{i as default}; | ||
//# sourceMappingURL=flotsam.modern.js.map |
@@ -1,2 +0,2 @@ | ||
function t(e,i){return t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},t(e,i)}var e=/*#__PURE__*/function(){function t(t){this.eventName=t,this.callbacks=[]}var e=t.prototype;return e.registerCallback=function(t){this.callbacks.push(t)},e.unregisterCallback=function(t){var e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)},e.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})},t}(),i="is-open",s=/*#__PURE__*/function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns","modal-"+e.prototype.uid+"-list"),this.$input.id="autocomplete-input-"+e.prototype.uid},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector("#modal-"+e.prototype.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aira-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aira-selected","true"),t.$input.setAttribute("aira-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,floatsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aira-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,console.log(this.currentSelected),this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aira-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return'\n <div class="autocomplete-modal" id="modal-'+e.prototype.uid+'" >\n <div class="autocomplete-modal__inner">\n <ul \n class="autocomplete-modal__list" \n role="listbox" \n id="modal-'+e.prototype.uid+'-list">\n </ul>\n <div class="autocomplete-modal__empty" style="display: none"></div>\n </div>\n </div>\n '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aira-selected="false" id="list-item--'+t.uid+'">\n <button tab-index="-1">\n '+o+"\n </button>\n </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}());export{s as default}; | ||
function t(e,i){return t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},t(e,i)}var e=/*#__PURE__*/function(){function t(t){this.eventName=t,this.callbacks=[]}var e=t.prototype;return e.registerCallback=function(t){this.callbacks.push(t)},e.unregisterCallback=function(t){var e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)},e.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})},t}(),i="is-open",s=/*#__PURE__*/function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns","modal-"+e.prototype.uid+"-list"),this.$input.id="autocomplete-input-"+e.prototype.uid},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector("#modal-"+e.prototype.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aira-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aira-selected","true"),t.$input.setAttribute("aira-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,floatsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aira-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aira-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return'\n <div class="autocomplete-modal" id="modal-'+e.prototype.uid+'" >\n <div class="autocomplete-modal__inner">\n <ul \n class="autocomplete-modal__list" \n role="listbox" \n id="modal-'+e.prototype.uid+'-list">\n </ul>\n <div class="autocomplete-modal__empty" style="display: none"></div>\n </div>\n </div>\n '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aira-selected="false" id="list-item--'+t.uid+'">\n <button tab-index="-1">\n '+o+"\n </button>\n </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}());export{s as default}; | ||
//# sourceMappingURL=flotsam.module.js.map |
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).flotsamAutocomplete=e()}(this,function(){function t(e,i){return t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},t(e,i)}var e=/*#__PURE__*/function(){function t(t){this.eventName=t,this.callbacks=[]}var e=t.prototype;return e.registerCallback=function(t){this.callbacks.push(t)},e.unregisterCallback=function(t){var e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)},e.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})},t}(),i="is-open";/*#__PURE__*/ | ||
return function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns","modal-"+e.prototype.uid+"-list"),this.$input.id="autocomplete-input-"+e.prototype.uid},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector("#modal-"+e.prototype.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aira-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aira-selected","true"),t.$input.setAttribute("aira-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,floatsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aira-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,console.log(this.currentSelected),this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aira-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return'\n <div class="autocomplete-modal" id="modal-'+e.prototype.uid+'" >\n <div class="autocomplete-modal__inner">\n <ul \n class="autocomplete-modal__list" \n role="listbox" \n id="modal-'+e.prototype.uid+'-list">\n </ul>\n <div class="autocomplete-modal__empty" style="display: none"></div>\n </div>\n </div>\n '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aira-selected="false" id="list-item--'+t.uid+'">\n <button tab-index="-1">\n '+o+"\n </button>\n </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}())}); | ||
return function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns","modal-"+e.prototype.uid+"-list"),this.$input.id="autocomplete-input-"+e.prototype.uid},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector("#modal-"+e.prototype.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aira-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aira-selected","true"),t.$input.setAttribute("aira-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,floatsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aira-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aira-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return'\n <div class="autocomplete-modal" id="modal-'+e.prototype.uid+'" >\n <div class="autocomplete-modal__inner">\n <ul \n class="autocomplete-modal__list" \n role="listbox" \n id="modal-'+e.prototype.uid+'-list">\n </ul>\n <div class="autocomplete-modal__empty" style="display: none"></div>\n </div>\n </div>\n '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aira-selected="false" id="list-item--'+t.uid+'">\n <button tab-index="-1">\n '+o+"\n </button>\n </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,floatsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,floatsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}())}); | ||
//# sourceMappingURL=flotsam.umd.js.map |
{ | ||
"name": "flotsam-autocomplete", | ||
"version": "0.1.0", | ||
"version": "0.1.1", | ||
"description": "no tears autocomplete", | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -275,4 +275,2 @@ import EventComponent from './EventComponent' | ||
console.log(this.currentSelected) | ||
this.selectItem() | ||
@@ -279,0 +277,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
142614
533