framework7/components/notification.js

Full featured mobile HTML framework for building iOS & Android apps

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