github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/flash.ts (about) 1 // Content managed by Project Forge, see [projectforge.md] for details. 2 function fade(el: HTMLElement) { 3 setTimeout(() => { 4 el.style.opacity = "0"; 5 setTimeout(() => el.remove(), 500); 6 }, 5000); 7 } 8 9 export function flashCreate(key: string, level: "success" | "error", msg: string) { 10 let container = document.getElementById("flash-container"); 11 if (container === null) { 12 container = document.createElement("div"); 13 container.id = "flash-container"; 14 document.body.insertAdjacentElement("afterbegin", container); 15 } 16 const fl = document.createElement("div"); 17 fl.className = "flash"; 18 19 const radio = document.createElement("input"); 20 radio.type = "radio"; 21 radio.style.display = "none"; 22 radio.id = "hide-flash-" + key; 23 fl.appendChild(radio); 24 25 const label = document.createElement("label"); 26 label.htmlFor = "hide-flash-" + key; 27 const close = document.createElement("span"); 28 close.innerHTML = "×"; 29 label.appendChild(close); 30 fl.appendChild(label); 31 32 const content = document.createElement("div"); 33 content.className = "content flash-" + level; 34 content.innerText = msg; 35 fl.appendChild(content); 36 37 container.appendChild(fl); 38 fade(fl); 39 } 40 41 export function flashInit() { 42 const container = document.getElementById("flash-container"); 43 if (container === null) { 44 return flashCreate; 45 } 46 const x = container.querySelectorAll<HTMLElement>(".flash"); 47 if (x.length > 0) { 48 for (const f of x) { 49 fade(f); 50 } 51 } 52 return flashCreate; 53 }