toast has timers so it doesn't burn :D

scripts/toast/createtoast.js

@@ -1,6 +1,6 @@
 const removeToast = require('./removetoast');
 
-module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
+module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false, timerColor='#ddddddb2') => {
     if (!name || !text) {return;}
     if (!Array.isArray(text)) {text = [text];}
     let toast = document.createElement('div');
@@ -10,6 +10,8 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
     toast.classList.add('toast-entering');
     toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
     toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
+    let toastWrap = document.createElement('div');
+    toastWrap.className = 'toast-wrapper';
     let continueTimeout = true;
     toast.onclick = () => {
         if (!persistOnClick) {
@@ -19,18 +21,26 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
         onclick();
     };
     document.getElementById('toast-container').appendChild(toast);
+    toast.appendChild(toastWrap);
     let h2 = document.createElement('h2');
     h2.innerHTML = name;
     if (!selectable) {h2.className = 'nosel';}
-    toast.appendChild(h2);
+    toastWrap.appendChild(h2);
     for (let i = 0; i < text.length; i++) {
         if (text[i].length) {
             let p = document.createElement('p');
             p.innerHTML = text[i];
             if (!selectable) {p.className = 'nosel';}
-            toast.appendChild(p);
+            toastWrap.appendChild(p);
         }
-        else {toast.appendChild(document.createElement('br'));}
+        else {toastWrap.appendChild(document.createElement('br'));}
     }
+    let timer = document.createElement('div');
+    timer.className = 'toast-timer';
+    timer.style.backgroundColor = timerColor;
+    timer.style.animation = `toast-timer ${time}s linear`;
+    toastWrap.appendChild(timer);
+    //toast.onmouseenter = () => {timer.style.animationPlayState = 'paused';};
+    //toast.onmouseleave = () => {timer.style.animationPlayState = 'normal';};
     setTimeout(() => {if (continueTimeout) {removeToast(toast);}}, time * 1000);
 };

scripts/toast/removetoast.js

@@ -1,5 +1,5 @@
 module.exports = (toast) => {
     toast.classList.remove('toast-entering');
     toast.classList.add('toast-leaving');
-    toast.onanimationend = () => {toast.remove();};
+    setTimeout(() => {toast.onanimationend = () => {toast.remove();};}, 100);
 };

styles/toast.css

@@ -19,6 +19,11 @@
     }
 }
 
+@keyframes toast-timer {
+    to {width: 100%;}
+    from {width: 0;}
+}
+
 #toast-container {
     position: fixed;
     top: 34px;
@@ -38,7 +43,7 @@
     color: white;
     animation: enter-toast .25s ease-out 1;
     animation-fill-mode: both;
-    padding: 4px 6px;
+    padding: 0 0;
     border-color: #a172a6c2;
     border-style: solid;
     border-width: 1px;
@@ -68,4 +73,18 @@
     font-size: 20px;
     font-family: 'Nunito', sans-serif;
     margin: 6px 0 2px 8px;
+}
+
+.toast-timer {
+    height: 5px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.toast-wrapper {
+    padding: 4px 6px;
+    position: relative;
+    max-height: inherit;
+    height: inherit;
 }