From 05b13e99a2ec632c63557c52ec22677b022e7d69 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sat, 8 Jun 2024 18:20:53 +0200 Subject: convert js/toast.js to a CommonJS module Renamed from `toast.js` to `toasts.js` as well --- src/app/index.html | 1 - src/app/js/browser.js | 10 +++---- src/app/js/toast.js | 71 ----------------------------------------------- src/app/js/toasts.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/main.js | 5 ++-- 5 files changed, 85 insertions(+), 79 deletions(-) delete mode 100644 src/app/js/toast.js create mode 100644 src/app/js/toasts.js (limited to 'src/app') diff --git a/src/app/index.html b/src/app/index.html index 4b89999..5d5f0fc 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -333,7 +333,6 @@ - diff --git a/src/app/js/browser.js b/src/app/js/browser.js index 00a0933..9a1298a 100644 --- a/src/app/js/browser.js +++ b/src/app/js/browser.js @@ -480,7 +480,7 @@ ipcRenderer.on("failed-mod", (event, modname) => { add_recent_toast("failed" + modname); set_buttons(true); - new Toast({ + toasts.show({ timeout: 10000, scheme: "error", title: lang("gui.toast.title.failed"), @@ -493,7 +493,7 @@ ipcRenderer.on("legacy-duped-mod", (event, modname) => { add_recent_toast("duped" + modname); set_buttons(true); - new Toast({ + toasts.show({ timeout: 10000, scheme: "warning", title: lang("gui.toast.title.duped"), @@ -503,7 +503,7 @@ ipcRenderer.on("legacy-duped-mod", (event, modname) => { ipcRenderer.on("no-internet", (event, modname) => { set_buttons(true); - new Toast({ + toasts.show({ timeout: 10000, scheme: "error", title: lang("gui.toast.title.no_internet"), @@ -521,7 +521,7 @@ ipcRenderer.on("installed-mod", (event, mod) => { Browser.setbutton(name, lang("gui.browser.reinstall"), "redo"); if (mod.malformed) { - new Toast({ + toasts.show({ timeout: 8000, scheme: "warning", title: lang("gui.toast.title.malformed"), @@ -529,7 +529,7 @@ ipcRenderer.on("installed-mod", (event, mod) => { }) } - new Toast({ + toasts.show({ scheme: "success", title: lang("gui.toast.title.installed"), description: name + " " + lang("gui.toast.desc.installed") diff --git a/src/app/js/toast.js b/src/app/js/toast.js deleted file mode 100644 index e0aba6b..0000000 --- a/src/app/js/toast.js +++ /dev/null @@ -1,71 +0,0 @@ -function Toast(properties) { - let toast = { - timeout: 3000, - fg: "#FFFFFF", - bg: "var(--selbg)", - 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 = ` -
${toast.title}
-
${toast.description}
- ` - - if (! toast.title) { - el.querySelector(".title").remove(); - } - - if (! toast.description) { - el.querySelector(".description").remove(); - } - - 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) - } -} diff --git a/src/app/js/toasts.js b/src/app/js/toasts.js new file mode 100644 index 0000000..c3bba99 --- /dev/null +++ b/src/app/js/toasts.js @@ -0,0 +1,77 @@ +let toasts = {}; + +toasts.show = (properties) => { + let toast = { + timeout: 3000, + fg: "#FFFFFF", + bg: "var(--selbg)", + 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", () => { + toasts.dismiss(id); + toast.callback(); + }) + + el.innerHTML = ` +
${toast.title}
+
${toast.description}
+ ` + + if (! toast.title) { + el.querySelector(".title").remove(); + } + + if (! toast.description) { + el.querySelector(".description").remove(); + } + + document.getElementById("toasts").appendChild(el); + + setTimeout(() => { + toasts.dismiss(id); + }, toast.timeout) +} + +// dismissed/closes toasts with `id` as their ID +toasts.dismiss = (id) => { + id = document.getElementById(id); + + if (id) { + id.classList.add("hidden"); + setTimeout(() => { + id.remove(); + }, 500) + } +} + +module.exports = toasts; diff --git a/src/app/main.js b/src/app/main.js index fa4ec86..9ad6344 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -6,13 +6,13 @@ const { app, ipcRenderer, shell } = require("electron"); const lang = require("../lang"); ipcRenderer.on("unknown-error", (event, err) => { - new Toast({ + toasts.show({ timeout: 10000, scheme: "error", title: lang("gui.toast.title.unknown_error"), description: lang("gui.toast.desc.unknown_error"), callback: () => { - new Toast({ + toasts.show({ timeout: 15000, scheme: "error", title: "", @@ -28,6 +28,7 @@ const json = require("../modules/json"); const kill = require("./js/kill"); const mods = require("./js/mods"); +const toasts = require("./js/toasts"); const update = require("./js/update"); const events = require("./js/events"); const launch = require("./js/launch"); -- cgit v1.2.3