diff options
Diffstat (limited to 'src/app/js/toast.js')
-rw-r--r-- | src/app/js/toast.js | 63 |
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) + } +} |