toast has timers so it doesn't burn :D

toast
Kit Kasune 3 years ago
parent bc65dd35bc
commit 2d20c2a479
  1. 18
      scripts/toast/createtoast.js
  2. 2
      scripts/toast/removetoast.js
  3. 21
      styles/toast.css

@ -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);
};

@ -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);
};

@ -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;
}
Loading…
Cancel
Save