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

chore: format htmx and shell

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:27:32 +02:00
parent 41128bd632
commit c2931f941a
2 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
static/htmx.ts
View File

@@ -4,7 +4,7 @@ type ToastFn = (opts: { message: string; duration?: number }) => void;
const getToast = (): ToastFn | null => { const getToast = (): ToastFn | null => {
const anyWindow = window as unknown as { showToast?: ToastFn }; const anyWindow = window as unknown as { showToast?: ToastFn };
return typeof anyWindow.showToast === 'function' ? anyWindow.showToast : null; return typeof anyWindow.showToast === "function" ? anyWindow.showToast : null;
}; };
const toast = (message: string): void => { const toast = (message: string): void => {
@@ -13,15 +13,15 @@ const toast = (message: string): void => {
const setBusy = (el: Element | null, busy: boolean): void => { const setBusy = (el: Element | null, busy: boolean): void => {
if (!(el instanceof HTMLElement)) return; if (!(el instanceof HTMLElement)) return;
el.toggleAttribute('aria-busy', busy); el.toggleAttribute("aria-busy", busy);
el.dataset.htmxLoading = busy ? 'true' : 'false'; el.dataset.htmxLoading = busy ? "true" : "false";
if (el instanceof HTMLButtonElement) { if (el instanceof HTMLButtonElement) {
el.disabled = busy; el.disabled = busy;
} }
if (busy) { if (busy) {
el.dataset.htmxBusy = 'true'; el.dataset.htmxBusy = "true";
return; return;
} }
@@ -34,8 +34,8 @@ const getTriggerFromHtmxEvent = (event: Event): Element | null => {
}; };
const onReady = (fn: () => void): void => { const onReady = (fn: () => void): void => {
if (document.readyState === 'loading') { if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', fn, { once: true }); document.addEventListener("DOMContentLoaded", fn, { once: true });
return; return;
} }
@@ -43,29 +43,29 @@ const onReady = (fn: () => void): void => {
}; };
onReady(() => { onReady(() => {
document.addEventListener('htmx:beforeRequest', event => { document.addEventListener("htmx:beforeRequest", (event) => {
setBusy(getTriggerFromHtmxEvent(event), true); setBusy(getTriggerFromHtmxEvent(event), true);
}); });
document.addEventListener('htmx:afterRequest', event => { document.addEventListener("htmx:afterRequest", (event) => {
setBusy(getTriggerFromHtmxEvent(event), false); setBusy(getTriggerFromHtmxEvent(event), false);
const remaining = document.querySelectorAll('.continue-watching-item').length; const remaining = document.querySelectorAll(".continue-watching-item").length;
if (remaining !== 0) return; if (remaining !== 0) return;
const section = document.getElementById('continue-watching-section'); const section = document.getElementById("continue-watching-section");
section?.remove(); section?.remove();
}); });
document.addEventListener('htmx:responseError', () => { document.addEventListener("htmx:responseError", () => {
toast('Something went wrong'); toast("Something went wrong");
}); });
document.addEventListener('htmx:sendError', () => { document.addEventListener("htmx:sendError", () => {
toast('Network error'); toast("Network error");
}); });
document.addEventListener('htmx:timeout', () => { document.addEventListener("htmx:timeout", () => {
toast('Request timed out'); toast("Request timed out");
}); });
}); });

48
static/shell.ts
View File

@@ -1,26 +1,26 @@
export {}; export {};
const onReady = (fn: () => void): void => { const onReady = (fn: () => void): void => {
if (document.readyState === 'loading') { if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', fn, { once: true }); document.addEventListener("DOMContentLoaded", fn, { once: true });
return; return;
} }
fn(); fn();
}; };
const isMobileViewport = (): boolean => window.matchMedia('(max-width: 1023px)').matches; const isMobileViewport = (): boolean => window.matchMedia("(max-width: 1023px)").matches;
const initSidebarTransitions = (): void => { const initSidebarTransitions = (): void => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
document.documentElement.classList.add('sidebar-ready'); document.documentElement.classList.add("sidebar-ready");
}); });
}; };
const initMobileMenu = (): void => { const initMobileMenu = (): void => {
const menu = document.getElementById('mobile-menu'); const menu = document.getElementById("mobile-menu");
const backdrop = document.getElementById('mobile-menu-backdrop'); const backdrop = document.getElementById("mobile-menu-backdrop");
const toggle = document.querySelector('[data-mobile-menu-toggle]'); const toggle = document.querySelector("[data-mobile-menu-toggle]");
if (!(menu instanceof HTMLElement)) return; if (!(menu instanceof HTMLElement)) return;
if (!(backdrop instanceof HTMLElement)) return; if (!(backdrop instanceof HTMLElement)) return;
@@ -30,34 +30,34 @@ const initMobileMenu = (): void => {
let lastFocused: HTMLElement | null = null; let lastFocused: HTMLElement | null = null;
const setOpen = (nextOpen: boolean): void => { const setOpen = (nextOpen: boolean): void => {
menu.dataset.mobileOpen = nextOpen ? 'true' : 'false'; menu.dataset.mobileOpen = nextOpen ? "true" : "false";
backdrop.dataset.mobileOpen = nextOpen ? 'true' : 'false'; backdrop.dataset.mobileOpen = nextOpen ? "true" : "false";
backdrop.classList.toggle('hidden', !nextOpen); backdrop.classList.toggle("hidden", !nextOpen);
toggle.setAttribute('aria-expanded', nextOpen ? 'true' : 'false'); toggle.setAttribute("aria-expanded", nextOpen ? "true" : "false");
body.classList.toggle('overflow-hidden', nextOpen); body.classList.toggle("overflow-hidden", nextOpen);
}; };
const openMenu = (): void => { const openMenu = (): void => {
if (!isMobileViewport()) return; if (!isMobileViewport()) return;
if (menu.dataset.mobileOpen === 'true') return; if (menu.dataset.mobileOpen === "true") return;
lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null; lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
setOpen(true); setOpen(true);
const focusTarget = menu.querySelector<HTMLElement>( const focusTarget = menu.querySelector<HTMLElement>(
'a, button, input, [tabindex]:not([tabindex="-1"])' 'a, button, input, [tabindex]:not([tabindex="-1"])',
); );
focusTarget?.focus(); focusTarget?.focus();
}; };
const closeMenu = (): void => { const closeMenu = (): void => {
if (menu.dataset.mobileOpen !== 'true') return; if (menu.dataset.mobileOpen !== "true") return;
setOpen(false); setOpen(false);
lastFocused?.focus(); lastFocused?.focus();
}; };
toggle.addEventListener('click', () => { toggle.addEventListener("click", () => {
if (menu.dataset.mobileOpen === 'true') { if (menu.dataset.mobileOpen === "true") {
closeMenu(); closeMenu();
return; return;
} }
@@ -65,23 +65,23 @@ const initMobileMenu = (): void => {
openMenu(); openMenu();
}); });
backdrop.addEventListener('click', closeMenu); backdrop.addEventListener("click", closeMenu);
document.addEventListener('keydown', event => { document.addEventListener("keydown", (event) => {
if (event.key !== 'Escape') return; if (event.key !== "Escape") return;
if (menu.dataset.mobileOpen !== 'true') return; if (menu.dataset.mobileOpen !== "true") return;
event.preventDefault(); event.preventDefault();
closeMenu(); closeMenu();
}); });
menu.querySelectorAll<HTMLElement>('a, button').forEach(el => { menu.querySelectorAll<HTMLElement>("a, button").forEach((el) => {
el.addEventListener('click', () => { el.addEventListener("click", () => {
if (!isMobileViewport()) return; if (!isMobileViewport()) return;
closeMenu(); closeMenu();
}); });
}); });
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
if (!isMobileViewport()) { if (!isMobileViewport()) {
setOpen(false); setOpen(false);
} }