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

chore: format toast and sort_filter

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:27:52 +02:00
parent 9375cf68b4
commit 4b883c6572
2 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/sort_filter.ts
View File

@@ -1,24 +1,24 @@
const initSortFilter = (): void => { const initSortFilter = (): void => {
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement | null; const sortSelect = document.getElementById("sort-select") as HTMLSelectElement | null;
const orderSelect = document.getElementById('order-select') as HTMLSelectElement | null; const orderSelect = document.getElementById("order-select") as HTMLSelectElement | null;
const submitForm = (): void => { const submitForm = (): void => {
const form = document.getElementById('sort-form') as HTMLFormElement | null; const form = document.getElementById("sort-form") as HTMLFormElement | null;
if (form) form.submit(); if (form) form.submit();
}; };
// sync select values to hidden inputs, then submit form // sync select values to hidden inputs, then submit form
sortSelect?.addEventListener('change', () => { sortSelect?.addEventListener("change", () => {
const input = document.getElementById('sort-input') as HTMLInputElement | null; const input = document.getElementById("sort-input") as HTMLInputElement | null;
if (input) input.value = sortSelect.value; if (input) input.value = sortSelect.value;
submitForm(); submitForm();
}); });
orderSelect?.addEventListener('change', () => { orderSelect?.addEventListener("change", () => {
const input = document.getElementById('order-input') as HTMLInputElement | null; const input = document.getElementById("order-input") as HTMLInputElement | null;
if (input) input.value = orderSelect.value; if (input) input.value = orderSelect.value;
submitForm(); submitForm();
}); });
}; };
document.addEventListener('DOMContentLoaded', initSortFilter); document.addEventListener("DOMContentLoaded", initSortFilter);

34
static/toast.ts
View File

@@ -7,14 +7,14 @@ interface ToastOptions {
/** Lazily create and return the toast container element. */ /** Lazily create and return the toast container element. */
const toastContainer = (): HTMLElement => { const toastContainer = (): HTMLElement => {
let container = document.getElementById('toast-container'); let container = document.getElementById("toast-container");
if (!container) { if (!container) {
container = document.createElement('div'); container = document.createElement("div");
container.id = 'toast-container'; container.id = "toast-container";
container.className = 'fixed bottom-4 right-4 z-[100] flex flex-col gap-2'; container.className = "fixed bottom-4 right-4 z-[100] flex flex-col gap-2";
container.setAttribute('role', 'status'); container.setAttribute("role", "status");
container.setAttribute('aria-live', 'polite'); container.setAttribute("aria-live", "polite");
container.setAttribute('aria-relevant', 'additions'); container.setAttribute("aria-relevant", "additions");
document.body.appendChild(container); document.body.appendChild(container);
} }
return container; return container;
@@ -26,7 +26,7 @@ const toastContainer = (): HTMLElement => {
*/ */
const showToast = ({ message, duration = 3000 }: ToastOptions): void => { const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
const container = toastContainer(); const container = toastContainer();
const template = document.getElementById('toast-template') as HTMLTemplateElement | null; const template = document.getElementById("toast-template") as HTMLTemplateElement | null;
if (!template) { if (!template) {
return; return;
@@ -35,10 +35,10 @@ const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
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.setAttribute('role', 'status'); toast.setAttribute("role", "status");
toast.setAttribute('aria-live', 'polite'); toast.setAttribute("aria-live", "polite");
const messageEl = toast.querySelector('.toast-message'); const messageEl = toast.querySelector(".toast-message");
const closeBtn = toast.querySelector('.toast-close'); const closeBtn = toast.querySelector(".toast-close");
if (messageEl) { if (messageEl) {
messageEl.textContent = message; messageEl.textContent = message;
@@ -51,23 +51,23 @@ const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
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") window.clearTimeout(dismissTimeout);
if (typeof removeTimeout === 'number') window.clearTimeout(removeTimeout); if (typeof removeTimeout === "number") window.clearTimeout(removeTimeout);
toast.remove(); toast.remove();
}; };
closeBtn?.addEventListener('click', remove); closeBtn?.addEventListener("click", remove);
container.appendChild(toast); container.appendChild(toast);
// trigger entrance animation // trigger entrance animation
requestAnimationFrame(() => { requestAnimationFrame(() => {
toast.classList.remove('translate-y-2', 'opacity-0'); toast.classList.remove("translate-y-2", "opacity-0");
}); });
// auto-dismiss with exit animation // auto-dismiss with exit animation
dismissTimeout = window.setTimeout(() => { dismissTimeout = window.setTimeout(() => {
toast.classList.add('translate-y-2', 'opacity-0'); toast.classList.add("translate-y-2", "opacity-0");
removeTimeout = window.setTimeout(remove, 300); removeTimeout = window.setTimeout(remove, 300);
}, duration); }, duration);
}; };