4 files changed, 19 insertions, 13 deletions

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 @@
 		</div>
 
 		<script src="main.js"></script>
-		<script src="js/toast.js"></script>
 		<script src="js/popups.js"></script>
 		<script src="js/tooltip.js"></script>
 		<script src="js/browser.js"></script>
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/toasts.js
index e0aba6b..c3bba99 100644
--- a/src/app/js/toast.js
+++ b/src/app/js/toasts.js
@@ -1,4 +1,6 @@
-function Toast(properties) {
+let toasts = {};
+
+toasts.show = (properties) => {
 	let toast = {
 		timeout: 3000,
 		fg: "#FFFFFF",
@@ -36,7 +38,7 @@ function Toast(properties) {
 
 	el.id = id;
 	el.addEventListener("click", () => {
-		dismissToast(id);
+		toasts.dismiss(id);
 		toast.callback();
 	})
 
@@ -53,15 +55,17 @@ function Toast(properties) {
 		el.querySelector(".description").remove();
 	}
 
-	toasts.appendChild(el);
+	document.getElementById("toasts").appendChild(el);
 
 	setTimeout(() => {
-		dismissToast(id);
+		toasts.dismiss(id);
 	}, toast.timeout)
 }
 
-function dismissToast(id) {
+// dismissed/closes toasts with `id` as their ID
+toasts.dismiss = (id) => {
 	id = document.getElementById(id);
+
 	if (id) {
 		id.classList.add("hidden");
 		setTimeout(() => {
@@ -69,3 +73,5 @@ function dismissToast(id) {
 		}, 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");