framework7/lazy-components/autocomplete.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);document,window;var E=e.$,$=(e.Template7,e.utils),o=(e.device,e.support,e.Class),a=(e.Modal,e.ConstructorMethods),n=(e.ModalMethods,function(w){function e(e,t){void 0===t&&(t={}),w.call(this,t,[e]);var u=this;u.app=e;var o,c,a,n=$.extend({on:{}},e.params.autocomplete);u.useModulesParams(n),u.params=$.extend(n,t),u.params.openerEl&&(o=E(u.params.openerEl)).length&&(o[0].f7Autocomplete=u),u.params.inputEl&&(c=E(u.params.inputEl)).length&&(c[0].f7Autocomplete=u),u.params.view?a=u.params.view:(o||c)&&(a=e.views.get(o||c)),a||(a=e.views.main);var r=$.id(),p=t.url;!p&&o&&o.length&&(o.attr("href")?p=o.attr("href"):0<o.find("a").length&&(p=o.find("a").attr("href"))),p&&"#"!==p&&""!==p||(p=u.params.url);var l=u.params.multiple?"checkbox":"radio";$.extend(u,{$openerEl:o,openerEl:o&&o[0],$inputEl:c,inputEl:c&&c[0],id:r,view:a,url:p,value:u.params.value||[],inputType:l,inputName:l+"-"+r,$modalEl:void 0,$dropdownEl:void 0});var m="";function i(){var d=u.$inputEl.val().trim();u.params.source&&u.params.source.call(u,d,function(e){var t,o,a,n="",r=u.params.limit?Math.min(u.params.limit,e.length):e.length;u.items=e,u.params.highlightMatches&&(d=d.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&"),t=new RegExp("("+d+")","i"));for(var p=0;p<r;p+=1){var l="object"==typeof e[p]?e[p][u.params.valueProperty]:e[p],i="object"==typeof e[p]?e[p][u.params.textProperty]:e[p];0===p&&(o=l,a=u.items[p]),n+=u.renderItem({value:l,text:u.params.highlightMatches?i.replace(t,"<b>$1</b>"):i},p)}if(""===n&&""===d&&u.params.dropdownPlaceholderText&&(n+=u.renderItem({placeholder:!0,text:u.params.dropdownPlaceholderText})),u.$dropdownEl.find("ul").html(n),u.params.typeahead){if(!o||!a)return;if(0!==o.toLowerCase().indexOf(d.toLowerCase()))return;if(m.toLowerCase()===d.toLowerCase())return void(u.value=[]);if(0===m.toLowerCase().indexOf(d.toLowerCase()))return m=d,void(u.value=[]);c.val(o),c[0].setSelectionRange(d.length,o.length);var s="object"==typeof u.value[0]?u.value[0][u.params.valueProperty]:u.value[0];s&&o.toLowerCase()===s.toLowerCase()||(u.value=[a],u.emit("local::change autocompleteChange",[a]))}m=d})}function s(){var e,t,o,a=this,n=a.value;if(0<E(a).parents(".autocomplete-values").length){if("checkbox"===u.inputType&&!a.checked){for(var r=0;r<u.value.length;r+=1)(o="string"==typeof u.value[r]?u.value[r]:u.value[r][u.params.valueProperty])!==n&&1*o!=1*n||u.value.splice(r,1);u.updateValues(),u.emit("local::change autocompleteChange",u.value)}}else{for(var p=0;p<u.items.length;p+=1)(t="object"==typeof u.items[p]?u.items[p][u.params.valueProperty]:u.items[p])!==n&&1*t!=1*n||(e=u.items[p]);if("radio"===u.inputType)u.value=[e];else if(a.checked)u.value.push(e);else for(var l=0;l<u.value.length;l+=1)(o="object"==typeof u.value[l]?u.value[l][u.params.valueProperty]:u.value[l])!==n&&1*o!=1*n||u.value.splice(l,1);u.updateValues(),("radio"===u.inputType&&a.checked||"checkbox"===u.inputType)&&u.emit("local::change autocompleteChange",u.value)}}function d(e){var t=E(e.target);t.is(u.$inputEl[0])||u.$dropdownEl&&t.closest(u.$dropdownEl[0]).length||u.close()}function v(){u.open()}function h(){u.open()}function f(){0<u.$dropdownEl.find("label.active-state").length||u.close()}function g(){u.positionDropdown()}function b(e){u.opened&&13===e.keyCode&&(e.preventDefault(),u.$inputEl.blur())}function y(){for(var e,t=E(this),o=0;o<u.items.length;o+=1){var a="object"==typeof u.items[o]?u.items[o][u.params.valueProperty]:u.items[o],n=t.attr("data-value");a!==n&&1*a!=1*n||(e=u.items[o])}u.params.updateInputValueOnSelect&&(u.$inputEl.val("object"==typeof e?e[u.params.valueProperty]:e),u.$inputEl.trigger("input change")),u.value=[e],u.emit("local::change autocompleteChange",[e]),u.close()}return u.attachEvents=function(){"dropdown"!==u.params.openIn&&u.$openerEl&&u.$openerEl.on("click",v),"dropdown"===u.params.openIn&&u.$inputEl&&(u.$inputEl.on("focus",h),u.$inputEl.on(u.params.inputEvents,i),e.device.android?E("html").on("click",d):u.$inputEl.on("blur",f),u.params.typeahead&&u.$inputEl.on("keydown",b))},u.detachEvents=function(){"dropdown"!==u.params.openIn&&u.$openerEl&&u.$openerEl.off("click",v),"dropdown"===u.params.openIn&&u.$inputEl&&(u.$inputEl.off("focus",h),u.$inputEl.off(u.params.inputEvents,i),e.device.android?E("html").off("click",d):u.$inputEl.off("blur",f),u.params.typeahead&&u.$inputEl.off("keydown",b))},u.attachDropdownEvents=function(){u.$dropdownEl.on("click","label",y),e.on("resize",g)},u.detachDropdownEvents=function(){u.$dropdownEl.off("click","label",y),e.off("resize",g)},u.attachPageEvents=function(){u.$el.on("change",'input[type="radio"], input[type="checkbox"]',s),u.params.closeOnSelect&&!u.params.multiple&&u.$el.once("click",".list label",function(){$.nextTick(function(){u.close()})})},u.detachPageEvents=function(){u.$el.off("change",'input[type="radio"], input[type="checkbox"]',s)},u.useModules(),u.init(),u}return w&&(e.__proto__=w),((e.prototype=Object.create(w&&w.prototype)).constructor=e).prototype.positionDropdown=function(){var e,t=this,o=t.$inputEl,a=t.app,n=t.$dropdownEl,r=o.parents(".page-content");if(0!==r.length){var p,l=o.offset(),i=o[0].offsetWidth,s=o[0].offsetHeight,d=o.parents(".list");d.parents().each(function(e,t){if(!p){var o=E(t);o.parent(r).length&&(p=o)}});var u,c=d.offset(),m=parseInt(r.css("padding-bottom"),10),v=0<d.length?c.left-r.offset().left:0,h=l.left-(0<d.length?c.left:0)-(a.rtl,0),f=l.top-(r.offset().top-r[0].scrollTop),g=r[0].scrollHeight-m-(f+r[0].scrollTop)-o[0].offsetHeight,b=a.rtl?"padding-right":"padding-left";d.length&&!t.params.expandInput&&(u=(a.rtl?d[0].offsetWidth-h-i:h)-("md"===a.theme?16:15)),n.css({left:(0<d.length?v:h)+"px",top:f+r[0].scrollTop+s+"px",width:(0<d.length?d[0].offsetWidth:i)+"px"}),n.children(".autocomplete-dropdown-inner").css(((e={maxHeight:g+"px"})[b]=0<d.length&&!t.params.expandInput?u+"px":"",e))}},e.prototype.focus=function(){this.$el.find("input[type=search]").focus()},e.prototype.source=function(i){var s=this;if(s.params.source){var d=s.$el;s.params.source.call(s,i,function(e){var t="",o=s.params.limit?Math.min(s.params.limit,e.length):e.length;s.items=e;for(var a=0;a<o;a+=1){for(var n=!1,r="object"==typeof e[a]?e[a][s.params.valueProperty]:e[a],p=0;p<s.value.length;p+=1){var l="object"==typeof s.value[p]?s.value[p][s.params.valueProperty]:s.value[p];l!==r&&1*l!=1*r||(n=!0)}t+=s.renderItem({value:r,text:"object"==typeof e[a]?e[a][s.params.textProperty]:e[a],inputType:s.inputType,id:s.id,inputName:s.inputName,selected:n},a)}d.find(".autocomplete-found ul").html(t),0===e.length?0!==i.length?(d.find(".autocomplete-not-found").show(),d.find(".autocomplete-found, .autocomplete-values").hide()):(d.find(".autocomplete-values").show(),d.find(".autocomplete-found, .autocomplete-not-found").hide()):(d.find(".autocomplete-found").show(),d.find(".autocomplete-not-found, .autocomplete-values").hide())})}},e.prototype.updateValues=function(){for(var e=this,t="",o=0;o<e.value.length;o+=1)t+=e.renderItem({value:"object"==typeof e.value[o]?e.value[o][e.params.valueProperty]:e.value[o],text:"object"==typeof e.value[o]?e.value[o][e.params.textProperty]:e.value[o],inputType:e.inputType,id:e.id,inputName:e.inputName+"-checked}",selected:!0},o);e.$el.find(".autocomplete-values ul").html(t)},e.prototype.preloaderHide=function(){"dropdown"===this.params.openIn&&this.$dropdownEl?this.$dropdownEl.find(".autocomplete-preloader").removeClass("autocomplete-preloader-visible"):E(".autocomplete-preloader").removeClass("autocomplete-preloader-visible")},e.prototype.preloaderShow=function(){"dropdown"===this.params.openIn&&this.$dropdownEl?this.$dropdownEl.find(".autocomplete-preloader").addClass("autocomplete-preloader-visible"):E(".autocomplete-preloader").addClass("autocomplete-preloader-visible")},e.prototype.renderPreloader=function(){return('\n      <div class="autocomplete-preloader preloader '+(this.params.preloaderColor?"color-"+this.params.preloaderColor:"")+'">'+("md"===this.app.theme?$.mdPreloaderContent:"")+"</div>\n    ").trim()},e.prototype.renderSearchbar=function(){var e=this;return e.params.renderSearchbar?e.params.renderSearchbar.call(e):('\n      <form class="searchbar">\n        <div class="searchbar-inner">\n          <div class="searchbar-input-wrap">\n            <input type="search" placeholder="'+e.params.searchbarPlaceholder+'"/>\n            <i class="searchbar-icon"></i>\n            <span class="input-clear-button"></span>\n          </div>\n          <span class="searchbar-disable-button">'+e.params.searchbarDisableText+"</span>\n        </div>\n      </form>\n    ").trim()},e.prototype.renderItem=function(e,t){if(this.params.renderItem)return this.params.renderItem.call(this,e,t);var o=e.value&&"string"==typeof e.value?e.value.replace(/"/g,"&quot;"):e.value;return("dropdown"!==this.params.openIn?'\n        <li>\n          <label class="item-'+e.inputType+' item-content">\n            <input type="'+e.inputType+'" name="'+e.inputName+'" value="'+o+'" '+(e.selected?"checked":"")+'>\n            <i class="icon icon-'+e.inputType+'"></i>\n            <div class="item-inner">\n              <div class="item-title">'+e.text+"</div>\n            </div>\n          </label>\n        </li>\n      ":e.placeholder?'\n        <li class="autocomplete-dropdown-placeholder">\n          <label class="item-content">\n            <div class="item-inner">\n              <div class="item-title">'+e.text+"</div>\n            </div>\n          </label>\n        </li>\n      ":'\n        <li>\n          <label class="item-radio item-content" data-value="'+o+'">\n            <div class="item-inner">\n              <div class="item-title">'+e.text+"</div>\n            </div>\n          </label>\n        </li>\n      ").trim()},e.prototype.renderNavbar=function(){var e=this;if(e.params.renderNavbar)return e.params.renderNavbar.call(e);var t=e.params.pageTitle;return void 0===t&&e.$openerEl&&e.$openerEl.length&&(t=e.$openerEl.find(".item-title").text().trim()),('\n      <div class="navbar '+(e.params.navbarColorTheme?"color-theme-"+e.params.navbarColorTheme:"")+'">\n        <div class="navbar-inner '+(e.params.navbarColorTheme?"color-theme-"+e.params.navbarColorTheme:"")+'">\n          <div class="left sliding">\n            <a href="#" class="link '+("page"===e.params.openIn?"back":"popup-close")+'" '+("popup"===e.params.openIn?'data-popup=".autocomplete-popup"':"")+'>\n              <i class="icon icon-back"></i>\n              <span class="ios-only">'+("page"===e.params.openIn?e.params.pageBackLinkText:e.params.popupCloseLinkText)+"</span>\n            </a>\n          </div>\n          "+(t?'<div class="title sliding">'+t+"</div>":"")+"\n          "+(e.params.preloader?'\n          <div class="right">\n            '+e.renderPreloader()+"\n          </div>\n          ":"")+'\n          <div class="subnavbar sliding">'+e.renderSearchbar()+"</div>\n        </div>\n      </div>\n    ").trim()},e.prototype.renderDropdown=function(){var e=this;return e.params.renderDropdown?e.params.renderDropdown.call(e,e.items):('\n      <div class="autocomplete-dropdown">\n        <div class="autocomplete-dropdown-inner">\n          <div class="list '+(e.params.expandInput?"":"no-ios-edge")+'">\n            <ul></ul>\n          </div>\n        </div>\n        '+(e.params.preloader?e.renderPreloader():"")+"\n      </div>\n    ").trim()},e.prototype.renderPage=function(){var e=this;return e.params.renderPage?e.params.renderPage.call(e,e.items):('\n      <div class="page page-with-subnavbar autocomplete-page" data-name="autocomplete-page">\n        '+e.renderNavbar()+'\n        <div class="searchbar-backdrop"></div>\n        <div class="page-content">\n          <div class="list autocomplete-list autocomplete-found autocomplete-list-'+e.id+" "+(e.params.formColorTheme?"color-theme-"+e.params.formColorTheme:"")+'">\n            <ul></ul>\n          </div>\n          <div class="list autocomplete-not-found">\n            <ul>\n              <li class="item-content"><div class="item-inner"><div class="item-title">'+e.params.notFoundText+'</div></div></li>\n            </ul>\n          </div>\n          <div class="list autocomplete-values">\n            <ul></ul>\n          </div>\n        </div>\n      </div>\n    ').trim()},e.prototype.renderPopup=function(){var e=this;return e.params.renderPopup?e.params.renderPopup.call(e,e.items):('\n      <div class="popup autocomplete-popup">\n        <div class="view">\n          '+e.renderPage()+";\n        </div>\n      </div>\n    ").trim()},e.prototype.onOpen=function(e,t){var o=this,a=o.app,n=E(t);if(o.$el=n,o.el=n[0],o.openedIn=e,o.opened=!0,"dropdown"===o.params.openIn)o.attachDropdownEvents(),o.$dropdownEl.addClass("autocomplete-dropdown-in"),o.$inputEl.trigger("input");else{var r=n.find(".searchbar");"page"===o.params.openIn&&"ios"===a.theme&&0===r.length&&(r=E(a.navbar.getElByPage(n)).find(".searchbar")),o.searchbar=a.searchbar.create({el:r,backdropEl:n.find(".searchbar-backdrop"),customSearch:!0,on:{search:function(e,t){0===t.length&&o.searchbar.enabled?o.searchbar.backdropShow():o.searchbar.backdropHide(),o.source(t)}}}),o.attachPageEvents(),o.updateValues(),o.params.requestSourceOnOpen&&o.source("")}o.emit("local::open autocompleteOpen",o)},e.prototype.autoFocus=function(){return this.searchbar&&this.searchbar.$inputEl&&this.searchbar.$inputEl.focus(),this},e.prototype.onOpened=function(){var e=this;"dropdown"!==e.params.openIn&&e.params.autoFocus&&e.autoFocus(),e.emit("local::opened autocompleteOpened",e)},e.prototype.onClose=function(){var e=this;e.destroyed||(e.searchbar&&e.searchbar.destroy&&(e.searchbar.destroy(),e.searchbar=null,delete e.searchbar),"dropdown"===e.params.openIn?(e.detachDropdownEvents(),e.$dropdownEl.removeClass("autocomplete-dropdown-in").remove(),e.$inputEl.parents(".item-content-dropdown-expanded").removeClass("item-content-dropdown-expanded")):e.detachPageEvents(),e.emit("local::close autocompleteClose",e))},e.prototype.onClosed=function(){var e=this;e.destroyed||(e.opened=!1,e.$el=null,e.el=null,delete e.$el,delete e.el,e.emit("local::closed autocompleteClosed",e))},e.prototype.openPage=function(){var o=this;if(o.opened)return o;var e=o.renderPage();return o.view.router.navigate({url:o.url,route:{content:e,path:o.url,on:{pageBeforeIn:function(e,t){o.onOpen("page",t.el)},pageAfterIn:function(e,t){o.onOpened("page",t.el)},pageBeforeOut:function(e,t){o.onClose("page",t.el)},pageAfterOut:function(e,t){o.onClosed("page",t.el)}},options:{animate:o.params.animate}}}),o},e.prototype.openPopup=function(){var t=this;if(t.opened)return t;var e={content:t.renderPopup(),animate:t.params.animate,on:{popupOpen:function(e){t.onOpen("popup",e.el)},popupOpened:function(e){t.onOpened("popup",e.el)},popupClose:function(e){t.onClose("popup",e.el)},popupClosed:function(e){t.onClosed("popup",e.el)}}};return t.params.routableModals?t.view.router.navigate({url:t.url,route:{path:t.url,popup:e}}):t.modal=t.app.popup.create(e).open(t.params.animate),t},e.prototype.openDropdown=function(){var e=this;e.$dropdownEl||(e.$dropdownEl=E(e.renderDropdown())),e.$inputEl.parents(".list").length&&0<e.$inputEl.parents(".item-content").length&&e.params.expandInput&&e.$inputEl.parents(".item-content").addClass("item-content-dropdown-expanded");var t=e.$inputEl.parents(".page-content");e.params.dropdownContainerEl?E(e.params.dropdownContainerEl).append(e.$dropdownEl):0===t.length?e.$dropdownEl.insertAfter(e.$inputEl):(e.positionDropdown(),t.append(e.$dropdownEl)),e.onOpen("dropdown",e.$dropdownEl),e.onOpened("dropdown",e.$dropdownEl)},e.prototype.open=function(){var e=this;return e.opened||e["open"+e.params.openIn.split("").map(function(e,t){return 0===t?e.toUpperCase():e}).join("")](),e},e.prototype.close=function(){var e=this;return e.opened&&("dropdown"===e.params.openIn?(e.onClose(),e.onClosed()):e.params.routableModals||"page"===e.openedIn?e.view.router.back({animate:e.params.animate}):(e.modal.once("modalClosed",function(){$.nextTick(function(){e.modal.destroy(),delete e.modal})}),e.modal.close())),e},e.prototype.init=function(){this.attachEvents()},e.prototype.destroy=function(){var e=this;e.emit("local::beforeDestroy autocompleteBeforeDestroy",e),e.detachEvents(),e.$inputEl&&e.$inputEl[0]&&delete e.$inputEl[0].f7Autocomplete,e.$openerEl&&e.$openerEl[0]&&delete e.$openerEl[0].f7Autocomplete,$.deleteProps(e),e.destroyed=!0},e}(o)),r={name:"autocomplete",params:{autocomplete:{openerEl:void 0,inputEl:void 0,view:void 0,dropdownContainerEl:void 0,dropdownPlaceholderText:void 0,typeahead:!1,highlightMatches:!0,expandInput:!1,updateInputValueOnSelect:!0,inputEvents:"input",value:void 0,multiple:!1,source:void 0,limit:void 0,valueProperty:"id",textProperty:"text",openIn:"page",pageBackLinkText:"Back",popupCloseLinkText:"Close",pageTitle:void 0,searchbarPlaceholder:"Search...",searchbarDisableText:"Cancel",animate:!0,autoFocus:!1,closeOnSelect:!1,notFoundText:"Nothing found",requestSourceOnOpen:!1,preloaderColor:void 0,preloader:!1,formColorTheme:void 0,navbarColorTheme:void 0,routableModals:!0,url:"select/",renderDropdown:void 0,renderPage:void 0,renderPopup:void 0,renderItem:void 0,renderSearchbar:void 0,renderNavbar:void 0}},static:{Autocomplete:n},create:function(){var o=this;o.autocomplete=$.extend(a({defaultSelector:void 0,constructor:n,app:o,domProp:"f7Autocomplete"}),{open:function(e){var t=o.autocomplete.get(e);if(t&&t.open)return t.open()},close:function(e){var t=o.autocomplete.get(e);if(t&&t.close)return t.close()}})}};if(t){if(e.prototype.modules&&e.prototype.modules[r.name])return;e.use(r),e.instance&&(e.instance.useModuleParams(r,e.instance.params),e.instance.useModule(r))}return r}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))