framework7/components/popup.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(o,t){void 0===t&&(t=!0);var e=document,p=window,a=o.$,s=(o.Template7,o.utils),r=(o.device,o.support),n=(o.Class,o.Modal),l=(o.ConstructorMethods,o.ModalMethods),i=function(o){function t(t,n){var l=s.extend({on:{}},t.params.popup,n);o.call(this,t,l);var i,c,u,d,m=this;if(m.params=l,(i=m.params.el?a(m.params.el).eq(0):a(m.params.content).filter((function(o,t){return 1===t.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(!(!t.device.desktop&&t.device.cordova&&(p.Keyboard&&p.Keyboard.isVisible||p.cordova.plugins&&p.cordova.plugins.Keyboard&&p.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,t){var e=t.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(t.height-2*o)/t.height}m.params.backdrop&&m.params.backdropEl?c=a(m.params.backdropEl):m.params.backdrop&&0===(c=t.root.children(".popup-backdrop")).length&&(c=a('<div class="popup-backdrop"></div>'),t.root.append(c)),s.extend(m,{app:t,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 y,b,g,k,w,C,E,T,M,$,B,x=!0,H=!1,O=!1;function K(o){!H&&x&&m.params.swipeToClose&&(m.params.swipeHandler&&0===a(o.target).closest(m.params.swipeHandler).length||(H=!0,O=!1,y={x:"touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchstart"===o.type?o.targetTouches[0].pageY:o.pageY},k=s.now(),g=void 0,m.params.swipeHandler||"touchstart"!==o.type||(C=a(o.target).closest(".page-content")[0])))}function P(o){if(H){if(b={x:"touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchmove"===o.type?o.targetTouches[0].pageY:o.pageY},void 0===g&&(g=!!(g||Math.abs(b.x-y.x)>Math.abs(b.y-y.y))),g)return H=!1,void(O=!1);w=y.y-b.y,d&&u&&w>0&&(w=0);var e=w<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(!O){if(d&&u&&($=i[0].offsetHeight,B=t.root.children(".view, .views")),C&&(E=C.scrollTop,M=C.scrollHeight,T=C.offsetHeight,!(M===T||"to-bottom"===e&&0===E||"to-top"===e&&E===M-T)))return i.transform(""),i.transition(""),H=!1,void(O=!1);O=!0}if(o.preventDefault(),d&&u){var p=1-Math.abs(w/$),a=1-(1-v(u))*p;B.transition(0).transform("translate3d(0,0,0) scale("+a+")")}i.transition(0).transform("translate3d(0,"+-w+"px,0)")}}function X(){if(H=!1,O){O=!1,x=!1,i.transition(""),d&&u&&B.transition("").transform("");var o=w<=0?"to-bottom":"to-top";if("string"==typeof m.params.swipeToClose&&o!==m.params.swipeToClose)return i.transform(""),void(x=!0);var t=Math.abs(w),e=(new Date).getTime()-k;e<300&&t>20||e>=300&&t>100?s.nextTick((function(){"to-bottom"===o?i.addClass("swipe-close-to-bottom"):i.addClass("swipe-close-to-top"),i.transform(""),m.close(),x=!0})):(x=!0,i.transform(""))}}var Y=!!r.passiveListener&&{passive:!0};return m.params.swipeToClose&&(i.on(t.touchEvents.start,K,Y),t.on("touchmove",P),t.on("touchend:passive",X),m.once("popupDestroy",(function(){i.off(t.touchEvents.start,K,Y),t.off("touchmove",P),t.off("touchend:passive",X)}))),m.on("open",(function(){m.params.closeOnEscape&&a(e).on("keydown",f),m.push&&(d=m.push&&(t.width<630||t.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&&t.on("click",h)})),m.on("close",(function(){m.params.closeOnEscape&&a(e).off("keydown",f),m.params.closeByBackdropClick&&t.off("click",h),d&&u&&(m.$htmlEl.removeClass("with-modal-popup-push"),m.$htmlEl.addClass("with-modal-popup-push-closing"))})),m.on("closed",(function(){d&&u&&(m.$htmlEl.removeClass("with-modal-popup-push-closing"),m.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),i[0].f7Modal=m,m}return o&&(t.__proto__=o),t.prototype=Object.create(o&&o.prototype),t.prototype.constructor=t,t}(n),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=l({app:this,constructor:i,defaultSelector:".popup.modal-in"})},clicks:{".popup-open":function(o,t){void 0===t&&(t={});this.popup.open(t.popup,t.animate)},".popup-close":function(o,t){void 0===t&&(t={});this.popup.close(t.popup,t.animate)}}};if(t){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))