aboutsummaryrefslogtreecommitdiff
path: root/src/app/js/toast.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/js/toast.js')
-rw-r--r--src/app/js/toast.js63
1 files changed, 63 insertions, 0 deletions
diff --git a/src/app/js/toast.js b/src/app/js/toast.js
new file mode 100644
index 0000000..3bc1745
--- /dev/null
+++ b/src/app/js/toast.js
@@ -0,0 +1,63 @@
+function Toast(properties) {
+ let toast = {
+ fg: "#000000",
+ bg: "#FFFFFF",
+ timeout: 3000,
+ callback: () => {},
+ title: "Untitled Toast",
+ description: "No description provided for toast",
+ ...properties
+ }
+
+ switch(toast.scheme) {
+ case "error":
+ toast.fg = "#FFFFFF";
+ toast.bg = "rgb(var(--red))";
+ break
+ case "success":
+ toast.fg = "#FFFFFF";
+ toast.bg = "#60D394";
+ break
+ case "warning":
+ toast.fg = "#FFFFFF";
+ toast.bg = "#FF9B85";
+ break
+ }
+
+
+ let id = Date.now();
+ if (document.getElementById(id)) {id = id + 1}
+ let el = document.createElement("div");
+
+ el.classList.add("toast");
+
+ el.style.color = toast.fg;
+ el.style.background = toast.bg;
+
+ el.id = id;
+ el.addEventListener("click", () => {
+ dismissToast(id);
+ toast.callback();
+ })
+
+ el.innerHTML = `
+ <div class="title">${toast.title}</div>
+ <div class="description">${toast.description}</div>
+ `
+
+ toasts.appendChild(el);
+
+ setTimeout(() => {
+ dismissToast(id);
+ }, toast.timeout)
+}
+
+function dismissToast(id) {
+ id = document.getElementById(id);
+ if (id) {
+ id.classList.add("hidden");
+ setTimeout(() => {
+ id.remove();
+ }, 500)
+ }
+}