diff options
Diffstat (limited to 'src/angular/notifications')
8 files changed, 33 insertions, 37 deletions
diff --git a/src/angular/notifications/container/notifcontainer.component.html.ts b/src/angular/notifications/container/notifcontainer.component.html.ts index df08bb4..4073f47 100644 --- a/src/angular/notifications/container/notifcontainer.component.html.ts +++ b/src/angular/notifications/container/notifcontainer.component.html.ts @@ -1,4 +1,4 @@ -export default ` +export const template = ` <div id="containerid" class="sdc-notification-container ntns"> <sdc-notification *ngFor="let notif of notifications" [notificationSetting]="notif" (destroyComponent)="onDestroyed(notif)" > </sdc-notification> diff --git a/src/angular/notifications/container/notifcontainer.component.ts b/src/angular/notifications/container/notifcontainer.component.ts index a922dc1..d2f7ad1 100644 --- a/src/angular/notifications/container/notifcontainer.component.ts +++ b/src/angular/notifications/container/notifcontainer.component.ts @@ -1,8 +1,7 @@ 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"; +import { template } from "./notifcontainer.component.html"; @Component({ selector: "sdc-notification-container", @@ -14,14 +13,13 @@ export class NotificationContainerComponent implements OnInit { constructor(private notify: NotificationsService) { } - public ngOnInit(){ - this.notify.subscribe( (notif : NotificationSettings) => { + public ngOnInit() { + this.notify.subscribe((notif: NotificationSettings) => { this.notifications.push(notif); }); } - - private onDestroyed = (event : any):void =>{ + 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 index 552f7b0..fbda881 100644 --- a/src/angular/notifications/notification-inner-content-example.component.ts +++ b/src/angular/notifications/notification-inner-content-example.component.ts @@ -14,8 +14,9 @@ import { Component, Input } from "@angular/core"; </div> ` }) + export class InnerNotifContent { - @Input() notifyTitle:string; - @Input() notifyText:string; + @Input() notifyTitle: string; + @Input() notifyText: string; } diff --git a/src/angular/notifications/notification.module.ts b/src/angular/notifications/notification.module.ts index 5891391..4241b5d 100644 --- a/src/angular/notifications/notification.module.ts +++ b/src/angular/notifications/notification.module.ts @@ -4,18 +4,21 @@ 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"; - +import { InnerNotifContent } from "./notification-inner-content-example.component"; @NgModule({ declarations: [ + InnerNotifContent, NotificationComponent, NotificationContainerComponent, ], exports: [ + InnerNotifContent, NotificationComponent, NotificationContainerComponent, ], entryComponents: [ + InnerNotifContent, NotificationComponent, NotificationContainerComponent, ], diff --git a/src/angular/notifications/notification/notification.component.html.ts b/src/angular/notifications/notification/notification.component.html.ts index 450972e..eff98c8 100644 --- a/src/angular/notifications/notification/notification.component.html.ts +++ b/src/angular/notifications/notification/notification.component.html.ts @@ -1,4 +1,4 @@ -export default ` +export const template = ` <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"> diff --git a/src/angular/notifications/notification/notification.component.ts b/src/angular/notifications/notification/notification.component.ts index 476853c..8b89467 100644 --- a/src/angular/notifications/notification/notification.component.ts +++ b/src/angular/notifications/notification/notification.component.ts @@ -1,7 +1,7 @@ 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"; +import { template } from "./notification.component.html"; @Component({ selector: 'sdc-notification', @@ -10,31 +10,31 @@ import template from "./notification.component.html"; export class NotificationComponent implements OnInit { - @Input() notificationSetting:NotificationSettings; + @Input() notificationSetting: NotificationSettings; @Output() destroyComponent = new EventEmitter<any>(); - @ViewChild("dynamicContentContainer", {read: ViewContainerRef}) contentContainer:ViewContainerRef; - private fade: boolean = false; + @ViewChild("dynamicContentContainer", { read: ViewContainerRef }) contentContainer: ViewContainerRef; + public fade: boolean = false; constructor(private createDynamicComponentService: CreateDynamicComponentService) { } public ngOnInit() { - if(this.notificationSetting.hasCustomContent){ + if (this.notificationSetting.hasCustomContent) { this.createDynamicComponentService.insertComponentDynamically(this.notificationSetting.innerComponentType, this.notificationSetting.innerComponentOptions, this.contentContainer); } - if(!this.notificationSetting.sticky){ + if (!this.notificationSetting.sticky) { setTimeout(() => this.fadeOut(), this.notificationSetting.duration); } } - private fadeOut = ():void => { + public fadeOut = (): void => { this.fade = true; } - private destroyMe() { + public destroyMe() { /*Only destroy on fade out, not on entry animation */ - if(this.fade){ + 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 index 28a645c..8c77e20 100644 --- a/src/angular/notifications/services/notifications.service.ts +++ b/src/angular/notifications/services/notifications.service.ts @@ -3,39 +3,33 @@ import { NotificationSettings } from '../utilities/notification.config' import { Subject } from 'rxjs/Subject'; import { Subscription } from 'rxjs/Subscription'; - @Injectable() export class NotificationsService { - notifs : NotificationSettings[] = []; + notifs: NotificationSettings[] = []; - notifQueue : Subject<any> = new Subject<any>(); + notifQueue: Subject<any> = new Subject<any>(); constructor() {} - public push(notif : NotificationSettings):void{ + public push(notif: NotificationSettings): void { - if( this.notifQueue.observers.length > 0 ) { + if ( this.notifQueue.observers.length > 0 ) { this.notifQueue.next(notif); } else { this.notifs.push(notif); } } - - - public getNotifications() : NotificationSettings[] { + public getNotifications(): NotificationSettings[] { return this.notifs; } - - public subscribe(observer): Subscription { - let s:Subscription = this.notifQueue.subscribe(observer); + const 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 index f469b7d..d10ce02 100644 --- a/src/angular/notifications/utilities/notification.config.ts +++ b/src/angular/notifications/utilities/notification.config.ts @@ -1,18 +1,18 @@ import { Type, ComponentRef } from '@angular/core'; export type NotificationType = - "info" | "warn" | "error" | "success"; + "info" | "warning" | "error" | "success"; export class NotificationSettings { - + public type: NotificationType; public notifyText: string; public notifyTitle: string; public sticky: boolean; - public hasCustomContent :boolean; - public duration:number; + public hasCustomContent: boolean; + public duration: number; public innerComponentType: Type<any>; - public innerComponentOptions : 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) { |