zmp-core/components/popup/popup.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,p=e.utils,s=(e.getDevice,e.getSupport),a=(e.Class,e.Modal),r=(e.ConstructorMethods,e.ModalMethods);function n(e){this.wrapped=e}function l(e){var o,t;function p(o,t){try{var a=e[o](t),r=a.value,l=r instanceof n;Promise.resolve(l?r.wrapped:r).then((function(e){l?p("return"===o?"return":"next",e):s(a.done?"return":"normal",e)}),(function(e){p("throw",e)}))}catch(e){s("throw",e)}}function s(e,s){switch(e){case"return":o.resolve({value:s,done:!0});break;case"throw":o.reject(s);break;default:o.resolve({value:s,done:!1})}(o=o.next)?p(o.key,o.arg):t=null}this._invoke=function(e,s){return new Promise((function(a,r){var n={key:e,arg:s,resolve:a,reject:r,next:null};t?t=t.next=n:(o=t=n,p(e,s))}))},"function"!=typeof e.return&&(this.return=void 0)}function i(e,o){return(i=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}l.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},l.prototype.next=function(e){return this._invoke("next",e)},l.prototype.throw=function(e){return this._invoke("throw",e)},l.prototype.return=function(e){return this._invoke("return",e)};var c=p.extend,h=p.now,m=p.nextTick,d=function(e){var o,p;function a(o,p){var a,r,n,l,i,d=c({on:{}},o.params.popup,p),f=u(a=e.call(this,o,d)||this),v=s();if(f.params=d,(r=f.params.el?t(f.params.el).eq(0):t(f.params.content).filter((function(e){return 1===e.nodeType})).eq(0))&&r.length>0&&r[0].zmpModal)return r[0].zmpModal||u(a);if(0===r.length)return f.destroy()||u(a);function y(e){var o=e.target;if(0===t(o).closest(f.el).length&&f.params&&f.params.closeByBackdropClick&&f.params.backdrop&&f.backdropEl&&f.backdropEl===o){var p=!0;f.$el.nextAll(".popup.modal-in").each((function(e){var o=e.zmpModal;o&&o.params.closeByBackdropClick&&o.params.backdrop&&o.backdropEl===f.backdropEl&&(p=!1)})),p&&f.close()}}function w(e){27===e.keyCode&&f.params.closeOnEscape&&f.close()}function g(e){return(o.height-2*e)/o.height}f.params.backdrop&&f.params.backdropEl?n=t(f.params.backdropEl):f.params.backdrop&&0===(n=f.$containerEl.children(".popup-backdrop")).length&&(n=t('<div class="popup-backdrop"></div>'),f.$containerEl.append(n)),c(f,{app:o,push:r.hasClass("popup-push")||f.params.push,$el:r,el:r[0],$backdropEl:n,backdropEl:n&&n[0],type:"popup",$htmlEl:t("html")}),f.params.push&&r.addClass("popup-push");var k,b,C,E,$,x,M,T,z,P,S,B=!0,_=!1,H=!1;function O(e){!_&&B&&f.params.swipeToClose&&(f.params.swipeHandler&&0===t(e.target).closest(f.params.swipeHandler).length||(_=!0,H=!1,k={x:"touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,y:"touchstart"===e.type?e.targetTouches[0].pageY:e.pageY},E=h(),C=void 0,f.params.swipeHandler||"touchstart"!==e.type||(x=t(e.target).closest(".page-content")[0])))}function A(e){if(_){if(b={x:"touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,y:"touchmove"===e.type?e.targetTouches[0].pageY:e.pageY},void 0===C&&(C=!!(C||Math.abs(b.x-k.x)>Math.abs(b.y-k.y))),C)return _=!1,void(H=!1);$=k.y-b.y,i&&l&&$>0&&($=0);var t=$<0?"to-bottom":"to-top";if(r.transition(0),"string"==typeof f.params.swipeToClose&&t!==f.params.swipeToClose)return r.transform(""),void r.transition("");if(H)f.emit("local::swipeMove popupSwipeMove",f),f.$el.trigger("popup:swipemove");else{if(i&&l&&(P=r[0].offsetHeight,0===(S=r.prevAll(".popup.modal-in").eq(0)).length&&(S=o.$el.children(".view, .views"))),x&&(M=x.scrollTop,z=x.scrollHeight,T=x.offsetHeight,!(z===T||"to-bottom"===t&&0===M||"to-top"===t&&M===z-T)))return r.transform(""),r.transition(""),_=!1,void(H=!1);H=!0,f.emit("local::swipeStart popupSwipeStart",f),f.$el.trigger("popup:swipestart")}if(e.preventDefault(),i&&l){var p=1-Math.abs($/P),s=1-(1-g(l))*p;S.hasClass("popup")?S.hasClass("popup-push")?S.transition(0).forEach((function(e){e.style.setProperty("transform","translate3d(0, calc(-1 * "+p+" * (var(--zmp-popup-push-offset) + 10px)) , 0px) scale("+s+")","important")})):S.transition(0).forEach((function(e){e.style.setProperty("transform","translate3d(0, 0px , 0px) scale("+s+")","important")})):S.transition(0).forEach((function(e){e.style.setProperty("transform","translate3d(0,0,0) scale("+s+")","important")}))}r.transition(0).transform("translate3d(0,"+-$+"px,0)")}}function j(){if(_=!1,H){f.emit("local::swipeEnd popupSwipeEnd",f),f.$el.trigger("popup:swipeend"),H=!1,B=!1,r.transition(""),i&&l&&S.transition("").transform("");var e=$<=0?"to-bottom":"to-top";if("string"==typeof f.params.swipeToClose&&e!==f.params.swipeToClose)return r.transform(""),void(B=!0);var o=Math.abs($),t=(new Date).getTime()-E;t<300&&o>20||t>=300&&o>100?m((function(){"to-bottom"===e?r.addClass("swipe-close-to-bottom"):r.addClass("swipe-close-to-top"),r.transform(""),f.emit("local::swipeclose popupSwipeClose",f),f.$el.trigger("popup:swipeclose"),f.close(),B=!0})):(B=!0,r.transform(""))}}var q,D=!!v.passiveListener&&{passive:!0};f.params.swipeToClose&&(r.on(o.touchEvents.start,O,D),o.on("touchmove",A),o.on("touchend:passive",j),f.once("popupDestroy",(function(){r.off(o.touchEvents.start,O,D),o.off("touchmove",A),o.off("touchend:passive",j)})));var X=function(){var e=i;f.push&&(i=f.push&&(o.width<630||o.height<630||r.hasClass("popup-tablet-fullscreen"))),i&&!e?Y():i&&e?f.$htmlEl[0].style.setProperty("--zmp-popup-push-scale",g(l)):!i&&e&&(f.$htmlEl.removeClass("with-modal-popup-push"),f.$htmlEl[0].style.removeProperty("--zmp-popup-push-scale"))},Y=function(){o.off("resize",X),f.push&&(i=f.push&&(o.width<630||o.height<630||r.hasClass("popup-tablet-fullscreen"))),i&&(l=parseInt(r.css("--zmp-popup-push-offset"),10),Number.isNaN(l)&&(l=0),l&&(r.addClass("popup-push"),f.$htmlEl.addClass("with-modal-popup-push"),f.$htmlEl[0].style.setProperty("--zmp-popup-push-scale",g(l)))),o.on("resize",X)};return f.on("open",(function(){q=!1,f.params.closeOnEscape&&t(document).on("keydown",w),r.prevAll(".popup.modal-in").addClass("popup-behind"),Y()})),f.on("opened",(function(){r.removeClass("swipe-close-to-bottom swipe-close-to-top"),f.params.closeByBackdropClick&&o.on("click",y)})),f.on("close",(function(){q=f.$el.prevAll(".popup-push.modal-in").length>0,f.params.closeOnEscape&&t(document).off("keydown",w),f.params.closeByBackdropClick&&o.off("click",y),r.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),i&&l&&!q&&(f.$htmlEl.removeClass("with-modal-popup-push"),f.$htmlEl.addClass("with-modal-popup-push-closing")),o.off("resize",X)})),f.on("closed",(function(){r.removeClass("popup-behind"),i&&l&&!q&&(f.$htmlEl.removeClass("with-modal-popup-push-closing"),f.$htmlEl[0].style.removeProperty("--zmp-popup-push-scale"))})),r[0].zmpModal=f,f||u(a)}return p=e,(o=a).prototype=Object.create(p.prototype),o.prototype.constructor=o,i(o,p),a}(a),f={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:d},create:function(){this.popup=r({app:this,constructor:d,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(e,o){void 0===o&&(o={});this.popup.open(o.popup,o.animate,e)},".popup-close":function(e,o){void 0===o&&(o={});this.popup.close(o.popup,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[f.name])return;e.use(f),e.instance&&(e.instance.useModuleParams(f,e.instance.params),e.instance.useModule(f))}return f}(ZMP, typeof ZMPAutoInstallComponent === 'undefined' ? undefined : ZMPAutoInstallComponent))