framework7/components/sheet.js

Full featured mobile HTML framework for building iOS & Android apps

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