framework7/components/notification/notification.lazy.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,i=t.utils,n=(t.getDevice,t.getSupport,t.Class,t.Modal),s=(t.ConstructorMethods,t.ModalMethods),a=t.$jsx,c=i.extend,l=i.now,r=i.nextTick;class u extends n{constructor(t,e){const i=c({on:{}},t.params.notification,e);super(t,i);const n=this;n.app=t,n.params=i;const{icon:s,title:a,titleRightText:u,subtitle:f,text:p,closeButton:d,closeTimeout:h,cssClass:m,closeOnClick:v}=n.params;let g,x,C,T,$,y,b;if(n.params.el)g=o(n.params.el);else{const t=n.render({icon:s,title:a,titleRightText:u,subtitle:f,text:p,closeButton:d,cssClass:m});g=o(t)}if(g&&g.length>0&&g[0].f7Modal)return g[0].f7Modal;if(0===g.length)return n.destroy();c(n,{$el:g,el:g[0],type:"notification"}),g[0].f7Modal=n,d&&g.find(".notification-close-button").on("click",(()=>{n.close()})),g.on("click",(t=>{d&&o(t.target).closest(".notification-close-button").length||(n.emit("local::click notificationClick",n),v&&n.close())})),n.on("beforeDestroy",(()=>{g.off("click")}));const M={};function k(t){x||(x=!0,C=!1,T=void 0,y=l(),M.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,M.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY)}function w(t){if(!x)return;const e="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,o="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;if(void 0===T&&(T=!!(T||Math.abs(o-M.y)<Math.abs(e-M.x))),T)return void(x=!1);t.preventDefault(),C||(n.$el.removeClass("notification-transitioning"),n.$el.transition(0),b=n.$el[0].offsetHeight/2),C=!0,$=o-M.y;let i=$;$>0&&(i=$**.8),n.$el.transform(`translate3d(0, ${i}px, 0)`)}function B(){if(!x||!C)return x=!1,void(C=!1);if(x=!1,C=!1,0===$)return;const t=l()-y;n.$el.transition(""),n.$el.addClass("notification-transitioning"),n.$el.transform(""),($<-10&&t<300||-$>=b/1)&&n.close()}let D;function R(){D=r((()=>{x&&C?R():n.close()}),h)}return n.on("open",(()=>{n.params.swipeToClose&&(n.$el.on(t.touchEvents.start,k,{passive:!0}),t.on("touchmove:active",w),t.on("touchend:passive",B)),o(".notification.modal-in").each((e=>{const o=t.notification.get(e);e!==n.el&&o&&o.close()})),h&&R()})),n.on("close beforeDestroy",(()=>{n.params.swipeToClose&&(n.$el.off(t.touchEvents.start,k,{passive:!0}),t.off("touchmove:active",w),t.off("touchend:passive",B)),clearTimeout(D)})),n}render(){const t=this;if(t.params.render)return t.params.render.call(t,t);const{icon:e,title:o,titleRightText:i,subtitle:n,text:s,closeButton:c,cssClass:l}=t.params;return a("div",{class:`notification ${l||""}`},a("div",{class:"notification-header"},e&&a("div",{class:"notification-icon"},e),o&&a("div",{class:"notification-title"},o),i&&a("div",{class:"notification-title-right-text"},i),c&&a("span",{class:"notification-close-button"})),a("div",{class:"notification-content"},n&&a("div",{class:"notification-subtitle"},n),s&&a("div",{class:"notification-text"},s)))}}var f={name:"notification",static:{Notification:u},create(){this.notification=c({},s({app:this,constructor:u,defaultSelector:".notification.modal-in"}))},params:{notification:{icon:null,title:null,titleRightText:null,subtitle:null,text:null,closeButton:!1,closeTimeout:null,closeOnClick:!1,swipeToClose:!0,cssClass:null,render:null,containerEl:null}}};if(e){if(t.prototype.modules&&t.prototype.modules[f.name])return;t.use(f),t.instance&&(t.instance.useModuleParams(f,t.instance.params),t.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))