https://rldom.ru/design/multipurpose_9/js/notify/notificationFx.js

1/**
2 * notificationFx.js v1.0.0
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2014, Codrops
9 * http://www.codrops.com
10 */
11;( function( window ) {
12	
13	'use strict';
14	var zIndex = '9900';
15	var docElem = window.document.documentElement,
16		support = { animations : Modernizr.cssanimations },
17		animEndEventNames = {
18			'WebkitAnimation' : 'webkitAnimationEnd',
19			'OAnimation' : 'oAnimationEnd',
20			'msAnimation' : 'MSAnimationEnd',
21			'animation' : 'animationend'
22		},
23		// animation end event name
24		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
25	
26	/**
27	 * extend obj function
28	 */
29	function extend( a, b ) {
30		for( var key in b ) { 
31			if( b.hasOwnProperty( key ) ) {
32				a[key] = b[key];
33			}
34		}
35		return a;
36	}
37
38	/**
39	 * NotificationFx function
40	 */
41	function NotificationFx( options ) {	
42		this.options = extend( {}, this.options );
43		extend( this.options, options );
44		this._init();
45	}
46
47	/**
48	 * NotificationFx options
49	 */
50	NotificationFx.prototype.options = {
51		// element to which the notification will be appended
52		// defaults to the document.body
53		wrapper : document.body,
54		// the message
55		message : 'yo!',
56		// layout type: growl|attached|bar|other
57		layout : 'growl',
58		// effects for the specified layout:
59		// for growl layout: scale|slide|genie|jelly
60		// for attached layout: flip|bouncyflip
61		// for other layout: boxspinner|cornerexpand|loadingcircle|thumbslider
62		// ...
63		effect : 'slide',
64		// notice, warning, error, success
65		// will add class ns-type-warning, ns-type-error or ns-type-success
66		type : 'error',
67		// if the user doesn´t close the notification then we remove it 
68		// after the following time
69		ttl : 6000,
70		// callbacks
71		onClose : function() { return false; },
72		onOpen : function() { return false; }
73	}
74
75	/**
76	 * init function
77	 * initialize and cache some vars
78	 */
79	NotificationFx.prototype._init = function() {
80		// create HTML structure
81		this.ntf = document.createElement( 'div' );
82		this.ntf.className = 'ns-box ns-' + this.options.layout + ' ns-effect-' + this.options.effect + ' ns-type-' + this.options.type;
83		this.ntf.style.zIndex = zIndex;
84		zIndex++;
85		var strinner = '<div class="container no-padding ns-box-inner">';
86		strinner += this.options.message;
87		strinner += '<span class="ns-close"></span></div>';
88		strinner += '</div>';
89		this.ntf.innerHTML = strinner;
90
91		// append to body or the element specified in options.wrapper
92		this.options.wrapper.insertBefore( this.ntf, this.options.wrapper.firstChild );
93
94		// dismiss after [options.ttl]ms
95		var self = this;
96		this.dismissttl = setTimeout( function() {
97			if( self.active ) {
98				self.dismiss();
99			}
100		}, this.options.ttl );
101
102		// init events
103		this._initEvents();
104	}
105
106	/**
107	 * init events
108	 */
109	NotificationFx.prototype._initEvents = function() {
110		var self = this;
111		// dismiss notification
112		this.ntf.querySelector( '.ns-close' ).addEventListener( 'click', function() { self.dismiss(); } );
113	}
114
115	/**
116	 * show the notification
117	 */
118	NotificationFx.prototype.show = function() {
119		this.active = true;
120		classie.remove( this.ntf, 'ns-hide' );
121		classie.add( this.ntf, 'ns-show' );
122		this.options.onOpen();
123	}
124
125	/**
126	 * dismiss the notification
127	 */
128	NotificationFx.prototype.dismiss = function() {
129		var self = this;
130		this.active = false;
131		clearTimeout( this.dismissttl );
132		classie.remove( this.ntf, 'ns-show' );
133		setTimeout( function() {
134			classie.add( self.ntf, 'ns-hide' );
135			
136			// callback
137			self.options.onClose();
138		}, 25 );
139
140		// after animation ends remove ntf from the DOM
141		var onEndAnimationFn = function( ev ) {
142			if( support.animations ) {
143				if( ev.target !== self.ntf ) return false;
144				this.removeEventListener( animEndEventName, onEndAnimationFn );
145			}
146			self.options.wrapper.removeChild( this );
147		};
148
149		if( support.animations ) {
150			this.ntf.addEventListener( animEndEventName, onEndAnimationFn );
151		}
152		else {
153			onEndAnimationFn();
154		}
155	}
156
157	/**
158	 * add to global namespace
159	 */
160	window.NotificationFx = NotificationFx;
161
162} )( window );