blob: 7b508040ecd55467424ed239691770ec4cdda5be (
plain)
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
71
72
73
74
75
76
|
// Import stylesheets
import './styles/style.css';
import { Config } from './config.interface';
export default class VanillaYoNotification {
private notificationTemplate: string;
private defaultConfig: Config;
private notifInner: any;
constructor() {
this.defaultConfig = {
content: '',
footer: '',
timeout: 3000,
title: ''
}
this.init();
}
private init() {
this.buildContainers();
}
buildContainers(){
let container = document.createElement('div');
container.className = "notif-mainContainer topRight";
this.notifInner = document.createElement('div');
this.notifInner.className = "notif-inner";
container.appendChild(this.notifInner);
document.body.appendChild(container);
}
show(config: Config) {
let notifContainer = document.createElement('div');
notifContainer.className = "vanilla-yo-notification";
this.notificationTemplate = `
<div class="notification_container">
<div class="notification_header">
${config.title ? config.title : this.defaultConfig.title}
</div>
<div class="notification_body">
${config.content ? config.content : this.defaultConfig.content}
</div>
<div class="notification_footer">
${config.footer ? config.footer : this.defaultConfig.footer}
</div>
</div>
`;
notifContainer.innerHTML = (this.notificationTemplate);
this.notifInner.appendChild(notifContainer);
setTimeout(() => {
this.destroyNotification(notifContainer);
}, (config.timeout ? config.timeout : this.defaultConfig.timeout));
}
private destroyNotification(container: Node) {
this.notifInner.removeChild(container);
}
}
|
