framework7/components/sheet.js

Full featured mobile HTML framework for building iOS & Android apps

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