blob: 00c0583a4cbeac34d5194d2586c002d2085a085c (
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
77
78
79
80
81
82
83
|
// Import stylesheets
import '../styles/style.css';
import { Config } from '../interfaces/config.interface';
export default class VYN {
private notificationTemplate: string;
private defaultConfig: Config;
private notifInner: any;
private container: any;
constructor(config: Config) {
this.defaultConfig = {
content: config.content ? config.content : '',
footer: config.footer ? config.footer : '',
timeout: config.timeout ? config.timeout : 3000,
title: config.title ? config.title : '',
type: config.type ? config.type : 'success',
position: (config.position && config.position.length == 2) ? config.position : ['bottom', 'right']
}
this.init();
}
private init() {
this.buildContainers();
}
buildContainers() {
this.container = document.createElement('div');
this.container.className = `notif-mainContainer ${this.defaultConfig.position.join('-')}`;
this.notifInner = document.createElement('div');
this.notifInner.className = "notif-inner";
this.container.appendChild(this.notifInner);
document.body.appendChild(this.container);
}
show(config: Config) {
let notifContainer = document.createElement('div');
notifContainer.className = `vanilla-yo-notification ${config.type ? config.type : this.defaultConfig.type}`;
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(() => {
notifContainer.className = notifContainer.className + ' close';
this.destroyNotification(notifContainer);
}, (config.timeout ? config.timeout : this.defaultConfig.timeout));
}
private destroyNotification(container: Node) {
setTimeout(()=>{
this.notifInner.removeChild(container);
},100);
}
}
|
