framework7/components/popup/popup.lazy.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(o,p){void 0===p&&(p=!0);var e=o.$,s=o.utils,t=o.getDevice,a=o.getSupport,r=(o.Class,o.Modal),l=(o.ConstructorMethods,o.ModalMethods),n=(o.$jsx,s.extend),i=s.now,c=s.nextTick;class u extends r{constructor(o,p){const s=n({on:{}},o.params.popup,p);super(o,s);const r=this,l=a(),u=t();let d,m,h,f;if(r.params=s,d=r.params.el?e(r.params.el).eq(0):e(r.params.content).filter((o=>1===o.nodeType)).eq(0),d&&d.length>0&&d[0].f7Modal)return d[0].f7Modal;if(0===d.length)return r.destroy();function w(o){const p=o.target,s=e(p);if(!(!u.desktop&&u.cordova&&(window.Keyboard&&window.Keyboard.isVisible||window.cordova.plugins&&window.cordova.plugins.Keyboard&&window.cordova.plugins.Keyboard.isVisible))&&0===s.closest(r.el).length&&r.params&&r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===p){let o=!0;r.$el.nextAll(".popup.modal-in").each((p=>{const e=p.f7Modal;e&&e.params.closeByBackdropClick&&e.params.backdrop&&e.backdropEl===r.backdropEl&&(o=!1)})),o&&r.close()}}function v(o){27===o.keyCode&&r.params.closeOnEscape&&r.close()}function g(p){return(o.height-2*p)/o.height}r.params.backdrop&&r.params.backdropEl?m=e(r.params.backdropEl):r.params.backdrop&&(r.params.backdropUnique?(m=e('<div class="popup-backdrop popup-backdrop-unique"></div>'),r.$containerEl.append(m)):m=r.$containerEl.children(".popup-backdrop"),0===m.length&&(m=e('<div class="popup-backdrop"></div>'),r.$containerEl.append(m))),n(r,{app:o,push:d.hasClass("popup-push")||r.params.push,$el:d,el:d[0],$backdropEl:m,backdropEl:m&&m[0],type:"popup",$htmlEl:e("html")}),r.params.push&&d.addClass("popup-push");let y,b,k,C,E,$,M,T,x,B,P,S=!0,q=!1,H=!1;function A(o){!q&&S&&r.params.swipeToClose&&(r.params.swipeHandler&&0===e(o.target).closest(r.params.swipeHandler).length||(q=!0,H=!1,y={x:"touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchstart"===o.type?o.targetTouches[0].pageY:o.pageY},C=i(),k=void 0,r.params.swipeHandler||"touchstart"!==o.type||($=e(o.target).closest(".page-content")[0])))}function D(p){if(!q)return;if(b={x:"touchmove"===p.type?p.targetTouches[0].pageX:p.pageX,y:"touchmove"===p.type?p.targetTouches[0].pageY:p.pageY},void 0===k&&(k=!!(k||Math.abs(b.x-y.x)>Math.abs(b.y-y.y))),k)return q=!1,void(H=!1);E=y.y-b.y,f&&h&&E>0&&(E=0);const e=E<0?"to-bottom":"to-top";if(d.transition(0),"string"==typeof r.params.swipeToClose&&e!==r.params.swipeToClose)return d.transform(""),void d.transition("");if(H)r.emit("local::swipeMove popupSwipeMove",r),r.$el.trigger("popup:swipemove");else{if(f&&h&&(B=d[0].offsetHeight,P=d.prevAll(".popup.modal-in").eq(0),0===P.length&&(P=o.$el.children(".view, .views"))),$&&(M=$.scrollTop,x=$.scrollHeight,T=$.offsetHeight,!(x===T||"to-bottom"===e&&0===M||"to-top"===e&&M===x-T)))return d.transform(""),d.transition(""),q=!1,void(H=!1);H=!0,r.emit("local::swipeStart popupSwipeStart",r),r.$el.trigger("popup:swipestart")}if(p.preventDefault(),f&&h){const o=1-Math.abs(E/B),p=1-(1-g(h))*o;P.hasClass("popup")?P.hasClass("popup-push")?P.transition(0).forEach((e=>{e.style.setProperty("transform",`translate3d(0, calc(-1 * ${o} * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(${p})`,"important")})):P.transition(0).forEach((o=>{o.style.setProperty("transform",`translate3d(0, 0px , 0px) scale(${p})`,"important")})):P.transition(0).forEach((o=>{o.style.setProperty("transform",`translate3d(0,0,0) scale(${p})`,"important")}))}d.transition(0).transform(`translate3d(0,${-E}px,0)`)}function K(){if(q=!1,!H)return;r.emit("local::swipeEnd popupSwipeEnd",r),r.$el.trigger("popup:swipeend"),H=!1,S=!1,d.transition(""),f&&h&&P.transition("").transform("");const o=E<=0?"to-bottom":"to-top";if("string"==typeof r.params.swipeToClose&&o!==r.params.swipeToClose)return d.transform(""),void(S=!0);const p=Math.abs(E),e=(new Date).getTime()-C;e<300&&p>20||e>=300&&p>100?c((()=>{"to-bottom"===o?d.addClass("swipe-close-to-bottom"):d.addClass("swipe-close-to-top"),d.transform(""),r.emit("local::swipeclose popupSwipeClose",r),r.$el.trigger("popup:swipeclose"),r.close(),S=!0})):(S=!0,d.transform(""))}const O=!!l.passiveListener&&{passive:!0};let X;r.params.swipeToClose&&(d.on(o.touchEvents.start,A,O),o.on("touchmove",D),o.on("touchend:passive",K),r.once("popupDestroy",(()=>{d.off(o.touchEvents.start,A,O),o.off("touchmove",D),o.off("touchend:passive",K)})));const Y=()=>{const p=f;r.push&&(f=r.push&&(o.width<630||o.height<630||d.hasClass("popup-tablet-fullscreen"))),f&&!p?z():f&&p?r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",g(h)):!f&&p&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))},z=()=>{o.off("resize",Y),r.push&&(f=r.push&&(o.width<630||o.height<630||d.hasClass("popup-tablet-fullscreen"))),f&&(h=parseInt(d.css("--f7-popup-push-offset"),10),Number.isNaN(h)&&(h=0),h&&(d.addClass("popup-push"),r.$htmlEl.addClass("with-modal-popup-push"),r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",g(h)))),o.on("resize",Y)};return r.on("open",(()=>{X=!1,r.params.closeOnEscape&&e(document).on("keydown",v),d.prevAll(".popup.modal-in").addClass("popup-behind"),z()})),r.on("opened",(()=>{d.removeClass("swipe-close-to-bottom swipe-close-to-top"),r.params.closeByBackdropClick&&o.on("click",w)})),r.on("close",(()=>{X=r.$el.prevAll(".popup-push.modal-in").length>0,r.params.closeOnEscape&&e(document).off("keydown",v),r.params.closeByBackdropClick&&o.off("click",w),d.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),f&&h&&!X&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl.addClass("with-modal-popup-push-closing")),o.off("resize",Y)})),r.on("closed",(()=>{d.removeClass("popup-behind"),f&&h&&!X&&(r.$htmlEl.removeClass("with-modal-popup-push-closing"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),d[0].f7Modal=r,r}}var d={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:u},create(){this.popup=l({app:this,constructor:u,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(o,p){void 0===p&&(p={});this.popup.open(p.popup,p.animate,o)},".popup-close":function(o,p){void 0===p&&(p={});this.popup.close(p.popup,p.animate,o)}}};if(p){if(o.prototype.modules&&o.prototype.modules[d.name])return;o.use(d),o.instance&&(o.instance.useModuleParams(d,o.instance.params),o.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))