+
+
diff --git a/projects/angular2-notifications/src/lib/components/notification/notification.component.ts b/projects/angular2-notifications/src/lib/components/notification/notification.component.ts
new file mode 100644
index 0000000..8db638a
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/components/notification/notification.component.ts
@@ -0,0 +1,263 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, Input, NgZone, OnDestroy, OnInit, TemplateRef, ViewEncapsulation, ChangeDetectorRef, ViewRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { NotificationAnimationType } from '../../enums/notification-animation-type.enum';
+import { Notification } from '../../interfaces/notification.type';
+import { NotificationsService } from '../../services/notifications.service';
+
+@Component({
+ selector: 'simple-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')
+ ])
+ ])
+ ],
+ templateUrl: './notification.component.html',
+ styleUrls: ['./notification.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class NotificationComponent implements OnInit, OnDestroy {
+
+ @Input() timeOut: number;
+ @Input() showProgressBar: boolean;
+ @Input() pauseOnHover: boolean;
+ @Input() clickToClose: boolean;
+ @Input() clickIconToClose: boolean;
+ @Input() maxLength: number;
+ @Input() theClass: string;
+ @Input() rtl: boolean;
+ @Input() animate: NotificationAnimationType;
+ @Input() position: number;
+ @Input() item: Notification;
+
+
+ // Progress bar variables
+ title: any;
+ content: any;
+
+ titleIsTemplate = false;
+ contentIsTemplate = false;
+ htmlIsTemplate = false;
+
+ progressWidth = 0;
+ safeSvg: SafeHtml;
+ safeInputHtml: SafeHtml;
+
+ private stopTime = false;
+ private timer: any;
+ private framesPerSecond = 40;
+ private sleepTime: number;
+ private startTime: number;
+ private endTime: number;
+ private pauseStart: number;
+
+ private icon: string;
+
+ constructor(
+ private notificationService: NotificationsService,
+ private domSanitizer: DomSanitizer,
+ private cd: ChangeDetectorRef,
+ private zone: NgZone
+ ) {}
+
+ ngOnInit() {
+ if (this.item.override) {
+ this.attachOverrides();
+ }
+
+ if (this.animate) {
+ this.item.state = this.animate;
+ }
+
+ if (this.timeOut !== 0) {
+ this.startTimeOut();
+ }
+
+ this.contentType(this.item.title, 'title');
+ this.contentType(this.item.content, 'content');
+ this.contentType(this.item.html, 'html');
+
+ this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon);
+ this.safeInputHtml = this.domSanitizer.bypassSecurityTrustHtml(this.item.html);
+ }
+
+ ngOnDestroy() {
+ clearTimeout(this.timer);
+ this.cd.detach();
+ }
+
+ startTimeOut(): void {
+ this.sleepTime = 1000 / this.framesPerSecond /* ms */;
+ this.startTime = new Date().getTime();
+ this.endTime = this.startTime + this.timeOut;
+ this.zone.runOutsideAngular(() => this.timer = setTimeout(this.instance, this.sleepTime));
+ }
+
+ onEnter() {
+ if (this.pauseOnHover) {
+ this.stopTime = true;
+ this.pauseStart = new Date().getTime();
+ }
+ }
+
+ onLeave() {
+ if (this.pauseOnHover) {
+ this.stopTime = false;
+ this.startTime += (new Date().getTime() - this.pauseStart);
+ this.endTime += (new Date().getTime() - this.pauseStart);
+ this.zone.runOutsideAngular(() => setTimeout(this.instance, this.sleepTime));
+ }
+ }
+
+ onClick(event: MouseEvent) {
+ this.item.click!.emit(event);
+
+ if (this.clickToClose) {
+ this.remove();
+ }
+ }
+
+ onClickIcon(event: MouseEvent) {
+ this.item.clickIcon!.emit(event);
+
+ if (this.clickIconToClose) {
+ this.remove();
+ }
+ }
+
+ // Attach all the overrides
+ attachOverrides() {
+ Object.keys(this.item.override).forEach(a => {
+ if (this.hasOwnProperty(a)) {
+ (this as any)[a] = this.item.override[a];
+ }
+ });
+ }
+
+ private instance = () => {
+ const now = new Date().getTime();
+
+ if (this.endTime < now) {
+ this.remove();
+ this.item.timeoutEnd!.emit();
+ } else if (!this.stopTime) {
+ if (this.showProgressBar) {
+ // We add this.sleepTime just to have 100% before close
+ this.progressWidth = Math.min((now - this.startTime + this.sleepTime) * 100 / this.timeOut, 100);
+ }
+
+ this.timer = setTimeout(this.instance, this.sleepTime);
+ }
+ this.zone.run(() => {
+ if (!(this.cd as ViewRef).destroyed) {
+ this.cd.detectChanges();
+ }
+ });
+ }
+
+ private remove() {
+ if (this.animate) {
+ this.item.state = this.animate + 'Out';
+ setTimeout(() => {
+ this.notificationService.set(this.item, false);
+ }, 310);
+ } else {
+ this.notificationService.set(this.item, false);
+ }
+ }
+
+ private contentType(item: any, key: string) {
+ if (item instanceof TemplateRef) {
+ this[key] = item;
+ } else {
+ this[key] = this.domSanitizer.bypassSecurityTrustHtml(item);
+ }
+
+ this[key + 'IsTemplate'] = item instanceof TemplateRef;
+ }
+}
diff --git a/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.css b/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.css
new file mode 100644
index 0000000..b4f0d45
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.css
@@ -0,0 +1,43 @@
+.simple-notification-wrapper {
+ position: fixed;
+ width: 300px;
+ z-index: 1000;
+}
+
+.simple-notification-wrapper.left {
+ left: 20px;
+}
+
+.simple-notification-wrapper.top {
+ top: 20px;
+}
+
+.simple-notification-wrapper.right {
+ right: 20px;
+}
+
+.simple-notification-wrapper.bottom {
+ bottom: 20px;
+}
+
+.simple-notification-wrapper.center {
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.simple-notification-wrapper.middle {
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.simple-notification-wrapper.middle.center {
+ transform: translate(-50%, -50%);
+}
+
+@media (max-width: 340px) {
+ .simple-notification-wrapper {
+ width: auto;
+ left: 20px;
+ right: 20px;
+ }
+}
\ No newline at end of file
diff --git a/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.html b/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.html
new file mode 100644
index 0000000..eb2fef5
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.ts b/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.ts
new file mode 100644
index 0000000..a6a5a90
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/components/simple-notifications/simple-notifications.component.ts
@@ -0,0 +1,237 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation, ChangeDetectorRef, ViewRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NotificationAnimationType } from '../../enums/notification-animation-type.enum';
+import { Notification } from '../../interfaces/notification.type';
+import { Options, Position } from '../../interfaces/options.type';
+import { NotificationsService } from '../../services/notifications.service';
+
+@Component({
+ selector: 'simple-notifications',
+ encapsulation: ViewEncapsulation.None,
+ templateUrl: './simple-notifications.component.html',
+ styleUrls: ['./simple-notifications.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SimpleNotificationsComponent implements OnInit, OnDestroy {
+ constructor(
+ private service: NotificationsService,
+ private cd: ChangeDetectorRef
+ ) { }
+
+ @Input() set options(opt: Options) {
+ this.usingComponentOptions = true;
+ this.attachChanges(opt);
+ }
+
+ @Output() create = new EventEmitter();
+ @Output() destroy = new EventEmitter();
+
+ notifications: Notification[] = [];
+ position: Position = ['bottom', 'right'];
+
+ private lastNotificationCreated: Notification;
+ private listener: Subscription;
+
+ // Received values
+ private lastOnBottom = true;
+ private maxStack = 8;
+ private preventLastDuplicates: any = false;
+ private preventDuplicates = false;
+
+ // Sent values
+ timeOut = 0;
+ maxLength = 0;
+ clickToClose = true;
+ clickIconToClose = false;
+ showProgressBar = true;
+ pauseOnHover = true;
+ theClass = '';
+ rtl = false;
+ animate: NotificationAnimationType = NotificationAnimationType.FromRight;
+
+ private usingComponentOptions = false;
+
+ ngOnInit() {
+
+ /**
+ * Only attach global options if config
+ * options were never sent through input
+ */
+ if (!this.usingComponentOptions) {
+ this.attachChanges(
+ this.service.globalOptions
+ );
+ }
+
+ this.listener = this.service.emitter
+ .subscribe(item => {
+ switch (item.command) {
+ case 'cleanAll':
+ this.notifications = [];
+ break;
+
+ case 'clean':
+ this.cleanSingle(item.id!);
+ break;
+
+ case 'set':
+ if (item.add) {
+ this.add(item.notification!);
+ } else {
+ this.defaultBehavior(item);
+ }
+ break;
+
+ default:
+ this.defaultBehavior(item);
+ break;
+ }
+ if (!(this.cd as ViewRef).destroyed) {
+ this.cd.detectChanges();
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ if (this.listener) {
+ this.listener.unsubscribe();
+ }
+ this.cd.detach();
+ }
+
+ // Default behavior on event
+ defaultBehavior(value: any): void {
+ this.notifications.splice(this.notifications.indexOf(value.notification), 1);
+ this.destroy.emit(this.buildEmit(value.notification, false));
+ }
+
+
+ // Add the new notification to the notification array
+ add(item: Notification): void {
+ item.createdOn = new Date();
+
+ const toBlock: boolean = this.preventLastDuplicates || this.preventDuplicates ? this.block(item) : false;
+
+ // Save this as the last created notification
+ this.lastNotificationCreated = item;
+ // Override icon if set
+ if (item.override && item.override.icons && item.override.icons[item.type]) {
+ item.icon = item.override.icons[item.type];
+ }
+
+ if (!toBlock) {
+ // Check if the notification should be added at the start or the end of the array
+ if (this.lastOnBottom) {
+ if (this.notifications.length >= this.maxStack) {
+ this.notifications.splice(0, 1);
+ }
+
+ this.notifications.push(item);
+ } else {
+ if (this.notifications.length >= this.maxStack) {
+ this.notifications.splice(this.notifications.length - 1, 1);
+ }
+
+ this.notifications.splice(0, 0, item);
+ }
+
+ this.create.emit(this.buildEmit(item, true));
+ }
+ }
+
+ // Check if notifications should be prevented
+ block(item: Notification): boolean {
+
+ const toCheck = item.html ? this.checkHtml : this.checkStandard;
+
+ if (this.preventDuplicates && this.notifications.length > 0) {
+ for (const notification of this.notifications) {
+ if (toCheck(notification, item)) {
+ return true;
+ }
+ }
+ }
+
+ if (this.preventLastDuplicates) {
+
+ let comp: Notification;
+
+ if (this.preventLastDuplicates === 'visible' && this.notifications.length > 0) {
+ if (this.lastOnBottom) {
+ comp = this.notifications[this.notifications.length - 1];
+ } else {
+ comp = this.notifications[0];
+ }
+ } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
+ comp = this.lastNotificationCreated;
+ } else {
+ return false;
+ }
+ return toCheck(comp, item);
+ }
+
+ return false;
+ }
+
+ checkStandard(checker: Notification, item: Notification): boolean {
+ return checker.type === item.type && checker.title === item.title && checker.content === item.content;
+ }
+
+ checkHtml(checker: Notification, item: Notification): boolean {
+ return checker.html ?
+ checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html :
+ false;
+ }
+
+ // Attach all the changes received in the options object
+ attachChanges(options: any) {
+ for (const key in options) {
+ if (this.hasOwnProperty(key)) {
+ (this as any)[key] = options[key];
+ } else if (key === 'icons') {
+ this.service.icons = options[key];
+ }
+ }
+ }
+
+ buildEmit(notification: Notification, to: boolean) {
+ const toEmit: Notification = {
+ createdOn: notification.createdOn,
+ type: notification.type,
+ icon: notification.icon,
+ id: notification.id
+ };
+
+ if (notification.html) {
+ toEmit.html = notification.html;
+ } else {
+ toEmit.title = notification.title;
+ toEmit.content = notification.content;
+ }
+
+ if (!to) {
+ toEmit.destroyedOn = new Date();
+ }
+
+ return toEmit;
+ }
+
+ cleanSingle(id: string): void {
+ let indexOfDelete = 0;
+ let doDelete = false;
+ let noti;
+
+ this.notifications.forEach((notification, idx) => {
+ if (notification.id === id) {
+ indexOfDelete = idx;
+ noti = notification;
+ doDelete = true;
+ }
+ });
+
+ if (doDelete) {
+ this.notifications.splice(indexOfDelete, 1);
+ this.destroy.emit(this.buildEmit(noti, false));
+ }
+ }
+}
diff --git a/projects/angular2-notifications/src/lib/consts/default-icons.const.ts b/projects/angular2-notifications/src/lib/consts/default-icons.const.ts
new file mode 100644
index 0000000..3b47472
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/consts/default-icons.const.ts
@@ -0,0 +1,35 @@
+import {Icons} from '../interfaces/icons';
+
+export const DEFAULT_ICONS: Icons = {
+ alert: `
+
+ `,
+ error: `
+
+ `,
+ info: `
+
+ `,
+ success: `
+
+ `,
+ warn: `
+
+ `
+};
diff --git a/projects/angular2-notifications/src/lib/consts/default-options.const.ts b/projects/angular2-notifications/src/lib/consts/default-options.const.ts
new file mode 100644
index 0000000..ec6050b
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/consts/default-options.const.ts
@@ -0,0 +1,21 @@
+import {DEFAULT_ICONS} from './default-icons.const';
+import {Options} from '../interfaces/options.type';
+import {NotificationAnimationType} from '../enums/notification-animation-type.enum';
+
+export const DEFAULT_OPTIONS: Options = {
+ position: ['bottom', 'right'],
+ timeOut: 0,
+ showProgressBar: true,
+ pauseOnHover: true,
+ lastOnBottom: true,
+ clickToClose: true,
+ clickIconToClose: false,
+ maxLength: 0,
+ maxStack: 8,
+ preventDuplicates: false,
+ preventLastDuplicates: false,
+ theClass: '',
+ rtl: false,
+ animate: NotificationAnimationType.FromRight,
+ icons: DEFAULT_ICONS
+};
diff --git a/projects/angular2-notifications/src/lib/enums/notification-animation-type.enum.ts b/projects/angular2-notifications/src/lib/enums/notification-animation-type.enum.ts
new file mode 100644
index 0000000..e0613d1
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/enums/notification-animation-type.enum.ts
@@ -0,0 +1,9 @@
+export enum NotificationAnimationType {
+ Fade = 'fade',
+ FromTop = 'fromTop',
+ FromRight = 'fromRight',
+ FromBottom = 'fromBottom',
+ FromLeft = 'fromLeft',
+ Scale = 'scale',
+ Rotate = 'rotate'
+}
diff --git a/projects/angular2-notifications/src/lib/enums/notification-type.enum.ts b/projects/angular2-notifications/src/lib/enums/notification-type.enum.ts
new file mode 100644
index 0000000..fa6f9e9
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/enums/notification-type.enum.ts
@@ -0,0 +1,8 @@
+export enum NotificationType {
+ Success = 'success',
+ Error = 'error',
+ Alert = 'alert',
+ Info = 'info',
+ Warn = 'warn',
+ Bare = 'bare'
+}
diff --git a/projects/angular2-notifications/src/lib/interfaces/icons.ts b/projects/angular2-notifications/src/lib/interfaces/icons.ts
new file mode 100644
index 0000000..95ee380
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/interfaces/icons.ts
@@ -0,0 +1,7 @@
+export interface Icons {
+ alert: string;
+ error: string;
+ info: string;
+ warn: string;
+ success: string;
+}
diff --git a/projects/angular2-notifications/src/lib/interfaces/notification-event.type.ts b/projects/angular2-notifications/src/lib/interfaces/notification-event.type.ts
new file mode 100644
index 0000000..978cf3d
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/interfaces/notification-event.type.ts
@@ -0,0 +1,8 @@
+import {Notification} from './notification.type';
+
+export interface NotificationEvent {
+ add?: boolean;
+ command: string;
+ id?: string;
+ notification?: Notification;
+}
diff --git a/projects/angular2-notifications/src/lib/interfaces/notification.type.ts b/projects/angular2-notifications/src/lib/interfaces/notification.type.ts
new file mode 100644
index 0000000..7bf455e
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/interfaces/notification.type.ts
@@ -0,0 +1,27 @@
+import {EventEmitter} from '@angular/core';
+import {NotificationType} from '../enums/notification-type.enum';
+import {NotificationAnimationType} from '../enums/notification-animation-type.enum';
+
+export interface Notification {
+ id?: string;
+ type: NotificationType;
+ icon: string;
+ title?: any;
+ content?: any;
+ override?: any;
+ html?: any;
+ state?: string;
+ createdOn?: Date;
+ destroyedOn?: Date;
+ animate?: NotificationAnimationType;
+ timeOut?: number;
+ maxLength?: number;
+ pauseOnHover?: boolean;
+ clickToClose?: boolean;
+ clickIconToClose?: boolean;
+ theClass?: string;
+ click?: EventEmitter<{}>;
+ clickIcon?: EventEmitter<{}>;
+ timeoutEnd?: EventEmitter<{}>;
+ context?: any;
+}
diff --git a/projects/angular2-notifications/src/lib/interfaces/options.type.ts b/projects/angular2-notifications/src/lib/interfaces/options.type.ts
new file mode 100644
index 0000000..9e5c196
--- /dev/null
+++ b/projects/angular2-notifications/src/lib/interfaces/options.type.ts
@@ -0,0 +1,27 @@
+import {Icons} from './icons';
+import {NotificationAnimationType} from '../enums/notification-animation-type.enum';
+
+export type VerticalPosition = 'top' | 'bottom' | 'middle';
+export type HorizontalPosition = 'right' | 'left' | 'center';
+export interface Position extends Array
+
-
-
- `,
- styles: [`
- .notification {
- width: 100%;
- padding: 10px 20px;
- box-sizing: border-box;
- position: relative;
- float: left;
- margin-bottom: 10px;
- color: #fff;
- cursor: pointer;
- transition: all 0.5s;
- }
-
- h3 {
- margin: 0;
- padding: 0;
- line-height: 30px;
- }
-
- p {
- margin: 0;
- padding: 0 50px 0 0;
- line-height: 20px;
- }
-
- .error { background: #ff6b6b; }
- .success { background: #97fc8f; }
- .alert { background: #ffdb5b; }
-
- .progress {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 5px;
- }
-
- .progress span {
- float: left;
- height: 100%;
- }
-
- .success .progress span { background: #70ea62; }
- .error .progress span { background: #e85555; }
- .alert .progress span { background: #edc242; }
- `]
-})
-
-export class NotificationComponent {
- constructor(
- private _service: NotificationsService
- ) {}
-
- ngOnInit() {
- if(this.item.override) this.attachOverrides();
- if(this.timeOut != 0) this.startTimeOut();
- }
-
-
- ////// Inputs
- public item: Notification;
- public maxLength: number;
- public showProgressBar: boolean;
-
- public overrides: any;
- private timeOut: number;
- private position: number;
- private clickToClose: boolean;
- private pauseOnHover: boolean;
-
- ////// Locals
-
- // Progress bar variables
- public progressWidth: number = 0;
- private stopTime: boolean = false;
- private timer: any;
- private steps: number;
- private speed: number;
- private count: number = 0;
- private start: any;
- private diff: any;
-
- private instance = ()=> {
- this.diff = (new Date().getTime() - this.start) - (this.count * this.speed);
- if (this.count++ == this.steps) this._service.set(this.item, false);
- else if(!this.stopTime) {
- if(this.showProgressBar) this.progressWidth += 100/this.steps;
- this.timer = setTimeout(this.instance, (this.speed - this.diff));
- }
- };
-
- startTimeOut() {
- this.steps = this.timeOut/10;
- this.speed = this.timeOut/this.steps;
- this.start = new Date().getTime();
- this.timer = setTimeout(this.instance, this.speed);
- }
-
- onEnter() {
- if(this.pauseOnHover) this.stopTime = true
- }
-
- onLeave() {
- if (this.pauseOnHover) {
- this.stopTime = false;
- setTimeout(this.instance, (this.speed - this.diff));
- }
- }
-
- setPosition() { return this.position != 0 ? this.position*90 : 0; }
- removeSelf() { if(this.clickToClose) this._service.set(this.item, false); }
-
-
- // Attach all the overrides
- attachOverrides() {
- let keys = Object.keys(this.item.override);
- keys.forEach(a=>{
- switch (a) {
- case 'timeOut':
- this.timeOut = this.item.override.timeOut;
- break;
- case 'clickToClose':
- this.clickToClose = this.item.override.clickToClose;
- break;
- case 'maxLength':
- this.maxLength = this.item.override.maxLength;
- break;
- case 'showProgressBar':
- this.showProgressBar = this.item.override.showProgressBar;
- break;
- case 'pauseOnHover':
- this.pauseOnHover = this.item.override.pauseOnHover;
- break;
- default:
- console.error(`no option with the key ${a} exists`);
- break;
- }
- })
- }
-
- ngOnDestroy() { clearTimeout(this.timer) }
-}
\ No newline at end of file
diff --git a/src/notification.ts b/src/notification.ts
deleted file mode 100644
index f32c3bc..0000000
--- a/src/notification.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface Notification {
- id: string,
- type: string,
- createdOn: Date,
- title?: string,
- content?: string,
- override: any
-}
\ No newline at end of file
diff --git a/src/notificationType.ts b/src/notificationType.ts
deleted file mode 100644
index b98e60c..0000000
--- a/src/notificationType.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface NotificationType {
- name: string,
- color: string
-}
\ No newline at end of file
diff --git a/src/notifications.component.ts b/src/notifications.component.ts
deleted file mode 100644
index cdb021c..0000000
--- a/src/notifications.component.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import {Component, OnInit, OnDestroy} from "angular2/core";
-import {Notification} from "./notification";
-import {NotificationsService} from "./notifications.service";
-import {NotificationComponent} from "./notification.component";
-
-
-@Component({
- selector: 'simple-notifications',
- directives: [NotificationComponent],
- inputs: ['options'],
- template: `
- {{item.title}}
-{{item.content | max:maxLength}}
- -
-
-
-
-
-
-
-
-
- `,
- styles: [`
- .notification-wrapper {
- position: fixed;
- bottom: 20px;
- right: 20px;
- width: 300px;
- }
- `]
-})
-
-export class NotificationsComponent {
- constructor(
- private _service: NotificationsService
- ) {}
-
- private listener : any;
- public notifications : Notification[] = [];
-
- // Received values
- private lastOnBottom: boolean = true;
- private maxStack: number = 8;
- public options: any;
-
- // Sent values
- private timeOut: number = 0;
- private maxLength: number = 0;
- private clickToClose: boolean = true;
- private showProgressBar: boolean = false;
- private pauseOnHover: boolean = true;
-
-
- ngOnInit() {
- // Listen for changes in the service
- this.listener = this._service.getChangeEmitter()
- .subscribe(item => {
- if(item == 'clean') this.notifications = [];
- else if(item.add) this.add(item.notification);
- else this.notifications.splice(this.notifications.indexOf(item.notification), 1);
- });
-
- this.attachChanges();
- }
-
-
- // Add the new notification to the notification array
- add(item) {
- item.createdOn = new Date();
- item.id = Math.random().toString(36).substring(3);
-
- // Check if the notification should be added at the start or the end of the array
- if(this.lastOnBottom) {
- if(this.notifications.length >= this.maxStack) this.notifications.splice(0,1);
- this.notifications.push(item);
- } else {
- if(this.notifications.length >= this.maxStack) this.notifications.splice(this.notifications.length - 1, 1);
- this.notifications.splice(0, 0, item);
- }
- }
-
- // Attach all the changes received in the options object
- attachChanges() {
- let keys = Object.keys(this.options);
- keys.forEach(a=>{
- switch (a) {
- case 'lastOnBottom':
- this.lastOnBottom = this.options.lastOnBottom;
- break;
- case 'maxStack':
- this.maxStack = this.options.maxStack;
- break;
- case 'timeOut':
- this.timeOut = this.options.timeOut;
- break;
- case 'clickToClose':
- this.clickToClose = this.options.clickToClose;
- break;
- case 'maxLength':
- this.maxLength = this.options.maxLength;
- break;
- case 'showProgressBar':
- this.showProgressBar = this.options.showProgressBar;
- break;
- case 'pauseOnHover':
- this.pauseOnHover = this.options.pauseOnHover;
- break;
- }
- })
- }
-
- ngOnDestroy() { this.listener.unsubscribe() }
-}
\ No newline at end of file
diff --git a/src/notifications.service.ts b/src/notifications.service.ts
deleted file mode 100644
index a2493d3..0000000
--- a/src/notifications.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Injectable} from "angular2/core";
-import {EventEmitter} from "angular2/core";
-import {Notification} from "./notification";
-
-@Injectable()
-export class NotificationsService {
- public emiter : EventEmitter