1 files changed, 64 insertions, 0 deletions
diff --git a/notif/notif.js b/notif/notif.js
new file mode 100644
index 0000000..2070f9e
--- /dev/null
+++ b/notif/notif.js
@@ -0,0 +1,64 @@
+// SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
+// SPDX-License-Identifier: GPL-3.0-or-later
+export const WUI_NOTIF_ID = "wui_notif";
+export const WUI_NOTIF_CLASS_INFO = "wui_notif_info";
+export const WUI_NOTIF_CLASS_ERROR = "wui_notif_error";
+// WuiNotif implement the HTML interface to display pop-up notification.
+// The notification can be triggered by calling method info() or error().
+// Each pop-up has 5 seconds duration, after that they will be removed
+// automatically.
+export class WuiNotif {
+    constructor() {
+        this.timeout = 5000; // 5 seconds timeout
+        this.el = document.createElement("div");
+        this.el.id = WUI_NOTIF_ID;
+        document.body.appendChild(this.el);
+        this.initStyle();
+    }
+    // info show the msg as information.
+    info(msg) {
+        const item = document.createElement("div");
+        item.innerHTML = msg;
+        item.classList.add(WUI_NOTIF_CLASS_INFO);
+        this.el.appendChild(item);
+        setTimeout(() => {
+            this.el.removeChild(item);
+        }, this.timeout);
+    }
+    // error show the msg as an error.
+    error(msg) {
+        const item = document.createElement("div");
+        item.innerHTML = msg;
+        item.classList.add(WUI_NOTIF_CLASS_ERROR);
+        this.el.appendChild(item);
+        setTimeout(() => {
+            this.el.removeChild(item);
+        }, this.timeout);
+    }
+    initStyle() {
+        const style = document.createElement("style");
+        style.type = "text/css";
+        style.innerText = `
+			#${WUI_NOTIF_ID} {
+				left: 10%;
+				position: fixed;
+				top: 1em;
+				width: 80%;
+				z-index: 10000;
+			}
+			.${WUI_NOTIF_CLASS_INFO} {
+				border: 1px solid silver;
+				background-color: honeydew;
+				margin-bottom: 1em;
+				padding: 1em;
+			}
+			.${WUI_NOTIF_CLASS_ERROR} {
+				border: 1px solid salmon;
+				background-color: lightsalmon;
+				margin-bottom: 1em;
+				padding: 1em;
+			}
+		`;
+        document.head.appendChild(style);
+    }
+}