Implemented first version of this plugin.

2022-06-28 23:33:31 -07:00 · 2022-06-28 23:33:31 -07:00 · 5c215f7ea9
commit 5c215f7ea9
parent 55ed8458d1
1 changed files with 62 additions and 0 deletions
--- a/ignite-html-toast.js
+++ b/ignite-html-toast.js
@ -0,0 +1,62 @@
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
+
+class Toast {
+    static info(content, timeout = 4000, closable = true) {
+        return this.makeToast("&#63;", content, "info", timeout, closable);
+    }
+
+    static warning(content, timeout = 4000, closable = true) {
+        return this.makeToast("&#x21;", content, "warning", timeout, closable);
+    }
+
+    static error(content, timeout = 4000, closable = true) {
+        return this.makeToast("&times;", content, "error", timeout, closable);
+    }
+
+    static success(content, timeout = 4000, closable = true) {
+        return this.makeToast("&#10004;", content, "success", timeout, closable);
+    }
+
+    static makeToast(icon, content, type, timeout, closable) {
+        var color = "";
+        if (type == "error") {
+            color = "#ff7979";
+        } else if (type == "warning") {
+            color = "#ffc107";
+        } else if (type == "info") {
+            color = "#2196f3";
+        } else if (type == "success") {
+            color = "#10c469";
+        }
+
+        document.querySelectorAll(".ignite-html-toast").forEach(element => element.remove());
+
+        var temp = document.createElement('div');
+        temp.innerHTML = `
+            <div class="ignite-html-toast ${type ? type : ""}" style="display: flex; align-items: center; flex-direction: column; left: 50%; top: 100%; position: absolute; transform: translate(-50%, -100%); z-index: 999999; width: 100%; padding: 2em 1em 2em 1em; background-color: transparent;">
+                <div style="box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding: 1em; background-color: #fff;">
+                    <div class="icon" style="${!icon ? "display: none;" : "display: flex;"}font-size: 1.5em; background-color: ${color}; border-radius: 100%; min-width: 1.5em; min-height: 1.5em; align-items: center; justify-content: center; color: #fff;">${icon ? icon : ""}</div>
+                    <div class="message" style="text-align: center;">${content ? content : ""}</div>
+                    <button class="close" onClick="this.parentElement.parentElement.remove();" style="${!closable ? "display: none;" : ""} background-color: transparent; border: none; font-size: 1.75em; color: rgba(0,0,0,0.5);">&times;</button>
+                </div>
+            </div>
+        `.trim();
+        var toast = temp.firstChild;
+
+        window.document.body.appendChild(toast);
+
+        if (timeout != -1) {
+            setTimeout(() => {
+                toast.remove();
+            }, timeout);
+        }
+
+        return toast;
+    }
+}
+
+window.Toast = Toast;
+
+export {
+    Toast
+}