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 sortSelect = document.getElementById('sort-select') as HTMLSelectElement | null;
const orderSelect = document.getElementById('order-select') as HTMLSelectElement | null;
const sortSelect = document.getElementById("sort-select") as HTMLSelectElement | null;
const orderSelect = document.getElementById("order-select") as HTMLSelectElement | null;
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();
};
// sync select values to hidden inputs, then submit form
sortSelect?.addEventListener('change', () => {
const input = document.getElementById('sort-input') as HTMLInputElement | null;
sortSelect?.addEventListener("change", () => {
const input = document.getElementById("sort-input") as HTMLInputElement | null;
if (input) input.value = sortSelect.value;
submitForm();
});
orderSelect?.addEventListener('change', () => {
const input = document.getElementById('order-input') as HTMLInputElement | null;
orderSelect?.addEventListener("change", () => {
const input = document.getElementById("order-input") as HTMLInputElement | null;
if (input) input.value = orderSelect.value;
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. */
const toastContainer = (): HTMLElement => {
let container = document.getElementById('toast-container');
let container = document.getElementById("toast-container");
if (!container) {
container = document.createElement('div');
container.id = 'toast-container';
container.className = 'fixed bottom-4 right-4 z-[100] flex flex-col gap-2';
container.setAttribute('role', 'status');
container.setAttribute('aria-live', 'polite');
container.setAttribute('aria-relevant', 'additions');
container = document.createElement("div");
container.id = "toast-container";
container.className = "fixed bottom-4 right-4 z-[100] flex flex-col gap-2";
container.setAttribute("role", "status");
container.setAttribute("aria-live", "polite");
container.setAttribute("aria-relevant", "additions");
document.body.appendChild(container);
}
return container;
@@ -26,7 +26,7 @@ const toastContainer = (): HTMLElement => {
*/
const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
const container = toastContainer();
const template = document.getElementById('toast-template') as HTMLTemplateElement | null;
const template = document.getElementById("toast-template") as HTMLTemplateElement | null;
if (!template) {
return;
@@ -35,10 +35,10 @@ const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
const toast = (template.content.cloneNode(true) as DocumentFragment)
.firstElementChild as HTMLElement;
if (!toast) return;
toast.setAttribute('role', 'status');
toast.setAttribute('aria-live', 'polite');
const messageEl = toast.querySelector('.toast-message');
const closeBtn = toast.querySelector('.toast-close');
toast.setAttribute("role", "status");
toast.setAttribute("aria-live", "polite");
const messageEl = toast.querySelector(".toast-message");
const closeBtn = toast.querySelector(".toast-close");
if (messageEl) {
messageEl.textContent = message;
@@ -51,23 +51,23 @@ const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
const remove = (): void => {
if (removed) return;
removed = true;
if (typeof dismissTimeout === 'number') window.clearTimeout(dismissTimeout);
if (typeof removeTimeout === 'number') window.clearTimeout(removeTimeout);
if (typeof dismissTimeout === "number") window.clearTimeout(dismissTimeout);
if (typeof removeTimeout === "number") window.clearTimeout(removeTimeout);
toast.remove();
};
closeBtn?.addEventListener('click', remove);
closeBtn?.addEventListener("click", remove);
container.appendChild(toast);
// trigger entrance animation
requestAnimationFrame(() => {
toast.classList.remove('translate-y-2', 'opacity-0');
toast.classList.remove("translate-y-2", "opacity-0");
});
// auto-dismiss with exit animation
dismissTimeout = window.setTimeout(() => {
toast.classList.add('translate-y-2', 'opacity-0');
toast.classList.add("translate-y-2", "opacity-0");
removeTimeout = window.setTimeout(remove, 300);
}, duration);
};