https://www.paradisepools.biz/js/_essentials/notifications.js

1/**
2 * @desc display custom user notifications
3 * @author Dominik Kressler
4 * @version 1.2.1
5 * @modified 2021-08-17
6 */
7 var Notification = function () 
8 {
9     var container = document.createElement("notifications");
10     container.classList.add("notification-area");
11     document.body.appendChild(container);
12     this.container = container;
13     return this;
14 };
15 Notification.prototype.add = function (options) 
16 {
17     var defaults = {
18       id: "",
19       classNames: "",
20       message: "",
21       saveState: false,
22       remove: true,
23       discard: false,
24       storage: window._storageDisabled ? window.getStorage() : localStorage
25     };
26     var settings = J.merge(defaults, options);
27     var notification = document.createElement("notification");
28     notification.id = settings.id;
29 
30     var noteContent = document.createElement("note-content");
31     noteContent.classList.add("note-content");
32 
33     notification.setAttribute("saveState", settings.saveState);
34     notification.className = "notification " + settings.classNames;
35     notification.appendChild(noteContent);
36 
37     if (typeof settings.message == "string") {
38       noteContent.innerHTML = settings.message;
39     } else {
40       noteContent.appendChild(settings.message);
41     }
42 
43     var close = document.createElement("close");
44     close.classList.add("close");
45     close.innerHTML = "×";
46     notification.appendChild(close);
47 
48     close.addEventListener("click", function (e) 
49     {
50         var parent = this.parentElement;
51         parent.classList.add("hide");
52 
53         if (settings.remove == true) {
54             parent.addEventListener("transitionend", function () {
55                 this.remove();
56             });
57         }
58 
59         if (parent.getAttribute("saveState") == "true") {
60             settings.storage.setItem("note-" + notification.id, "discarded");
61         } else {
62             settings.storage.setItem("note-" + notification.id, "");
63         }
64     });
65 
66     this.container.appendChild(notification);
67 
68     setTimeout(function () {
69         notification.classList.add("transition-in");
70     }, 300);
71 
72     if (settings.storage.getItem("note-" + settings.id) == "discarded") {
73         close.click();
74     } else if (settings.discard) {
75         setTimeout(function () {
76             close.click();
77         }, settings.discard + 300);
78     }
79     return this;
80 };
81 Notification.prototype.close = function (id) 
82 {
83     document.getElementById(id).querySelector(".close").click();
84 };
85 notification = new Notification();
86