framework7/components/sheet/sheet.js

Full featured mobile HTML framework for building iOS & Android apps

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