all: commit all generate JavaScript files

This is to simplify development on third party where they can
clone and include the file directly without installing or running
anything to build the files.

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);
+    }
+}