From cdb3ec1ec9579781d8361ccb34a7ece917443d54 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sun, 12 Dec 2021 01:05:43 -0700
Subject: [PATCH] disappearing toast :(

---
 scripts/toast/createtoast.js | 10 +++++++++-
 scripts/toast/removetoast.js |  5 +++++
 styles/toast.css             | 20 ++++++++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 scripts/toast/removetoast.js

diff --git a/scripts/toast/createtoast.js b/scripts/toast/createtoast.js
index b6dc192..29e5073 100644
--- a/scripts/toast/createtoast.js
+++ b/scripts/toast/createtoast.js
@@ -1,3 +1,5 @@
+const removeToast = require('./removetoast');
+
 module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
     if (!name || !text) {return;}
     if (!Array.isArray(text)) {text = [text];}
@@ -5,10 +7,15 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
     toast.className = 'toast';
     toast.style.backgroundColor = `${bg}c2`;
     toast.style.borderColor = `${bg}c2`;
+    toast.classList.add('toast-entering');
     toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
     toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
+    let continueTimeout = true;
     toast.onclick = () => {
-        if (!persistOnClick) {}
+        if (!persistOnClick) {
+            removeToast(toast);
+            continueTimeout = false;
+        }
         onclick();
     };
     document.getElementById('toast-container').appendChild(toast);
@@ -25,4 +32,5 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
         }
         else {toast.appendChild(document.createElement('br'));}
     }
+    setTimeout(() => {if (continueTimeout) {removeToast(toast);}}, time * 1000);
 };
\ No newline at end of file
diff --git a/scripts/toast/removetoast.js b/scripts/toast/removetoast.js
new file mode 100644
index 0000000..46fe48e
--- /dev/null
+++ b/scripts/toast/removetoast.js
@@ -0,0 +1,5 @@
+module.exports = (toast) => {
+    toast.classList.remove('toast-entering');
+    toast.classList.add('toast-leaving');
+    toast.onanimationend = () => {toast.remove();};
+};
\ No newline at end of file
diff --git a/styles/toast.css b/styles/toast.css
index fc2b64b..3bf1831 100644
--- a/styles/toast.css
+++ b/styles/toast.css
@@ -8,6 +8,16 @@
         transform: translateX(0);
     }
 }
+@keyframes leave-toast {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    from {
+        opacity: 100;
+        transform: translateX(0);
+    }
+}
 
 #toast-container {
     position: fixed;
@@ -39,6 +49,16 @@
     border-color: white;
 }
 
+.toast-entering {
+    animation: enter-toast .25s ease-out 1;
+    animation-fill-mode: both;
+}
+
+.toast-leaving {
+    animation: leave-toast .25s ease-out 1;
+    animation-fill-mode: both;
+}
+
 .toast p {
     font-family: 'Montserrat', sans-serif;
     margin: 8px;