framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 11.5 kB
JavaScript
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var l=e.$,i=e.utils,s=e.getDevice,n=(e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,e.$jsx),a=i.extend,c=i.nextTick,p=i.deleteProps;function d(e,t){const i=this,s=l(e),n=s.index(),o=i.cols[n];if(o.divider)return;let r,a;function c(){o.updateItems()}function p(){const e=l(this).attr("data-picker-value");o.setValue(e)}o.$el=s,o.el=s[0],o.$itemsEl=o.$el.find(".picker-items"),o.items=o.$itemsEl.find(".picker-item"),o.replaceValues=function(e,t){o.detachEvents(),o.values=e,o.displayValues=t,o.$itemsEl.html(i.renderColumn(o,!0)),o.items=o.$itemsEl.find(".picker-item"),o.calcSize(),o.setValue(o.values[0],!0),o.attachEvents()},o.calcSize=function(){a=o.$el[0].offsetHeight,r=o.items[0].offsetHeight;const e=o.el.style.getPropertyValue("--f7-picker-scroll-padding");o.el.style.setProperty("--f7-picker-scroll-padding",(a-r)/2+"px"),e||(o.$itemsEl[0].scrollTop=0)},o.setValue=function(e,t){const l=o.$itemsEl.find(`.picker-item[data-picker-value="${e}"]`).index();if(void 0===l||-1===l)return;const i=l*r;o.$itemsEl[0].scrollTop=i,o.updateItems(l,i,t)},o.updateItems=function(e,t,s){void 0===t&&(t=o.$itemsEl[0].scrollTop),void 0===e&&(e=Math.round(t/r)),e<0&&(e=0),e>=o.items.length&&(e=o.items.length-1);const n=o.activeIndex;o.activeIndex=e,o.$itemsEl.find(".picker-item-selected").removeClass("picker-item-selected");const c=o.items.eq(e);c.addClass("picker-item-selected").children().transform(""),i.params.rotateEffect&&o.items.each((e=>{const i=l(e),s=(e.offsetTop-(a-r)/2-t)/r,n=Math.ceil(o.height/r/2)+1;let c=-24*s;c>180&&(c=180),c<-180&&(c=-180),Math.abs(s)>n?i.addClass("picker-item-far"):i.removeClass("picker-item-far"),i.children("span").transform(`translate3d(0, ${-s*r}px, -100px) rotateX(${c}deg)`)})),(s||void 0===s)&&(o.value=c.attr("data-picker-value"),o.displayValue=o.displayValues?o.displayValues[e]:o.value,n!==e&&(o.onChange&&o.onChange(i,o.value,o.displayValue),i.updateValue()))},o.attachEvents=function(){o.$itemsEl.on("scroll",c),o.items.on("click",p)},o.detachEvents=function(){o.items.off("click",p)},o.init=function(){o.calcSize(),0===n&&o.$el.addClass("picker-column-first"),n===i.cols.length-1&&o.$el.addClass("picker-column-last"),i.params.freeMode&&o.$el.addClass("picker-column-free-mode"),t&&o.updateItems(0),o.attachEvents()},o.destroy=function(){o.detachEvents()},o.init()}class u extends n{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const i=this,n=s();let o,r;if(i.params=a({},e.params.picker,t),i.params.containerEl&&(o=l(i.params.containerEl),0===o.length))return i;i.params.inputEl&&(r=l(i.params.inputEl));let c=i.params.scrollToInput?r:void 0;if(i.params.scrollToEl){const e=l(i.params.scrollToEl);e.length>0&&(c=e)}function p(){i.resizeCols()}function d(){i.open()}function u(e){e.preventDefault()}a(i,{app:e,$containerEl:o,containerEl:o&&o[0],inline:o&&o.length>0,needsOriginFix:n.ios||window.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&window.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!n.android,cols:[],$inputEl:r,inputEl:r&&r[0],$scrollToEl:c,initialized:!1,opened:!1,url:i.params.url});let m=null;function v(e){m=e.target}function h(e){if(i.destroyed||!i.params)return;const t=l(e.target);i.isPopover()||i.opened&&!i.closing&&(t.closest('[class*="backdrop"]').length||(r&&r.length>0?m===e.target&&t[0]!==r[0]&&0===t.closest(".sheet-modal").length&&i.close():0===l(e.target).closest(".sheet-modal").length&&i.close()))}return a(i,{attachResizeEvent(){e.on("resize",p)},detachResizeEvent(){e.off("resize",p)},attachInputEvents(){i.$inputEl.on("click",d),i.params.inputReadOnly&&(i.$inputEl.on("focus mousedown",u),i.$inputEl[0]&&(i.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){i.$inputEl.off("click",d),i.params.inputReadOnly&&(i.$inputEl.off("focus mousedown",u),i.$inputEl[0]&&delete i.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",h),e.on("touchstart",v)},detachHtmlEvents(){e.off("click",h),e.off("touchstart",v)}}),i.init(),i}get view(){const{app:e,params:t,$inputEl:l}=this;let i;return t.view?i=t.view:l&&(i=l.parents(".view").length&&l.parents(".view")[0].f7View),i||(i=e.views.main),i}initInput(){const e=this;e.$inputEl&&e.params.inputReadOnly&&e.$inputEl.prop("readOnly",!0)}resizeCols(){const e=this;if(e.opened)for(let t=0;t<e.cols.length;t+=1)e.cols[t].divider||(e.cols[t].calcSize(),e.cols[t].setValue(e.cols[t].value,!1))}isPopover(){const e=this,{app:t,modal:l,params:i}=e,n=s();if("sheet"===i.openIn)return!1;if(l&&"popover"!==l.type)return!1;if(!e.inline&&e.inputEl){if("popover"===i.openIn)return!0;if(n.ios)return!!n.ipad;if(t.width>=768)return!0;if(n.desktop&&"aurora"===t.theme)return!0}return!1}formatValue(){const e=this,{value:t,displayValue:l}=e;return e.params.formatValue?e.params.formatValue.call(e,t,l):t.join(" ")}setValue(e){const t=this;let l=0;if(0===t.cols.length)return t.value=e,void t.updateValue(e);for(let i=0;i<t.cols.length;i+=1)t.cols[i]&&!t.cols[i].divider&&(t.cols[i].setValue(e[l]),l+=1)}getValue(){return this.value}updateValue(e){const t=this,l=e||[],i=[];let s;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)s=e[t],void 0!==s.displayValues&&void 0!==s.values&&-1!==s.values.indexOf(l[t])?i.push(s.displayValues[s.values.indexOf(l[t])]):i.push(l[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(l.push(t.cols[e].value),i.push(t.cols[e].displayValue));l.indexOf(void 0)>=0||(t.value=l,t.displayValue=i,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){d.call(this,e,t)}destroyColumn(e){const t=this,i=l(e).index();t.cols[i]&&t.cols[i].destroy&&t.cols[i].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):r("div",{class:"toolbar toolbar-top no-shadow"},r("div",{class:"toolbar-inner"},r("div",{class:"left"}),r("div",{class:"right"},r("a",{class:"link sheet-close popover-close"},e.params.toolbarCloseText))))}renderColumn(e,t){const l=`picker-column ${e.textAlign?`picker-column-${e.textAlign}`:""} ${e.cssClass||""}`;let i,s;return e.divider?i=`\n <div class="${l} picker-column-divider">${e.content}</div>\n `:(s=e.values.map(((t,l)=>`\n <div class="picker-item" data-picker-value="${t}">\n <span>${e.displayValues?e.displayValues[l]:t}</span>\n </div>\n `)).join(""),i=`\n <div class="${l}">\n <div class="picker-items">${s}</div>\n </div>\n `),t?s.trim():i.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:`picker picker-inline ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:"popover picker-popover"},r("div",{class:"popover-inner"},r("div",{class:`picker ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))))}render(){const e=this;return e.params.render?e.params.render.call(e):e.inline?e.renderInline():e.isPopover()?e.renderPopover():e.renderSheet()}onOpen(){const e=this,{initialized:t,$el:l,app:i,$inputEl:s,inline:n,value:o,params:r}=e;e.opened=!0,e.closing=!1,e.opening=!0,e.attachResizeEvent(),l.find(".picker-column").each((l=>{let i=!0;(!t&&r.value||t&&o)&&(i=!1),e.initColumn(l,i)})),t?o&&e.setValue(o):o?e.setValue(o):r.value&&e.setValue(r.value),!n&&s&&s.length&&"md"===i.theme&&s.trigger("focus"),e.initialized=!0,l&&l.trigger("picker:open"),s&&s.trigger("picker:open"),e.emit("local::open pickerOpen",e)}onOpened(){const e=this;e.opening=!1,e.$el&&e.$el.trigger("picker:opened"),e.$inputEl&&e.$inputEl.trigger("picker:opened"),e.emit("local::opened pickerOpened",e)}onClose(){const e=this,t=e.app;if(e.opening=!1,e.closing=!0,e.detachResizeEvent(),e.cols.forEach((e=>{e.destroy&&e.destroy()})),e.$inputEl)if("md"===t.theme)e.$inputEl.trigger("blur");else{const l=e.$inputEl.attr("validate"),i=e.$inputEl.attr("required");l&&i&&t.input.validate(e.$inputEl)}e.$el&&e.$el.trigger("picker:close"),e.$inputEl&&e.$inputEl.trigger("picker:close"),e.emit("local::close pickerClose",e)}onClosed(){const e=this;e.opened=!1,e.closing=!1,e.inline||c((()=>{e.modal&&e.modal.el&&e.modal.destroy&&(e.params.routableModals||e.modal.destroy()),delete e.modal})),e.$el&&e.$el.trigger("picker:closed"),e.$inputEl&&e.$inputEl.trigger("picker:closed"),e.emit("local::closed pickerClosed",e)}open(){const e=this,{app:t,opened:i,inline:s,$inputEl:n,$scrollToEl:o,params:r}=e;if(i)return;if(0===e.cols.length&&r.cols.length&&r.cols.forEach((t=>{e.cols.push(t)})),s)return e.$el=l(e.render()),e.$el[0].f7Picker=e,e.$containerEl.append(e.$el),e.onOpen(),void e.onOpened();const a=e.isPopover(),c=a?"popover":"sheet",p={targetEl:n,scrollToEl:o,content:e.render(),backdrop:void 0!==r.backdrop?r.backdrop:a,on:{open(){const t=this;e.modal=t,e.$el=a?t.$el.find(".picker"):t.$el,e.$el[0].f7Picker=e,e.onOpen()},opened(){e.onOpened()},close(){e.onClose()},closed(){e.onClosed()}}};"sheet"===c&&(p.push=r.sheetPush,p.swipeToClose=r.sheetSwipeToClose),r.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,[c]:p}}):(e.modal=t[c].create(p),e.modal.open())}close(){const e=this,{opened:t,inline:l}=e;if(t)return l?(e.onClose(),void e.onClosed()):void(e.params.routableModals&&e.view?e.view.router.back():e.modal.close())}init(){const e=this;if(e.initInput(),e.inline)return e.open(),void e.emit("local::init pickerInit",e);!e.initialized&&e.params.value&&e.setValue(e.params.value),e.$inputEl&&e.attachInputEvents(),e.params.closeByOutsideClick&&e.attachHtmlEvents(),e.emit("local::init pickerInit",e)}destroy(){const e=this;if(e.destroyed)return;const{$el:t}=e;e.emit("local::beforeDestroy pickerBeforeDestroy",e),t&&t.trigger("picker:beforedestroy"),e.close(),e.$inputEl&&e.detachInputEvents(),e.params.closeByOutsideClick&&e.detachHtmlEvents(),t&&t.length&&delete e.$el[0].f7Picker,p(e),e.destroyed=!0}}var m={name:"picker",static:{Picker:u},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:u,app:e,domProp:"f7Picker"}),e.picker.close=function(e){void 0===e&&(e=".picker");const t=l(e);if(0===t.length)return;const i=t[0].f7Picker;!i||i&&!i.opened||i.close()}},params:{picker:{rotateEffect:!1,freeMode:!1,cols:[],containerEl:null,openIn:"auto",sheetPush:!1,sheetSwipeToClose:void 0,backdrop:void 0,formatValue:null,inputEl:null,inputReadOnly:!0,closeByOutsideClick:!0,scrollToInput:!0,scrollToEl:void 0,toolbar:!0,toolbarCloseText:"Done",cssClass:null,routableModals:!1,view:null,url:"select/",renderToolbar:null,render:null}}};if(t){if(e.prototype.modules&&e.prototype.modules[m.name])return;e.use(m),e.instance&&(e.instance.useModuleParams(m,e.instance.params),e.instance.useModule(m))}return m}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))