84 lines
2.0 KiB
JavaScript
Executable File
84 lines
2.0 KiB
JavaScript
Executable File
let toastContainer
|
|
let lastToast
|
|
window.addEventListener("load", () => {
|
|
toastContainer = document.getElementById("toast-container")
|
|
|
|
// Get last toast
|
|
const toastsOnLoad = toastContainer.children
|
|
lastToast = toastsOnLoad.length - 1
|
|
|
|
// Apply fadeout to all toasts
|
|
for (let i = 0; i < lastToast + 1; i++)
|
|
if (!toastsOnLoad[i].classList.contains("nofade"))
|
|
setToastRemove(toastsOnLoad[i])
|
|
})
|
|
|
|
// Make new toast
|
|
function newToast(color, icon, text, noFade) {
|
|
lastToast++
|
|
|
|
let container = document.createElement("div")
|
|
container.className = "toast-container"
|
|
container.getAnimations().forEach(a => { a.cancel(); a.play() })
|
|
|
|
// Invisible checkbox that removes the toast
|
|
let input = document.createElement("input")
|
|
input.setAttribute("type", "checkbox")
|
|
input.setAttribute("id", lastToast)
|
|
container.appendChild(input)
|
|
|
|
// Toast color and content
|
|
let toast = document.createElement("div")
|
|
toast.className = "toast"
|
|
if (color)
|
|
toast.classList.add(color)
|
|
toast.innerText = text
|
|
container.appendChild(toast)
|
|
|
|
// Icon
|
|
if (icon) {
|
|
let ic = document.createElement("div")
|
|
ic.className = "icon"
|
|
ic.classList.add(icon)
|
|
toast.insertBefore(ic, toast.firstChild)
|
|
}
|
|
|
|
// X button that appears when hovering
|
|
let overlay = document.createElement("label")
|
|
overlay.className = "close-overlay"
|
|
overlay.setAttribute("for", lastToast)
|
|
container.appendChild(overlay)
|
|
|
|
toastContainer.appendChild(container)
|
|
|
|
// Add timeout
|
|
if (noFade)
|
|
container.classList.add("nofade")
|
|
else
|
|
setToastRemove(container)
|
|
return { id: lastToast, container }
|
|
}
|
|
|
|
async function newToastWhenReady(color, icon, text, noFade) {
|
|
if (!toastContainer) {
|
|
await new Promise(resolve => {
|
|
setTimeout(() => {
|
|
if (toastContainer)
|
|
resolve()
|
|
}, 200)
|
|
})
|
|
return newToast(color, icon, text, noFade)
|
|
} else
|
|
return newToast(color, icon, text, noFade)
|
|
}
|
|
|
|
// Set timeout on toasts
|
|
function setToastRemove(toast) {
|
|
toast.classList.remove("nofade")
|
|
setTimeout(() => {
|
|
// const checkbox = toast.firstElementChild
|
|
// checkbox.checked = true
|
|
toast.remove()
|
|
}, 1000 * 5)
|
|
}
|