framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 16.9 kB
JavaScript
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);document,window;var h=e.$,f=(e.Template7,e.utils),a=(e.device,e.support,e.Class),r=(e.Modal,e.ConstructorMethods),n=(e.ModalMethods,function(v){function e(e,t){void 0===t&&(t={}),v.call(this,t,[e]);var l=this,a=f.extend({on:{}},e.params.smartSelect);l.useModulesParams(a),l.params=f.extend({},a,t),l.app=e;var r=h(l.params.el).eq(0);if(0===r.length)return l;if(r[0].f7SmartSelect)return r[0].f7SmartSelect;var n=r.find("select").eq(0);if(0===n.length)return l;var s=h(l.params.valueEl);0===s.length&&(s=r.find(".item-after")),0===s.length&&(s=h('<div class="item-after"></div>')).insertAfter(r.find(".item-title"));var o=t.url;o||(r.attr("href")&&"#"!==r.attr("href")?o=r.attr("href"):n.attr("name")&&(o=n.attr("name").toLowerCase()+"-select/")),o||(o=l.params.url);var i=n[0].multiple,p=i?"checkbox":"radio",c=f.id();function d(){l.open()}function m(){var e=l.$selectEl.val();l.$el.trigger("smartselect:change",l,e),l.emit("local::change smartSelectChange",l,e),l.setValue()}function u(){var e,t,a,r=this,n=r.value,s=[];if("checkbox"===r.type){for(var o=0;o<l.selectEl.options.length;o+=1)(e=l.selectEl.options[o]).value===n&&(e.selected=r.checked),e.selected&&(t=(a=e.dataset?e.dataset.displayAs:h(e).data("display-value-as"))&&void 0!==a?a:e.textContent,s.push(t.trim()));l.maxLength&&l.checkMaxLength()}else s=[t=(a=(e=l.$selectEl.find('option[value="'+n+'"]')[0]).dataset?e.dataset.displayAs:h(e).data("display-as"))&&void 0!==a?a:e.textContent],l.selectEl.value=n;l.$selectEl.trigger("change"),l.$valueEl.text(s.join(", ")),l.params.closeOnSelect&&"radio"===l.inputType&&l.close()}return f.extend(l,{$el:r,el:r[0],$selectEl:n,selectEl:n[0],$valueEl:s,valueEl:s[0],url:o,multiple:i,inputType:p,id:c,view:void 0,inputName:p+"-"+c,selectName:n.attr("name"),maxLength:n.attr("maxlength")||t.maxLength}),(r[0].f7SmartSelect=l).attachEvents=function(){r.on("click",d),r.on("change","select",m)},l.detachEvents=function(){r.off("click",d),r.off("change","select",m)},l.attachInputsEvents=function(){l.$containerEl.on("change",'input[type="checkbox"], input[type="radio"]',u)},l.detachInputsEvents=function(){l.$containerEl.off("change",'input[type="checkbox"], input[type="radio"]',u)},l.useModules(),l.init(),l}return v&&(e.__proto__=v),((e.prototype=Object.create(v&&v.prototype)).constructor=e).prototype.getView=function(){var e=this,t=e.view||e.params.view;if(t||(t=e.$el.parents(".view").length&&e.$el.parents(".view")[0].f7View),!t)throw Error("Smart Select requires initialized View");return e.view=t},e.prototype.checkMaxLength=function(){var e=this,t=e.$containerEl;e.selectEl.selectedOptions.length>=e.maxLength?t.find('input[type="checkbox"]').each(function(e,t){t.checked?h(t).parents("li").removeClass("disabled"):h(t).parents("li").addClass("disabled")}):t.find(".disabled").removeClass("disabled")},e.prototype.setValue=function(e){var n=[];void 0!==e?n=Array.isArray(e)?e:[e]:this.$selectEl.find("option").each(function(e,t){var a=h(t);if(t.selected){var r=t.dataset?t.dataset.displayAs:a.data("display-value-as");r&&void 0!==r?n.push(r):n.push(t.textContent.trim())}}),this.$valueEl.text(n.join(", "))},e.prototype.getItemsData=function(){var m,u=this,v=[];return u.$selectEl.find("option").each(function(e,t){var a=h(t),r=a.dataset(),n=r.optionImage||u.params.optionImage,s=r.optionIcon||u.params.optionIcon,o=n||s,l=r.optionColor,i=r.optionClass||"";a[0].disabled&&(i+=" disabled");var p=a.parent("optgroup")[0],c=p&&p.label,d=!1;p&&p!==m&&(d=!0,m=p,v.push({groupLabel:c,isLabel:d})),v.push({value:a[0].value,text:a[0].textContent.trim(),selected:a[0].selected,groupEl:p,groupLabel:c,image:n,icon:s,color:l,className:i,disabled:a[0].disabled,id:u.id,hasMedia:o,checkbox:"checkbox"===u.inputType,radio:"radio"===u.inputType,inputName:u.inputName,inputType:u.inputType})}),u.items=v},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 "},e.prototype.renderItem=function(e,t){return this.params.renderItem?this.params.renderItem.call(this,e,t):e.isLabel?'<li class="item-divider">'+e.groupLabel+"</li>":'\n <li class="'+(e.className||"")+'">\n <label class="item-'+e.inputType+' item-content">\n <input type="'+e.inputType+'" name="'+e.inputName+'" value="'+e.value+'" '+(e.selected?"checked":"")+'/>\n <i class="icon icon-'+e.inputType+'"></i>\n '+(e.hasMedia?'\n <div class="item-media">\n '+(e.icon?'<i class="icon '+e.icon+'"></i>':"")+"\n "+(e.image?'<img src="'+e.image+'">':"")+"\n </div>\n ":"")+'\n <div class="item-inner">\n <div class="item-title'+(e.color?" color-"+e.color:"")+'">'+e.text+"</div>\n </div>\n </label>\n </li>\n "},e.prototype.renderItems=function(){var a=this;return a.params.renderItems?a.params.renderItems.call(a,a.items):"\n "+a.items.map(function(e,t){return""+a.renderItem(e,t)}).join("")+"\n "},e.prototype.renderPage=function(){var e=this;if(e.params.renderPage)return e.params.renderPage.call(e,e.items);var t=e.params.pageTitle;if(void 0===t){var a=e.$el.find(".item-title");t=a.length?a.text().trim():""}return'\n <div class="page smart-select-page '+e.params.cssClass+'" data-name="smart-select-page" data-select-name="'+e.selectName+'">\n <div class="navbar '+(e.params.navbarColorTheme?"color-theme-"+e.params.navbarColorTheme:"")+'">\n <div class="navbar-inner sliding '+(e.params.navbarColorTheme?"color-theme-"+e.params.navbarColorTheme:"")+'">\n <div class="left">\n <a href="#" class="link back">\n <i class="icon icon-back"></i>\n <span class="ios-only">'+e.params.pageBackLinkText+"</span>\n </a>\n </div>\n "+(t?'<div class="title">'+t+"</div>":"")+"\n "+(e.params.searchbar?'<div class="subnavbar">'+e.renderSearchbar()+"</div>":"")+"\n </div>\n </div>\n "+(e.params.searchbar?'<div class="searchbar-backdrop"></div>':"")+'\n <div class="page-content">\n <div class="list smart-select-list-'+e.id+" "+(e.params.virtualList?" virtual-list":"")+" "+(e.params.formColorTheme?"color-theme-"+e.params.formColorTheme:"")+'">\n <ul>'+(!e.params.virtualList&&e.renderItems(e.items))+"</ul>\n </div>\n </div>\n </div>\n "},e.prototype.renderPopup=function(){var e=this;if(e.params.renderPopup)return e.params.renderPopup.call(e,e.items);var t=e.params.pageTitle;if(void 0===t){var a=e.$el.find(".item-title");t=a.length?a.text().trim():""}return'\n <div class="popup smart-select-popup '+(e.params.cssClass||"")+" "+(e.params.popupTabletFullscreen?"popup-tablet-fullscreen":"")+'" data-select-name="'+e.selectName+'">\n <div class="view">\n <div class="page smart-select-page '+(e.params.searchbar?"page-with-subnavbar":"")+'" data-name="smart-select-page">\n <div class="navbar '+(e.params.navbarColorTheme?"color-theme-"+e.params.navbarColorTheme:"")+'">\n <div class="navbar-inner sliding">\n <div class="left">\n <a href="#" class="link popup-close" data-popup=".smart-select-popup[data-select-name=\''+e.selectName+'\']">\n <i class="icon icon-back"></i>\n <span class="ios-only">'+e.params.popupCloseLinkText+"</span>\n </a>\n </div>\n "+(t?'<div class="title">'+t+"</div>":"")+"\n "+(e.params.searchbar?'<div class="subnavbar">'+e.renderSearchbar()+"</div>":"")+"\n </div>\n </div>\n "+(e.params.searchbar?'<div class="searchbar-backdrop"></div>':"")+'\n <div class="page-content">\n <div class="list smart-select-list-'+e.id+" "+(e.params.virtualList?" virtual-list":"")+" "+(e.params.formColorTheme?"color-theme-"+e.params.formColorTheme:"")+'">\n <ul>'+(!e.params.virtualList&&e.renderItems(e.items))+"</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n "},e.prototype.renderSheet=function(){var e=this;return e.params.renderSheet?e.params.renderSheet.call(e,e.items):'\n <div class="sheet-modal smart-select-sheet '+e.params.cssClass+'" data-select-name="'+e.selectName+'">\n <div class="toolbar '+(e.params.toolbarColorTheme?"theme-"+e.params.toolbarColorTheme:"")+'">\n <div class="toolbar-inner">\n <div class="left"></div>\n <div class="right">\n <a class="link sheet-close">'+e.params.sheetCloseLinkText+'</a>\n </div>\n </div>\n </div>\n <div class="sheet-modal-inner">\n <div class="page-content">\n <div class="list smart-select-list-'+e.id+" "+(e.params.virtualList?" virtual-list":"")+" "+(e.params.formColorTheme?"color-theme-"+e.params.formColorTheme:"")+'">\n <ul>'+(!e.params.virtualList&&e.renderItems(e.items))+"</ul>\n </div>\n </div>\n </div>\n </div>\n "},e.prototype.renderPopover=function(){var e=this;return e.params.renderPopover?e.params.renderPopover.call(e,e.items):'\n <div class="popover smart-select-popover '+e.params.cssClass+'" data-select-name="'+e.selectName+'">\n <div class="popover-inner">\n <div class="list smart-select-list-'+e.id+" "+(e.params.virtualList?" virtual-list":"")+" "+(e.params.formColorTheme?"color-theme-"+e.params.formColorTheme:"")+'">\n <ul>'+(!e.params.virtualList&&e.renderItems(e.items))+"</ul>\n </div>\n </div>\n </div>\n "},e.prototype.onOpen=function(e,t){var a=this,r=a.app,n=h(t);if(a.$containerEl=n,a.openedIn=e,a.opened=!0,a.params.virtualList&&(a.vl=r.virtualList.create({el:n.find(".virtual-list"),items:a.items,renderItem:a.renderItem.bind(a),height:a.params.virtualListHeight,searchByItem:function(e,t){return!!(t.text&&0<=t.text.toLowerCase().indexOf(e.trim().toLowerCase()))}})),a.params.searchbar){var s=n.find(".searchbar");if("page"===e&&"ios"===r.theme&&(s=h(r.navbar.getElByPage(n)).find(".searchbar")),a.params.appendSearchbarNotFound&&("page"===e||"popup"===e)){var o=null;(o="string"==typeof a.params.appendSearchbarNotFound?h('<div class="block searchbar-not-found">'+a.params.appendSearchbarNotFound+"</div>"):"boolean"==typeof a.params.appendSearchbarNotFound?h('<div class="block searchbar-not-found">Nothing found</div>'):a.params.appendSearchbarNotFound)&&n.find(".page-content").append(o[0])}var l=f.extend({el:s,backdropEl:n.find(".searchbar-backdrop"),searchContainer:".smart-select-list-"+a.id,searchIn:".item-title"},"object"==typeof a.params.searchbar?a.params.searchbar:{});a.searchbar=r.searchbar.create(l)}a.maxLength&&a.checkMaxLength(),a.params.closeOnSelect&&a.$containerEl.find('input[type="radio"][name="'+a.inputName+'"]:checked').parents("label").once("click",function(){a.close()}),a.attachInputsEvents(),a.$el.trigger("smartselect:open",a),a.emit("local::open smartSelectOpen",a)},e.prototype.onOpened=function(){this.$el.trigger("smartselect:opened",this),this.emit("local::opened smartSelectOpened",this)},e.prototype.onClose=function(){var e=this;e.destroyed||(e.vl&&e.vl.destroy&&(e.vl.destroy(),e.vl=null,delete e.vl),e.searchbar&&e.searchbar.destroy&&(e.searchbar.destroy(),e.searchbar=null,delete e.searchbar),e.detachInputsEvents(),e.$el.trigger("smartselect:close",e),e.emit("local::close smartSelectClose",e))},e.prototype.onClosed=function(){var e=this;e.destroyed||(e.opened=!1,e.$containerEl=null,delete e.$containerEl,e.$el.trigger("smartselect:closed",e),e.emit("local::closed smartSelectClosed",e))},e.prototype.openPage=function(){var a=this;if(a.opened)return a;a.getItemsData();var e=a.renderPage(a.items);return a.getView().router.navigate({url:a.url,route:{content:e,path:a.url,on:{pageBeforeIn:function(e,t){a.onOpen("page",t.el)},pageAfterIn:function(e,t){a.onOpened("page",t.el)},pageBeforeOut:function(e,t){a.onClose("page",t.el)},pageAfterOut:function(e,t){a.onClosed("page",t.el)}}}}),a},e.prototype.openPopup=function(){var t=this;if(t.opened)return t;t.getItemsData();var e={content:t.renderPopup(t.items),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)}}};t.params.routableModals?t.getView().router.navigate({url:t.url,route:{path:t.url,popup:e}}):t.modal=t.app.popup.create(e).open();return t},e.prototype.openSheet=function(){var t=this;if(t.opened)return t;t.getItemsData();var e={content:t.renderSheet(t.items),backdrop:!1,scrollToEl:t.$el,closeByOutsideClick:!0,on:{sheetOpen:function(e){t.onOpen("sheet",e.el)},sheetOpened:function(e){t.onOpened("sheet",e.el)},sheetClose:function(e){t.onClose("sheet",e.el)},sheetClosed:function(e){t.onClosed("sheet",e.el)}}};t.params.routableModals?t.getView().router.navigate({url:t.url,route:{path:t.url,sheet:e}}):t.modal=t.app.sheet.create(e).open();return t},e.prototype.openPopover=function(){var t=this;if(t.opened)return t;t.getItemsData();var e={content:t.renderPopover(t.items),targetEl:t.$el,on:{popoverOpen:function(e){t.onOpen("popover",e.el)},popoverOpened:function(e){t.onOpened("popover",e.el)},popoverClose:function(e){t.onClose("popover",e.el)},popoverClosed:function(e){t.onClosed("popover",e.el)}}};t.params.routableModals?t.getView().router.navigate({url:t.url,route:{path:t.url,popover:e}}):t.modal=t.app.popover.create(e).open();return t},e.prototype.open=function(e){var t=this;return t.opened||t["open"+(e||t.params.openIn).split("").map(function(e,t){return 0===t?e.toUpperCase():e}).join("")](),t},e.prototype.close=function(){var e=this;if(!e.opened)return e;e.params.routableModals||"page"===e.openedIn?e.getView().router.back():(e.modal.once("modalClosed",function(){f.nextTick(function(){e.modal.destroy(),delete e.modal})}),e.modal.close());return e},e.prototype.init=function(){this.attachEvents(),this.setValue()},e.prototype.destroy=function(){var e=this;e.emit("local::beforeDestroy smartSelectBeforeDestroy",e),e.$el.trigger("smartselect:beforedestroy",e),e.detachEvents(),delete e.$el[0].f7SmartSelect,f.deleteProps(e),e.destroyed=!0},e}(a)),s={name:"smartSelect",params:{smartSelect:{el:void 0,valueEl:void 0,openIn:"page",pageTitle:void 0,pageBackLinkText:"Back",popupCloseLinkText:"Close",popupTabletFullscreen:!1,sheetCloseLinkText:"Done",searchbar:!1,searchbarPlaceholder:"Search",searchbarDisableText:"Cancel",closeOnSelect:!1,virtualList:!1,virtualListHeight:void 0,formColorTheme:void 0,navbarColorTheme:void 0,routableModals:!0,url:"select/",cssClass:"",renderPage:void 0,renderPopup:void 0,renderSheet:void 0,renderPopover:void 0,renderItems:void 0,renderItem:void 0,renderSearchbar:void 0}},static:{SmartSelect:n},create:function(){var a=this;a.smartSelect=f.extend(r({defaultSelector:".smart-select",constructor:n,app:a,domProp:"f7SmartSelect"}),{open:function(e){var t=a.smartSelect.get(e);if(t&&t.open)return t.open()},close:function(e){var t=a.smartSelect.get(e);if(t&&t.close)return t.close()}})},on:{tabMounted:function(e){var a=this;h(e).find(".smart-select-init").each(function(e,t){a.smartSelect.create(f.extend({el:t},h(t).dataset()))})},tabBeforeRemove:function(e){h(e).find(".smart-select-init").each(function(e,t){t.f7SmartSelect&&t.f7SmartSelect.destroy&&t.f7SmartSelect.destroy()})},pageInit:function(e){var a=this;e.$el.find(".smart-select-init").each(function(e,t){a.smartSelect.create(f.extend({el:t},h(t).dataset()))})},pageBeforeRemove:function(e){e.$el.find(".smart-select-init").each(function(e,t){t.f7SmartSelect&&t.f7SmartSelect.destroy&&t.f7SmartSelect.destroy()})}},clicks:{".smart-select":function(e,t){e[0].f7SmartSelect||this.smartSelect.create(f.extend({el:e},t)).open()}},vnode:{"smart-select-init":{insert:function(e){var t=e.elm;this.smartSelect.create(f.extend({el:t},h(t).dataset()))},destroy:function(e){var t=e.elm;t.f7SmartSelect&&t.f7SmartSelect.destroy&&t.f7SmartSelect.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))