melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format static/toast.ts

Browse Source
This commit is contained in:
mkelvers
2026-06-21 02:05:08 +02:00
committed by Milas Holsting
parent f59aca5e92
commit 379ade5fd4
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
static/toast.ts
View File

@@ -1,21 +1,12 @@
export {}; type ToastOptions = { message: string; duration?: number; variant?: "default" | "destructive" };
interface ToastOptions {
message: string;
duration?: number;
variant?: "default" | "destructive";
}
/** Return the toast container element. */ /** Return the toast container element. */
const toastContainer = (): HTMLElement | null => document.getElementById("toast-container"); const toastContainer = (): HTMLElement | null => document.querySelector("#toast-container");
/** /** Show a toast notification with optional auto-dismiss. Exposed globally via window.showToast. */
* Show a toast notification with optional auto-dismiss.
* Exposed globally via window.showToast.
*/
const showToast = ({ message, duration = 3000, variant = "default" }: ToastOptions): void => { const showToast = ({ message, duration = 3000, variant = "default" }: ToastOptions): void => {
const container = toastContainer(); const container = toastContainer();
const template = document.getElementById("toast-template") as HTMLTemplateElement | null; const template = document.querySelector("#toast-template") as HTMLTemplateElement | null;
if (!container || !template) { if (!container || !template) {
return; return;
@@ -23,7 +14,9 @@ const showToast = ({ message, duration = 3000, variant = "default" }: ToastOptio
const toast = (template.content.cloneNode(true) as DocumentFragment) const toast = (template.content.cloneNode(true) as DocumentFragment)
.firstElementChild as HTMLElement; .firstElementChild as HTMLElement;
if (!toast) return; if (!toast) {
return;
}
toast.dataset.variant = variant; toast.dataset.variant = variant;
toast.setAttribute("role", "status"); toast.setAttribute("role", "status");
toast.setAttribute("aria-live", "polite"); toast.setAttribute("aria-live", "polite");
@@ -39,16 +32,22 @@ const showToast = ({ message, duration = 3000, variant = "default" }: ToastOptio
let removeTimeout: number | undefined; let removeTimeout: number | undefined;
const remove = (): void => { const remove = (): void => {
if (removed) return; if (removed) {
return;
}
removed = true; removed = true;
if (typeof dismissTimeout === "number") window.clearTimeout(dismissTimeout); if (typeof dismissTimeout === "number") {
if (typeof removeTimeout === "number") window.clearTimeout(removeTimeout); window.clearTimeout(dismissTimeout);
}
if (typeof removeTimeout === "number") {
window.clearTimeout(removeTimeout);
}
toast.remove(); toast.remove();
}; };
closeBtn?.addEventListener("click", remove); closeBtn?.addEventListener("click", remove);
container.appendChild(toast); container.append(toast);
// trigger entrance animation // trigger entrance animation
requestAnimationFrame(() => { requestAnimationFrame(() => {
@@ -69,3 +68,5 @@ declare global {
} }
window.showToast = showToast; window.showToast = showToast;
export {};