framework7/components/popup.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);document,window;var t=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 e(e,s){var r=p.extend({on:{}},e.params.popup,s);o.call(this,e,r);var n,c,i=this;if(i.params=r,(n=i.params.el?t(i.params.el).eq(0):t(i.params.content).filter(function(o,e){return 1===e.nodeType}).eq(0))&&n.length>0&&n[0].f7Modal)return n[0].f7Modal;if(0===n.length)return i.destroy();function l(o){var p=o.target,a=t(p);if(!(!e.device.desktop&&e.device.cordova&&(window.Keyboard&&window.Keyboard.isVisible||window.cordova.plugins&&window.cordova.plugins.Keyboard&&window.cordova.plugins.Keyboard.isVisible))&&0===a.closest(i.el).length&&i.params&&i.params.closeByBackdropClick&&i.params.backdrop&&i.backdropEl&&i.backdropEl===p){var s=!0;i.$el.nextAll(".popup.modal-in").each(function(o,e){var t=e.f7Modal;t&&t.params.closeByBackdropClick&&t.params.backdrop&&t.backdropEl===i.backdropEl&&(s=!1)}),s&&i.close()}}function d(o){27===o.keyCode&&i.params.closeOnEscape&&i.close()}i.params.backdrop&&i.params.backdropEl?c=t(i.params.backdropEl):i.params.backdrop&&0===(c=e.root.children(".popup-backdrop")).length&&(c=t('<div class="popup-backdrop"></div>'),e.root.append(c)),p.extend(i,{app:e,$el:n,el:n[0],$backdropEl:c,backdropEl:c&&c[0],type:"popup"}),i.params.closeOnEscape&&(i.on("popupOpen",function(){t(document).on("keydown",d)}),i.on("popupClose",function(){t(document).off("keydown",d)})),i.on("popupOpened",function(){n.removeClass("swipe-close-to-bottom swipe-close-to-top"),i.params.closeByBackdropClick&&e.on("click",l)}),i.on("popupClose",function(){i.params.closeByBackdropClick&&e.off("click",l)});var u,m,f,v,h,k,y,b,w,g=!0,C=!1,T=!1;function E(o){!C&&g&&i.params.swipeToClose&&(i.params.swipeHandler&&0===t(o.target).closest(i.params.swipeHandler).length||(C=!0,T=!1,u={x:"touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchstart"===o.type?o.targetTouches[0].pageY:o.pageY},v=p.now(),f=void 0,i.params.swipeHandler||"touchstart"!==o.type||(k=t(o.target).closest(".page-content")[0])))}function M(o){if(C){if(m={x:"touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchmove"===o.type?o.targetTouches[0].pageY:o.pageY},void 0===f&&(f=!!(f||Math.abs(m.x-u.x)>Math.abs(m.y-u.y))),f)return C=!1,void(T=!1);var e=(h=u.y-m.y)<0?"to-bottom":"to-top";if(n.transition(0),"string"!=typeof i.params.swipeToClose||e===i.params.swipeToClose){if(!T){if(k&&(y=k.scrollTop,w=k.scrollHeight,b=k.offsetHeight,!(w===b||"to-bottom"===e&&0===y||"to-top"===e&&y===w-b)))return n.transform(""),C=!1,void(T=!1);T=!0}o.preventDefault(),n.transition(0).transform("translate3d(0,"+-h+"px,0)")}else n.transform("")}}function B(){if(C=!1,T){T=!1,g=!1,n.transition("");var o=h<0?"to-bottom":"to-top";if("string"==typeof i.params.swipeToClose&&o!==i.params.swipeToClose)return n.transform(""),void(g=!0);var e=Math.abs(h),t=(new Date).getTime()-v;t<300&&e>20||t>=300&&e>100?p.nextTick(function(){"to-bottom"===o?n.addClass("swipe-close-to-bottom"):n.addClass("swipe-close-to-top"),n.transform(""),i.close(),g=!0}):(g=!0,n.transform(""))}}var x=!!a.passiveListener&&{passive:!0};return i.params.swipeToClose&&(n.on(e.touchEvents.start,E,x),e.on("touchmove",M),e.on("touchend:passive",B),i.once("popupDestroy",function(){n.off(e.touchEvents.start,E,x),e.off("touchmove",M),e.off("touchend:passive",B)})),n[0].f7Modal=i,i}return o&&(e.__proto__=o),e.prototype=Object.create(o&&o.prototype),e.prototype.constructor=e,e}(s),c={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null}},static:{Popup:n},create:function(){this.popup=r({app:this,constructor:n,defaultSelector:".popup.modal-in"})},clicks:{".popup-open":function(o,e){void 0===e&&(e={});this.popup.open(e.popup,e.animate)},".popup-close":function(o,e){void 0===e&&(e={});this.popup.close(e.popup,e.animate)}}};if(e){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))