flotsam-autocomplete - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/flotsam.modern.js

@@ -1,2 +0,2 @@
-const t="is-open";class e{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 s{constructor(t){this.events={},this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.isOpen=!1,this.isListEmpty=!0,this.isFocused=!1,this.inputPreview=!0,this.onAjax=t.onAjax,this.init()}dispatch(t,e){const s=this.events[t];s&&s.fire(e)}on(t,s){let i=this.events[t];i||(i=new e(t),this.events[t]=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])}setUp(){this.$input.setAttribute("autocomplete","off")}initModal(){this.$input.insertAdjacentHTML("afterend",'\n        <div class="autocomplete-modal">\n            <div class="autocomplete-modal__inner">\n                <ul class="autocomplete-modal__list" role="combobox">\n                </ul>\n            </div>\n        </div>\n    '),this.modal=document.querySelector(".autocomplete-modal"),this.list=this.modal.querySelector(".autocomplete-modal__list"),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.value.length>=this.minChars?(this.dispatch("loadingData",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}),this.onAjax(this.value).then(t=>{this.data=t,this.dispatch("loadedData",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}),this.update()})):this.closeModal()}:t=>{this.value=t.target.value,this.value.length>=this.minChars&&this.update()})}update(){this.data?(console.log(this.value),this.generateListItems(),!1===this.isOpen&&this.openModal()):this.closeModal()}preventSubmit(t){t.preventDefault()}openModal(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),console.log("adding keydown"),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.modal.style.pointerEvents="auto",this.modal.style.visibility="visible",this.$input.classList.add(t),this.isOpen=!0,this.dispatch("openModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}))}closeModal(){console.log("close list"),this.list.innerHTML="",this.currentSelected=null,this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),console.log("removing keydown"),document.removeEventListener("keydown",this.checkKey,!0)),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden",this.$input.classList.remove(t),this.$input.focus(),this.isOpen=!1,this.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(){const t=[...this.list.querySelectorAll("li")];console.log(this.currentSelected),t.forEach((t,e)=>{e===this.currentSelected?(t.classList.add("selected-item"),this.inputPreview&&this.setInput(t.textContent),this.dispatch("selectKey",{selected:t.textContent,input:this.$input,modal:this.modal,floatsam:this,options:this.options})):t.classList.remove("selected-item")})}selectNext(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()}selectPrev(){this.currentSelected=this.currentSelected-1,this.selectItem()}generateListItems(){let t="";this.data?(this.data.filter(t=>{if(console.log(this.value),t.toLowerCase().includes(this.value.toLowerCase()))return t}).forEach(e=>{const s=new RegExp(this.value,"gi"),i=e.replace(s,t=>"<span style='background-color: yellow;'>"+t+"</span>");t+=`<li role="option">${i}</li>`}),this.list.innerHTML=t,[...this.list.querySelectorAll("li")].forEach(t=>{t.addEventListener("click",()=>{this.setInput(t.textContent),this.closeModal()})})):console.warn("no data!!!",this.value)}setInput(t){this.$input.value=t}triggerClose(){this.closeModal()}triggerDisable(){this.isDisabled=!0,this.closeModal(),this.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(),this.dispatch("init",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})}}export{s as default};
+const t="is-open";class e{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 s{constructor(t){alert("dd"),this.events={},this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.isOpen=!1,this.isListEmpty=!0,this.isFocused=!1,this.inputPreview=!0,this.onAjax=t.onAjax,this.init()}dispatch(t,e){const s=this.events[t];s&&s.fire(e)}on(t,s){let i=this.events[t];i||(i=new e(t),this.events[t]=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])}setUp(){this.$input.setAttribute("autocomplete","off")}initModal(){this.$input.insertAdjacentHTML("afterend",'\n        <div class="autocomplete-modal testing......">\n            <div class="autocomplete-modal__inner">\n                <ul class="autocomplete-modal__list" role="combobox">\n                </ul>\n            </div>\n        </div>\n    '),this.modal=document.querySelector(".autocomplete-modal"),this.list=this.modal.querySelector(".autocomplete-modal__list"),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.value.length>=this.minChars?(this.dispatch("loadingData",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}),this.onAjax(this.value).then(t=>{this.data=t,this.dispatch("loadedData",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}),this.update()})):this.closeModal()}:t=>{this.value=t.target.value,this.value.length>=this.minChars&&this.update()})}update(){this.data?(console.log(this.value),this.generateListItems(),!1===this.isOpen&&this.openModal()):this.closeModal()}preventSubmit(t){t.preventDefault()}openModal(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),console.log("adding keydown"),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.modal.style.pointerEvents="auto",this.modal.style.visibility="visible",this.$input.classList.add(t),this.isOpen=!0,this.dispatch("openModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}))}closeModal(){console.log("close list"),this.list.innerHTML="",this.currentSelected=null,this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),console.log("removing keydown"),document.removeEventListener("keydown",this.checkKey,!0)),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden",this.$input.classList.remove(t),this.$input.focus(),this.isOpen=!1,this.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(){const t=[...this.list.querySelectorAll("li")];console.log(this.currentSelected),t.forEach((t,e)=>{e===this.currentSelected?(t.classList.add("selected-item"),this.inputPreview&&this.setInput(t.textContent),this.dispatch("selectKey",{selected:t.textContent,input:this.$input,modal:this.modal,floatsam:this,options:this.options})):t.classList.remove("selected-item")})}selectNext(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()}selectPrev(){this.currentSelected=this.currentSelected-1,this.selectItem()}generateListItems(){let t="";this.data?(this.data.filter(t=>{if(console.log(this.value),t.toLowerCase().includes(this.value.toLowerCase()))return t}).forEach(e=>{const s=new RegExp(this.value,"gi"),i=e.replace(s,t=>"<span style='background-color: yellow;'>"+t+"</span>");t+=`<li role="option">${i}</li>`}),this.list.innerHTML=t,[...this.list.querySelectorAll("li")].forEach(t=>{t.addEventListener("click",()=>{this.setInput(t.textContent),this.closeModal()})})):console.warn("no data!!!",this.value)}setInput(t){this.$input.value=t}triggerClose(){this.closeModal()}triggerDisable(){this.isDisabled=!0,this.closeModal(),this.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(),alert("kyletest!!!"),this.dispatch("init",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})}}export{s as default};
 //# sourceMappingURL=flotsam.modern.js.map

dist/flotsam.module.js

@@ -1,2 +0,2 @@
-var t="is-open",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=/*#__PURE__*/function(){function i(t){this.events={},this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.isOpen=!1,this.isListEmpty=!0,this.isFocused=!1,this.inputPreview=!0,this.onAjax=t.onAjax,this.init()}var s=i.prototype;return s.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},s.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},s.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])},s.setUp=function(){this.$input.setAttribute("autocomplete","off")},s.initModal=function(){this.$input.insertAdjacentHTML("afterend",'\n        <div class="autocomplete-modal">\n            <div class="autocomplete-modal__inner">\n                <ul class="autocomplete-modal__list" role="combobox">\n                </ul>\n            </div>\n        </div>\n    '),this.modal=document.querySelector(".autocomplete-modal"),this.list=this.modal.querySelector(".autocomplete-modal__list"),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden"},s.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(e){t.value=e.target.value,t.value.length>=t.minChars?(t.dispatch("loadingData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(e){t.data=e,t.dispatch("loadedData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.update()})):t.closeModal()}:function(e){t.value=e.target.value,t.value.length>=t.minChars&&t.update()})},s.update=function(){this.data?(console.log(this.value),this.generateListItems(),!1===this.isOpen&&this.openModal()):this.closeModal()},s.preventSubmit=function(t){t.preventDefault()},s.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),console.log("adding keydown"),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.modal.style.pointerEvents="auto",this.modal.style.visibility="visible",this.$input.classList.add(t),this.isOpen=!0,this.dispatch("openModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}))},s.closeModal=function(){console.log("close list"),this.list.innerHTML="",this.currentSelected=null,this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),console.log("removing keydown"),document.removeEventListener("keydown",this.checkKey,!0)),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden",this.$input.classList.remove(t),this.$input.focus(),this.isOpen=!1,this.dispatch("closeModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.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()))},s.selectItem=function(){var t=this,e=[].concat(this.list.querySelectorAll("li"));console.log(this.currentSelected),e.forEach(function(e,i){i===t.currentSelected?(e.classList.add("selected-item"),t.inputPreview&&t.setInput(e.textContent),t.dispatch("selectKey",{selected:e.textContent,input:t.$input,modal:t.modal,floatsam:t,options:t.options})):e.classList.remove("selected-item")})},s.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},s.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},s.generateListItems=function(){var t=this,e="";this.data?(this.data.filter(function(e){if(console.log(t.value),e.toLowerCase().includes(t.value.toLowerCase()))return e}).forEach(function(i){var s=new RegExp(t.value,"gi"),n=i.replace(s,function(t){return"<span style='background-color: yellow;'>"+t+"</span>"});e=e+'<li role="option">'+n+"</li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.textContent),t.closeModal()})})):console.warn("no data!!!",this.value)},s.setInput=function(t){this.$input.value=t},s.triggerClose=function(){this.closeModal()},s.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),this.dispatch("disabled",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.triggerEnable=function(){this.isDisabled=!1},s.minCharsExcceded=function(){return this.value.length>=this.minChars},s.init=function(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),this.dispatch("init",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},i}();export{i as default};
+var t="is-open",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=/*#__PURE__*/function(){function i(t){alert("dd"),this.events={},this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.isOpen=!1,this.isListEmpty=!0,this.isFocused=!1,this.inputPreview=!0,this.onAjax=t.onAjax,this.init()}var s=i.prototype;return s.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},s.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},s.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])},s.setUp=function(){this.$input.setAttribute("autocomplete","off")},s.initModal=function(){this.$input.insertAdjacentHTML("afterend",'\n        <div class="autocomplete-modal testing......">\n            <div class="autocomplete-modal__inner">\n                <ul class="autocomplete-modal__list" role="combobox">\n                </ul>\n            </div>\n        </div>\n    '),this.modal=document.querySelector(".autocomplete-modal"),this.list=this.modal.querySelector(".autocomplete-modal__list"),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden"},s.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(e){t.value=e.target.value,t.value.length>=t.minChars?(t.dispatch("loadingData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(e){t.data=e,t.dispatch("loadedData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.update()})):t.closeModal()}:function(e){t.value=e.target.value,t.value.length>=t.minChars&&t.update()})},s.update=function(){this.data?(console.log(this.value),this.generateListItems(),!1===this.isOpen&&this.openModal()):this.closeModal()},s.preventSubmit=function(t){t.preventDefault()},s.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),console.log("adding keydown"),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.modal.style.pointerEvents="auto",this.modal.style.visibility="visible",this.$input.classList.add(t),this.isOpen=!0,this.dispatch("openModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}))},s.closeModal=function(){console.log("close list"),this.list.innerHTML="",this.currentSelected=null,this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),console.log("removing keydown"),document.removeEventListener("keydown",this.checkKey,!0)),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden",this.$input.classList.remove(t),this.$input.focus(),this.isOpen=!1,this.dispatch("closeModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.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()))},s.selectItem=function(){var t=this,e=[].concat(this.list.querySelectorAll("li"));console.log(this.currentSelected),e.forEach(function(e,i){i===t.currentSelected?(e.classList.add("selected-item"),t.inputPreview&&t.setInput(e.textContent),t.dispatch("selectKey",{selected:e.textContent,input:t.$input,modal:t.modal,floatsam:t,options:t.options})):e.classList.remove("selected-item")})},s.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},s.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},s.generateListItems=function(){var t=this,e="";this.data?(this.data.filter(function(e){if(console.log(t.value),e.toLowerCase().includes(t.value.toLowerCase()))return e}).forEach(function(i){var s=new RegExp(t.value,"gi"),n=i.replace(s,function(t){return"<span style='background-color: yellow;'>"+t+"</span>"});e=e+'<li role="option">'+n+"</li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.textContent),t.closeModal()})})):console.warn("no data!!!",this.value)},s.setInput=function(t){this.$input.value=t},s.triggerClose=function(){this.closeModal()},s.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),this.dispatch("disabled",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.triggerEnable=function(){this.isDisabled=!1},s.minCharsExcceded=function(){return this.value.length>=this.minChars},s.init=function(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),alert("kyletest!!!"),this.dispatch("init",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},i}();export{i as default};
 //# sourceMappingURL=flotsam.module.js.map

dist/flotsam.umd.js

@@ -1,3 +0,3 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).flotsam=e()}(this,function(){var t="is-open",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}();/*#__PURE__*/
-return function(){function i(t){this.events={},this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.isOpen=!1,this.isListEmpty=!0,this.isFocused=!1,this.inputPreview=!0,this.onAjax=t.onAjax,this.init()}var s=i.prototype;return s.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},s.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},s.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])},s.setUp=function(){this.$input.setAttribute("autocomplete","off")},s.initModal=function(){this.$input.insertAdjacentHTML("afterend",'\n        <div class="autocomplete-modal">\n            <div class="autocomplete-modal__inner">\n                <ul class="autocomplete-modal__list" role="combobox">\n                </ul>\n            </div>\n        </div>\n    '),this.modal=document.querySelector(".autocomplete-modal"),this.list=this.modal.querySelector(".autocomplete-modal__list"),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden"},s.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(e){t.value=e.target.value,t.value.length>=t.minChars?(t.dispatch("loadingData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(e){t.data=e,t.dispatch("loadedData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.update()})):t.closeModal()}:function(e){t.value=e.target.value,t.value.length>=t.minChars&&t.update()})},s.update=function(){this.data?(console.log(this.value),this.generateListItems(),!1===this.isOpen&&this.openModal()):this.closeModal()},s.preventSubmit=function(t){t.preventDefault()},s.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),console.log("adding keydown"),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.modal.style.pointerEvents="auto",this.modal.style.visibility="visible",this.$input.classList.add(t),this.isOpen=!0,this.dispatch("openModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}))},s.closeModal=function(){console.log("close list"),this.list.innerHTML="",this.currentSelected=null,this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),console.log("removing keydown"),document.removeEventListener("keydown",this.checkKey,!0)),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden",this.$input.classList.remove(t),this.$input.focus(),this.isOpen=!1,this.dispatch("closeModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.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()))},s.selectItem=function(){var t=this,e=[].concat(this.list.querySelectorAll("li"));console.log(this.currentSelected),e.forEach(function(e,i){i===t.currentSelected?(e.classList.add("selected-item"),t.inputPreview&&t.setInput(e.textContent),t.dispatch("selectKey",{selected:e.textContent,input:t.$input,modal:t.modal,floatsam:t,options:t.options})):e.classList.remove("selected-item")})},s.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},s.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},s.generateListItems=function(){var t=this,e="";this.data?(this.data.filter(function(e){if(console.log(t.value),e.toLowerCase().includes(t.value.toLowerCase()))return e}).forEach(function(i){var s=new RegExp(t.value,"gi"),n=i.replace(s,function(t){return"<span style='background-color: yellow;'>"+t+"</span>"});e=e+'<li role="option">'+n+"</li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.textContent),t.closeModal()})})):console.warn("no data!!!",this.value)},s.setInput=function(t){this.$input.value=t},s.triggerClose=function(){this.closeModal()},s.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),this.dispatch("disabled",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.triggerEnable=function(){this.isDisabled=!1},s.minCharsExcceded=function(){return this.value.length>=this.minChars},s.init=function(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),this.dispatch("init",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},i}()});
+!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(){var t="is-open",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}();/*#__PURE__*/
+return function(){function i(t){alert("dd"),this.events={},this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.isOpen=!1,this.isListEmpty=!0,this.isFocused=!1,this.inputPreview=!0,this.onAjax=t.onAjax,this.init()}var s=i.prototype;return s.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},s.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},s.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])},s.setUp=function(){this.$input.setAttribute("autocomplete","off")},s.initModal=function(){this.$input.insertAdjacentHTML("afterend",'\n        <div class="autocomplete-modal testing......">\n            <div class="autocomplete-modal__inner">\n                <ul class="autocomplete-modal__list" role="combobox">\n                </ul>\n            </div>\n        </div>\n    '),this.modal=document.querySelector(".autocomplete-modal"),this.list=this.modal.querySelector(".autocomplete-modal__list"),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden"},s.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(e){t.value=e.target.value,t.value.length>=t.minChars?(t.dispatch("loadingData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.onAjax(t.value).then(function(e){t.data=e,t.dispatch("loadedData",{input:t.$input,modal:t.modal,floatsam:t,options:t.options}),t.update()})):t.closeModal()}:function(e){t.value=e.target.value,t.value.length>=t.minChars&&t.update()})},s.update=function(){this.data?(console.log(this.value),this.generateListItems(),!1===this.isOpen&&this.openModal()):this.closeModal()},s.preventSubmit=function(t){t.preventDefault()},s.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),console.log("adding keydown"),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.modal.style.pointerEvents="auto",this.modal.style.visibility="visible",this.$input.classList.add(t),this.isOpen=!0,this.dispatch("openModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options}))},s.closeModal=function(){console.log("close list"),this.list.innerHTML="",this.currentSelected=null,this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),console.log("removing keydown"),document.removeEventListener("keydown",this.checkKey,!0)),this.modal.style.pointerEvents="none",this.modal.style.visibility="hidden",this.$input.classList.remove(t),this.$input.focus(),this.isOpen=!1,this.dispatch("closeModal",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.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()))},s.selectItem=function(){var t=this,e=[].concat(this.list.querySelectorAll("li"));console.log(this.currentSelected),e.forEach(function(e,i){i===t.currentSelected?(e.classList.add("selected-item"),t.inputPreview&&t.setInput(e.textContent),t.dispatch("selectKey",{selected:e.textContent,input:t.$input,modal:t.modal,floatsam:t,options:t.options})):e.classList.remove("selected-item")})},s.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},s.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},s.generateListItems=function(){var t=this,e="";this.data?(this.data.filter(function(e){if(console.log(t.value),e.toLowerCase().includes(t.value.toLowerCase()))return e}).forEach(function(i){var s=new RegExp(t.value,"gi"),n=i.replace(s,function(t){return"<span style='background-color: yellow;'>"+t+"</span>"});e=e+'<li role="option">'+n+"</li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.textContent),t.closeModal()})})):console.warn("no data!!!",this.value)},s.setInput=function(t){this.$input.value=t},s.triggerClose=function(){this.closeModal()},s.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),this.dispatch("disabled",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},s.triggerEnable=function(){this.isDisabled=!1},s.minCharsExcceded=function(){return this.value.length>=this.minChars},s.init=function(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),alert("kyletest!!!"),this.dispatch("init",{input:this.$input,modal:this.modal,floatsam:this,options:this.options})},i}()});
 //# sourceMappingURL=flotsam.umd.js.map

package.json

 {
-  "name": "flotsam-autocomplete",
-  "version": "0.0.1",
-  "description": "no tears autocomplete",
-  "type": "module",
-  "source": "src/index.js",
-  "exports": {
-    "require": "./dist/flotsam.cjs",
-    "default": "./dist/flotsam.modern.js"
-  },
-  "main": "./dist/flotsam.cjs",
-  "module": "./dist/flotsam.module.js",
-  "unpkg": "./dist/flotsam.umd.js",
-  "scripts": {
-    "build": "microbundle",
-    "dev": "microbundle watch"
-  },
-  "keywords": [
-    "autocompelte",
-    "autocomplete",
-    "typeahead",
-    "type ahead"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/kylegoines/flotsam.git"
-  },
-  "author": "kylegoines",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/kylegoines/flotsam/issues"
-  },
-  "homepage": "https://github.com/kylegoines/flotsam#readme",
-  "devDependencies": {
-    "microbundle": "^0.15.1"
-  }
+    "name": "flotsam-autocomplete",
+    "version": "0.0.2",
+    "description": "no tears autocomplete",
+    "type": "module",
+    "source": "src/index.js",
+    "exports": {
+        "require": "./dist/flotsam.cjs",
+        "default": "./dist/flotsam.modern.js"
+    },
+    "main": "./dist/flotsam.cjs",
+    "module": "./dist/flotsam.module.js",
+    "unpkg": "./dist/flotsam.umd.js",
+    "scripts": {
+        "build": "microbundle",
+        "dev": "microbundle watch"
+    },
+    "keywords": [
+        "autocompelte",
+        "autocomplete",
+        "typeahead",
+        "type ahead"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/kylegoines/flotsam.git"
+    },
+    "author": "kylegoines",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/kylegoines/flotsam/issues"
+    },
+    "homepage": "https://github.com/kylegoines/flotsam#readme",
+    "devDependencies": {
+        "microbundle": "^0.15.1"
+    },
+    "dependencies": {
+        "prettier": "^2.8.3"
+    }
 }

README.md

@@ -15,5 +15,5 @@ # Flotsam autocomplete
 
-After looking over the choices for autocomplete libs on npm i felt there wasnt simple enough, with clear documentation, a modern event bus system, flexable with styles, one that doesnt use jquery (im taking about you typeahead.js), with a small footprint (2kb), and still in active development. This should be able to handle solutions that need flexable ajax or static data with acessiable key controls. I kept key interactions as similar as google's typeahead as posisble.
+After looking over the choices for autocomplete libs on npm i felt the choices for typeahead/autocomplete UI's there wasnt one simple enough with clear documentation, a modern event bus system, flexable with styles, that doesnt use jquery (im taking about you typeahead.js), with a small footprint (2kb), and still in active development. This should be able to handle solutions that need flexable ajax or static data with acessiable key controls. I kept key interactions as similar as google's typeahead as posisble.
 
-While this libary is every thing I need usually, it might not be everything you need. If you need image rendering, custom html injections in the list, need sub section and subtitles in the autcomplete modal isnt it. Checkout [@algolia/autocomplete-js](https://www.npmjs.com/package/@algolia/autocomplete-js) This beast will do it all.
+While this libary is every thing I need usually, it might not be everything you need. If you need image rendering, custom html injections in the list, need sub sections, subtitles ect, this isnt it. Checkout [@algolia/autocomplete-js](https://www.npmjs.com/package/@algolia/autocomplete-js) This beast will do it all.
 
@@ -28,8 +28,8 @@ ### Why flotsom?
 
-## Using Floatsam
+## Using Flotsam
 
-To initialize floatsam in a project import it in the desired file!
+To initialize flotsam in a project import it in the desired file!
 
 ```
-import floatsam from 'floatsam'
+import flotsam from 'flotsam-autocomplete'
 ```
@@ -40,3 +40,3 @@
 ```
-const typeahead = new floatsam({
+const typeahead = new flotsam({
     el: document.querySelector('input'),
@@ -47,4 +47,4 @@ data: [!!data here!!]
 
-Now, when interacting with the input floatsom will render a absolutely positioned box under the input
-**for best results set the parent element to relaitive position so flotsome knows where to go!**
+Now, when interacting with the input flotsom will render a absolutely positioned box under the input
+**for best results set the parent element to relaitive position so flotsom knows where to go!**
 
@@ -124,2 +124,6 @@ The rendered html should look a lil' something like this
 })
+
+typeahead.on('disabled', (instanceData) => {
+  console.log('modal item keyed')
+})
 ```
@@ -134,5 +138,8 @@
 ```javascript
-// force close the floatsome
+// force close the flotsom
 typeahead.triggerClose()
 
+// disables flotsom
+typeahead.Triggerdisable()
+
 // trigger event wish list
@@ -155,3 +162,3 @@ // disable, destory
 
-Above was a bit too conversational for you, here are tables of the above information!
+If above was a bit too conversational for you, here are tables of the above information!
 
@@ -158,0 +165,0 @@ ## options

src/index.js

 const modal = () => {
-  return `
-        <div class="autocomplete-modal">
+    return `
+        <div class="autocomplete-modal we active">
             <div class="autocomplete-modal__inner">
@@ -16,392 +16,396 @@ <ul class="autocomplete-modal__list" role="combobox">
 class DispatcherEvent {
-  constructor(eventName) {
-    this.eventName = eventName
-    this.callbacks = []
-  }
+    constructor(eventName) {
+        this.eventName = eventName
+        this.callbacks = []
+    }
 
-  registerCallback(callback) {
-    this.callbacks.push(callback)
-  }
+    registerCallback(callback) {
+        this.callbacks.push(callback)
+    }
 
-  unregisterCallback(callback) {
-    const index = this.callbacks.indexOf(callback)
-    if (index > -1) {
-      this.callbacks.splice(index, 1)
+    unregisterCallback(callback) {
+        const index = this.callbacks.indexOf(callback)
+        if (index > -1) {
+            this.callbacks.splice(index, 1)
+        }
     }
-  }
 
-  fire(data) {
-    const callbacks = this.callbacks.slice(0)
-    callbacks.forEach((callback) => {
-      callback(data)
-    })
-  }
+    fire(data) {
+        const callbacks = this.callbacks.slice(0)
+        callbacks.forEach((callback) => {
+            callback(data)
+        })
+    }
 }
 
 class floatsam {
-  ////////////////////////////////////////////////////
-  // construct
-  ////////////////////////////////////////////////////
-  constructor(options) {
-    this.events = {}
+    ////////////////////////////////////////////////////
+    // construct
+    ////////////////////////////////////////////////////
+    constructor(options) {
+        this.events = {}
 
-    // for debugging
-    this.options = options
+        // for debugging
+        this.options = options
 
-    this.$input = options.el
-    this.data = options.data ? options.data : false
-    this.minChars = options.minChars ? options.minChars : 2
-    this.isOpen = false
-    this.isListEmpty = true
-    this.isFocused = false
-    this.inputPreview = true
-    this.onAjax = options.onAjax
-    this.init()
-  }
+        this.$input = options.el
+        this.data = options.data ? options.data : false
+        this.minChars = options.minChars ? options.minChars : 2
+        this.isOpen = false
+        this.isListEmpty = true
+        this.isFocused = false
+        this.inputPreview = true
+        this.onAjax = options.onAjax
+        this.init()
+    }
 
-  ////////////////////////////////////////////////////
-  // event trigger and listeners
-  ////////////////////////////////////////////////////
-  dispatch(eventName, data) {
-    const event = this.events[eventName]
-    if (event) {
-      event.fire(data)
+    ////////////////////////////////////////////////////
+    // event trigger and listeners
+    ////////////////////////////////////////////////////
+    dispatch(eventName, data) {
+        const event = this.events[eventName]
+        if (event) {
+            event.fire(data)
+        }
     }
-  }
 
-  on(eventName, callback) {
-    let event = this.events[eventName]
-    if (!event) {
-      event = new DispatcherEvent(eventName)
-      this.events[eventName] = event
+    on(eventName, callback) {
+        let event = this.events[eventName]
+        if (!event) {
+            event = new DispatcherEvent(eventName)
+            this.events[eventName] = event
+        }
+        event.registerCallback(callback)
     }
-    event.registerCallback(callback)
-  }
 
-  off(eventName, callback) {
-    const event = this.events[eventName]
-    if (event && event.callbacks.indexOf(callback) > -1) {
-      event.unregisterCallback(callback)
-      if (event.callbacks.length === 0) {
-        delete this.events[eventName]
-      }
+    off(eventName, callback) {
+        const event = this.events[eventName]
+        if (event && event.callbacks.indexOf(callback) > -1) {
+            event.unregisterCallback(callback)
+            if (event.callbacks.length === 0) {
+                delete this.events[eventName]
+            }
+        }
     }
-  }
 
-  ////////////////////////////////////////////////////
-  // inits
-  ////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////
+    // inits
+    ////////////////////////////////////////////////////
 
-  // setup has some housekeeping of inputs and attrs to increase quality of life
-  setUp() {
-    // add autocomplete off to input to not get in the way of dropdown
-    this.$input.setAttribute('autocomplete', 'off')
-  }
+    // setup has some housekeeping of inputs and attrs to increase quality of life
+    setUp() {
+        // add autocomplete off to input to not get in the way of dropdown
+        this.$input.setAttribute('autocomplete', 'off')
+    }
 
-  initModal() {
-    // append modal to the page
-    this.$input.insertAdjacentHTML('afterend', modal())
+    initModal() {
+        // append modal to the page
+        this.$input.insertAdjacentHTML('afterend', modal())
 
-    // grab an instance of it to use later
-    this.modal = document.querySelector('.autocomplete-modal')
-    this.list = this.modal.querySelector('.autocomplete-modal__list')
+        // grab an instance of it to use later
+        this.modal = document.querySelector('.autocomplete-modal')
+        this.list = this.modal.querySelector('.autocomplete-modal__list')
 
-    // intial modal styles
-    this.modal.style.pointerEvents = 'none'
-    this.modal.style.visibility = 'hidden'
-  }
+        // intial modal styles
+        this.modal.style.pointerEvents = 'none'
+        this.modal.style.visibility = 'hidden'
+    }
 
-  initInputCheck() {
-    // check the input
+    initInputCheck() {
+        // check the input
 
-    if (this.isDisabled) return
+        if (this.isDisabled) return
 
-    // if we want to use ajax we build a promise to get data
-    if (this.onAjax) {
-      this.$input.addEventListener('input', (e) => {
-        this.value = e.target.value
+        // if we want to use ajax we build a promise to get data
+        if (this.onAjax) {
+            this.$input.addEventListener('input', (e) => {
+                this.value = e.target.value
 
-        if (this.value.length >= this.minChars) {
-          this.dispatch('loadingData', {
-            input: this.$input,
-            modal: this.modal,
-            floatsam: this,
-            options: this.options,
-          })
-          this.onAjax(this.value).then((result) => {
-            this.data = result
+                if (this.value.length >= this.minChars) {
+                    this.dispatch('loadingData', {
+                        input: this.$input,
+                        modal: this.modal,
+                        floatsam: this,
+                        options: this.options,
+                    })
+                    this.onAjax(this.value).then((result) => {
+                        this.data = result
 
-            this.dispatch('loadedData', {
-              input: this.$input,
-              modal: this.modal,
-              floatsam: this,
-              options: this.options,
+                        this.dispatch('loadedData', {
+                            input: this.$input,
+                            modal: this.modal,
+                            floatsam: this,
+                            options: this.options,
+                        })
+
+                        this.update()
+                    })
+                } else {
+                    this.closeModal()
+                }
             })
-
-            this.update()
-          })
         } else {
-          this.closeModal()
+            this.$input.addEventListener('input', (e) => {
+                this.value = e.target.value
+                if (this.value.length >= this.minChars) {
+                    this.update()
+                }
+            })
         }
-      })
-    } else {
-      this.$input.addEventListener('input', (e) => {
-        this.value = e.target.value
-        if (this.value.length >= this.minChars) {
-          this.update()
-        }
-      })
     }
-  }
 
-  update() {
-    // do all data updates here
+    update() {
+        // do all data updates here
 
-    // grab a copy of the current list so we can do some minipulation
+        // grab a copy of the current list so we can do some minipulation
 
-    if (this.data) {
-      console.log(this.value)
-      this.generateListItems()
+        if (this.data) {
+            console.log(this.value)
+            this.generateListItems()
 
-      // this only triggers once then sets the modal to open state
-      if (this.isOpen === false) {
-        this.openModal()
-      }
-    } else {
-      this.closeModal()
+            // this only triggers once then sets the modal to open state
+            if (this.isOpen === false) {
+                this.openModal()
+            }
+        } else {
+            this.closeModal()
+        }
     }
-  }
 
-  preventSubmit(e) {
-    e.preventDefault()
-  }
+    preventSubmit(e) {
+        e.preventDefault()
+    }
 
-  ////////////////////////////////////////////////////
-  // hide and show modal
-  // bread and butter functions all event setup
-  // and breakdown here
-  ////////////////////////////////////////////////////
-  openModal() {
-    if (this.isDisabled) return
+    ////////////////////////////////////////////////////
+    // hide and show modal
+    // bread and butter functions all event setup
+    // and breakdown here
+    ////////////////////////////////////////////////////
+    openModal() {
+        if (this.isDisabled) return
 
-    document.addEventListener('submit', this.preventSubmit)
-    console.log('adding keydown')
-    this.checkKey = this.checkKey.bind(this)
-    document.addEventListener('keydown', this.checkKey, true)
+        document.addEventListener('submit', this.preventSubmit)
+        console.log('adding keydown')
+        this.checkKey = this.checkKey.bind(this)
+        document.addEventListener('keydown', this.checkKey, true)
 
-    // styles and classes
-    this.modal.style.pointerEvents = 'auto'
-    this.modal.style.visibility = 'visible'
-    this.$input.classList.add(OPEN_CLASS)
+        // styles and classes
+        this.modal.style.pointerEvents = 'auto'
+        this.modal.style.visibility = 'visible'
+        this.$input.classList.add(OPEN_CLASS)
 
-    this.isOpen = true
+        this.isOpen = true
 
-    this.dispatch('openModal', {
-      input: this.$input,
-      modal: this.modal,
-      floatsam: this,
-      options: this.options,
-    })
-  }
-
-  closeModal() {
-    console.log('close list')
-    this.list.innerHTML = ''
-    this.currentSelected = null
-    if (this.isOpen) {
-      document.removeEventListener('submit', this.preventSubmit)
-      console.log('removing keydown')
-      document.removeEventListener('keydown', this.checkKey, true)
+        this.dispatch('openModal', {
+            input: this.$input,
+            modal: this.modal,
+            floatsam: this,
+            options: this.options,
+        })
     }
 
-    this.modal.style.pointerEvents = 'none'
-    this.modal.style.visibility = 'hidden'
-    this.$input.classList.remove(OPEN_CLASS)
-    this.$input.focus()
+    closeModal() {
+        console.log('close list')
+        this.list.innerHTML = ''
+        this.currentSelected = null
+        if (this.isOpen) {
+            document.removeEventListener('submit', this.preventSubmit)
+            console.log('removing keydown')
+            document.removeEventListener('keydown', this.checkKey, true)
+        }
 
-    this.isOpen = false
+        this.modal.style.pointerEvents = 'none'
+        this.modal.style.visibility = 'hidden'
+        this.$input.classList.remove(OPEN_CLASS)
+        this.$input.focus()
 
-    this.dispatch('closeModal', {
-      input: this.$input,
-      modal: this.modal,
-      floatsam: this,
-      options: this.options,
-    })
-  }
-  ////////////////////////////////////////////////////
-  // key event checker - the key event triggers
-  ////////////////////////////////////////////////////
+        this.isOpen = false
 
-  checkKey(e) {
-    if (e.keyCode == '38') {
-      // up arrowspot
-      this.selectPrev()
-    } else if (e.keyCode == '40') {
-      // down arrow
-      this.selectNext()
-    } else if (e.keyCode == '37') {
-      // left arrow
-    } else if (e.keyCode == '39') {
-      // right arrow
-    } else if (e.keyCode == '27') {
-      // escape
-      e.preventDefault()
-      this.closeModal()
-    } else if (e.keyCode == '9') {
-      // tab
-      e.preventDefault()
-      this.closeModal()
-    } else if (e.keyCode == '13') {
-      // enter
-      e.preventDefault()
-      this.closeModal()
-      this.$input.closest('form').submit()
+        this.dispatch('closeModal', {
+            input: this.$input,
+            modal: this.modal,
+            floatsam: this,
+            options: this.options,
+        })
     }
-  }
+    ////////////////////////////////////////////////////
+    // key event checker - the key event triggers
+    ////////////////////////////////////////////////////
 
-  ////////////////////////////////////////////////////
-  // visual selection of the items on the modal
-  ////////////////////////////////////////////////////
-  selectItem() {
-    const items = [...this.list.querySelectorAll('li')]
-    console.log(this.currentSelected)
-    items.forEach((item, index) => {
-      if (index === this.currentSelected) {
-        item.classList.add('selected-item')
-        if (this.inputPreview) {
-          this.setInput(item.textContent)
+    checkKey(e) {
+        if (e.keyCode == '38') {
+            // up arrowspot
+            this.selectPrev()
+        } else if (e.keyCode == '40') {
+            // down arrow
+            this.selectNext()
+        } else if (e.keyCode == '37') {
+            // left arrow
+        } else if (e.keyCode == '39') {
+            // right arrow
+        } else if (e.keyCode == '27') {
+            // escape
+            e.preventDefault()
+            this.closeModal()
+        } else if (e.keyCode == '9') {
+            // tab
+            e.preventDefault()
+            this.closeModal()
+        } else if (e.keyCode == '13') {
+            // enter
+            e.preventDefault()
+            this.closeModal()
+            this.$input.closest('form').submit()
         }
+    }
 
-        // !!EVENT!! on select key
-        this.dispatch('selectKey', {
-          selected: item.textContent,
-          input: this.$input,
-          modal: this.modal,
-          floatsam: this,
-          options: this.options,
+    ////////////////////////////////////////////////////
+    // visual selection of the items on the modal
+    ////////////////////////////////////////////////////
+    selectItem() {
+        const items = [...this.list.querySelectorAll('li')]
+        console.log(this.currentSelected)
+        items.forEach((item, index) => {
+            if (index === this.currentSelected) {
+                item.classList.add('selected-item')
+                if (this.inputPreview) {
+                    this.setInput(item.textContent)
+                }
+
+                // !!EVENT!! on select key
+                this.dispatch('selectKey', {
+                    selected: item.textContent,
+                    input: this.$input,
+                    modal: this.modal,
+                    floatsam: this,
+                    options: this.options,
+                })
+            } else {
+                item.classList.remove('selected-item')
+            }
         })
-      } else {
-        item.classList.remove('selected-item')
-      }
-    })
-  }
+    }
 
-  selectNext() {
-    if (this.currentSelected === null) {
-      this.currentSelected = 0
-    } else {
-      this.currentSelected = this.currentSelected + 1
+    selectNext() {
+        if (this.currentSelected === null) {
+            this.currentSelected = 0
+        } else {
+            this.currentSelected = this.currentSelected + 1
+        }
+        this.selectItem()
     }
-    this.selectItem()
-  }
 
-  selectPrev() {
-    this.currentSelected = this.currentSelected - 1
-    this.selectItem()
-  }
+    selectPrev() {
+        this.currentSelected = this.currentSelected - 1
+        this.selectItem()
+    }
 
-  ////////////////////////////////////////////////////
-  // render function for the list
-  // - runs on every data fetch
-  ////////////////////////////////////////////////////
-  generateListItems() {
-    let list = ``
+    ////////////////////////////////////////////////////
+    // render function for the list
+    // - runs on every data fetch
+    ////////////////////////////////////////////////////
+    generateListItems() {
+        let list = ``
 
-    if (!this.data) {
-      console.warn('no data!!!', this.value)
-      return
-    }
+        if (!this.data) {
+            console.warn('no data!!!', this.value)
+            return
+        }
 
-    const filteredData = this.data.filter((item) => {
-      console.log(this.value)
-      if (item.toLowerCase().includes(this.value.toLowerCase())) {
-        return item
-      }
-    })
+        const filteredData = this.data.filter((item) => {
+            console.log(this.value)
+            if (item.toLowerCase().includes(this.value.toLowerCase())) {
+                return item
+            }
+        })
 
-    filteredData.forEach((item) => {
-      const regex = new RegExp(this.value, 'gi')
-      const response = item.replace(regex, (str) => {
-        return "<span style='background-color: yellow;'>" + str + '</span>'
-      })
-      list = list + `<li role="option">${response}</li>`
-    })
+        filteredData.forEach((item) => {
+            const regex = new RegExp(this.value, 'gi')
+            const response = item.replace(regex, (str) => {
+                return (
+                    "<span style='background-color: yellow;'>" + str + '</span>'
+                )
+            })
+            list = list + `<li role="option">${response}</li>`
+        })
 
-    // append list to the screen
-    this.list.innerHTML = list
+        // append list to the screen
+        this.list.innerHTML = list
 
-    // now that list is on DOM add event listeners
-    const listItems = [...this.list.querySelectorAll('li')]
-    listItems.forEach((item) => {
-      item.addEventListener('click', () => {
-        this.setInput(item.textContent)
-        this.closeModal()
-      })
-    })
-  }
+        // now that list is on DOM add event listeners
+        const listItems = [...this.list.querySelectorAll('li')]
+        listItems.forEach((item) => {
+            item.addEventListener('click', () => {
+                this.setInput(item.textContent)
+                this.closeModal()
+            })
+        })
+    }
 
-  ////////////////////////////////////////////////////
-  // visually set input value (optionally triggered)
-  ////////////////////////////////////////////////////
-  setInput(textValue) {
-    this.$input.value = textValue
-  }
+    ////////////////////////////////////////////////////
+    // visually set input value (optionally triggered)
+    ////////////////////////////////////////////////////
+    setInput(textValue) {
+        this.$input.value = textValue
+    }
 
-  ////////////////////////////////////////////////////
-  // public triggers - USERS SHOULD ONLY USE THESE
-  ////////////////////////////////////////////////////
-  triggerClose() {
-    this.closeModal()
-  }
+    ////////////////////////////////////////////////////
+    // public triggers - USERS SHOULD ONLY USE THESE
+    ////////////////////////////////////////////////////
+    triggerClose() {
+        this.closeModal()
+    }
 
-  triggerDisable() {
-    this.isDisabled = true
-    this.closeModal()
-    this.dispatch('disabled', {
-      input: this.$input,
-      modal: this.modal,
-      floatsam: this,
-      options: this.options,
-    })
-  }
+    triggerDisable() {
+        this.isDisabled = true
+        this.closeModal()
+        this.dispatch('disabled', {
+            input: this.$input,
+            modal: this.modal,
+            floatsam: this,
+            options: this.options,
+        })
+    }
 
-  triggerEnable() {
-    this.isDisabled = false
-  }
+    triggerEnable() {
+        this.isDisabled = false
+    }
 
-  ////////////////////////////////////////////////////
-  // utils
-  ////////////////////////////////////////////////////
-  minCharsExcceded() {
-    if (this.value.length >= this.minChars) {
-      return true
-    } else {
-      return false
+    ////////////////////////////////////////////////////
+    // utils
+    ////////////////////////////////////////////////////
+    minCharsExcceded() {
+        if (this.value.length >= this.minChars) {
+            return true
+        } else {
+            return false
+        }
     }
-  }
 
-  ////////////////////////////////////////////////////
-  // init fn - run on singleton creation
-  ////////////////////////////////////////////////////
-  init() {
-    this._self = this
-    this.currentSelected = null
-    this.isDisabled = false
+    ////////////////////////////////////////////////////
+    // init fn - run on singleton creation
+    ////////////////////////////////////////////////////
+    init() {
+        this._self = this
+        this.currentSelected = null
+        this.isDisabled = false
 
-    this.setUp()
-    // inject the modal onto the page and get an instance of it
-    this.initModal()
+        this.setUp()
+        // inject the modal onto the page and get an instance of it
+        this.initModal()
 
-    // add listener to onInput of input
-    this.initInputCheck()
+        // add listener to onInput of input
+        this.initInputCheck()
 
-    this.dispatch('init', {
-      input: this.$input,
-      modal: this.modal,
-      floatsam: this,
-      options: this.options,
-    })
-  }
+        alert('kyletest!!!')
+
+        this.dispatch('init', {
+            input: this.$input,
+            modal: this.modal,
+            floatsam: this,
+            options: this.options,
+        })
+    }
 }
 
 export default floatsam

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105855

increased by2.41%

Number of package files

12

increased by9.09%

Lines of code

437

increased by0.69%

Number of lines in readme file

163

increased by4.49%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedprettier@^2.8.3

• + Addedprettier@2.8.8(transitive)