feat(library): Added animations

- Added animation service as well as animation presets
- Defined animation models
- Added web-animations dependency
- Added notifier configuration, including animation options

Author: itsdevdom

demo/index.html

@@ -12,6 +12,7 @@
 		<script src="./../node_modules/reflect-metadata/Reflect.js"></script>
 		<script src="./../node_modules/zone.js/dist/zone.js"></script>
 		<script src="./../node_modules/systemjs/dist/system.src.js"></script>
+		<script src="./../node_modules/web-animations-js/web-animations-next.min.js"></script>
 
 		<!-- Configure and run SystemJS module loader -->
 		<script src="./systemjs.config.js"></script>

gulp-tasks/watch.task.js

@@ -10,15 +10,15 @@ const buildTask = require( './build.task' );
 /**
  * Gulp task: Browser-sync reload (helper only)
  */
-gulp.task( 'watch--reload', ( done ) => {
+gulp.task( 'watch:reload', ( done ) => {
     browserSync.reload();
     done();
 } );
 
 /**
  * Gulp task: Start watcher for build tasks (note: paths muts be written without dots in the beginning!!)
  */
-gulp.task( 'watch--build',
+gulp.task( 'watch:build',
     gulp.series( [
         gulp.parallel( [
             'build--dev',
@@ -100,7 +100,7 @@ gulp.task( 'watch--build',
 /**
  * Gulp task: Start test watcher (best in combination with the build watcher)
  */
-gulp.task( 'watch--test', ( done ) => {
+gulp.task( 'watch:test', ( done ) => {
 	new karma.Server( {
 		configFile: `${__dirname }/../karma.config.js`
 	}, done ).start();

package.json

@@ -40,7 +40,8 @@
     "peerDependencies": {
         "@angular/core": "2.x",
         "@angular/common": "2.x",
-        "rxjs": "5.0.0-beta.12"
+        "rxjs": "5.0.0-beta.12",
+        "web-animations-js": "2.2.x"
     },
     "devDependencies": {
         "@angular/core": "2.x",
@@ -80,6 +81,7 @@
         "tslint": "3.15.x",
         "typescript": "2.0.x",
         "typings": "1.4.x",
+        "web-animations-js": "2.2.x",
         "zone.js": "0.6.x"
     }
 }

src/animation-presets/fade.animation-preset.ts

@@ -0,0 +1,28 @@
+import { NotifierNotification } from './../models/notifier-notification.model';
+import { NotifierAnimationKeyframes, NotifierAnimationPreset } from './../models/notifier-animation.model';
+
+/**
+ * Fade animation preset
+ */
+export const fade: NotifierAnimationPreset = {
+	in: ( notification: NotifierNotification ): NotifierAnimationKeyframes => {
+		return {
+			from: {
+				opacity: 0
+			},
+			to: {
+				opacity: 1
+			}
+		};
+	},
+	out: ( notification: NotifierNotification ): NotifierAnimationKeyframes => {
+		return {
+			from: {
+				opacity: 1
+			},
+			to: {
+				opacity: 0
+			}
+		};
+	}
+};

src/components/notifier-container.component.ts

@@ -98,7 +98,7 @@ export class NotifierContainerComponent implements OnInit, OnDestroy {
 	 */
 	public onComponentInit( componentRef: NotifierNotificationComponent ): void {
 		let currentNotification: NotifierNotification = this.notifications[ this.notifications.length - 1 ];
-		currentNotification.componentRef = componentRef; // Save component Ref
+		currentNotification.component = componentRef; // Save component Ref
 		this.showNotification( currentNotification );
 	};
 
@@ -139,10 +139,10 @@ export class NotifierContainerComponent implements OnInit, OnDestroy {
 			} else {
 				this.hideNotification( action.payload );
 				const notificationIndex: number = this.notifications.findIndex( ( notification: NotifierNotification ) => {
-					return notification.componentRef === action.payload.componentRef;
+					return notification.component === action.payload.component;
 				} );
 				const otherNotifications: Array<NotifierNotification> = this.notifications.slice( 0, notificationIndex );
-				this.shiftNotifications( otherNotifications, action.payload.componentRef.currentElementHeight, false ).then( resolve );
+				this.shiftNotifications( otherNotifications, action.payload.component.elementHeight, false ).then( resolve );
 			}
 
 		} );
@@ -155,13 +155,13 @@ export class NotifierContainerComponent implements OnInit, OnDestroy {
 
 		// 1. Decision: First notification in the list?
 		if ( this.notifications.length === 1 ) {
-			notification.componentRef.show().then( this.tempPromiseResolver );
+			notification.component.show().then( this.tempPromiseResolver );
 		} else {
 
 			// 2. Decision: Stacking enabled? (same as stacking value below 2)
 			if ( this.config.behaviour.stacking === false || this.config.behaviour.stacking < 2 ) {
 				this.hideNotification( this.notifications[ 0 ] ).then( () => {
-					notification.componentRef.show().then( this.tempPromiseResolver );
+					notification.component.show().then( this.tempPromiseResolver );
 				} );
 			} else {
 
@@ -170,14 +170,14 @@ export class NotifierContainerComponent implements OnInit, OnDestroy {
 
 					this.hideNotification( this.notifications[ 0 ] ); // Hide oldest notification
 					const otherNotifications: Array<NotifierNotification> = this.notifications.slice( 1, this.notifications.length - 1 );
-					this.shiftNotifications( otherNotifications, notification.componentRef.currentElementHeight, true );
-					notification.componentRef.show().then( this.tempPromiseResolver ); // DONE
+					this.shiftNotifications( otherNotifications, notification.component.elementHeight, true );
+					notification.component.show().then( this.tempPromiseResolver ); // DONE
 
 				} else {
 
 					const otherNotifications: Array<NotifierNotification> = this.notifications.slice( 0, this.notifications.length - 1 );
-					this.shiftNotifications( otherNotifications, notification.componentRef.currentElementHeight, true );
-					notification.componentRef.show().then( this.tempPromiseResolver ); // DONE
+					this.shiftNotifications( otherNotifications, notification.component.elementHeight, true );
+					notification.component.show().then( this.tempPromiseResolver ); // DONE
 
 				}
 
@@ -192,9 +192,9 @@ export class NotifierContainerComponent implements OnInit, OnDestroy {
 	 */
 	private hideNotification( notification: NotifierNotification ): Promise<null> {
 		return new Promise<null>( ( resolve: ( value?: null ) => {}, reject: ( value?: null ) => {} ) => {
-			notification.componentRef.hide().then( () => {
+			notification.component.hide().then( () => {
 				this.notifications = this.notifications.filter( ( currentNotification: NotifierNotification ) => {
-					return currentNotification.componentRef !== notification.componentRef;
+					return currentNotification.component !== notification.component;
 				} );
 				resolve(); // DONE
 			} );
@@ -207,7 +207,7 @@ export class NotifierContainerComponent implements OnInit, OnDestroy {
 	private shiftNotifications( notifications: Array<NotifierNotification>, distance: number, shiftToMakePlace: boolean ): Promise<null> {
 		let shiftPromises: Array<Promise<null>> = [];
 		for ( let notification of notifications ) {
-			shiftPromises.push( notification.componentRef.shift( distance, shiftToMakePlace ) );
+			shiftPromises.push( notification.component.shift( distance, shiftToMakePlace ) );
 		}
 		return Promise.all( shiftPromises ); // DONE
 	}

src/components/notifier-notification.component.ts

@@ -1,5 +1,7 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Optional, Output, Renderer } from '@angular/core';
 
+import { NotifierAnimationService } from './../services/notifier-animation.service';
+import { NoifierAnimationData } from './../models/notifier-animation.model';
 import { NotifierConfigGlobal } from './../models/notifier-config-global.model';
 import { NotifierNotification } from './../models/notifier-notification.model';
 
@@ -38,15 +40,30 @@ export class NotifierNotificationComponent implements AfterViewInit {
 	@Output()
 	public dismiss: EventEmitter<NotifierNotification>;
 
+	/**
+	 * Global configuration
+	 */
+	public config: NotifierConfigGlobal;
+
 	/**
 	 * Current notification height, calculated and cached here (#perfmatters)
 	 */
-	public currentElementHeight: number;
+	public elementHeight: number;
 
 	/**
-	 * Global configuration
+	 * Current notification width, calculated and cached here (#perfmatters)
+	 */
+	public elementWidth: number;
+
+	/**
+	 * Current notification shift, calculated and cached here (#perfmatters)
 	 */
-	private config: NotifierConfigGlobal;
+	public elementShift: number;
+
+	/**
+	 * Notifier animation service
+	 */
+	private animationService: NotifierAnimationService;
 
 	/**
 	 * Native element reference, used for manipulating DOM properties
@@ -58,23 +75,22 @@ export class NotifierNotificationComponent implements AfterViewInit {
 	 */
 	private renderer: Renderer;
 
-	/**
-	 * Current notification shift, calculated and cached here (#perfmatters)
-	 */
-	private currentElementShift: number;
-
 	/**
 	 * Constructor
 	 * @param {ElementRef} elementRef Component element reference
 	 * @param {Renderer}   renderer   Angular rendering service
 	 */
-	public constructor( elementRef: ElementRef, renderer: Renderer, @Optional() config: NotifierConfigGlobal ) {
+	public constructor( animationService: NotifierAnimationService,
+						elementRef: ElementRef,
+						renderer: Renderer,
+						@Optional() config: NotifierConfigGlobal ) {
 		this.config = config === null ? new NotifierConfigGlobal() : config;
 		this.init = new EventEmitter<NotifierNotificationComponent>();
 		this.dismiss = new EventEmitter<NotifierNotification>();
 		this.element = elementRef.nativeElement;
+		this.animationService = animationService;
 		this.renderer = renderer;
-		this.currentElementShift = 0;
+		this.elementShift = 0;
 	}
 
 	/**
@@ -83,7 +99,8 @@ export class NotifierNotificationComponent implements AfterViewInit {
 	 */
 	public ngAfterViewInit(): void {
 		this.setup();
-		this.currentElementHeight = this.element.offsetHeight; // Calculate current notification height and cache it (#perfmatters)
+		this.elementHeight = this.element.offsetHeight;
+		this.elementWidth = this.element.offsetWidth;
 		this.init.emit( this );
 	}
 
@@ -92,20 +109,40 @@ export class NotifierNotificationComponent implements AfterViewInit {
 	 * @returns {Promise<null>} Empty promise, resolved when finished
 	 */
 	public show(): Promise<null> {
-		return new Promise<null>( ( resolve: ( value?: null ) => {}, reject: ( value?: null ) => {} ) => {
+
+		// Decision: Are animations enabled?
+		if ( this.config.animations.enabled ) {
+			const animationData: NoifierAnimationData = this.animationService.getAnimationData( 'in', this.notification );
+			for ( let attribute in animationData.keyframes[ 0 ] ) { // Set pre-animation styles to prevent flickering
+				this.renderer.setElementStyle( this.element, attribute, animationData.keyframes[ 0 ][ attribute ] );
+			}
 			this.renderer.setElementStyle( this.element, 'visibility', 'visible' );
-			resolve();
-		} );
+			return this.element.animate( animationData.keyframes, animationData.options ).finished; // Returns a promise
+		} else {
+			return new Promise<null>( ( resolve: ( value?: null ) => {}, reject: ( value?: null ) => {} ) => {
+				this.renderer.setElementStyle( this.element, 'visibility', 'visible' );
+				resolve();
+			} );
+		}
+
 	}
 
 	/**
 	 * Hide (animate out) notification
 	 * @returns {Promise<null>} Empty promise, resolved when finished
 	 */
 	public hide(): Promise<null> {
-		return new Promise<null>( ( resolve: ( value?: null ) => {}, reject: ( value?: null ) => {} ) => {
-			resolve();
-		} );
+
+		// Decision: Are animations enabled?
+		if ( this.config.animations.enabled ) {
+			const animationData: NoifierAnimationData = this.animationService.getAnimationData( 'out', this.notification );
+			return this.element.animate( animationData.keyframes, animationData.options ).finished; // Returns a promise
+		} else {
+			return new Promise<null>( ( resolve: ( value?: null ) => {}, reject: ( value?: null ) => {} ) => {
+				resolve();
+			} );
+		}
+
 	}
 
 	/**
@@ -119,23 +156,23 @@ export class NotifierNotificationComponent implements AfterViewInit {
 			switch ( this.config.position.verticalPosition ) { // TODO: Maybe if-else ??
 				case 'top':
 					if ( shiftToMakePlace ) {
-						newElementShift = this.currentElementShift + distance + this.config.position.verticalGap;
+						newElementShift = this.elementShift + distance + this.config.position.verticalGap;
 					} else {
-						newElementShift = this.currentElementShift - distance - this.config.position.verticalGap;
+						newElementShift = this.elementShift - distance - this.config.position.verticalGap;
 					}
 					break;
 				case 'bottom':
 					if ( shiftToMakePlace ) {
-						newElementShift = this.currentElementShift - distance - this.config.position.verticalGap;
+						newElementShift = this.elementShift - distance - this.config.position.verticalGap;
 					} else {
-						newElementShift = this.currentElementShift + distance + this.config.position.verticalGap;
+						newElementShift = this.elementShift + distance + this.config.position.verticalGap;
 					}
 			}
 			let horizontalPosition: string = this.config.position.horizontalPosition === 'middle' ? '-50%' : '0';
 
 			// Shift
 			this.renderer.setElementStyle( this.element, 'transform', `translate3d( ${ horizontalPosition }, ${ newElementShift }px, 0 )` );
-			this.currentElementShift = newElementShift;
+			this.elementShift = newElementShift;
 			resolve(); // DONE
 
 		} );

src/models/notifier-animation.model.ts

@@ -0,0 +1,80 @@
+import { NotifierNotification } from './notifier-notification.model';
+
+/**
+ * Notifier animation, similar to the Web Animation API syntax
+ */
+export interface NoifierAnimationData {
+
+	/**
+	 * Animation keyframes, first entry for animate-in, second entry for animate-out
+	 */
+	keyframes: Array<{
+		[ property: string ]: any;
+	}>;
+
+	/**
+	 * Futher animation options
+	 */
+	options: {
+
+		/**
+		 * Animation delay, in ms
+		 */
+		delay: number;
+
+		/**
+		 * Animation duration, in ms
+		 */
+		duration: number;
+
+		/**
+		 * Animation easing function (cp. CSS easing attributes)
+		 */
+		easing: string;
+
+		/**
+		 * Animation fill mode
+		 */
+		fill: string;
+
+	};
+
+}
+
+/**
+ * Notifier animation keyframes
+ */
+export interface NotifierAnimationKeyframes {
+
+	/**
+	 * CSS attributes before the animation starts
+	 */
+	from: {
+		[ property: string ]: any
+	};
+
+	/**
+	 * CSS attributes after the animation ends
+	 */
+	to: {
+		[ property: string ]: any
+	};
+
+}
+
+/**
+ * Notifier animation preset
+ */
+export interface NotifierAnimationPreset {
+
+	/**
+	 * Function generating the keyframes for animating-in
+	 */
+	in: ( notification: NotifierNotification ) => NotifierAnimationKeyframes;
+
+	/**
+	 * Function generating the keyframes for animating-out
+	 */
+	out: ( notification: NotifierNotification ) => NotifierAnimationKeyframes;
+
+}