..
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 | // Site wide stackable toasts for notifications
export function notify(message: { title: string; body: string }) {
const notification = document.createElement("div");
const container: HTMLElement | null =
document.getElementById("notification-box");
notification.classList.add("notification");
const icon = document.createElement("i");
icon.classList.add("uil", "uil-bell", "notification-icon");
notification.appendChild(icon);
const notfiyDiv = document.createElement("div");
const title = document.createElement("h3");
title.innerText = message.title;
const body = document.createElement("p");
body.innerText = message.body;
notfiyDiv.appendChild(title);
notfiyDiv.appendChild(body);
notification.appendChild(notfiyDiv);
// add the new notification to the container
container?.appendChild(notification);
// remove the oldest notification if there are more than 5
if ((container?.children.length as number) > 5) {
container?.removeChild(container.children[0]);
}
// show the new notification
setTimeout(() => {
notification.classList.add("show");
}, 100);
// hide the notification after 5 seconds
setTimeout(() => {
notification.classList.remove("show");
notification.classList.add("hide");
setTimeout(() => {
try {
container?.removeChild(notification);
} catch {
// do nothing
}
}, 300);
}, 5000);
}
|
|