blob: 17a32a0d52479ecb2295b33bc6f403fc09481bb1 (
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
84
85
86
87
88
89
|
class Notification {
#id = 0;
#title = "";
#message = "";
#type = "";
#duration = 0;
#position = "";
constructor(message, type) {
this.#message = message;
this.#type = type;
}
get id() {
return this.#id;
}
set title(string) {
this.#title = string;
}
get title() {
return this.#title;
}
set message(text) {
this.#message = text;
}
get message() {
return this.#message;
}
set type(string) {
this.#type = string;
}
get type() {
return this.#type;
}
set duration(number) {
this.#duration = number;
}
get duration() {
return this.#duration;
}
set position(string) {
this.#position = string;
}
get position() {
return this.#position;
}
#getWrapper() {
let wrapper = document.getElementById("notifications-center");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "notifications-center";
wrapper.classList = "notifications";
document.body.appendChild(wrapper);
}
return wrapper;
}
notify() {
const notification = document.createElement("div");
notification.textContent = this.message;
notification.classList.add("notification", `notification--${this.type}`);
const wrapper = this.#getWrapper();
document.body.style.position = "relative";
wrapper.style.cssText = `position: fixed;${this.position}: 1rem;right: 1rem;display: flex;flex-flow: column wrap;gap: 1rem;`;
wrapper.appendChild(notification);
if (this.duration && Number(this.duration) !== 0) {
setTimeout(() => {
notification.remove();
}, this.duration);
}
}
}
export default Notification;
|
