framework7/components/popup.js

Full featured mobile HTML framework for building iOS & Android apps

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