autocomplete.js 11.9 KB
define(["mk7/searchbar","css!cmpts/autocomplete/autocomplete.css"],function(){var e=Dom7,a=Template7,o=function(o){function p(e){var a=r.input.val();r.params.source&&r.params.source(r,a,function(e){var o="",p=r.params.limit?Math.min(r.params.limit,e.length):e.length;r.items=e;var t,n=new RegExp("("+a+")","i"),i=null;for(t=0;t<p;t++){if(void 0!==r.params.showOriginal&&1==r.params.showOriginal)i=e[t];else{var l="object"==typeof e[t]?e[t][r.params.valueProperty]:e[t];i={value:l,text:("object"!=typeof e[t]?e[t]:e[t][r.params.textProperty]).replace(n,"<b>$1</b>")}}o+=r.dropdownItemTemplate(i)}""===o&&r.params.dropdownPlaceholderText&&(o+=r.dropdownPlaceholderTemplate({text:r.params.dropdownPlaceholderText})),r.dropdown.find("ul").html(o)})}function t(a){for(var o,p=e(this),t=0;t<r.items.length;t++){var n="object"==typeof r.items[t]?r.items[t][r.params.valueProperty]:r.items[t],i=p.attr("data-value");n!==i&&1*n!==1*i||(o=r.items[t])}r.params.updateInputValueOnSelect&&(r.input.val("object"==typeof o?o[r.params.textProperty]:o),r.input.trigger("input change")),r.params.onChange&&(r.clickItem=p,r.params.onChange(r,o)),r.close()}function n(a){var o=e(a.target);o.is(r.input[0])||r.dropdown&&o.parents(r.dropdown[0]).length>0||r.close()}var r=this,i={popupCloseText:"Close",backText:"Back",searchbarPlaceholderText:"Search...",searchbarCancelText:"Cancel",openIn:"page",backOnSelect:!1,notFoundText:"Nothing found",valueProperty:"id",textProperty:"text",updateInputValueOnSelect:!0,expandInput:!1,preloaderColor:!1,preloader:!1};o=o||{};for(var l in i)"undefined"==typeof o[l]&&(o[l]=i[l]);r.params=o,r.params.opener&&(r.opener=e(r.params.opener));var s=r.params.view;if(!r.params.view&&r.opener&&r.opener.length){if(s=r.opener.parents("."+app.params.viewClass),0===s.length)return;s=s[0].f7View}if(!r.params.input||(r.input=e(r.params.input),0!==r.input.length||"dropdown"!==r.params.openIn)){r.value=r.params.value||[],r.id=(new Date).getTime(),r.inputType=r.params.multiple?"checkbox":"radio",r.inputName=r.inputType+"-"+r.id;var d=0,c=r.params.backOnSelect;if("dropdown"!==r.params.openIn){r.itemTemplate=a.compile(r.params.itemTemplate||'<li><label class="label-{{inputType}} item-content"><input type="{{inputType}}" name="{{inputName}}" value="{{value}}" {{#if selected}}checked{{/if}}>{{#if material}}<div class="item-media"><i class="icon icon-form-{{inputType}}"></i></div><div class="item-inner"><div class="item-title">{{text}}</div></div>{{else}}{{#if checkbox}}<div class="item-media"><i class="icon icon-form-checkbox"></i></div>{{/if}}<div class="item-inner"><div class="item-title">{{text}}</div></div>{{/if}}</label></li>');var u=r.params.pageTitle||"";!u&&r.opener&&r.opener.length&&(u=r.opener.find(".item-title").text());var m,v,f="autocomplete-"+r.inputName,h=r.params.navbarTheme,b=r.params.formTheme,g="",w="";r.navbarTemplate=a.compile(r.params.navbarTemplate||'<div class="navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}"><div class="navbar-inner"><div class="left sliding">{{#if material}}<a href="javascript:void(0)" class="link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only"><i class="icon icon-back"></i></a>{{else}}<a href="javascript:void(0)" class="link {{#if inPopup}}close-popup{{else}}back{{/if}}"><i class="icon icon-back"></i>{{#if inPopup}}<span>{{popupCloseText}}</span>{{else}}<span>{{backText}}</span>{{/if}}</a>{{/if}}</div><div class="center sliding">{{pageTitle}}</div>{{#if preloader}}<div class="right"><div class="autocomplete-preloader preloader {{#if preloaderColor}}preloader-{{preloaderColor}}{{/if}}"></div></div>{{/if}}</div></div>'),m=r.navbarTemplate({pageTitle:u,backText:r.params.backText,popupCloseText:r.params.popupCloseText,openIn:r.params.openIn,navbarTheme:h,inPopup:"popup"===r.params.openIn,inPage:"page"===r.params.openIn,material:d,preloader:r.params.preloader,preloaderColor:r.params.preloaderColor}),"page"===r.params.openIn?(v="static",r.opener?(r.opener.parents(".navbar-through").length>0&&(v="through"),r.opener.parents(".navbar-fixed").length>0&&(v="fixed"),w=r.opener.parents(".page").hasClass("no-toolbar")?"no-toolbar":"",g=r.opener.parents(".page").hasClass("no-navbar")?"no-navbar":"navbar-"+v):s.container&&((e(s.container).hasClass("navbar-through")||e(s.container).find(".navbar-through").length>0)&&(v="through"),(e(s.container).hasClass("navbar-fixed")||e(s.container).find(".navbar-fixed").length>0)&&(v="fixed"),w=e(s.activePage.container).hasClass("no-toolbar")?"no-toolbar":"",g=e(s.activePage.container).hasClass("no-navbar")?"no-navbar":"navbar-"+v)):v="fixed";var x='<form class="searchbar"><div class="searchbar-input"><input type="search" placeholder="'+r.params.searchbarPlaceholderText+'"><a href="javascript:void(0)" class="searchbar-clear"></a></div>'+(d?"":'<a href="javascript:void(0)" class="searchbar-cancel">'+r.params.searchbarCancelText+"</a>")+'</form><div class="searchbar-overlay"></div>',T=("through"===v?m:"")+'<div class="pages"><div data-page="'+f+'" class="page autocomplete-page '+g+" "+w+'">'+("fixed"===v?m:"")+x+'<div class="page-content">'+("static"===v?m:"")+'<div class="list-block autocomplete-found autocomplete-list-'+r.id+" "+(b?"theme-"+b:"")+'"><ul></ul></div><div class="list-block autocomplete-not-found"><ul><li class="item-content"><div class="item-inner"><div class="item-title">'+r.params.notFoundText+'</div></div></li></ul></div><div class="list-block autocomplete-values"><ul></ul></div></div></div></div>'}else r.dropdownItemTemplate=a.compile(r.params.dropdownItemTemplate||'<li><label class="{{#unless placeholder}}label-radio{{/unless}} item-content" data-value="{{value}}"><div class="item-inner"><div class="item-title">{{text}}</div></div></label></li>'),r.dropdownPlaceholderTemplate=a.compile(r.params.dropdownPlaceholderTemplate||'<li class="autocomplete-dropdown-placeholder"><div class="item-content"><div class="item-inner"><div class="item-title">{{text}}</div></div></label></li>'),r.dropdownTemplate=a.compile(r.params.dropdownTemplate||'<div class="autocomplete-dropdown"><div class="autocomplete-dropdown-inner"><div class="list-block"><ul></ul></div></div>{{#if preloader}}<div class="autocomplete-preloader preloader {{#if preloaderColor}}preloader-{{preloaderColor}}{{/if}}">{{#if material}}{{materialPreloaderHtml}}{{/if}}</div>{{/if}}</div>');return r.popup=void 0,r.dropdown=void 0,r.positionDropDown=function(){var e=r.input.parents(".list-block"),a=r.input.parents(".page-content"),o=(parseInt(a.css("padding-top"),10),parseInt(a.css("padding-top"),10)),p=r.input.offset(),t=e.length>0?e.offset():0,n=a[0].scrollHeight-o-(p.top+a[0].scrollTop)-r.input[0].offsetHeight;r.dropdown.css({left:(e.length>0?t.left:p.left)+"px",top:p.top+a[0].scrollTop+r.input[0].offsetHeight+"px",width:(e.length>0?e[0].offsetWidth:r.input[0].offsetWidth)+"px"}),r.dropdown.children(".autocomplete-dropdown-inner").css({maxHeight:n+"px",paddingLeft:"0px"})},r.pageInit=function(a){function o(){var e,a="";for(e=0;e<r.value.length;e++)a+=r.itemTemplate({value:"object"==typeof r.value[e]?r.value[e][r.params.valueProperty]:r.value[e],text:"object"==typeof r.value[e]?r.value[e][r.params.textProperty]:r.value[e],inputType:r.inputType,id:r.id,inputName:r.inputName+"-checked",checkbox:"checkbox"===r.inputType,material:d,selected:!0});t.find(".autocomplete-values ul").html(a)}var p=a.detail.page;if(r.page=e(p.container),r.pageData=p,p.name===f){var t=e(p.container),n=app.searchbar(t.find(".searchbar"),{customSearch:!0,onSearch:function(e,a){0===a.query.length&&e.active?e.overlay.addClass("searchbar-overlay-active"):e.overlay.removeClass("searchbar-overlay-active");var o,p;r.params.source&&r.params.source(r,a.query,function(e){var n="",i=r.params.limit?Math.min(r.params.limit,e.length):e.length;for(r.items=e,o=0;o<i;o++){var l=!1,s="object"==typeof e[o]?e[o][r.params.valueProperty]:e[o];for(p=0;p<r.value.length;p++){var c="object"==typeof r.value[p]?r.value[p][r.params.valueProperty]:r.value[p];c!==s&&1*c!==1*s||(l=!0)}n+=r.itemTemplate({value:s,text:"object"!=typeof e[o]?e[o]:e[o][r.params.textProperty],inputType:r.inputType,id:r.id,inputName:r.inputName,selected:l,checkbox:"checkbox"===r.inputType,material:d})}t.find(".autocomplete-found ul").html(n),0===e.length?0!==a.query.length?(t.find(".autocomplete-not-found").show(),t.find(".autocomplete-found, .autocomplete-values").hide()):(t.find(".autocomplete-values").show(),t.find(".autocomplete-found, .autocomplete-not-found").hide()):(t.find(".autocomplete-found").show(),t.find(".autocomplete-not-found, .autocomplete-values").hide())})}});r.searchbar=n,t.on("change",'input[type="radio"], input[type="checkbox"]',function(){var a,p,t,n,i=this,l=i.value,d=(e(i).parents("li").find(".item-title").text(),e(i).parents(".autocomplete-values").length>0);if(d){if("checkbox"===r.inputType&&!i.checked){for(a=0;a<r.value.length;a++)n="string"==typeof r.value[a]?r.value[a]:r.value[a][r.params.valueProperty],n!==l&&1*n!==1*l||r.value.splice(a,1);o(),r.params.onChange&&r.params.onChange(r,r.value)}}else{for(a=0;a<r.items.length;a++)t="string"==typeof r.items[a]?r.items[a]:r.items[a][r.params.valueProperty],t!==l&&1*t!==1*l||(p=r.items[a]);if("radio"===r.inputType)r.value=[p];else if(i.checked)r.value.push(p);else for(a=0;a<r.value.length;a++)n="string"==typeof r.value[a]?r.value[a]:r.value[a][r.params.valueProperty],n!==l&&1*n!==1*l||r.value.splice(a,1);o(),("radio"===r.inputType&&i.checked||"checkbox"===r.inputType)&&r.params.onChange&&r.params.onChange(r,r.value),c&&"radio"===r.inputType&&("popup"===r.params.openIn?app.closeModal(r.popup):s.router.back())}}),o(),r.params.onOpen&&r.params.onOpen(r)}},r.showPreloader=function(){"dropdown"===r.params.openIn?r.dropdown&&r.dropdown.find(".autocomplete-preloader").addClass("autocomplete-preloader-visible"):e(".autocomplete-preloader").addClass("autocomplete-preloader-visible")},r.hidePreloader=function(){"dropdown"===r.params.openIn?r.dropdown&&r.dropdown.find(".autocomplete-preloader").removeClass("autocomplete-preloader-visible"):e(".autocomplete-preloader").removeClass("autocomplete-preloader-visible")},r.open=function(){if(!r.opened)if(r.opened=!0,"dropdown"===r.params.openIn){r.dropdown||(r.dropdown=e(r.dropdownTemplate({preloader:r.params.preloader,preloaderColor:r.params.preloaderColor,material:d,materialPreloaderHtml:app.params.materialPreloaderHtml})),r.dropdown.on("click","label",t));var a=r.input.parents(".list-block");a.length&&r.input.parents(".item-content").length>0&&r.params.expandInput&&r.input.parents(".item-content").addClass("item-content-dropdown-expand"),r.positionDropDown(),r.input.parents(".page-content").append(r.dropdown),r.dropdown.addClass("autocomplete-dropdown-in"),r.input.trigger("input"),e(window).on("resize",r.positionDropDown),r.params.onOpen&&r.params.onOpen(r)}else e(document).once("pageInit",".autocomplete-page",r.pageInit),"popup"===r.params.openIn?(r.popup=app.popup('<div class="popup autocomplete-popup autocomplete-popup-'+r.inputName+'"><div class="view navbar-fixed">'+T+"</div></div>"),r.popup=e(r.popup),r.popup.once("closed",function(){r.popup=void 0,r.opened=!1,r.params.onClose&&r.params.onClose(r)})):(s.router.load({content:T}),e(document).once("pageBack",".autocomplete-page",function(){r.opened=!1,r.params.onClose&&r.params.onClose(r)}))},r.close=function(a){if(r.opened){if("dropdown"===r.params.openIn){if(a&&"blur"===a.type&&r.dropdown.find("label.active-state").length>0)return;1==r.params.backOnSelect&&(r.dropdown.removeClass("autocomplete-dropdown-in").remove(),r.input.parents(".item-content-dropdown-expand").removeClass("item-content-dropdown-expand")),r.opened=!1,e(window).off("resize",r.positionDropDown),r.params.onClose&&r.params.onClose(r)}"popup"===r.params.openIn&&r.popup&&app.closeModal(r.popup)}},r.initEvents=function(a){var o=a?"off":"on";"dropdown"!==r.params.openIn&&r.opener&&r.opener[o]("click",r.open),"dropdown"===r.params.openIn&&r.input&&(r.input[o]("focus",r.open),r.input[o]("input",p),app.device.android?e("html")[o]("click",n):r.input[o]("blur",r.close)),a&&r.dropdown&&(r.dropdown=null)},r.init=function(){r.initEvents()},r.destroy=function(){r.initEvents(!0),r=null},r.init(),r}};app.autocomplete=function(e){return new o(e)}});