framework7/components/popup.js

Full featured mobile HTML framework for building iOS & Android apps

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