2 files changed, 106 insertions, 0 deletions
diff --git a/notif/example.js b/notif/example.js
new file mode 100644
index 0000000..1a543fd
--- /dev/null
+++ b/notif/example.js
@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
+// SPDX-License-Identifier: GPL-3.0-or-later
+import { WuiNotif, WUI_NOTIF_CLASS_ERROR, WUI_NOTIF_CLASS_INFO, } from "./notif.js";
+let inputMsg;
+let wuiNotif;
+function main() {
+    wuiNotif = new WuiNotif();
+    inputMsg = document.createElement("textarea");
+    inputMsg.id = "input_msg";
+    inputMsg.value =
+        "Test notification with HTML format using <b>bold</b> and <u>underline</u> words.";
+    document.body.appendChild(inputMsg);
+    const elWrapper = document.createElement("div");
+    elWrapper.style.marginTop = "10px";
+    document.body.appendChild(elWrapper);
+    const elButtonInfo = document.createElement("button");
+    elButtonInfo.innerText = "Info";
+    elButtonInfo.style.marginRight = "10px";
+    elButtonInfo.onclick = notifInfo;
+    elWrapper.appendChild(elButtonInfo);
+    const elButtonError = document.createElement("button");
+    elButtonError.innerText = "Error";
+    elButtonError.onclick = notifError;
+    elWrapper.appendChild(elButtonError);
+    document.body.appendChild(document.createElement("p"));
+    const previewError = document.createElement("div");
+    previewError.classList.add(`${WUI_NOTIF_CLASS_ERROR}`);
+    previewError.innerText = `Preview of error style`;
+    document.body.appendChild(previewError);
+    const previewInfo = document.createElement("div");
+    previewInfo.classList.add(`${WUI_NOTIF_CLASS_INFO}`);
+    previewInfo.innerText = `Preview of info style`;
+    document.body.appendChild(previewInfo);
+}
+function notifInfo() {
+    wuiNotif.info(inputMsg.value);
+}
+function notifError() {
+    wuiNotif.error(inputMsg.value);
+}
+// ----
+main();
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);
+    }
+}