framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 17.2 kB
JavaScript
(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);document,window;var t=e.$,i=(e.Template7,e.utils),n=(e.device,e.support),s=e.Class;e.Modal,e.ConstructorMethods,e.ModalMethods;function l(e){var a=e.app;i.extend(e,{resizable:!0,resizableWidth:null,resizableInitialized:!0});var s=t("html"),l=e.$el,r=e.$backdropEl,p=e.side,o=e.effect;if(l){var h,c,d,f,v,u,g,w,b={};0===e.$el.find(".panel-resize-handler").length&&e.$el.append('<div class="panel-resize-handler"></div>'),e.$resizeHandlerEl=e.$el.children(".panel-resize-handler"),l.addClass("panel-resizable");var m=!!n.passiveListener&&{passive:!0};e.$el.on(a.touchEvents.start,".panel-resize-handler",y,m),a.on("touchmove:active",z),a.on("touchend:passive",k),a.on("resize",x),e.on("beforeOpen",x),e.once("panelDestroy",function(){l.removeClass("panel-resizable"),e.$resizeHandlerEl.remove(),e.$el.off(a.touchEvents.start,".panel-resize-handler",y,m),a.off("touchmove:active",z),a.off("touchend:passive",k),a.off("resize",x),e.off("beforeOpen",x)})}function C(e){if(!e)return null;if(e.indexOf("%")>=0||e.indexOf("vw")>=0)return parseInt(e,10)/100*a.width;var t=parseInt(e,10);return Number.isNaN(t)?null:t}function y(a){e.resizable&&l.hasClass("panel-resizable")&&(b.x="touchstart"===a.type?a.targetTouches[0].pageX:a.pageX,b.y="touchstart"===a.type?a.targetTouches[0].pageY:a.pageY,c=!1,h=!0,u=C(l.css("min-width")),g=C(l.css("max-width")),w=l.hasClass("panel-visible-by-breakpoint"))}function z(i){if(h){var n="touchmove"===i.type?i.targetTouches[0].pageX:i.pageX;c||(f=l[0].offsetWidth,l.transition(0),l.addClass("panel-resizing"),s.css("cursor","col-resize"),("reveal"===o||w)&&(v=t(e.getViewEl())),"reveal"!==o||w||(r.transition(0),v.transition(0))),c=!0,i.preventDefault(),d=n-b.x;var m="left"===p?f+d:f-d;u&&!Number.isNaN(u)&&(m=Math.max(m,u)),g&&!Number.isNaN(g)&&(m=Math.min(m,g)),m=Math.min(Math.max(m,0),a.width),e.resizableWidth=m,l[0].style.width=m+"px","reveal"!==o||w?w&&v&&v.css("margin-"+p,m+"px"):(v&&v.transform("translate3d("+("left"===p?m:-m)+"px, 0, 0)"),r&&r.transform("translate3d("+("left"===p?m:-m)+"px, 0, 0)")),l.trigger("panel:resize",e,m),e.emit("local::resize panelResize",e,m)}}function k(){if(t("html").css("cursor",""),!h||!c)return h=!1,void(c=!1);h=!1,c=!1,s[0].style.setProperty("--f7-panel-"+p+"-width",e.resizableWidth+"px"),l[0].style.width="","reveal"!==o||w||(v.transform(""),r.transform("")),l.removeClass("panel-resizing"),i.nextFrame(function(){w||(l.transition(""),"reveal"===o&&(r.transition(""),v&&v.transition("")))})}function x(){e.opened&&e.resizableWidth&&(u=C(l.css("min-width")),g=C(l.css("max-width")),u&&!Number.isNaN(u)&&e.resizableWidth<u&&(e.resizableWidth=Math.max(e.resizableWidth,u)),g&&!Number.isNaN(g)&&e.resizableWidth>g&&(e.resizableWidth=Math.min(e.resizableWidth,g)),e.resizableWidth=Math.min(Math.max(e.resizableWidth,0),a.width),s[0].style.setProperty("--f7-panel-"+p+"-width",e.resizableWidth+"px"))}}var r=function(e){function a(a,n){void 0===n&&(n={}),e.call(this,n,[a]);var s=n.el;!s&&n.content&&(s=n.content);var l=t(s);if(0===l.length)return this;if(l[0].f7Panel)return l[0].f7Panel;l[0].f7Panel=this;var r=n.opened,p=n.side,o=n.effect;if(void 0===r&&(r=l.hasClass("panel-active")),void 0===p&&(p=l.hasClass("panel-left")?"left":"right"),void 0===o&&(o=l.hasClass("panel-cover")?"cover":"reveal"),a.panel[p])throw new Error("Framework7: Can't create panel; app already has a "+p+" panel!");a.panel[p]=this;var h=t(".panel-backdrop");return 0===h.length&&(h=t('<div class="panel-backdrop"></div>')).insertBefore(l),i.extend(this,{app:a,side:p,effect:o,$el:l,el:l[0],opened:r,$backdropEl:h,backdropEl:h[0],params:n}),this.useModules(),this.init(),this}return e&&(a.__proto__=e),a.prototype=Object.create(e&&e.prototype),a.prototype.constructor=a,a.prototype.getViewEl=function(){var e=this.app;return e.root.children(".views").length>0?e.root.children(".views")[0]:e.root.children(".view")[0]},a.prototype.setBreakpoint=function(e){var a,i,n;void 0===e&&(e=!0);var s=this.app,l=this.side,r=this.$el,p=t(this.getViewEl()),o=s.params.panel[l+"Breakpoint"],h=r.hasClass("panel-visible-by-breakpoint");s.width>=o?h?p.css(((i={})["margin-"+l]=r.width()+"px",i)):(t("html").removeClass("with-panel-"+l+"-reveal with-panel-"+l+"-cover with-panel"),r.css("display","").addClass("panel-visible-by-breakpoint").removeClass("panel-active"),this.onOpen(),this.onOpened(),p.css(((a={})["margin-"+l]=r.width()+"px",a)),s.allowPanelOpen=!0,e&&(s.emit("local::breakpoint panelBreakpoint"),this.$el.trigger("panel:breakpoint",this))):h&&(r.css("display","").removeClass("panel-visible-by-breakpoint panel-active"),this.onClose(),this.onClosed(),p.css(((n={})["margin-"+l]="",n)),e&&(s.emit("local::breakpoint panelBreakpoint"),this.$el.trigger("panel:breakpoint",this)))},a.prototype.initBreakpoints=function(){var e=this,a=e.app;return e.resizeHandler=function(){e.setBreakpoint()},a.params.panel[e.side+"Breakpoint"]&&a.on("resize",e.resizeHandler),e.setBreakpoint(),e},a.prototype.initSwipePanel=function(){!function(e){var a=e.app;i.extend(e,{swipeable:!0,swipeInitialized:!0});var n,s,l,r,p,o,h,c,d,f,v,u=a.params.panel,g=e.$el,w=e.$backdropEl,b=e.side,m=e.effect,C={},y=0;function z(o){if(e.swipeable&&a.panel.allowOpen&&(u.swipe||u.swipeOnlyClose)&&!s&&!(t(".modal-in:not(.toast):not(.notification), .photo-browser-in").length>0)&&(n=a.panel["left"===b?"right":"left"]||{},(e.opened||!n.opened)&&(u.swipeCloseOpposite||u.swipeOnlyClose||!n.opened)&&(!o.target||"input"!==o.target.nodeName.toLowerCase()||"range"!==o.target.type)&&!(t(o.target).closest(".range-slider, .tabs-swipeable-wrap, .calendar-months, .no-swipe-panel, .card-opened").length>0)&&(C.x="touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,C.y="touchstart"===o.type?o.targetTouches[0].pageY:o.pageY,(!u.swipeOnlyClose||e.opened)&&("both"===u.swipe||!u.swipeCloseOpposite||u.swipe===b||e.opened)))){if(u.swipeActiveArea&&!e.opened){if("left"===b&&C.x>u.swipeActiveArea)return;if("right"===b&&C.x<a.width-u.swipeActiveArea)return}if(u.swipeCloseActiveAreaSide&&e.opened){if("left"===b&&C.x<g[0].offsetWidth-u.swipeCloseActiveAreaSide)return;if("right"===b&&C.x>a.width-g[0].offsetWidth+u.swipeCloseActiveAreaSide)return}y=0,v=t(e.getViewEl()),l=!1,s=!0,r=void 0,p=i.now(),f=void 0}}function k(t){if(s&&!((y+=1)<2))if(t.f7PreventSwipePanel||a.preventSwipePanelBySwipeBack||a.preventSwipePanel)s=!1;else{var i="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,n="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;if(void 0===r&&(r=!!(r||Math.abs(n-C.y)>Math.abs(i-C.x))),r)s=!1;else{if(!f){if(f=i>C.x?"to-right":"to-left","both"===u.swipe&&u.swipeActiveArea>0&&!e.opened){if("left"===b&&C.x>u.swipeActiveArea)return void(s=!1);if("right"===b&&C.x<a.width-u.swipeActiveArea)return void(s=!1)}if(g.hasClass("panel-visible-by-breakpoint"))return void(s=!1);if("left"===b&&"to-left"===f&&!g.hasClass("panel-active")||"right"===b&&"to-right"===f&&!g.hasClass("panel-active"))return void(s=!1)}var z=e.opened?0:-u.swipeThreshold;if("right"===b&&(z=-z),u.swipeNoFollow){var k,x=i-C.x,$=(new Date).getTime()-p;return!e.opened&&("left"===b&&x>-z||"right"===b&&-x>z)&&(k=!0),e.opened&&("left"===b&&x<0||"right"===b&&x>0)&&(k=!0),void(k&&($<300&&("to-left"===f&&("right"===b&&a.panel.open(b),"left"===b&&g.hasClass("panel-active")&&a.panel.close()),"to-right"===f&&("left"===b&&a.panel.open(b),"right"===b&&g.hasClass("panel-active")&&a.panel.close())),s=!1,l=!1))}l||(e.opened||(g.css("display","block"),w.css("display","block"),g.trigger("panel:swipeopen",e),e.emit("local::swipeOpen panelSwipeOpen",e)),d=g[0].offsetWidth,g.transition(0)),l=!0,t.preventDefault(),o=i-C.x+z,"right"===b?"cover"===m?((h=o+(e.opened?0:d))<0&&(h=0),h>d&&(h=d)):((h=o-(e.opened?d:0))>0&&(h=0),h<-d&&(h=-d)):((h=o+(e.opened?d:0))<0&&(h=0),h>d&&(h=d)),"reveal"===m?(v.transform("translate3d("+h+"px,0,0)").transition(0),w.transform("translate3d("+h+"px,0,0)").transition(0),g.trigger("panel:swipe",e,Math.abs(h/d)),e.emit("local::swipe panelSwipe",e,Math.abs(h/d))):("left"===b&&(h-=d),g.transform("translate3d("+h+"px,0,0)").transition(0),w.transition(0),c=1-Math.abs(h/d),w.css({opacity:c}),g.trigger("panel:swipe",e,Math.abs(h/d)),e.emit("local::swipe panelSwipe",e,Math.abs(h/d)))}}}function x(){if(!s||!l)return s=!1,void(l=!1);s=!1,l=!1;var a,n=(new Date).getTime()-p,r=0===h||Math.abs(h)===d,c=u.swipeThreshold||0;if("swap"==(a=e.opened?"cover"===m?0===h?"reset":n<300&&Math.abs(h)>0?"swap":n>=300&&Math.abs(h)<d/2?"reset":"swap":h===-d?"reset":n<300&&Math.abs(h)>=0||n>=300&&Math.abs(h)<=d/2?"left"===b&&h===d?"reset":"swap":"reset":Math.abs(o)<c?"reset":"cover"===m?0===h?"swap":n<300&&Math.abs(h)>0?"swap":n>=300&&Math.abs(h)<d/2?"swap":"reset":0===h?"reset":n<300&&Math.abs(h)>0||n>=300&&Math.abs(h)>=d/2?"swap":"reset")&&(e.opened?e.close(!r):e.open(!r)),"reset"===a&&!e.opened)if(r)g.css({display:""});else{var f="reveal"===m?v:g;t("html").addClass("with-panel-transitioning"),f.transitionEnd(function(){g.hasClass("panel-active")||(g.css({display:""}),t("html").removeClass("with-panel-transitioning"))})}"reveal"===m&&i.nextFrame(function(){v.transition(""),v.transform("")}),g.transition("").transform(""),w.css({display:""}).transform("").transition("").css("opacity","")}a.on("touchstart:passive",z),a.on("touchmove:active",k),a.on("touchend:passive",x),e.on("panelDestroy",function(){a.off("touchstart:passive",z),a.off("touchmove:active",k),a.off("touchend:passive",x)})}(this)},a.prototype.initResizablePanel=function(){l(this)},a.prototype.toggle=function(e){void 0===e&&(e=!0);this.opened?this.close(e):this.open(e)},a.prototype.onOpen=function(){this.opened=!0,this.$el.trigger("panel:beforeopen",this),this.emit("local::beforeOpen panelBeforeOpen",this),this.$el.trigger("panel:open",this),this.emit("local::open panelOpen",this)},a.prototype.onOpened=function(){this.app.panel.allowOpen=!0,this.$el.trigger("panel:opened",this),this.emit("local::opened panelOpened",this)},a.prototype.onClose=function(){this.opened=!1,this.$el.addClass("panel-closing"),this.$el.trigger("panel:beforeclose",this),this.emit("local::beforeClose panelBeforeClose",this),this.$el.trigger("panel:close",this),this.emit("local::close panelClose",this)},a.prototype.onClosed=function(){this.app.panel.allowOpen=!0,this.$el.removeClass("panel-closing"),this.$el.trigger("panel:closed",this),this.emit("local::closed panelClosed",this)},a.prototype.open=function(e){void 0===e&&(e=!0);var a=this,n=a.app;if(!n.panel.allowOpen)return!1;var s=a.side,l=a.effect,r=a.$el,p=a.$backdropEl,o=a.opened,h=r.parent(),c=r.parents(document).length>0;if(!h.is(n.root)||r.prevAll(".views, .view").length){var d=n.root.children(".panel, .views, .view").eq(0),f=n.root.children(".statusbar").eq(0);d.length?r.insertBefore(d):f.length?r.insertAfter(d):n.root.prepend(r),p&&p.length&&(!p.parent().is(n.root)&&0===p.nextAll(".panel").length||p.parent().is(n.root)&&0===p.nextAll(".panel").length)&&p.insertBefore(r),a.once("panelClosed",function(){c?h.append(r):r.remove()})}if(o||r.hasClass("panel-visible-by-breakpoint")||r.hasClass("panel-active"))return!1;n.panel.close("left"===s?"right":"left",e),n.panel.allowOpen=!1,r[e?"removeClass":"addClass"]("not-animated"),r.css({display:"block"}).addClass("panel-active"),p[e?"removeClass":"addClass"]("not-animated"),p.css({display:"block"});var v="reveal"===l?r.nextAll(".view, .views").eq(0):r;return e?i.nextFrame(function(){t("html").addClass("with-panel with-panel-"+s+"-"+l),a.onOpen(),function e(){v.transitionEnd(function(i){t(i.target).is(v)?r.hasClass("panel-active")?(a.onOpened(),p.css({display:""})):(a.onClosed(),p.css({display:""})):e()})}()}):(t("html").addClass("with-panel with-panel-"+s+"-"+l),a.onOpen(),a.onOpened(),p.css({display:""})),!0},a.prototype.close=function(e){void 0===e&&(e=!0);var a=this,i=a.app,n=a.side,s=a.effect,l=a.$el,r=a.$backdropEl;if(!a.opened||l.hasClass("panel-visible-by-breakpoint")||!l.hasClass("panel-active"))return!1;l[e?"removeClass":"addClass"]("not-animated"),l.removeClass("panel-active"),r[e?"removeClass":"addClass"]("not-animated");var p="reveal"===s?l.nextAll(".view, .views").eq(0):l;return a.onClose(),i.panel.allowOpen=!1,e?(p.transitionEnd(function(){l.hasClass("panel-active")||(l.css({display:""}),t("html").removeClass("with-panel-transitioning"),a.onClosed())}),t("html").removeClass("with-panel with-panel-"+n+"-"+s).addClass("with-panel-transitioning")):(l.css({display:""}),l.removeClass("not-animated"),t("html").removeClass("with-panel with-panel-transitioning with-panel-"+n+"-"+s),a.onClosed()),!0},a.prototype.init=function(){var e=this.app;e.params.panel[this.side+"Breakpoint"]&&this.initBreakpoints(),(e.params.panel.swipe===this.side||"both"===e.params.panel.swipe||e.params.panel.swipe&&e.params.panel.swipe!==this.side&&e.params.panel.swipeCloseOpposite)&&this.initSwipePanel(),(this.params.resizable||this.$el.hasClass("panel-resizable"))&&this.initResizablePanel()},a.prototype.destroy=function(){var e,a=this,n=a.app;if(a.$el){if(a.emit("local::beforeDestroy panelBeforeDestroy",a),a.$el.trigger("panel:beforedestroy",a),a.resizeHandler&&n.off("resize",a.resizeHandler),a.$el.hasClass("panel-visible-by-breakpoint")){var s=t(a.getViewEl());a.$el.css("display","").removeClass("panel-visible-by-breakpoint panel-active"),s.css(((e={})["margin-"+a.side]="",e)),n.emit("local::breakpoint panelBreakpoint"),a.$el.trigger("panel:breakpoint",a)}a.$el.trigger("panel:destroy",a),a.emit("local::destroy panelDestroy"),delete n.panel[a.side],a.el&&(a.el.f7Panel=null,delete a.el.f7Panel),i.deleteProps(a),a=null}},a}(s),p={name:"panel",params:{panel:{leftBreakpoint:0,rightBreakpoint:0,swipe:void 0,swipeActiveArea:0,swipeCloseActiveAreaSide:0,swipeCloseOpposite:!0,swipeOnlyClose:!1,swipeNoFollow:!1,swipeThreshold:0,closeByBackdropClick:!0}},static:{Panel:r},instance:{panel:{allowOpen:!0}},create:function(){var e=this;i.extend(e.panel,{disableResizable:function(a){var t;void 0===a&&(a="both");var i=[];"string"==typeof a?"both"===a?(t="both",i=[e.panel.left,e.panel.right]):(t=a,i.push(e.panel[t])):i=[a],i.forEach(function(e){e.resizable=!1,e.$el.removeClass("panel-resizable")})},enableResizable:function(a){var t;void 0===a&&(a="both");var i=[];"string"==typeof a?"both"===a?(t="both",i=[e.panel.left,e.panel.right]):(t=a,i.push(e.panel[t])):i=[a],i.forEach(function(e){e&&(e.resizableInitialized?(e.resizable=!0,e.$el.addClass("panel-resizable")):e.initResizablePanel())})},disableSwipe:function(a){var t;void 0===a&&(a="both");var i=[];"string"==typeof a?"both"===a?(t="both",i=[e.panel.left,e.panel.right]):(t=a,i.push(e.panel[t])):i=[a],i.forEach(function(e){e.swipeable=!1})},enableSwipe:function(a){void 0===a&&(a="both");var t,i=[];"string"==typeof a?(t=a,"left"===e.params.panel.swipe&&"right"===t||"right"===e.params.panel.swipe&&"left"===t||"both"===t?(t="both",e.params.panel.swipe=t,i=[e.panel.left,e.panel.right]):(e.params.panel.swipe=t,i.push(e.panel[t]))):a&&i.push(a),i.forEach(function(e){e&&(e.swipeInitialized?e.swipeable=!0:e.initSwipePanel())})},create:function(a){return new r(e,a)},open:function(a,i){var n=a;if(!n){if(t(".panel").length>1)return!1;n=t(".panel").hasClass("panel-left")?"left":"right"}if(!n)return!1;if(e.panel[n])return e.panel[n].open(i);var s=t(".panel-"+n);return s.length>0&&e.panel.create({el:s}).open(i)},close:function(a,i){var n,s;return s?n=t(".panel-"+(s=a)):s=(n=t(".panel.panel-active")).hasClass("panel-left")?"left":"right",!!s&&(e.panel[s]?e.panel[s].close(i):n.length>0&&e.panel.create({el:n}).close(i))},toggle:function(a,i){var n,s=a;if(a)n=t(".panel-"+(s=a));else if(t(".panel.panel-active").length)s=(n=t(".panel.panel-active")).hasClass("panel-left")?"left":"right";else{if(t(".panel").length>1)return!1;s=t(".panel").hasClass("panel-left")?"left":"right",n=t(".panel-"+s)}return!!s&&(e.panel[s]?e.panel[s].toggle(i):n.length>0&&e.panel.create({el:n}).toggle(i))},get:function(a){var i=a;if(!i){if(t(".panel").length>1)return;i=t(".panel").hasClass("panel-left")?"left":"right"}if(i){if(e.panel[i])return e.panel[i];var n=t(".panel-"+i);return n.length>0?e.panel.create({el:n}):void 0}}})},on:{init:function(){var e=this;t(".panel").each(function(a,i){var n=t(i).hasClass("panel-left")?"left":"right";e.panel[n]=e.panel.create({el:i,side:n})})}},clicks:{".panel-open":function(e,a){void 0===a&&(a={});var i="left";("right"===a.panel||1===t(".panel").length&&t(".panel").hasClass("panel-right"))&&(i="right"),this.panel.open(i,a.animate)},".panel-close":function(e,a){void 0===a&&(a={});var t=a.panel;this.panel.close(t,a.animate)},".panel-toggle":function(e,a){void 0===a&&(a={});var t=a.panel;this.panel.toggle(t,a.animate)},".panel-backdrop":function(){var e=t(".panel-active"),a=e[0]&&e[0].f7Panel;e.trigger("panel:backdrop-click"),a&&a.emit("backdropClick",a),this.emit("panelBackdropClick",a||e[0]),this.params.panel.closeByBackdropClick&&this.panel.close()}}};if(a){if(e.prototype.modules&&e.prototype.modules[p.name])return;e.use(p),e.instance&&(e.instance.useModuleParams(p,e.instance.params),e.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))