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