infinite-autocomplete - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

dist/index.js

		@@ -1,1 +0,1 @@
		!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(this,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,i){n.o(e,t)\|\|Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e.prototype.render=function(){return'<input class="infinite-autocomplete-default-input" type="text" />'},e}();t.InputComponent=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){this.listElementSelector="ul"}return e.prototype.render=function(){return"<"+this.listElementSelector+' class="infinite-autocomplete-default-options"></'+this.listElementSelector+">"},e.prototype.renderOption=function(e){return"<li>\n "+e.text+"\n </li>"},e}();t.OptionsComponent=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.HOVERED="hovered",t.KEY_PRESS_STATES={UP:38,DOWN:40,ENTER:13},t.MissingInputElementInInputComponentExceptionMsg=new Error("Customized input should contain input element <input />"),t.optionsWrapperExceptionMsg=new Error("Couldn't get the options base element."),t.inputElementExceptionMsg=new Error("Couldn't get the input element."),t.dataSourceMissingExceptionMsg=new Error("You must pass data or getDataFromApi function via config"),t.fetchSizeExceptionMsg=new Error("fetchSize must be overriden with correct numeric value")},function(e,t,n){"use strict";var i=this&&this.__assign\|\|Object.assign\|\|function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o=this&&this.__awaiter\|\|function(e,t,n,i){return new(n\|\|(n=Promise))(function(o,r){function s(e){try{a(i.next(e))}catch(e){r(e)}}function c(e){try{a(i.throw(e))}catch(e){r(e)}}function a(e){e.done?o(e.value):new n(function(t){t(e.value)}).then(s,c)}a((i=i.apply(e,t\|\|[])).next())})},r=this&&this.__generator\|\|function(e,t){var n,i,o,r,s={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function c(r){return function(c){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,i&&(o=i[2&r[0]?"return":r[0]?"throw":"next"])&&!(o=o.call(i,r[1])).done)return o;switch(i=0,o&&(r=[0,o.value]),r[0]){case 0:case 1:o=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,i=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(o=(o=s.trys).length>0&&o[o.length-1])&&(6===r[0]\|\|2===r[0])){s=0;continue}if(3===r[0]&&(!o\|\|r[1]>o[0]&&r[1]<o[3])){s.label=r[1];break}if(6===r[0]&&s.label<o[1]){s.label=o[1],o=r;break}if(o&&s.label<o[2]){s.label=o[2],s.ops.push(r);break}o[2]&&s.ops.pop(),s.trys.pop();continue}r=t.call(e,s)}catch(e){r=[6,e],i=0}finally{n=o=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,c])}}};Object.defineProperty(t,"__esModule",{value:!0});var s=n(0),c=n(1),a=n(2);t.InputComponent=s.InputComponent,t.OptionsComponent=c.OptionsComponent;var l=function(){function e(e,t){var n=this;this.page=1,this.searchedText="",this.isDestroyed=!1,this.preventMoreRequests=!1,this.localFetchingData=!1,this.defaultConfig={fetchSize:10,maxHeight:"160px"},this.setConfig=function(e){n.destroy(),n.config=i({},n.config,e),n.inputComponent=n.getCustomizedInput(),n.optionsComponent=n.getCustomizedOptions(),n.init()},this.destroy=function(){if(!n.isDestroyed){n.isOptionsHidden()\|\|n.clearOptions(),n.getOptionsBaseElement().removeEventListener("scroll",n.scrollReachedBottomHandler);var e=n.getInputElement();e.removeEventListener("input",n.onInputChange),e.removeEventListener("click",n.onInputChange),e.removeEventListener("keydown",n.onKeyPressed),document.removeEventListener("click",n.onDocumentClickHandler),document.removeEventListener("keydown",n.onEscapeEventHandler),n.element.innerHTML="",n.isDestroyed=!0}},this.getCustomizedInput=function(){return n.config.customizedInput?new n.config.customizedInput:new s.InputComponent},this.getCustomizedOptions=function(){return n.config.customizedOptions?new n.config.customizedOptions:new c.OptionsComponent},this.init=function(){n.applyStylesRules(),n.appendInfiniteAutocompleteWrapperClass(),n.linkInputComponent(),n.linkOptionsComponent(),n.bindScrollReachBottomEvent(),n.bindEscapeEvent(),n.bindOutSideClickEvent(),n.isDestroyed=!1},this.bindOutSideClickEvent=function(){document.addEventListener("click",n.onDocumentClickHandler)},this.onDocumentClickHandler=function(e){n.isOptionsHidden()\|\|n.checkIfClickedOutSideTheAutocompleteComponents(e.target)&&n.clearOptions()},this.checkIfClickedOutSideTheAutocompleteComponents=function(e){return null===e\|\|e!==n.element&&n.checkIfClickedOutSideTheAutocompleteComponents(e.parentElement)},this.bindEscapeEvent=function(){document.addEventListener("keydown",n.onEscapeEventHandler)},this.onEscapeEventHandler=function(e){27!==e.keyCode\|\|n.isOptionsHidden()\|\|n.clearOptions()},this.appendInfiniteAutocompleteWrapperClass=function(){n.element.className&&-1!==n.element.className.indexOf("infinite-autocomplete-wrapper")\|\|(n.element.className=n.element.className.split(" ").concat(["infinite-autocomplete-wrapper"]).filter(function(e){return e}).join(" "))},this.resetCurrentPage=function(){n.page=1},this.linkInputComponent=function(){var e=document.createElement("div");e.className="infinite-autocomplete-input-wrapper",e.innerHTML=n.inputComponent.render();var t=e.querySelector("input");if(!t)throw a.MissingInputElementInInputComponentExceptionMsg;t.addEventListener("input",n.onInputChange),t.addEventListener("click",n.onInputChange),t.addEventListener("keydown",n.onKeyPressed),n.element.appendChild(e)},this.onKeyPressed=function(e){if(!n.isOptionsHidden()){var t=n.getNavigationIndex();if(-1===t)e.keyCode===a.KEY_PRESS_STATES.DOWN&&n.toggleHoveredState(0,e);else switch(e.keyCode){case a.KEY_PRESS_STATES.DOWN:n.toggleHoveredState(t+1,e);break;case a.KEY_PRESS_STATES.UP:n.toggleHoveredState(t-1,e);break;case a.KEY_PRESS_STATES.ENTER:n.clickOnHovered()}}},this.clickOnHovered=function(){var e=n.getOptionsBaseElement().querySelector("."+a.HOVERED);e&&e.click()},this.simulateScrollToBottom=function(){var e=n.getOptionsBaseElement(),t=new Event("scroll",{bubbles:!0});e.scrollTop=1e4,e.dispatchEvent(t)},this.toggleHoveredState=function(e,t){var i=n.getOptionsBaseElement();if(e===i.children.length&&n.simulateScrollToBottom(),e>=0&&e<i.children.length){var o=i.querySelector("."+a.HOVERED);o&&(o.className=o.className.split(" ").filter(function(e){return e!==a.HOVERED}).join(" ").trim());var r=i.children[e];if(r.className+=" "+a.HOVERED,r.offsetTop<i.scrollTop\|\|r.offsetTop-i.scrollTop>i.clientHeight)switch(t.keyCode){case a.KEY_PRESS_STATES.UP:r.scrollIntoView(!0);break;case a.KEY_PRESS_STATES.DOWN:r.scrollIntoView(!1)}}},this.getNavigationIndex=function(){for(var e=n.getOptionsBaseElement(),t=0;t<e.children.length;t++){if(-1!==e.children[t].className.indexOf(a.HOVERED))return t}return-1},this.onInputChange=function(e){return o(n,void 0,void 0,function(){var t,n;return r(this,function(i){switch(i.label){case 0:if(t=e.currentTarget,this.inputComponent.onInputChange&&this.inputComponent.onInputChange(t,t.value),!("input"===e.type\|\|"click"===e.type&&this.isOptionsHidden()))return[3,4];i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.buildOptions(t.value,!0)];case 2:return i.sent(),[3,4];case 3:return n=i.sent(),console.error(n),this.config.onError&&this.config.onError(n),[3,4];case 4:return[2]}})})},this.linkOptionsComponent=function(){var e=document.createElement("div");e.className="infinite-autocomplete-options-wrapper",e.innerHTML=n.optionsComponent.render();var t=e.querySelector(n.optionsComponent.listElementSelector);n.setElementVisiblity(e,!1),t.style.overflow="scroll",t.style.overflowX="hidden",t.style.border="1px solid #bcbcbc",t.style.paddingBottom="5px",t.style.maxHeight=n.config.maxHeight\|\|null,n.element.appendChild(e)},this.isOptionsHidden=function(){return n.element.querySelector(".infinite-autocomplete-options-wrapper").className.indexOf("infinite-autocomplete-hidden-element")>-1},this.applyStylesRules=function(){if(!document.head.querySelector("#infinite-autocomplete-wrapper-style")){var e=document.createElement("style");e.id="infinite-autocomplete-wrapper-style",e.innerHTML="\n .infinite-autocomplete-wrapper {\n position: relative;\n }\n ",document.head.appendChild(e)}if(!document.head.querySelector("#infinite-autocomplete-hidden-style")){var t=document.createElement("style");t.id="infinite-autocomplete-hidden-style",t.innerHTML="\n .infinite-autocomplete-hidden-element {\n visibility: hidden;\n z-index: -1;\n }\n ",document.head.appendChild(t)}if(!document.head.querySelector("#infinite-autocomplete-defaults-style")){var n=document.createElement("style");n.id="infinite-autocomplete-defaults-style",n.innerHTML="\n .infinite-autocomplete-input-wrapper .infinite-autocomplete-default-input {\n height: 28px;\n border-radius: 8px;\n box-shadow: inset 0px 0px 15px -4px transparent;\n }\n .infinite-autocomplete-options-wrapper .infinite-autocomplete-default-options {\n list-style-type: none;\n margin-top: 0;\n padding-left: 0;\n margin-bottom: 0;\n }\n .infinite-autocomplete-options-wrapper .infinite-autocomplete-default-options li {\n padding: 5px 10px 10px 10px;\n }\n .infinite-autocomplete-options-wrapper .infinite-autocomplete-default-options li.hovered {\n background: #d5ebff;\n color: black;\n cursor: pointer;\n }\n ",document.head.appendChild(n)}if(!document.head.querySelector("#infinite-autocomplete-input-style")){var i=document.createElement("style");i.id="infinite-autocomplete-input-style",i.innerHTML="\n .infinite-autocomplete-input-wrapper input {\n width: 100%;\n }\n ",document.head.appendChild(i)}if(!document.head.querySelector("#infinite-autocomplete-options-style")){var o=document.createElement("style");o.id="infinite-autocomplete-options-style",o.innerHTML="\n .infinite-autocomplete-options-wrapper {\n position: absolute;\n z-index: 10;\n background: white;\n }\n ",document.head.appendChild(o)}if(!document.head.querySelector("#infinite-autocomplete-scrollbar-style")){var r=document.createElement("style");r.id="infinite-autocomplete-scrollbar-style",r.innerHTML="\n .infinite-autocomplete-wrapper ::-webkit-scrollbar {\n width: 4px;\n }\n\n .infinite-autocomplete-wrapper ::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n -webkit-border-radius: 10px;\n border-radius: 10px;\n }\n\n .infinite-autocomplete-wrapper ::-webkit-scrollbar-thumb {\n -webkit-border-radius: 10px;\n border-radius: 10px;\n background: rgba(128, 128, 128, 0.8);\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);\n }\n .infinite-autocomplete-wrapper ::-webkit-scrollbar-thumb:window-inactive {\n background: rgba(255,0,0,0.4);\n }\n ",document.head.appendChild(r)}},this.bindScrollReachBottomEvent=function(){n.getOptionsBaseElement().addEventListener("scroll",n.scrollReachedBottomHandler)},this.scrollReachedBottomHandler=function(e){return o(n,void 0,void 0,function(){var t,n;return r(this,function(i){switch(i.label){case 0:if(t=e.currentTarget,this.fetchingData\|\|this.preventMoreRequests\|\|this.isOptionsHidden())return[3,4];if(!(t.scrollTop+t.clientHeight>=t.scrollHeight))return[3,4];this.page++,i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.buildOptions(this.getInputElement().value,!1)];case 2:return i.sent(),[3,4];case 3:return n=i.sent(),console.error(n),this.config.onError&&this.config.onError(n),[3,4];case 4:return[2]}})})},this.clearOptions=function(){n.detachOptionEventHandlers(n.getOptionsBaseElement().querySelectorAll("[infinite-clickable]")),n.resetCurrentPage(),n.preventMoreRequests=!1;var e=n.getOptionsBaseElement();n.setElementVisiblity(n.element.querySelector(".infinite-autocomplete-options-wrapper"),!1),e.innerHTML=""},this.onOptionClickEvent=function(e){n.config.onSelect&&n.config.onSelect(e.currentTarget,e.currentTarget.data),n.clearOptions(),n.setInput(e.currentTarget.data.text)},this.onOptionHoverEvent=function(e){var t=n.getOptionsBaseElement().querySelector("."+a.HOVERED);t&&(t.className=t.className.split(" ").filter(function(e){return e!==a.HOVERED}).join(" ").trim()),e.currentTarget.className+=" "+a.HOVERED},this.element=e,this.config=i({},this.defaultConfig,t),this.inputComponent=this.getCustomizedInput(),this.optionsComponent=this.getCustomizedOptions(),this.init()}return e.prototype.setElementVisiblity=function(e,t){t?e.className=e.className.split(" ").filter(function(e){return"infinite-autocomplete-hidden-element"!==e}).join(" "):-1===e.className.indexOf("infinite-autocomplete-hidden-element")&&(e.className+=" infinite-autocomplete-hidden-element")},e.prototype.getOptionsBaseElement=function(){if(this.element){var e=this.element.querySelector(".infinite-autocomplete-options-wrapper");if(e)return e.querySelector(this.optionsComponent.listElementSelector);throw a.optionsWrapperExceptionMsg}throw a.optionsWrapperExceptionMsg},e.prototype.detachOptionEventHandlers=function(e){for(var t=0;t<e.length;t++)e[t].removeEventListener("click",this.onOptionClickEvent),e[t].removeEventListener("mouseover",this.onOptionHoverEvent)},e.prototype.getInputElement=function(){if(this.element){var e=this.element.querySelector(".infinite-autocomplete-input-wrapper");if(e)return e.querySelector("input");throw a.inputElementExceptionMsg}throw a.inputElementExceptionMsg},e.prototype.setInput=function(e){this.getInputElement().value=e},Object.defineProperty(e.prototype,"fetchingData",{get:function(){return this.localFetchingData},set:function(e){this.config.onLoadingStateChange&&this.config.onLoadingStateChange(e),this.localFetchingData=e},enumerable:!0,configurable:!0}),e.prototype.getData=function(e,t,n){return o(this,void 0,void 0,function(){var i,o,s,c;return r(this,function(r){switch(r.label){case 0:return this.searchedText=e,this.config.data?(this.fetchingData=!0,i=(t-1)n,o=n(t-1)+n,s=this.config.data.filter(function(t){return-1!==t.text.toLowerCase().indexOf(e.toLowerCase())}).slice(i,o),this.fetchingData=!1,[2,s]):[3,1];case 1:return this.config.getDataFromApi?(this.fetchingData=!0,[4,this.config.getDataFromApi(e,t,n)]):[3,3];case 2:return c=r.sent(),this.fetchingData=!1,this.searchedText===e&&this.page===t&&this.config.fetchSize===n?[2,c]:[2,null];case 3:throw a.dataSourceMissingExceptionMsg;case 4:return[2]}})})},e.prototype.buildOptions=function(e,t){return void 0===t&&(t=!0),o(this,void 0,void 0,function(){var n,i,o,s,c=this;return r(this,function(r){switch(r.label){case 0:return n=this.getOptionsBaseElement(),t&&this.clearOptions(),!this.config.fetchSize\|\|isNaN(this.config.fetchSize)?[3,2]:[4,this.getData(e,this.page,this.config.fetchSize)];case 1:return null!==(i=r.sent())&&(i.length<this.config.fetchSize&&(this.preventMoreRequests=!0),i.forEach(function(e){var t=c.optionsComponent.renderOption(e),i=document.createElement("div");i.innerHTML=t;var o=i.childNodes[0];o.data={text:e.text,value:e.value},o.setAttribute("infinite-clickable",""),o.addEventListener("click",c.onOptionClickEvent),o.addEventListener("mouseover",c.onOptionHoverEvent),n.appendChild(o)}),i.length>0&&(o=n.children[0].clientHeight,this.config.maxHeight&&parseInt(this.config.maxHeight,10)>=othis.config.fetchSize&&(this.config.maxHeight=othis.config.fetchSize-5+"px",s=this.element.querySelector(".infinite-autocomplete-options-wrapper"),s.querySelector(this.optionsComponent.listElementSelector).style.maxHeight=this.config.maxHeight))),""!==n.innerHTML?this.setElementVisiblity(this.element.querySelector(".infinite-autocomplete-options-wrapper"),!0):this.setElementVisiblity(this.element.querySelector(".infinite-autocomplete-options-wrapper"),!1),[3,3];case 2:throw a.fetchSizeExceptionMsg;case 3:return[2]}})})},e}();t.InfiniteAutocomplete=l}])});
		!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(this,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,i){n.o(e,t)\|\|Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e.prototype.render=function(){return'<input class="infinite-autocomplete-default-input" type="text" />'},e}();t.InputComponent=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){this.listElementSelector="ul"}return e.prototype.render=function(){return"<"+this.listElementSelector+' class="infinite-autocomplete-default-options"></'+this.listElementSelector+">"},e.prototype.renderOption=function(e){return"<li>\n "+e.text+"\n </li>"},e}();t.OptionsComponent=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.HOVERED="hovered",t.KEY_PRESS_STATES={UP:38,DOWN:40,ENTER:13},t.MissingInputElementInInputComponentExceptionMsg=new Error("Customized input should contain input element <input />"),t.optionsWrapperExceptionMsg=new Error("Couldn't get the options base element."),t.inputElementExceptionMsg=new Error("Couldn't get the input element."),t.dataSourceMissingExceptionMsg=new Error("You must pass data or getDataFromApi function via config"),t.fetchSizeExceptionMsg=new Error("fetchSize must be overriden with correct numeric value")},function(e,t,n){"use strict";var i=this&&this.__assign\|\|Object.assign\|\|function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o=this&&this.__awaiter\|\|function(e,t,n,i){return new(n\|\|(n=Promise))(function(o,r){function s(e){try{a(i.next(e))}catch(e){r(e)}}function c(e){try{a(i.throw(e))}catch(e){r(e)}}function a(e){e.done?o(e.value):new n(function(t){t(e.value)}).then(s,c)}a((i=i.apply(e,t\|\|[])).next())})},r=this&&this.__generator\|\|function(e,t){var n,i,o,r,s={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function c(r){return function(c){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,i&&(o=i[2&r[0]?"return":r[0]?"throw":"next"])&&!(o=o.call(i,r[1])).done)return o;switch(i=0,o&&(r=[0,o.value]),r[0]){case 0:case 1:o=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,i=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(o=(o=s.trys).length>0&&o[o.length-1])&&(6===r[0]\|\|2===r[0])){s=0;continue}if(3===r[0]&&(!o\|\|r[1]>o[0]&&r[1]<o[3])){s.label=r[1];break}if(6===r[0]&&s.label<o[1]){s.label=o[1],o=r;break}if(o&&s.label<o[2]){s.label=o[2],s.ops.push(r);break}o[2]&&s.ops.pop(),s.trys.pop();continue}r=t.call(e,s)}catch(e){r=[6,e],i=0}finally{n=o=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,c])}}};Object.defineProperty(t,"__esModule",{value:!0});var s=n(0),c=n(1),a=n(2);t.InputComponent=s.InputComponent,t.OptionsComponent=c.OptionsComponent;var l=function(){function e(e,t){var n=this;this.page=1,this.searchedText="",this.isDestroyed=!1,this.preventMoreRequests=!1,this.localFetchingData=!1,this.defaultConfig={fetchSize:10,maxHeight:"160px"},this.setConfig=function(e){n.destroy(),n.config=i({},n.config,e),n.inputComponent=n.getCustomizedInput(),n.optionsComponent=n.getCustomizedOptions(),n.init()},this.destroy=function(){if(!n.isDestroyed){n.isOptionsHidden()\|\|n.clearOptions(),n.getOptionsBaseElement().removeEventListener("scroll",n.scrollReachedBottomHandler);var e=n.getInputElement();e.removeEventListener("input",n.onInputChange),e.removeEventListener("click",n.onInputChange),e.removeEventListener("keydown",n.onKeyPressed),document.removeEventListener("click",n.onDocumentClickHandler),document.removeEventListener("keydown",n.onEscapeEventHandler),n.element.innerHTML="",n.isDestroyed=!0}},this.getCustomizedInput=function(){return n.config.customizedInput?new n.config.customizedInput:new s.InputComponent},this.getCustomizedOptions=function(){return n.config.customizedOptions?new n.config.customizedOptions:new c.OptionsComponent},this.init=function(){n.applyStylesRules(),n.appendInfiniteAutocompleteWrapperClass(),n.linkInputComponent(),n.linkOptionsComponent(),n.bindScrollReachBottomEvent(),n.bindEscapeEvent(),n.bindOutSideClickEvent(),n.isDestroyed=!1},this.bindOutSideClickEvent=function(){document.addEventListener("click",n.onDocumentClickHandler)},this.onDocumentClickHandler=function(e){n.isOptionsHidden()\|\|n.checkIfClickedOutSideTheAutocompleteComponents(e.target)&&n.clearOptions()},this.checkIfClickedOutSideTheAutocompleteComponents=function(e){return null===e\|\|e!==n.element&&n.checkIfClickedOutSideTheAutocompleteComponents(e.parentElement)},this.bindEscapeEvent=function(){document.addEventListener("keydown",n.onEscapeEventHandler)},this.onEscapeEventHandler=function(e){27!==e.keyCode\|\|n.isOptionsHidden()\|\|n.clearOptions()},this.appendInfiniteAutocompleteWrapperClass=function(){n.element.className&&-1!==n.element.className.indexOf("infinite-autocomplete-wrapper")\|\|(n.element.className=n.element.className.split(" ").concat(["infinite-autocomplete-wrapper"]).filter(function(e){return e}).join(" "))},this.resetCurrentPage=function(){n.page=1},this.linkInputComponent=function(){var e=document.createElement("div");e.className="infinite-autocomplete-input-wrapper",e.innerHTML=n.inputComponent.render();var t=e.querySelector("input");if(!t)throw a.MissingInputElementInInputComponentExceptionMsg;t.addEventListener("input",n.onInputChange),t.addEventListener("click",n.onInputChange),t.addEventListener("keydown",n.onKeyPressed),n.config.value&&(t.value=n.config.value),n.element.appendChild(e)},this.onKeyPressed=function(e){if(!n.isOptionsHidden()){var t=n.getNavigationIndex();if(-1===t)e.keyCode===a.KEY_PRESS_STATES.DOWN&&n.toggleHoveredState(0,e);else switch(e.keyCode){case a.KEY_PRESS_STATES.DOWN:n.toggleHoveredState(t+1,e);break;case a.KEY_PRESS_STATES.UP:n.toggleHoveredState(t-1,e);break;case a.KEY_PRESS_STATES.ENTER:n.clickOnHovered()}}},this.clickOnHovered=function(){var e=n.getOptionsBaseElement().querySelector("."+a.HOVERED);e&&e.click()},this.simulateScrollToBottom=function(){var e=n.getOptionsBaseElement(),t=new Event("scroll",{bubbles:!0});e.scrollTop=1e4,e.dispatchEvent(t)},this.toggleHoveredState=function(e,t){var i=n.getOptionsBaseElement();if(e===i.children.length&&n.simulateScrollToBottom(),e>=0&&e<i.children.length){var o=i.querySelector("."+a.HOVERED);o&&(o.className=o.className.split(" ").filter(function(e){return e!==a.HOVERED}).join(" ").trim());var r=i.children[e];if(r.className+=" "+a.HOVERED,r.offsetTop<i.scrollTop\|\|r.offsetTop-i.scrollTop>i.clientHeight)switch(t.keyCode){case a.KEY_PRESS_STATES.UP:r.scrollIntoView(!0);break;case a.KEY_PRESS_STATES.DOWN:r.scrollIntoView(!1)}}},this.getNavigationIndex=function(){for(var e=n.getOptionsBaseElement(),t=0;t<e.children.length;t++){if(-1!==e.children[t].className.indexOf(a.HOVERED))return t}return-1},this.onInputChange=function(e){return o(n,void 0,void 0,function(){var t,n;return r(this,function(i){switch(i.label){case 0:if(t=e.currentTarget,this.inputComponent.onInputChange&&this.inputComponent.onInputChange(t,t.value),!("input"===e.type\|\|"click"===e.type&&this.isOptionsHidden()))return[3,4];i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.buildOptions(t.value,!0)];case 2:return i.sent(),[3,4];case 3:return n=i.sent(),console.error(n),this.config.onError&&this.config.onError(n),[3,4];case 4:return[2]}})})},this.linkOptionsComponent=function(){var e=document.createElement("div");e.className="infinite-autocomplete-options-wrapper",e.innerHTML=n.optionsComponent.render();var t=e.querySelector(n.optionsComponent.listElementSelector);n.setElementVisiblity(e,!1),t.style.overflow="scroll",t.style.overflowX="hidden",t.style.border="1px solid #bcbcbc",t.style.paddingBottom="5px",t.style.maxHeight=n.config.maxHeight\|\|null,n.element.appendChild(e)},this.isOptionsHidden=function(){return n.element.querySelector(".infinite-autocomplete-options-wrapper").className.indexOf("infinite-autocomplete-hidden-element")>-1},this.applyStylesRules=function(){if(!document.head.querySelector("#infinite-autocomplete-wrapper-style")){var e=document.createElement("style");e.id="infinite-autocomplete-wrapper-style",e.innerHTML="\n .infinite-autocomplete-wrapper {\n position: relative;\n }\n ",document.head.appendChild(e)}if(!document.head.querySelector("#infinite-autocomplete-hidden-style")){var t=document.createElement("style");t.id="infinite-autocomplete-hidden-style",t.innerHTML="\n .infinite-autocomplete-hidden-element {\n visibility: hidden;\n z-index: -1;\n }\n ",document.head.appendChild(t)}if(!document.head.querySelector("#infinite-autocomplete-defaults-style")){var n=document.createElement("style");n.id="infinite-autocomplete-defaults-style",n.innerHTML="\n .infinite-autocomplete-input-wrapper .infinite-autocomplete-default-input {\n height: 28px;\n border-radius: 8px;\n box-shadow: inset 0px 0px 15px -4px transparent;\n }\n .infinite-autocomplete-options-wrapper .infinite-autocomplete-default-options {\n list-style-type: none;\n margin-top: 0;\n padding-left: 0;\n margin-bottom: 0;\n }\n .infinite-autocomplete-options-wrapper .infinite-autocomplete-default-options li {\n padding: 5px 10px 10px 10px;\n }\n .infinite-autocomplete-options-wrapper .infinite-autocomplete-default-options li.hovered {\n background: #d5ebff;\n color: black;\n cursor: pointer;\n }\n ",document.head.appendChild(n)}if(!document.head.querySelector("#infinite-autocomplete-input-style")){var i=document.createElement("style");i.id="infinite-autocomplete-input-style",i.innerHTML="\n .infinite-autocomplete-input-wrapper input {\n width: 100%;\n }\n ",document.head.appendChild(i)}if(!document.head.querySelector("#infinite-autocomplete-options-style")){var o=document.createElement("style");o.id="infinite-autocomplete-options-style",o.innerHTML="\n .infinite-autocomplete-options-wrapper {\n position: absolute;\n z-index: 10;\n background: white;\n }\n ",document.head.appendChild(o)}if(!document.head.querySelector("#infinite-autocomplete-scrollbar-style")){var r=document.createElement("style");r.id="infinite-autocomplete-scrollbar-style",r.innerHTML="\n .infinite-autocomplete-wrapper ::-webkit-scrollbar {\n width: 4px;\n }\n\n .infinite-autocomplete-wrapper ::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n -webkit-border-radius: 10px;\n border-radius: 10px;\n }\n\n .infinite-autocomplete-wrapper ::-webkit-scrollbar-thumb {\n -webkit-border-radius: 10px;\n border-radius: 10px;\n background: rgba(128, 128, 128, 0.8);\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);\n }\n .infinite-autocomplete-wrapper ::-webkit-scrollbar-thumb:window-inactive {\n background: rgba(255,0,0,0.4);\n }\n ",document.head.appendChild(r)}},this.bindScrollReachBottomEvent=function(){n.getOptionsBaseElement().addEventListener("scroll",n.scrollReachedBottomHandler)},this.scrollReachedBottomHandler=function(e){return o(n,void 0,void 0,function(){var t,n;return r(this,function(i){switch(i.label){case 0:if(t=e.currentTarget,this.fetchingData\|\|this.preventMoreRequests\|\|this.isOptionsHidden())return[3,4];if(!(t.scrollTop+t.clientHeight>=t.scrollHeight))return[3,4];this.page++,i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.buildOptions(this.getInputElement().value,!1)];case 2:return i.sent(),[3,4];case 3:return n=i.sent(),console.error(n),this.config.onError&&this.config.onError(n),[3,4];case 4:return[2]}})})},this.clearOptions=function(){n.detachOptionEventHandlers(n.getOptionsBaseElement().querySelectorAll("[infinite-clickable]")),n.resetCurrentPage(),n.preventMoreRequests=!1;var e=n.getOptionsBaseElement();n.setElementVisiblity(n.element.querySelector(".infinite-autocomplete-options-wrapper"),!1),e.innerHTML=""},this.onOptionClickEvent=function(e){n.config.onSelect&&n.config.onSelect(e.currentTarget,e.currentTarget.data),n.clearOptions(),n.setInput(e.currentTarget.data.text)},this.onOptionHoverEvent=function(e){var t=n.getOptionsBaseElement().querySelector("."+a.HOVERED);t&&(t.className=t.className.split(" ").filter(function(e){return e!==a.HOVERED}).join(" ").trim()),e.currentTarget.className+=" "+a.HOVERED},this.element=e,this.config=i({},this.defaultConfig,t),this.inputComponent=this.getCustomizedInput(),this.optionsComponent=this.getCustomizedOptions(),this.init()}return e.prototype.setElementVisiblity=function(e,t){t?e.className=e.className.split(" ").filter(function(e){return"infinite-autocomplete-hidden-element"!==e}).join(" "):-1===e.className.indexOf("infinite-autocomplete-hidden-element")&&(e.className+=" infinite-autocomplete-hidden-element")},e.prototype.getOptionsBaseElement=function(){if(this.element){var e=this.element.querySelector(".infinite-autocomplete-options-wrapper");if(e)return e.querySelector(this.optionsComponent.listElementSelector);throw a.optionsWrapperExceptionMsg}throw a.optionsWrapperExceptionMsg},e.prototype.detachOptionEventHandlers=function(e){for(var t=0;t<e.length;t++)e[t].removeEventListener("click",this.onOptionClickEvent),e[t].removeEventListener("mouseover",this.onOptionHoverEvent)},e.prototype.getInputElement=function(){if(this.element){var e=this.element.querySelector(".infinite-autocomplete-input-wrapper");if(e)return e.querySelector("input");throw a.inputElementExceptionMsg}throw a.inputElementExceptionMsg},e.prototype.setInput=function(e){this.getInputElement().value=e},Object.defineProperty(e.prototype,"fetchingData",{get:function(){return this.localFetchingData},set:function(e){this.config.onLoadingStateChange&&this.config.onLoadingStateChange(e),this.localFetchingData=e},enumerable:!0,configurable:!0}),e.prototype.getData=function(e,t,n){return o(this,void 0,void 0,function(){var i,o,s,c;return r(this,function(r){switch(r.label){case 0:return this.searchedText=e,this.config.data?(this.fetchingData=!0,i=(t-1)n,o=n(t-1)+n,s=this.config.data.filter(function(t){return-1!==t.text.toLowerCase().indexOf(e.toLowerCase())}).slice(i,o),this.fetchingData=!1,[2,s]):[3,1];case 1:return this.config.getDataFromApi?(this.fetchingData=!0,[4,this.config.getDataFromApi(e,t,n)]):[3,3];case 2:return c=r.sent(),this.fetchingData=!1,this.searchedText===e&&this.page===t&&this.config.fetchSize===n?[2,c]:[2,null];case 3:throw a.dataSourceMissingExceptionMsg;case 4:return[2]}})})},e.prototype.buildOptions=function(e,t){return void 0===t&&(t=!0),o(this,void 0,void 0,function(){var n,i,o,s,c=this;return r(this,function(r){switch(r.label){case 0:return n=this.getOptionsBaseElement(),t&&this.clearOptions(),!this.config.fetchSize\|\|isNaN(this.config.fetchSize)?[3,2]:[4,this.getData(e,this.page,this.config.fetchSize)];case 1:return null!==(i=r.sent())&&(i.length<this.config.fetchSize&&(this.preventMoreRequests=!0),i.forEach(function(e){var t=c.optionsComponent.renderOption(e),i=document.createElement("div");i.innerHTML=t;var o=i.childNodes[0];o.data={text:e.text,value:e.value},o.setAttribute("infinite-clickable",""),o.addEventListener("click",c.onOptionClickEvent),o.addEventListener("mouseover",c.onOptionHoverEvent),n.appendChild(o)}),i.length>0&&(o=n.children[0].clientHeight,this.config.maxHeight&&parseInt(this.config.maxHeight,10)>=othis.config.fetchSize&&(this.config.maxHeight=othis.config.fetchSize-5+"px",s=this.element.querySelector(".infinite-autocomplete-options-wrapper"),s.querySelector(this.optionsComponent.listElementSelector).style.maxHeight=this.config.maxHeight))),""!==n.innerHTML?this.setElementVisiblity(this.element.querySelector(".infinite-autocomplete-options-wrapper"),!0):this.setElementVisiblity(this.element.querySelector(".infinite-autocomplete-options-wrapper"),!1),[3,3];case 2:throw a.fetchSizeExceptionMsg;case 3:return[2]}})})},e}();t.InfiniteAutocomplete=l}])});

infinite-autocomplete.d.ts

		@@ -81,2 +81,6 @@ export { InfiniteAutocomplete, InputComponent, OptionsComponent };
		/**
		* current value
		*/
		value?: string;
		/**
		* data static source
		@@ -83,0 +87,0 @@ */

package.json

		{
		"name": "infinite-autocomplete",
		"version": "3.1.0",
		"version": "3.2.0",
		"description": "lightweight-infinite-autocomplete",
		@@ -5,0 +5,0 @@ "main": "./index.js",

README.md

		@@ -57,2 +57,6 @@ <a><img src='https://travis-ci.org/Attrash-Islam/infinite-autocomplete.svg?branch=master' /></a> <a href='https://coveralls.io/github/Attrash-Islam/infinite-autocomplete'><img src='https://coveralls.io/repos/github/Attrash-Islam/infinite-autocomplete/badge.svg' alt='Coverage Status' /></a>
		/**
		* current value
		*/
		value?: string;
		/**
		* data static source
		@@ -59,0 +63,0 @@ */

dist/index.debug.js

Sorry, the diff of this file is too big to display

infinite-autocomplete - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics