From 2d20c2a479608179df15c402f8bf622c49e305a7 Mon Sep 17 00:00:00 2001 From: WubzyGD Date: Fri, 21 Jan 2022 18:42:53 -0700 Subject: [PATCH] toast has timers so it doesn't burn :D --- scripts/toast/createtoast.js | 18 ++++++++++++++---- scripts/toast/removetoast.js | 2 +- styles/toast.css | 21 ++++++++++++++++++++- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/scripts/toast/createtoast.js b/scripts/toast/createtoast.js index 29e5073..19d0a41 100755 --- a/scripts/toast/createtoast.js +++ b/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); }; \ No newline at end of file diff --git a/scripts/toast/removetoast.js b/scripts/toast/removetoast.js index 46fe48e..422c6ae 100755 --- a/scripts/toast/removetoast.js +++ b/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); }; \ No newline at end of file diff --git a/styles/toast.css b/styles/toast.css index 16500d4..c024673 100755 --- a/styles/toast.css +++ b/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; } \ No newline at end of file