zmp-core/components/sheet/sheet.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(e,t){void 0===t&&(t=!0);var s=e.$,o=e.utils,r=(e.getDevice,e.getSupport),a=(e.Class,e.Modal),p=(e.ConstructorMethods,e.ModalMethods),l=o.extend,n=o.now,i=o.getTranslate;function h(e){this.wrapped=e}function c(e){var t,s;function o(t,s){try{var a=e[t](s),p=a.value,l=p instanceof h;Promise.resolve(l?p.wrapped:p).then((function(e){l?o("return"===t?"return":"next",e):r(a.done?"return":"normal",e)}),(function(e){o("throw",e)}))}catch(e){r("throw",e)}}function r(e,r){switch(e){case"return":t.resolve({value:r,done:!0});break;case"throw":t.reject(r);break;default:t.resolve({value:r,done:!1})}(t=t.next)?o(t.key,t.arg):s=null}this._invoke=function(e,r){return new Promise((function(a,p){var l={key:e,arg:r,resolve:a,reject:p,next:null};s?s=s.next=l:(t=s=l,o(e,r))}))},"function"!=typeof e.return&&(this.return=void 0)}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}c.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},c.prototype.next=function(e){return this._invoke("next",e)},c.prototype.throw=function(e){return this._invoke("throw",e)},c.prototype.return=function(e){return this._invoke("return",e)};var d=function(e){var t,o;function a(t,o){var a,p,h,c,m,d=l({on:{}},t.params.sheet,o),f=u(a=e.call(this,t,d)||this),g=r();if(f.params=d,void 0===f.params.backdrop&&(f.params.backdrop="ios"!==t.theme),(p=f.params.el?s(f.params.el).eq(0):s(f.params.content).filter((function(e){return 1===e.nodeType})).eq(0))&&p.length>0&&p[0].zmpModal)return p[0].zmpModal||u(a);if(0===p.length)return f.destroy()||u(a);function v(e){var t=e.target;0===s(t).closest(f.el).length&&(f.params.closeByBackdropClick&&f.params.backdrop&&f.backdropEl&&f.backdropEl===t||f.params.closeByOutsideClick)&&f.close()}function y(e){27===e.keyCode&&f.params.closeOnEscape&&f.close()}function w(e){return(t.height-2*e)/t.height}f.params.backdrop&&f.params.backdropEl?h=s(f.params.backdropEl):f.params.backdrop&&0===(h=f.$containerEl.children(".sheet-backdrop")).length&&(h=s('<div class="sheet-backdrop"></div>'),f.$containerEl.append(h)),l(f,{app:t,push:p.hasClass("sheet-modal-push")||f.params.push,$el:p,el:p[0],$backdropEl:h,backdropEl:h&&h[0],type:"sheet",$htmlEl:s("html")}),f.params.push&&p.addClass("sheet-modal-push");var C,b,k,E,T,S,P,x,M,$,O,z,H,B,_,I,N,q,j=!1,D=!1;function X(e){j||!f.params.swipeToClose&&!f.params.swipeToStep||f.params.swipeHandler&&0===s(e.target).closest(f.params.swipeHandler).length||(j=!0,D=!1,C={x:"touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,y:"touchstart"===e.type?e.targetTouches[0].pageY:e.pageY},E=n(),k=void 0,S=p.hasClass("sheet-modal-top"),f.params.swipeHandler||"touchstart"!==e.type||(_=s(e.target).closest(".page-content")[0]))}function Y(e){if(j){if(b={x:"touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,y:"touchmove"===e.type?e.targetTouches[0].pageY:e.pageY},void 0===k&&(k=!!(k||Math.abs(b.x-C.x)>Math.abs(b.y-C.y))),k)return j=!1,void(D=!1);var s,o=(T=C.y-b.y)<0?"to-bottom":"to-top";if(!D){if(_&&!p.hasClass("modal-in-swipe-step")&&(I=_.scrollTop,N=_.scrollHeight,q=_.offsetHeight,!(N===q||"to-bottom"===o&&0===I||"to-top"===o&&I===N-q)))return p.transform(""),j=!1,void(D=!1);f.push&&m&&(H=t.$el.children(".view, .views")),$=p[0].offsetHeight,x=i(p[0],"y"),S?(O=f.params.swipeToClose?-$:-P,z=0):(O=0,z=f.params.swipeToClose?$:P),D=!0}if(M=x-T,M=Math.min(Math.max(M,O),z),e.preventDefault(),f.push&&m){var r=(M-x)/$;f.params.swipeToStep&&(r=S?M/P:1-(P-M)/P),r=Math.abs(r);var a=1-(r=Math.min(Math.max(r,0),1)),l=1-(1-w(m))*a;H.transition(0).forEach((function(e){e.style.setProperty("transform","translate3d(0,0,0) scale("+l+")","important")})),f.params.swipeToStep&&H.css("border-radius",B*a+"px")}if(p.transition(0).transform("translate3d(0,"+M+"px,0)"),f.params.swipeToStep)s=S?1-M/P:(P-M)/P,s=Math.min(Math.max(s,0),1),p.trigger("sheet:stepprogress",s),f.emit("local::stepProgress sheetStepProgress",f,s)}}function A(){if(j=!1,D){D=!1,p.transform("").transition(""),f.push&&m&&(H.transition("").transform(""),H.css("border-radius",""));var e=T<0?"to-bottom":"to-top",t=Math.abs(T);if(0!==t&&M!==x){var s=(new Date).getTime()-E;if(f.params.swipeToStep){var o=S?"to-bottom":"to-top",r=S?"to-top":"to-bottom",a=Math.abs(M),l=Math.abs(P);if(s<300&&t>10)return e===o&&a<l&&(p.removeClass("modal-in-swipe-step"),p.trigger("sheet:stepprogress",1),f.emit("local::stepProgress sheetStepProgress",f,1),p.trigger("sheet:stepopen"),f.emit("local::stepOpen sheetStepOpen",f),f.push&&m&&(f.$htmlEl[0].style.setProperty("--zmp-sheet-push-scale",w(m)),H.css("border-radius",""))),e===r&&a>l&&(f.params.swipeToClose?f.close():(p.addClass("modal-in-swipe-step"),p.trigger("sheet:stepprogress",0),f.emit("local::stepProgress sheetStepProgress",f,0),p.trigger("sheet:stepclose"),f.emit("local::stepClose sheetStepClose",f),f.push&&m&&(f.$htmlEl[0].style.removeProperty("--zmp-sheet-push-scale"),H.css("border-radius","0px")))),void(e===r&&a<=l&&(p.addClass("modal-in-swipe-step"),p.trigger("sheet:stepprogress",0),f.emit("local::stepProgress sheetStepProgress",f,0),p.trigger("sheet:stepclose"),f.emit("local::stepClose sheetStepClose",f),f.push&&m&&(f.$htmlEl[0].style.removeProperty("--zmp-sheet-push-scale"),H.css("border-radius","0px"))));if(s>=300){var n=!p.hasClass("modal-in-swipe-step");n?n&&(a>l+($-l)/2?f.params.swipeToClose&&f.close():a>l/2&&(p.addClass("modal-in-swipe-step"),p.trigger("sheet:stepprogress",0),f.emit("local::stepProgress sheetStepProgress",f,0),p.trigger("sheet:stepclose"),f.emit("local::stepClose sheetStepClose",f),f.push&&m&&(f.$htmlEl[0].style.removeProperty("--zmp-sheet-push-scale"),H.css("border-radius","0px")))):a<l/2?(p.removeClass("modal-in-swipe-step"),p.trigger("sheet:stepprogress",1),f.emit("local::stepProgress sheetStepProgress",f,1),p.trigger("sheet:stepopen"),f.emit("local::stepOpen sheetStepOpen",f),f.push&&m&&(f.$htmlEl[0].style.setProperty("--zmp-sheet-push-scale",w(m)),H.css("border-radius",""))):a-l>($-l)/2&&f.params.swipeToClose&&f.close()}}else{if(e!==(S?"to-top":"to-bottom"))return;(s<300&&t>20||s>=300&&t>$/2)&&f.close()}}}}function L(){f.setSwipeStep(!0)}f.setSwipeStep=function(e){void 0===e&&(e=!0);var t=p.find(".sheet-modal-swipe-step").eq(0);t.length&&(P=p.hasClass("sheet-modal-top")?-(t.offset().top-p.offset().top+t[0].offsetHeight):p[0].offsetHeight-(t.offset().top-p.offset().top+t[0].offsetHeight),p[0].style.setProperty("--zmp-sheet-swipe-step",P+"px"),e||p.addClass("modal-in-swipe-step"))};var F=!!g.passiveListener&&{passive:!0};return(f.params.swipeToClose||f.params.swipeToStep)&&(p.on(t.touchEvents.start,X,F),t.on("touchmove",Y),t.on("touchend:passive",A),f.once("sheetDestroy",(function(){p.off(t.touchEvents.start,X,F),t.off("touchmove",Y),t.off("touchend:passive",A)}))),f.on("open",(function(){f.params.closeOnEscape&&s(document).on("keydown",y),p.prevAll(".popup.modal-in").addClass("popup-behind"),f.params.swipeToStep&&(f.setSwipeStep(!1),t.on("resize",L)),f.params.scrollToEl&&function(){var e=s(f.params.scrollToEl).eq(0);if(0!==e.length&&0!==(c=e.parents(".page-content")).length){var t,o=parseInt(c.css("padding-top"),10),r=parseInt(c.css("padding-bottom"),10),a=c[0].offsetHeight-o-p.height(),l=c[0].scrollHeight-o-p.height(),n=c.scrollTop(),i=e.offset().top-o+e[0].offsetHeight;if(i>a){var h=n+i-a;h+a>l&&(t=h+a-l+r,a===l&&(t=p.height()),c.css({"padding-bottom":t+"px"})),c.scrollTop(h,300)}}}(),f.push&&(m=parseInt(p.css("--zmp-sheet-push-offset"),10),Number.isNaN(m)&&(m=0),m&&(p.addClass("sheet-modal-push"),f.$htmlEl.addClass("with-modal-sheet-push"),f.params.swipeToStep?(H=t.$el.children(".view, .views"),B=parseFloat(p.css("border-"+(S?"bottom":"top")+"-left-radius")),H.css("border-radius","0px")):f.$htmlEl[0].style.setProperty("--zmp-sheet-push-scale",w(m))))})),f.on("opened",(function(){(f.params.closeByOutsideClick||f.params.closeByBackdropClick)&&t.on("click",v)})),f.on("close",(function(){f.params.swipeToStep&&(p.removeClass("modal-in-swipe-step"),t.off("resize",L)),f.params.closeOnEscape&&s(document).off("keydown",y),f.params.scrollToEl&&c&&c.length>0&&c.css({"padding-bottom":""}),(f.params.closeByOutsideClick||f.params.closeByBackdropClick)&&t.off("click",v),p.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),f.push&&m&&(f.$htmlEl.removeClass("with-modal-sheet-push"),f.$htmlEl.addClass("with-modal-sheet-push-closing"))})),f.on("closed",(function(){f.push&&m&&(f.$htmlEl.removeClass("with-modal-sheet-push-closing"),f.$htmlEl[0].style.removeProperty("--zmp-sheet-push-scale"))})),f.stepOpen=function(){p.removeClass("modal-in-swipe-step"),f.push&&(m||(m=parseInt(p.css("--zmp-sheet-push-offset"),10),Number.isNaN(m)&&(m=0)),m&&f.$htmlEl[0].style.setProperty("--zmp-sheet-push-scale",w(m)))},f.stepClose=function(){p.addClass("modal-in-swipe-step"),f.push&&f.$htmlEl[0].style.removeProperty("--zmp-sheet-push-scale")},f.stepToggle=function(){p.toggleClass("modal-in-swipe-step")},p[0].zmpModal=f,f||u(a)}return o=e,(t=a).prototype=Object.create(o.prototype),t.prototype.constructor=t,m(t,o),a}(a),f={name:"sheet",params:{sheet:{push:!1,backdrop:void 0,backdropEl:void 0,closeByBackdropClick:!0,closeByOutsideClick:!1,closeOnEscape:!1,swipeToClose:!1,swipeToStep:!1,swipeHandler:null,containerEl:null}},static:{Sheet:d},create:function(){var e=this;e.sheet=l({},p({app:e,constructor:d,defaultSelector:".sheet-modal.modal-in"}),{stepOpen:function(t){var s=e.sheet.get(t);if(s&&s.stepOpen)return s.stepOpen()},stepClose:function(t){var s=e.sheet.get(t);if(s&&s.stepClose)return s.stepClose()},stepToggle:function(t){var s=e.sheet.get(t);if(s&&s.stepToggle)return s.stepToggle()}})},clicks:{".sheet-open":function(e,t){void 0===t&&(t={});s(".sheet-modal.modal-in").length>0&&t.sheet&&s(t.sheet)[0]!==s(".sheet-modal.modal-in")[0]&&this.sheet.close(".sheet-modal.modal-in"),this.sheet.open(t.sheet,t.animate,e)},".sheet-close":function(e,t){void 0===t&&(t={});this.sheet.close(t.sheet,t.animate,e)}}};if(t){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))