hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-14 13:33:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

html hybrid store/static var

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-06 15:45:37 +01:00
parent f61f246f23
commit 74dc5f8067
17 changed files with 229 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/+home-page/home-page.component.html
View File

@@ -5,12 +5,8 @@
</div> </div>
<button (click)="createNotification()">Notify!</button> <button (click)="createNotification()">Notify!</button>
<button (click)="createNotification1()">Notify!</button>
<!--<ds-notifications-board--> <button (click)="createNotification2()">Notify!</button>
<!--[options]="notificationOptions"-->
<!--(onCreate)="notificationCreated($event)"-->
<!--(onDestroy)="notificationDestroyed($event)">-->
<!--</ds-notifications-board>-->
<ng-template #example> <ng-template #example>

63
src/app/+home-page/home-page.component.ts
View File

@@ -1,7 +1,9 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NotificationsService } from '../shared/notifications/notifications.service'; import { NotificationsService } from '../shared/notifications/notifications.service';
import { Options } from '../shared/notifications/interfaces/options.type'; import {
import { NotificationOptions } from '../shared/notifications/models/notification-options.model'; INotificationBoardOptions,
NotificationOptions
} from '../shared/notifications/models/notification-options.model';
@Component({ @Component({
selector: 'ds-home-page', selector: 'ds-home-page',
@@ -9,15 +11,6 @@ import { NotificationOptions } from '../shared/notifications/models/notification
templateUrl: './home-page.component.html' templateUrl: './home-page.component.html'
}) })
export class HomePageComponent { export class HomePageComponent {
public notificationOptions: Options = {
position: ['top', 'right'],
timeOut: 0,
animate: 'fromLeft'
// lastOnBottom: true,
// clickIconToClose: false,
// showProgressBar: true,
};
@ViewChild('example') example: TemplateRef<any>; @ViewChild('example') example: TemplateRef<any>;
constructor(private notificationsService: NotificationsService) { constructor(private notificationsService: NotificationsService) {
@@ -25,24 +18,40 @@ export class HomePageComponent {
createNotification() { createNotification() {
const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!', const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!',
new NotificationOptions(2000, false, 'fromLeft')); new NotificationOptions(10000, false, 'fromLeft', ['bottom', 'left']));
const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!'); // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!'); // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
const n4 = this.notificationsService.danger(this.example); // // const n4 = this.notificationsService.danger(this.example);
console.log('Notifications pushed'); // console.log('Notifications pushed');
console.log(n1); // console.log(n1);
console.log(n2); // console.log(n2);
console.log(n3); // console.log(n3);
console.log(n4); // // console.log(n4);
} }
notificationCreated(event) { createNotification1() {
console.log('Notification created'); const n1 = this.notificationsService.warning('Welcome in DSpace', 'Good choice!',
console.log(event); new NotificationOptions(10000, false, 'fromLeft', ['bottom', 'left']));
// const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
// const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
// // const n4 = this.notificationsService.danger(this.example);
// console.log('Notifications pushed');
// console.log(n1);
// console.log(n2);
// console.log(n3);
// // console.log(n4);
} }
notificationDestroyed() { createNotification2() {
console.log('Notification destroyed'); // const n1 = this.notificationsService.error('Welcome in DSpace', 'Good choice!',
console.log(event); // new NotificationOptions(100000, false, 'fromLeft', ['bottom', 'left']));
// const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
// const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
const n4 = this.notificationsService.html(this.example);
// console.log('Notifications pushed');
// console.log(n1);
// console.log(n2);
// console.log(n3);
// // console.log(n4);
} }
} }

2
src/app/app.component.html
View File

@@ -3,7 +3,7 @@
<ds-header></ds-header> <ds-header></ds-header>
<ds-notifications-board <ds-notifications-board
[options]="notificationOptions" [options]="boardOptions"
(onCreate)="notificationCreated($event)" (onCreate)="notificationCreated($event)"
(onDestroy)="notificationDestroyed($event)"> (onDestroy)="notificationDestroyed($event)">
</ds-notifications-board> </ds-notifications-board>

32
src/app/app.component.ts
View File

@@ -1,11 +1,4 @@
import { import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit, ViewEncapsulation } from '@angular/core';
ChangeDetectionStrategy,
Component,
HostListener,
Inject,
OnInit,
ViewEncapsulation
} from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@@ -17,7 +10,7 @@ import { MetadataService } from './core/metadata/metadata.service';
import { HostWindowResizeAction } from './shared/host-window.actions'; import { HostWindowResizeAction } from './shared/host-window.actions';
import { HostWindowState } from './shared/host-window.reducer'; import { HostWindowState } from './shared/host-window.reducer';
import { NativeWindowRef, NativeWindowService } from './shared/window.service'; import { NativeWindowRef, NativeWindowService } from './shared/window.service';
import { Options } from './shared/notifications/interfaces/options.type'; import { INotificationBoardOptions } from './shared/notifications/models/notification-options.model';
@Component({ @Component({
selector: 'ds-app', selector: 'ds-app',
@@ -28,13 +21,10 @@ import { Options } from './shared/notifications/interfaces/options.type';
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
public notificationOptions: Options = { public boardOptions: INotificationBoardOptions = {
position: ['top', 'right'], position: ['top', 'right'],
timeOut: 0, maxStack: 5,
animate: 'fromLeft' rtl: false
// lastOnBottom: true,
// clickIconToClose: false,
// showProgressBar: true,
}; };
notificationCreated(event) { notificationCreated(event) {
@@ -47,13 +37,11 @@ export class AppComponent implements OnInit {
console.log(event); console.log(event);
} }
constructor( constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
@Inject(GLOBAL_CONFIG) public config: GlobalConfig, @Inject(NativeWindowService) private _window: NativeWindowRef,
@Inject(NativeWindowService) private _window: NativeWindowRef, private translate: TranslateService,
private translate: TranslateService, private store: Store<HostWindowState>,
private store: Store<HostWindowState>, private metadata: MetadataService) {
private metadata: MetadataService
) {
// this language will be used as a fallback when a translation isn't found in the current language // this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en'); translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them // the lang to use, if the lang isn't available, it will use the current loader to get them

41
src/app/shared/notifications/interfaces/icons.ts
View File

@@ -1,41 +0,0 @@
export interface Icons {
alert: string;
error: string;
info: string;
warn: string;
success: string;
}
export const defaultIcons: Icons = {
alert: `
<svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
</svg>
`,
error: `
<svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
</svg>
`,
info: `
<svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
</svg>
`,
success: `
<svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
`,
warn: `
<svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="64" viewBox="0 0 64 64" height="64">
<circle cx="32.086" cy="50.142" r="2.256"/>
<path d="M30.08 25.012V42.32c0 1.107.897 2.005 2.006 2.005s2.006-.897 2.006-2.005V25.012c0-1.107-.897-2.006-2.006-2.006s-2.006.898-2.006 2.006z"/>
<path d="M63.766 59.234L33.856 3.082c-.697-1.308-2.844-1.308-3.54 0L.407 59.234c-.331.622-.312 1.372.051 1.975.362.605 1.015.975 1.72.975h59.816c.705 0 1.357-.369 1.721-.975.361-.603.381-1.353.051-1.975zM5.519 58.172L32.086 8.291l26.568 49.881H5.519z"/>
</svg>
`
};

8
src/app/shared/notifications/interfaces/notification-event.type.ts
View File

@@ -1,8 +0,0 @@
import {Notification} from './notification.type';
export interface NotificationEvent {
add?: boolean;
command: string;
id?: string;
notification?: Notification;
}

24
src/app/shared/notifications/interfaces/notification.type.ts
View File

@@ -1,24 +0,0 @@
import {EventEmitter} from '@angular/core';
export interface Notification {
id?: string
type: string
icon?: string
title?: any
content?: any
override?: any
html?: any
state?: string
createdOn?: Date
destroyedOn?: Date
animate?: string
timeOut?: number
maxLength?: number
pauseOnHover?: boolean
clickToClose?: boolean
clickIconToClose?: boolean
theClass?: string
click?: EventEmitter<{}>;
clickIcon?: EventEmitter<{}>;
timeoutEnd?: EventEmitter<{}>;
}

19
src/app/shared/notifications/interfaces/options.type.ts
View File

@@ -1,19 +0,0 @@
import {Icons} from './icons';
export interface Options {
timeOut?: number;
// showProgressBar?: boolean;
// pauseOnHover?: boolean;
// lastOnBottom?: boolean;
// clickToClose?: boolean;
// clickIconToClose?: boolean;
maxLength?: number;
maxStack?: number;
// preventDuplicates?: boolean;
// preventLastDuplicates?: boolean | string;
theClass?: string;
rtl?: boolean;
animate?: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale';
icons?: Icons;
position?: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
}

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

@@ -26,3 +26,10 @@ export class NotificationOptions implements INotificationOptions {
this.rtl = rtl; this.rtl = rtl;
} }
} }
export interface INotificationBoardOptions {
rtl: boolean;
position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
maxStack: number;
maxLength?: number;
}

9
src/app/shared/notifications/models/notification-type.ts
View File

@@ -1,8 +1,7 @@
export enum NotificationType { export enum NotificationType {
Success = 'success', Success = 'alert-success',
Error = 'error', Error = 'alert-danger',
Danger = 'danger', Info = 'alert-info',
Info = 'info', Warning = 'alert-warning',
Warning = 'warning',
// Bare = 'bare' // Bare = 'bare'
} }

15
src/app/shared/notifications/models/notification.model.ts
View File

@@ -1,6 +1,10 @@
import { INotificationOptions, NotificationOptions } from './notification-options.model'; import { INotificationOptions, NotificationOptions } from './notification-options.model';
import { NotificationType } from './notification-type'; import { NotificationType } from './notification-type';
import { isEmpty } from '../../empty.util'; import { isEmpty } from '../../empty.util';
import { ElementRef, TemplateRef } from '@angular/core';
import { Deserialize, Serialize, serialize } from 'cerialize';
import { deserialize } from 'cerialize';
import { NotificationsService } from '../notifications.service';
export interface INotification { export interface INotification {
id: string id: string
@@ -17,7 +21,6 @@ export class Notification implements INotification {
public title: any; public title: any;
public content: any; public content: any;
public options: INotificationOptions; public options: INotificationOptions;
public html?: any;
constructor(id: string, constructor(id: string,
type: NotificationType, type: NotificationType,
@@ -31,4 +34,14 @@ export class Notification implements INotification {
this.content = content; this.content = content;
this.options = isEmpty(options) ? new NotificationOptions() : options; this.options = isEmpty(options) ? new NotificationOptions() : options;
} }
get html() {
if (this.title === '' && this.content === '') {
return NotificationsService.htmlArray.get(this.id);
} else {
return null;
}
}
} }

44
src/app/shared/notifications/notification/notification.component.html
View File

@@ -1,32 +1,18 @@
<!--<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>--> <div class="alert {{item.type}}" role="alert"
<div class="icon"><i [@enterLeave]="animate"
[ngClass]="{'fa': true, [ngClass]="{
'fa-check': item.type == 'success', 'rtl-mode': rtl
'fa-times-circle': item.type == 'danger', }" >
'fa-exclamation-triangle': item.type == 'warning',
'fa-info': item.type == 'info' <div class="icon"><i
[ngClass]="{'fa fa-2x': true,
'fa-check': item.type == 'alert-success',
'fa-times-circle': item.type == 'alert-danger',
'fa-exclamation-triangle': item.type == 'alert-warning',
'fa-info': item.type == 'alert-info'
}"></i></div> }"></i></div>
<div class="close"><i class="fa fa-times" (click)="remove()"></i></div> <div class="close" (click)="remove()"><i class="fa fa-times"></i></div>
<div class="alert" role="alert"
[@enterLeave]="item.state"
(click)="onClick($event)"
[class]="theClass"
[ngClass]="{
'alert-success': item.type == 'success',
'alert-info': item.type == 'info',
'alert-warning': item.type == 'warning',
'alert-danger': item.type == 'danger',
'alert-error': item.type == 'error',
'rtl-mode': rtl,
'has-icon': item.icon !== 'bare'
}"
(mouseenter)="onEnter()"
(mouseleave)="onLeave()">
@@ -55,12 +41,16 @@
<div *ngIf="item.html"> <div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="item.html"></ng-container>
</div>
<ng-template #regularHtml> <ng-template #regularHtml>
<div class="sn-content" [innerHTML]="item.html"></div> <div class="sn-content" [innerHTML]="item.html"></div>
</ng-template> </ng-template>
</div> </div>
<div class="sn-progress-loader" *ngIf="showProgressBar"> <div class="sn-progress-loader" *ngIf="showProgressBar">

149
src/app/shared/notifications/notification/notification.component.scss
View File

@@ -1,142 +1,33 @@
//.simple-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;
// min-height: 70px;
//}
//
//.simple-notification .sn-title,
//.simple-notification .sn-content,
//.simple-notification .sn-html {
// margin: 0;
//}
//
//.simple-notification .sn-title {
// line-height: 30px;
// font-size: 20px;
//}
//
//.simple-notification .sn-content {
// font-size: 16px;
// line-height: 20px;
//}
//
//.simple-notification.has-icon .sn-title,
//.simple-notification.has-icon .sn-content,
//.simple-notification.has-icon .sn-html {
// padding: 0 50px 0 0;
//}
//
//.simple-notification {
// position: absolute;
// box-sizing: border-box;
// top: 0;
// right: 0;
// width: 70px;
// height: 70px;
// padding: 10px;
//}
//
//.simple-notification .icon.icon-hover:hover {
// opacity: 0.5;
//}
//
//.simple-notification .icon svg {
// fill: #fff;
// width: 100%;
// height: 100%;
//}
//
//.simple-notification .icon svg g {
// fill: #fff;
//}
//
//.simple-notification.rtl-mode.has-icon .sn-title,
//.simple-notification.rtl-mode.has-icon .sn-content,
//.simple-notification.rtl-mode.has-icon .sn-html {
// padding: 0 0 0 50px;
//}
//
//.simple-notification.rtl-mode {
// direction: rtl;
//}
//
//.simple-notification.rtl-mode .sn-content {
// padding: 0 0 0 50px;
//}
//
//.simple-notification.rtl-mode svg {
// left: 0;
// right: auto;
//}
.simple-notification.error { background: #F44336; }
.simple-notification.success { background: #8BC34A; }
.simple-notification.alert { background: #ffdb5b; }
.simple-notification.info { background: #03A9F4; }
.simple-notification.warn { background: #ffdb5b; }
//.simple-notification .sn-progress-loader {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 5px;
//}
//
//.simple-notification .sn-progress-loader span {
// float: left;
// height: 100%;
//}
.simple-notification.success .sn-progress-loader span { background: #689F38; }
.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
.simple-notification.alert .sn-progress-loader span { background: #edc242; }
.simple-notification.info .sn-progress-loader span { background: #0288D1; }
.simple-notification.warn .sn-progress-loader span { background: #edc242; }
.simple-notification.bare .sn-progress-loader span { background: #ccc; }
//.simple-notification.warn div .sn-title,
//.simple-notification.warn div .sn-content,
//.simple-notification.warn div .sn-html { color: #444; }
.close { .close {
float: right; float: right;
padding-right: 5px; margin-right: -15px;
color: darkslategray; margin-top: -10px;
} }
.icon { .icon {
float: left; float: left;
margin-left: -10px;
padding: 5px; padding: 5px;
color: darkslategray;
} }
//
//.icon > fa-times-circle {
// color: red;
//}
//
//.icon > fa-exclamation-triangle {
// color: orange;
//}
//
//.icon > fa-info {
// color: white;
//}
//
//.icon > fa-check {
// color: forestgreen;
//}
.sn-title, .sn-content, .sn-html { .sn-title, .sn-content, .sn-html {
position: relative; position: relative;
left: 20px; left: 20px;
} }
//.simple-notification.error { background: #F44336; }
//.simple-notification.success { background: #8BC34A; }
//.simple-notification.alert { background: #ffdb5b; }
//.simple-notification.info { background: #03A9F4; }
//.simple-notification.warn { background: #ffdb5b; }
//
//.simple-notification.success .sn-progress-loader span { background: #689F38; }
//.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
//.simple-notification.alert .sn-progress-loader span { background: #edc242; }
//.simple-notification.info .sn-progress-loader span { background: #0288D1; }
//.simple-notification.warn .sn-progress-loader span { background: #edc242; }
//.simple-notification.bare .sn-progress-loader span { background: #ccc; }
//.simple-notification.warn div .sn-title,
//.simple-notification.warn div .sn-content,
//.simple-notification.warn div .sn-html { color: #444; }

92
src/app/shared/notifications/notification/notification.component.ts
View File

@@ -1,4 +1,5 @@
import { import {
AfterViewInit,
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
Component, Component,
@@ -112,38 +113,40 @@ import { INotification } from '../models/notification.model';
export class NotificationComponent implements OnInit, OnDestroy { export class NotificationComponent implements OnInit, OnDestroy {
@Input() public timeOut: number; // @Input() public timeOut: number;
// @Input() public showProgressBar: boolean; // @Input() public showProgressBar: boolean;
// @Input() public pauseOnHover: boolean; // @Input() public pauseOnHover: boolean;
// @Input() public clickToClose: boolean; // @Input() public clickToClose: boolean;
// @Input() public clickIconToClose: boolean; // @Input() public clickIconToClose: boolean;
// @Input() public maxLength: number; // @Input() public maxLength: number;
// @Input() public theClass: string; // @Input() public theClass: string;
@Input() public rtl: boolean; // @Input() public rtl: boolean;
@Input() public animate: string; // @Input() public animate: string;
@Input() public position: number; // @Input() public position: number;
@Input() public item: INotification; @Input() public item: INotification;
// Progress bar variables // Progress bar variables
public title: any; public title: any;
public content: any; public content: any;
public html: any;
public titleIsTemplate = false; public titleIsTemplate = false;
public contentIsTemplate = false; public contentIsTemplate = false;
public htmlIsTemplate = false; public htmlIsTemplate = false;
public progressWidth = 0; // public progressWidth = 0;
public safeSvg: SafeHtml;
private stopTime = false; private stopTime = false;
private timer: any; private timer: any;
private steps: number; private steps: number;
private speed: number; private speed: number;
private count = 0; private count = 0;
private start: any;
private start: any;
private diff: any; private diff: any;
private icon: string;
// 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
public animate = 'rotate';
constructor(private notificationService: NotificationsService, constructor(private notificationService: NotificationsService,
private domSanitizer: DomSanitizer, private domSanitizer: DomSanitizer,
@@ -152,70 +155,24 @@ export class NotificationComponent implements OnInit, OnDestroy {
} }
ngOnInit(): void { ngOnInit(): void {
// if (this.item.override) { this.animate = this.item.options.animate;
// this.attachOverrides();
// }
//
// if (this.animate) {
// this.item.state = this.animate;
// }
if (this.timeOut !== 0) { if (this.item.options.timeOut !== 0) {
this.startTimeOut(); this.startTimeOut();
} }
this.contentType(this.item.title, 'title'); this.contentType(this.item.title, 'title');
this.contentType(this.item.content, 'content'); this.contentType(this.item.content, 'content');
this.contentType(this.item.html, 'html'); this.contentType(this.item.html, 'html');
// this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon);
} }
startTimeOut(): void { startTimeOut(): void {
this.steps = this.timeOut / 10; this.steps = this.item.options.timeOut / 10;
this.speed = this.timeOut / this.steps; this.speed = this.item.options.timeOut / this.steps;
this.start = new Date().getTime(); this.start = new Date().getTime();
this.zone.runOutsideAngular(() => this.timer = setTimeout(this.instance, this.speed)); this.zone.runOutsideAngular(() => this.timer = setTimeout(this.instance, this.speed));
} }
onEnter(): void {
// if (this.pauseOnHover) {
// this.stopTime = true;
// }
}
onLeave(): void {
// if (this.pauseOnHover) {
// this.stopTime = false;
// this.zone.runOutsideAngular(() => setTimeout(this.instance, (this.speed - this.diff)));
// }
}
// onClick($e: MouseEvent): void {
// this.item.click!.emit($e);
//
// // if (this.clickToClose) {
// // this.remove();
// // }
// }
// onClickIcon($e: MouseEvent): void {
// this.item.clickIcon!.emit($e);
//
// // if (this.clickIconToClose) {
// // this.remove();
// // }
// }
// Attach all the overrides
// attachOverrides(): void {
// Object.keys(this.item.override).forEach((a) => {
// if (this.hasOwnProperty(a)) {
// (this as any)[a] = this.item.override[a];
// }
// });
// }
ngOnDestroy(): void { ngOnDestroy(): void {
clearTimeout(this.timer); clearTimeout(this.timer);
} }
@@ -237,17 +194,14 @@ export class NotificationComponent implements OnInit, OnDestroy {
}; };
private remove() { private remove() {
// if (this.animate) { if (this.animate) {
// this.item.state = this.animate + 'Out'; this.animate = this.animate + 'Out';
// setTimeout(() => { setTimeout(() => {
// this.notificationService.set(this.item, false); this.notificationService.remove(this.item);
// }, 310); }, 310);
// } else { } else {
// this.notificationService.set(this.item, false); this.notificationService.remove(this.item);
// } }
// this.notificationService.set(this.item, false);
this.notificationService.remove(this.item);
} }
private contentType(item: any, key: string) { private contentType(item: any, key: string) {

6
src/app/shared/notifications/notifications-board/notifications-board.component.html
View File

@@ -1,11 +1,7 @@
<div class="simple-notification-wrapper" [ngClass]="position"> <div class="simple-notification-wrapper" [ngClass]="position">
<ds-notification <ds-notification
*ngFor="let a of notifications; let i = index" *ngFor="let a of notifications; let i = index"
[item]="a" [item]="a">
[timeOut]="timeOut"
[rtl]="rtl"
[animate]="animate"
[position]="i">
<!--[clickToClose]="clickToClose"--> <!--[clickToClose]="clickToClose"-->
<!--[clickIconToClose]="clickIconToClose"--> <!--[clickIconToClose]="clickIconToClose"-->

243
src/app/shared/notifications/notifications-board/notifications-board.component.ts
View File

@@ -1,15 +1,22 @@
import { import {
Component, EventEmitter, OnInit, OnDestroy, ViewEncapsulation, Input, Output, ChangeDetectionStrategy,
ChangeDetectionStrategy, ChangeDetectorRef ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewEncapsulation
} from '@angular/core'; } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Options } from '../interfaces/options.type';
import { Notification } from '../interfaces/notification.type';
import { NotificationsService } from '../notifications.service'; import { NotificationsService } from '../notifications.service';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { NotificationsActions, NotificationsActionTypes } from '../notifications.actions';
import { notificationsReducer } from '../notifications.reducers';
import { AppState } from '../../../app.reducer'; import { AppState } from '../../../app.reducer';
import { notificationsStateSelector } from '../selectors';
import { difference } from 'lodash';
import { INotification } from '../models/notification.model';
import { NotificationsState } from '../notifications.reducers';
import { INotificationBoardOptions } from '../models/notification-options.model';
@Component({ @Component({
selector: 'ds-notifications-board', selector: 'ds-notifications-board',
@@ -20,33 +27,22 @@ import { AppState } from '../../../app.reducer';
}) })
export class NotificationsBoardComponent implements OnInit, OnDestroy { export class NotificationsBoardComponent implements OnInit, OnDestroy {
@Input() set options(opt: Options) { @Input() set options(opt: INotificationBoardOptions) {
this.attachChanges(opt); this.attachChanges(opt);
} }
@Output() onCreate = new EventEmitter(); @Output() onCreate = new EventEmitter();
@Output() onDestroy = new EventEmitter(); @Output() onDestroy = new EventEmitter();
public notifications: Notification[] = []; public notifications: INotification[] = [];
public position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'] = ['bottom', 'right']; public position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'] = ['bottom', 'right'];
private lastNotificationCreated: Notification; // private listener: Subscription;
private listener: Subscription;
// Received values // Received values
private lastOnBottom = false;
private maxStack = 8; private maxStack = 8;
// private preventLastDuplicates: any = true;
// private preventDuplicates = true;
// Sent values // Sent values
public timeOut = 0;
// public maxLength = 0;
// public clickToClose = true;
// public clickIconToClose = false;
// public showProgressBar = true;
// public pauseOnHover = true;
// public theClass = '';
public rtl = false; public rtl = false;
public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight'; public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
@@ -56,105 +52,56 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
} }
ngOnInit(): void { ngOnInit(): void {
this.listener = this.store.select() // this.listener =
(action: NotificationsActions) => { this.store.select(notificationsStateSelector)
notificationsReducer(this.notifications, action); .subscribe((state: NotificationsState) => {
if (state.length === 0) {
this.notifications = [];
} else if (state.length > this.notifications.length) {
// Add
const newElem = difference(state, this.notifications);
console.log('new Elements #', newElem.length);
// switch (action.type) { newElem.forEach((notification) => {
// case NotificationsActionTypes.NEW_NOTIFICATION: this.add(notification);
// });
// break; } else {
// case NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER: // Remove
// const delElem = difference(this.notifications, state);
// break; delElem.forEach((notification) => {
// case NotificationsActionTypes.REMOVE_NOTIFICATION: this.notifications = this.notifications.filter((item: INotification) => item.id !== notification.id);
//
// break; });
// case NotificationsActionTypes.REMOVE_ALL_NOTIFICATIONS: }
//
// break; console.log(this.notifications);
// } this.cdr.markForCheck();
}); });
// Listen for changes in the service
// this.listener = this.service.emitter
// .subscribe((item) => { // Subscribe a stato di redux
// 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;
// }
//
// this.cdr.markForCheck();
// });
}
// Default behavior on event
defaultBehavior(value: any): void {
this.notifications.splice(this.notifications.indexOf(value.notification), 1);
this.onDestroy.emit(this.buildEmit(value.notification, false));
} }
// Add the new notification to the notification array // Add the new notification to the notification array
add(item: Notification): void { add(item: INotification): void {
item.createdOn = new Date(); const toBlock: boolean = this.block(item);
if (!toBlock) {
// const toBlock: boolean = this.preventLastDuplicates || this.preventDuplicates ? this.block(item) : false; if (this.notifications.length >= this.maxStack) {
this.notifications.splice(this.notifications.length - 1, 1);
// Save this as the last created notification }
this.lastNotificationCreated = item; this.notifications.splice(0, 0, 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.onCreate.emit(this.buildEmit(item, true));
// }
} }
// Check if notifications should be prevented //
block(item: Notification): boolean { // // Check if notifications should be prevented
block(item: INotification): boolean {
const toCheck = item.html ? this.checkHtml : this.checkStandard;
this.notifications.forEach((notification) => {
if (toCheck(notification, item)) {
return true;
}
});
// const toCheck = item.html ? this.checkHtml : this.checkStandard;
//
// this.notifications.forEach((notification) => {
// if (toCheck(notification, item)) {
// return true;
// }
// });
//
// if (this.notifications.length > 0) { // if (this.notifications.length > 0) {
// for (let i = 0; i < this.notifications.length; i++) { // for (let i = 0; i < this.notifications.length; i++) {
// if (toCheck(this.notifications[i], item)) { // if (toCheck(this.notifications[i], item)) {
@@ -163,32 +110,33 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
// } // }
// } // }
// //
// if (this.preventLastDuplicates) { // // if (this.preventLastDuplicates) {
// //
// let comp: Notification; // let comp: Notification;
// //
// if (this.preventLastDuplicates === 'visible' && this.notifications.length > 0) { // if ( this.notifications.length > 0) {
// if (this.lastOnBottom) { // // if (this.lastOnBottom) {
// comp = this.notifications[this.notifications.length - 1]; // // comp = this.notifications[this.notifications.length - 1];
// } else { // // }
// // else {
// comp = this.notifications[0]; // comp = this.notifications[0];
// } // // }
// } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) { // // } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
// comp = this.lastNotificationCreated; // // comp = this.lastNotificationCreated;
// } else { // } else {
// return false; // return false;
// } // }
// return toCheck(comp, item); // return toCheck(comp, item);
// } // // }
//
return false; return false;
} }
checkStandard(checker: Notification, item: Notification): boolean { checkStandard(checker: INotification, item: INotification): boolean {
return checker.type === item.type && checker.title === item.title && checker.content === item.content; return checker.type === item.type && checker.title === item.title && checker.content === item.content;
} }
checkHtml(checker: Notification, item: Notification): boolean { checkHtml(checker: INotification, item: INotification): boolean {
return checker.html ? checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html : false; return checker.html ? checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html : false;
} }
@@ -197,56 +145,13 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
Object.keys(options).forEach((a) => { Object.keys(options).forEach((a) => {
if (this.hasOwnProperty(a)) { if (this.hasOwnProperty(a)) {
(this as any)[a] = options[a]; (this as any)[a] = options[a];
} else if (a === 'icons') {
// this.service.icons = options[a];
} }
}); });
} }
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.onDestroy.emit(this.buildEmit(noti, false));
}
}
ngOnDestroy(): void { ngOnDestroy(): void {
if (this.listener) { // if (this.listener) {
this.listener.unsubscribe(); // this.listener.unsubscribe();
} // }
} }
} }

74
src/app/shared/notifications/notifications.service.ts
View File

@@ -1,35 +1,30 @@
import { Injectable, EventEmitter } from '@angular/core'; import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { NotificationEvent } from './interfaces/notification-event.type';
import { INotification, Notification } from './models/notification.model'; import { INotification, Notification } from './models/notification.model';
// import {Icons, defaultIcons} from './interfaces/icons'; // import {Icons, defaultIcons} from './interfaces/icons';
import { NotificationType } from './models/notification-type'; import { NotificationType } from './models/notification-type';
import { NotificationOptions } from './models/notification-options.model'; import { NotificationOptions } from './models/notification-options.model';
import * as _ from 'lodash'; import { uniqueId } from 'lodash';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { import {
NewNotificationAction, NewNotificationWithTimerAction, RemoveAllNotificationsAction, NewNotificationAction,
NewNotificationWithTimerAction,
RemoveAllNotificationsAction,
RemoveNotificationAction RemoveNotificationAction
} from './notifications.actions'; } from './notifications.actions';
import { DomSanitizer } from '@angular/platform-browser';
@Injectable() @Injectable()
export class NotificationsService { export class NotificationsService {
public static htmlArray = new Map<string, any>();
// public emitter = new Subject<NotificationEvent>(); // public emitter = new Subject<NotificationEvent>();
// public icons: Icons = defaultIcons; // public icons: Icons = defaultIcons;
constructor(private store: Store<Notification>) { constructor(private store: Store<Notification>,
private domSanitizer: DomSanitizer,) {
} }
// private set(notification: Notification, to: boolean): Notification {
// notification.id = notification.override && notification.override.id ? notification.override.id : Math.random().toString(36).substring(3);
// notification.click = new EventEmitter<{}>();
// notification.timeoutEnd = new EventEmitter<{}>();
//
// this.emitter.next({command: 'set', notification: notification, add: to});
// return notification;
// };
private add(notification: Notification) { private add(notification: Notification) {
let notificationAction; let notificationAction;
if (notification.options.timeOut > 0) { if (notification.options.timeOut > 0) {
@@ -41,75 +36,46 @@ export class NotificationsService {
} }
success(title: any = '', content: any = '', options = new NotificationOptions()): Notification { success(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), NotificationType.Success, title, content, options); const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options);
this.add(notification); this.add(notification);
return notification; return notification;
} }
// error(title: any = '', content: any = '', override?: any): Notification { error(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
// return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true); const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options);
// }
danger(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), NotificationType.Danger, title, content, options);
this.add(notification); this.add(notification);
return notification; return notification;
} }
info(title: any = '', content: any = '', options = new NotificationOptions()): Notification { info(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), NotificationType.Info, title, content, options); const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options);
this.add(notification); this.add(notification);
return notification; return notification;
} }
warning(title: any = '', content: any = '', options = new NotificationOptions()): Notification { warning(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), NotificationType.Warning, title, content, options); const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options);
this.add(notification); this.add(notification);
return notification; return notification;
} }
// bare(title: any = '', content: any = '', override?: any): Notification {
// return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
// }
// With type method
// create(title: any = '', content: any = '', type = 'success'): Notification {
// return this.set({
// title: title,
// content: content,
// type: type,
// icon: (this.icons as any)[type],
// override: override
// }, true);
// }
// HTML Notification method
// html(html: any, type = 'success', override?: any, icon = 'bare'): Notification {
// return this.set({html: html, type: type, icon: (this.icons as any)[icon], override: override}, true);
// }
html(html: any, type = NotificationType.Success, options = new NotificationOptions()): Notification { html(html: any, type = NotificationType.Success, options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), type, null, null, options); const notification = new Notification(uniqueId(), type, '', '', options);
notification.html = html; NotificationsService.htmlArray.set(notification.id, html);
// notification.html = true;
this.add(notification); this.add(notification);
return notification; return notification;
} }
// Remove all notifications method
// remove(id?: string): void {
// if (id) {
// this.emitter.next({command: 'clean', id: id});
// } else {
// this.emitter.next({command: 'cleanAll'});
// }
// }
remove(notification: INotification) { remove(notification: INotification) {
const actionRemove = new RemoveNotificationAction(notification.id); const actionRemove = new RemoveNotificationAction(notification.id);
NotificationsService.htmlArray.delete(notification.id);
this.store.dispatch(actionRemove); this.store.dispatch(actionRemove);
} }
removeAll() { removeAll() {
const actionRemoveAll = new RemoveAllNotificationsAction(); const actionRemoveAll = new RemoveAllNotificationsAction();
NotificationsService.htmlArray.clear();
this.store.dispatch(actionRemoveAll); this.store.dispatch(actionRemoveAll);
} }