forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 2
/
notification.component.ts
70 lines (62 loc) · 2.15 KB
/
notification.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { animate, state, style, trigger, transition } from '@angular/animations';
import { Component, EventEmitter, HostBinding, Inject, Input, OnInit, Output } from '@angular/core';
import { CurrentDateToken } from 'app/shared/current-date';
import { WindowToken } from 'app/shared/window';
const LOCAL_STORAGE_NAMESPACE = 'aio-notification/';
@Component({
selector: 'aio-notification',
templateUrl: 'notification.component.html',
animations: [
trigger('hideAnimation', [
state('show', style({height: '*'})),
state('hide', style({height: 0})),
// this should be kept in sync with the animation durations in:
// - aio/src/styles/2-modules/_notification.scss
// - aio/src/app/app.component.ts : notificationDismissed()
transition('show => hide', animate(250))
])
]
})
export class NotificationComponent implements OnInit {
private storage: Storage;
@Input() dismissOnContentClick: boolean;
@Input() notificationId: string;
@Input() expirationDate: string;
@Output() dismissed = new EventEmitter();
@HostBinding('@hideAnimation')
showNotification: 'show'|'hide';
constructor(
@Inject(WindowToken) window: Window,
@Inject(CurrentDateToken) private currentDate: Date
) {
try {
this.storage = window.localStorage;
} catch {
// When cookies are disabled in the browser, even trying to access
// `window.localStorage` throws an error. Use a no-op storage.
this.storage = {
length: 0,
clear: () => undefined,
getItem: () => null,
key: () => null,
removeItem: () => undefined,
setItem: () => undefined
};
}
}
ngOnInit() {
const previouslyHidden = this.storage.getItem(LOCAL_STORAGE_NAMESPACE + this.notificationId) === 'hide';
const expired = this.currentDate > new Date(this.expirationDate);
this.showNotification = previouslyHidden || expired ? 'hide' : 'show';
}
contentClick() {
if (this.dismissOnContentClick) {
this.dismiss();
}
}
dismiss() {
this.storage.setItem(LOCAL_STORAGE_NAMESPACE + this.notificationId, 'hide');
this.showNotification = 'hide';
this.dismissed.next();
}
}