summaryrefslogtreecommitdiffstats
path: root/src/angular/notifications
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/notifications')
-rw-r--r--src/angular/notifications/container/notifcontainer.component.html.ts6
-rw-r--r--src/angular/notifications/container/notifcontainer.component.ts31
-rw-r--r--src/angular/notifications/notification-inner-content-example.component.ts21
-rw-r--r--src/angular/notifications/notification.module.ts29
-rw-r--r--src/angular/notifications/notification/notification.component.html.ts19
-rw-r--r--src/angular/notifications/notification/notification.component.ts42
-rw-r--r--src/angular/notifications/services/notifications.service.ts41
-rw-r--r--src/angular/notifications/utilities/notification.config.ts30
8 files changed, 219 insertions, 0 deletions
diff --git a/src/angular/notifications/container/notifcontainer.component.html.ts b/src/angular/notifications/container/notifcontainer.component.html.ts
new file mode 100644
index 0000000..df08bb4
--- /dev/null
+++ b/src/angular/notifications/container/notifcontainer.component.html.ts
@@ -0,0 +1,6 @@
+export default `
+<div id="containerid" class="sdc-notification-container ntns">
+ <sdc-notification *ngFor="let notif of notifications" [notificationSetting]="notif" (destroyComponent)="onDestroyed(notif)" >
+ </sdc-notification>
+</div>
+`;
diff --git a/src/angular/notifications/container/notifcontainer.component.ts b/src/angular/notifications/container/notifcontainer.component.ts
new file mode 100644
index 0000000..a922dc1
--- /dev/null
+++ b/src/angular/notifications/container/notifcontainer.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { NotificationSettings } from "../utilities/notification.config";
+import { NotificationsService } from "../services/notifications.service";
+import template from "./notifcontainer.component.html";
+
+@Component({
+ selector: "sdc-notification-container",
+ template: template
+})
+export class NotificationContainerComponent implements OnInit {
+ notifications: NotificationSettings[] = [];
+
+ constructor(private notify: NotificationsService) {
+ }
+
+ public ngOnInit(){
+ this.notify.subscribe( (notif : NotificationSettings) => {
+ this.notifications.push(notif);
+ });
+ }
+
+
+ private onDestroyed = (event : any):void =>{
+ let index: number = this.notifications.indexOf(event);
+ if (index !== -1) {
+ this.notifications.splice(index, 1);
+ }
+ }
+
+}
diff --git a/src/angular/notifications/notification-inner-content-example.component.ts b/src/angular/notifications/notification-inner-content-example.component.ts
new file mode 100644
index 0000000..552f7b0
--- /dev/null
+++ b/src/angular/notifications/notification-inner-content-example.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: "innernotif-content",
+ template: `
+ <div>
+ <h4>Custom Notification</h4>
+ <div>
+ <span>{{notifyTitle}}</span>
+ </div>
+ <div>
+ <span>{{notifyText}}</span>
+ </div>
+ </div>
+`
+})
+export class InnerNotifContent {
+
+ @Input() notifyTitle:string;
+ @Input() notifyText:string;
+}
diff --git a/src/angular/notifications/notification.module.ts b/src/angular/notifications/notification.module.ts
new file mode 100644
index 0000000..5891391
--- /dev/null
+++ b/src/angular/notifications/notification.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { NotificationComponent } from "./notification/notification.component";
+import { NotificationContainerComponent } from "./container/notifcontainer.component";
+import { NotificationsService } from "./services/notifications.service";
+import { CreateDynamicComponentService } from "../utils/create-dynamic-component.service";
+
+
+@NgModule({
+ declarations: [
+ NotificationComponent,
+ NotificationContainerComponent,
+ ],
+ exports: [
+ NotificationComponent,
+ NotificationContainerComponent,
+ ],
+ entryComponents: [
+ NotificationComponent,
+ NotificationContainerComponent,
+ ],
+ imports: [
+ CommonModule
+ ],
+ providers: [NotificationsService, CreateDynamicComponentService]
+})
+export class NotificationModule {
+
+}
diff --git a/src/angular/notifications/notification/notification.component.html.ts b/src/angular/notifications/notification/notification.component.html.ts
new file mode 100644
index 0000000..450972e
--- /dev/null
+++ b/src/angular/notifications/notification/notification.component.html.ts
@@ -0,0 +1,19 @@
+export default `
+<div class="sdc-notification" (click)="fadeOut()">
+ <div class="sdc-notification__wrapper {{'type-' + notificationSetting.type}}" [class.fade-out__animated]="fade" (animationend)="destroyMe()">
+ <div *ngIf="!notificationSetting.hasCustomContent" class="sdc-notification__content">
+ <div class="sdc-notification__icon" >
+ </div>
+ <div class="sdc-notification__message">
+ <div class="sdc-notification__title">
+ {{notificationSetting.notifyTitle}}
+ </div>
+ <div class="sdc-notification__text" >
+ {{notificationSetting.notifyText}}
+ </div>
+ </div>
+ </div>
+ <div #dynamicContentContainer></div>
+ </div>
+</div>
+`;
diff --git a/src/angular/notifications/notification/notification.component.ts b/src/angular/notifications/notification/notification.component.ts
new file mode 100644
index 0000000..476853c
--- /dev/null
+++ b/src/angular/notifications/notification/notification.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter, OnInit, ViewContainerRef, ViewChild } from "@angular/core";
+import { NotificationSettings } from "../utilities/notification.config";
+import { CreateDynamicComponentService } from "../../utils/create-dynamic-component.service";
+import template from "./notification.component.html";
+
+@Component({
+ selector: 'sdc-notification',
+ template: template
+})
+
+export class NotificationComponent implements OnInit {
+
+ @Input() notificationSetting:NotificationSettings;
+ @Output() destroyComponent = new EventEmitter<any>();
+ @ViewChild("dynamicContentContainer", {read: ViewContainerRef}) contentContainer:ViewContainerRef;
+ private fade: boolean = false;
+
+ constructor(private createDynamicComponentService: CreateDynamicComponentService) {
+ }
+
+ public ngOnInit() {
+ if(this.notificationSetting.hasCustomContent){
+ this.createDynamicComponentService.insertComponentDynamically(this.notificationSetting.innerComponentType, this.notificationSetting.innerComponentOptions, this.contentContainer);
+ }
+
+ if(!this.notificationSetting.sticky){
+ setTimeout(() => this.fadeOut(), this.notificationSetting.duration);
+ }
+ }
+
+ private fadeOut = ():void => {
+ this.fade = true;
+ }
+
+ private destroyMe() {
+ /*Only destroy on fade out, not on entry animation */
+ if(this.fade){
+ this.destroyComponent.emit(this.notificationSetting);
+ }
+ }
+
+}
diff --git a/src/angular/notifications/services/notifications.service.ts b/src/angular/notifications/services/notifications.service.ts
new file mode 100644
index 0000000..28a645c
--- /dev/null
+++ b/src/angular/notifications/services/notifications.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { NotificationSettings } from '../utilities/notification.config'
+import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
+
+
+@Injectable()
+export class NotificationsService {
+
+ notifs : NotificationSettings[] = [];
+
+ notifQueue : Subject<any> = new Subject<any>();
+
+ constructor() {}
+
+ public push(notif : NotificationSettings):void{
+
+ if( this.notifQueue.observers.length > 0 ) {
+ this.notifQueue.next(notif);
+ } else {
+ this.notifs.push(notif);
+ }
+ }
+
+
+
+ public getNotifications() : NotificationSettings[] {
+ return this.notifs;
+ }
+
+
+
+ public subscribe(observer): Subscription {
+ let s:Subscription = this.notifQueue.subscribe(observer);
+ this.notifs.forEach(notif => this.notifQueue.next(notif));
+ this.notifs = [];
+ return s;
+ }
+
+
+}
diff --git a/src/angular/notifications/utilities/notification.config.ts b/src/angular/notifications/utilities/notification.config.ts
new file mode 100644
index 0000000..f469b7d
--- /dev/null
+++ b/src/angular/notifications/utilities/notification.config.ts
@@ -0,0 +1,30 @@
+import { Type, ComponentRef } from '@angular/core';
+
+export type NotificationType =
+ "info" | "warn" | "error" | "success";
+
+export class NotificationSettings {
+
+ public type: NotificationType;
+ public notifyText: string;
+ public notifyTitle: string;
+ public sticky: boolean;
+ public hasCustomContent :boolean;
+ public duration:number;
+ public innerComponentType: Type<any>;
+ public innerComponentOptions : any;
+
+ constructor(type: NotificationType, notifyText: string, notifyTitle: string, duration: number = 10000, sticky: boolean = false, hasCustomContent:boolean = false, innerComponentType?:Type<any>, innerComponentOptions? :any) {
+
+ this.type = type;
+ this.notifyText = notifyText;
+ this.notifyTitle = notifyTitle;
+ this.duration = duration;
+ this.sticky = sticky;
+ this.hasCustomContent = hasCustomContent;
+ this.innerComponentType = innerComponentType;
+ this.innerComponentOptions = innerComponentOptions;
+ }
+
+
+}