Refactored notification animations

src/app/shared/animations/fade.ts

@@ -1,14 +1,24 @@
-import { animate, style, transition, trigger } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
+export const fadeInState = state('fadeIn', style({opacity: 1}));
+export const fadeInEnter =  transition('* => fadeIn', [
+  style({ opacity: 0 }),
+  animate(300, style({ opacity: 1 }))
+]);
 const fadeEnter =  transition(':enter', [
   style({ opacity: 0 }),
   animate(300, style({ opacity: 1 }))
 ]);
 
-const fadeLeave = transition(':leave', [
+export const fadeOutState = state('fadeOut', style({opacity: 0}));
+export const fadeOutLeave = transition('fadeIn => fadeOut', [
   style({ opacity: 1 }),
   animate(400, style({ opacity: 0 }))
 ]);
+const fadeLeave =  transition(':leave', [
+  style({ opacity: 0 }),
+  animate(300, style({ opacity: 1 }))
+]);
 
 export const fadeIn = trigger('fadeIn', [
   fadeEnter

src/app/shared/animations/fromBottom.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromBottomInState = state('fromBottomIn', style({opacity: 1, transform: 'translateY(0)'}));
+export const fromBottomEnter = transition('* => fromBottomIn', [
+  style({opacity: 0, transform: 'translateY(5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromBottomOutState = state('fromBottomOut', style({opacity: 0, transform: 'translateY(-5%)'}));
+export const fromBottomLeave = transition('fromBottomIn => fromBottomOut', [
+  style({opacity: 1, transform: 'translateY(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromBottomIn = trigger('fromBottomIn', [
+  fromBottomEnter
+]);
+
+export const fromBottomOut = trigger('fromBottomOut', [
+  fromBottomLeave
+]);
+
+export const fromBottomInOut = trigger('fromBottomInOut', [
+  fromBottomEnter,
+  fromBottomLeave
+]);

src/app/shared/animations/fromLeft.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromLeftInState = state('fromLeftIn', style({opacity: 1, transform: 'translateX(0)'}));
+export const fromLeftEnter = transition('* => fromLeftIn', [
+  style({opacity: 0, transform: 'translateX(-5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromLeftOutState = state('fromLeftOut', style({opacity: 0, transform: 'translateX(5%)'}));
+export const fromLeftLeave = transition('fromLeftIn => fromLeftOut', [
+  style({opacity: 1, transform: 'translateX(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromLeftIn = trigger('fromLeftIn', [
+  fromLeftEnter
+]);
+
+export const fromLeftOut = trigger('fromLeftOut', [
+  fromLeftLeave
+]);
+
+export const fromLeftInOut = trigger('fromLeftInOut', [
+  fromLeftEnter,
+  fromLeftLeave
+]);

src/app/shared/animations/fromRight.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromRightInState = state('fromRightIn', style({opacity: 1, transform: 'translateX(0)'}));
+export const fromRightEnter = transition('* => fromRightIn', [
+  style({opacity: 0, transform: 'translateX(5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromRightOutState = state('fromRightOut', style({opacity: 0, transform: 'translateX(-5%)'}));
+export const fromRightLeave = transition('fromRightIn => fromRightOut', [
+  style({opacity: 1, transform: 'translateX(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromRightIn = trigger('fromRightIn', [
+  fromRightEnter
+]);
+
+export const fromRightOut = trigger('fromRightOut', [
+  fromRightLeave
+]);
+
+export const fromRightInOut = trigger('fromRightInOut', [
+  fromRightEnter,
+  fromRightLeave
+]);

src/app/shared/animations/fromTop.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fromTopInState = state('fromTopIn', style({opacity: 1, transform: 'translateY(0)'}));
+export const fromTopEnter = transition('* => fromTopIn', [
+  style({opacity: 0, transform: 'translateY(-5%)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const fromTopOutState = state('fromTopOut', style({opacity: 0, transform: 'translateY(5%)'}));
+export const fromTopLeave = transition('fromTopIn => fromTopOut', [
+  style({opacity: 1, transform: 'translateY(0)'}),
+  animate('300ms ease-in-out')
+]);
+
+export const fromTopIn = trigger('fromTopIn', [
+  fromTopEnter
+]);
+
+export const fromTopOut = trigger('fromTopOut', [
+  fromTopLeave
+]);
+
+export const fromTopInOut = trigger('fromTopInOut', [
+  fromTopEnter,
+  fromTopLeave
+]);

src/app/shared/animations/rotate.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const rotateInState = state('rotateIn', style({opacity: 1, transform: 'rotate(0deg)'}));
+export const rotateEnter =  transition('* => rotateIn', [
+  style({opacity: 0, transform: 'rotate(5deg)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const rotateOutState = state('rotateOut', style({opacity: 0, transform: 'rotate(5deg)'}));
+export const rotateLeave = transition('rotateIn => rotateOut', [
+  style({opacity: 1, transform: 'rotate(0deg)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const rotateIn = trigger('rotateIn', [
+  rotateEnter
+]);
+
+export const rotateOut = trigger('rotateOut', [
+  rotateLeave
+]);
+
+export const rotateInOut = trigger('rotateInOut', [
+  rotateEnter,
+  rotateLeave
+]);

src/app/shared/animations/scale.ts

@@ -0,0 +1,26 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const scaleInState = state('scaleIn', style({opacity: 1, transform: 'scale(1)'}));
+export const scaleEnter =  transition('* => scaleIn', [
+  style({opacity: 0, transform: 'scale(0)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const scaleOutState = state('scaleOut', style({opacity: 0, transform: 'scale(0)'}));
+export const scaleLeave = transition('scaleIn => scaleOut', [
+  style({opacity: 1, transform: 'scale(1)'}),
+  animate('400ms ease-in-out')
+]);
+
+export const scaleIn = trigger('scaleIn', [
+  scaleEnter
+]);
+
+export const scaleOut = trigger('scaleOut', [
+  scaleLeave
+]);
+
+export const scaleInOut = trigger('scaleInOut', [
+  scaleEnter,
+  scaleLeave
+]);

src/app/shared/notifications/models/notification-animations-type.ts

@@ -0,0 +1,16 @@
+// 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale'
+
+export enum NotificationAnimationsType {
+  Fade = 'fade',
+  FromTop = 'fromTop',
+  FromRight = 'fromRight',
+  FromBottom = 'fromBottom',
+  FromLeft = 'fromLeft',
+  Rotate = 'rotate',
+  Scale = 'scale'
+}
+
+export enum NotificationAnimationsStatus {
+  In = 'In',
+  Out = 'Out'
+}

src/app/shared/notifications/models/notification-options.model.ts

@@ -1,8 +1,10 @@
+import { NotificationAnimationsType } from './notification-animations-type';
+
 export interface INotificationOptions {
   timeOut: number;
   clickToClose: boolean;
   rtl: boolean;
-  animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale';
+  animate: NotificationAnimationsType;
   position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
 }
 
@@ -15,7 +17,7 @@ export class NotificationOptions implements INotificationOptions {
 
   constructor(timeOut = 0,
               clickToClose = true,
-              animate = 'scale',
+              animate = NotificationAnimationsType.Scale,
               position = ['top' , 'right'],
               rtl = false) {
 

src/app/shared/notifications/notification/notification.component.html

@@ -1,8 +1,6 @@
 <div class="alert {{item.type}} alert-dismissible" role="alert"
      [@enterLeave]="animate"
-     [ngClass]="{
-            'rtl-mode': rtl
-        }" >
+     [ngClass]="{ 'rtl-mode': rtl }">
 
   <div class="icon"><i
     [ngClass]="{'fa fa-2x': true,
@@ -12,17 +10,12 @@
       'fa-info': item.type == 'alert-info'
       }"></i></div>
 
-  <!--<div class="close" (click)="remove()">-->
   <button *ngIf="item.options.clickToClose"
           (click)="remove()"
-          type="button" class="close" data-dismiss="alert" aria-label="Close">
+          type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
 
-
-
-
-
   <div *ngIf="!item.html">
 
     <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
@@ -41,8 +34,6 @@
       <div class="sn-content" [innerHTML]="content"></div>
     </ng-template>
 
-
-
   </div>
 
   <div *ngIf="item.html">

src/app/shared/notifications/notification/notification.component.scss

@@ -1,16 +1,9 @@
-//.close {
-//  float: right;
-//  margin-right: -15px;
-//  margin-top: -10px;
-//}
-
-close:active {
-  border: 0;
+.notificationClose:focus {
+  outline: none !important;
 }
 
 .icon {
   float: left;
-  margin-left: -10px;
   padding: 5px;
 }
 

src/app/shared/notifications/notification/notification.component.ts

@@ -9,100 +9,31 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { trigger } from '@angular/animations';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NotificationsService } from '../notifications.service';
 import { INotification } from '../models/notification.model';
+import { scaleEnter, scaleInState, scaleLeave, scaleOutState } from '../../animations/scale';
+import { rotateEnter, rotateInState, rotateLeave, rotateOutState } from '../../animations/rotate';
+import { fromBottomEnter, fromBottomInState, fromBottomLeave, fromBottomOutState } from '../../animations/fromBottom';
+import { fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState } from '../../animations/fromRight';
+import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from '../../animations/fromLeft';
+import { fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState } from '../../animations/fromTop';
+import { fadeEnter, fadeInEnter, fadeInState, fadeLeave, fadeOutLeave, fadeOutState } from '../../animations/fade';
+import { NotificationAnimationsStatus } from '../models/notification-animations-type';
 
 @Component({
   selector: 'ds-notification',
   encapsulation: ViewEncapsulation.None,
   animations: [
     trigger('enterLeave', [
-
-      // Fade
-      state('fade', style({opacity: 1})),
-      transition('* => fade', [
-        style({opacity: 0}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fadeOut', style({opacity: 0})),
-      transition('fade => fadeOut', [
-        style({opacity: 1}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from top
-      state('fromTop', style({opacity: 1, transform: 'translateY(0)'})),
-      transition('* => fromTop', [
-        style({opacity: 0, transform: 'translateY(-5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromTopOut', style({opacity: 0, transform: 'translateY(5%)'})),
-      transition('fromTop => fromTopOut', [
-        style({opacity: 1, transform: 'translateY(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from right
-      state('fromRight', style({opacity: 1, transform: 'translateX(0)'})),
-      transition('* => fromRight', [
-        style({opacity: 0, transform: 'translateX(5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromRightOut', style({opacity: 0, transform: 'translateX(-5%)'})),
-      transition('fromRight => fromRightOut', [
-        style({opacity: 1, transform: 'translateX(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from bottom
-      state('fromBottom', style({opacity: 1, transform: 'translateY(0)'})),
-      transition('* => fromBottom', [
-        style({opacity: 0, transform: 'translateY(5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromBottomOut', style({opacity: 0, transform: 'translateY(-5%)'})),
-      transition('fromBottom => fromBottomOut', [
-        style({opacity: 1, transform: 'translateY(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Enter from left
-      state('fromLeft', style({opacity: 1, transform: 'translateX(0)'})),
-      transition('* => fromLeft', [
-        style({opacity: 0, transform: 'translateX(-5%)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('fromLeftOut', style({opacity: 0, transform: 'translateX(5%)'})),
-      transition('fromLeft => fromLeftOut', [
-        style({opacity: 1, transform: 'translateX(0)'}),
-        animate('300ms ease-in-out')
-      ]),
-
-      // Rotate
-      state('scale', style({opacity: 1, transform: 'scale(1)'})),
-      transition('* => scale', [
-        style({opacity: 0, transform: 'scale(0)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('scaleOut', style({opacity: 0, transform: 'scale(0)'})),
-      transition('scale => scaleOut', [
-        style({opacity: 1, transform: 'scale(1)'}),
-        animate('400ms ease-in-out')
-      ]),
-
-      // Scale
-      state('rotate', style({opacity: 1, transform: 'rotate(0deg)'})),
-      transition('* => rotate', [
-        style({opacity: 0, transform: 'rotate(5deg)'}),
-        animate('400ms ease-in-out')
-      ]),
-      state('rotateOut', style({opacity: 0, transform: 'rotate(-5deg)'})),
-      transition('rotate => rotateOut', [
-        style({opacity: 1, transform: 'rotate(0deg)'}),
-        animate('400ms ease-in-out')
-      ]),
+      fadeInEnter, fadeInState, fadeOutLeave, fadeOutState,
+      fromBottomEnter, fromBottomInState, fromBottomLeave, fromBottomOutState,
+      fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState,
+      fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState,
+      fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState,
+      rotateInState, rotateEnter, rotateOutState, rotateLeave,
+      scaleInState, scaleEnter, scaleOutState, scaleLeave
     ])
   ],
   templateUrl: './notification.component.html',
@@ -112,16 +43,6 @@ import { INotification } from '../models/notification.model';
 
 export class NotificationComponent implements OnInit, OnDestroy {
 
-  // @Input() public timeOut: number;
-  // @Input() public showProgressBar: boolean;
-  // @Input() public pauseOnHover: boolean;
-  // @Input() public clickToClose: boolean;
-  // @Input() public clickIconToClose: boolean;
-  // @Input() public maxLength: number;
-  // @Input() public theClass: string;
-  // @Input() public rtl: boolean;
-  // @Input() public animate: string;
-  // @Input() public position: number;
   @Input() public item: INotification;
 
   // Progress bar variables
@@ -143,8 +64,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private start: any;
   private diff: any;
 
-  // 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
-  public animate = 'rotate';
+  // 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' ;
+  public animate: string;
 
   constructor(private notificationService: NotificationsService,
               private domSanitizer: DomSanitizer,
@@ -153,7 +74,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.animate = this.item.options.animate;
+    this.animate = this.item.options.animate + NotificationAnimationsStatus.In;
 
     if (this.item.options.timeOut !== 0) {
       this.startTimeOut();
@@ -193,10 +114,10 @@ export class NotificationComponent implements OnInit, OnDestroy {
 
   private remove() {
     if (this.animate) {
-      // this.animate = this.animate + 'Out';
+      this.setAnimationOut();
       setTimeout(() => {
         this.notificationService.remove(this.item);
-      }, 310);
+      }, 1000);
     } else {
       this.notificationService.remove(this.item);
     }
@@ -212,7 +133,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
     this[key + 'IsTemplate'] = item instanceof TemplateRef;
   }
 
-  // setAnimationOut() {
-  //   this.animate = this.animate + 'Out';
-  // }
+  setAnimationOut() {
+    this.animate = this.item.options.animate + NotificationAnimationsStatus.Out;
+    this.cdr.detectChanges();
+  }
 }

src/app/shared/notifications/notifications-board/notifications-board.component.html

@@ -2,12 +2,5 @@
   <ds-notification
     *ngFor="let a of notifications; let i = index"
     [item]="a">
-
-    <!--[clickToClose]="clickToClose"-->
-    <!--[clickIconToClose]="clickIconToClose"-->
-    <!--[maxLength]="maxLength"-->
-    <!--[showProgressBar]="showProgressBar"-->
-    <!--[pauseOnHover]="pauseOnHover"-->
-    <!--[theClass]="theClass"-->
   </ds-notification>
 </div>

src/app/shared/notifications/notifications-board/notifications-board.component.ts

@@ -17,6 +17,7 @@ import { difference } from 'lodash';
 import { INotification } from '../models/notification.model';
 import { NotificationsState } from '../notifications.reducers';
 import { INotificationBoardOptions } from '../models/notification-options.model';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'ds-notifications-board',
@@ -27,7 +28,8 @@ import { INotificationBoardOptions } from '../models/notification-options.model'
 })
 export class NotificationsBoardComponent implements OnInit, OnDestroy {
 
-  @Input() set options(opt: INotificationBoardOptions) {
+  @Input()
+  set options(opt: INotificationBoardOptions) {
     this.attachChanges(opt);
   }
 
@@ -37,10 +39,9 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
   public notifications: INotification[] = [];
   public position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'] = ['bottom', 'right'];
 
-  // private listener: Subscription;
-
   // Received values
   private maxStack = 8;
+  private sub: Subscription;
 
   // Sent values
   public rtl = false;
@@ -52,8 +53,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    // this.listener =
-    this.store.select(notificationsStateSelector)
+    this.sub = this.store.select(notificationsStateSelector)
       .subscribe((state: NotificationsState) => {
         if (state.length === 0) {
           this.notifications = [];
@@ -73,7 +73,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
 
           });
         }
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
       });
   }
 
@@ -102,7 +102,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
     });
 
     if (this.notifications.length > 0) {
-        this.notifications.forEach( (notification) => {
+      this.notifications.forEach((notification) => {
         if (toCheck(notification, item)) {
           return true;
         }
@@ -136,8 +136,8 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    // if (this.listener) {
-    //   this.listener.unsubscribe();
-    // }
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
   }
 }