From 41128bd6326945d48994be26577e1b32c4e5346a Mon Sep 17 00:00:00 2001 From: mkelvers Date: Thu, 28 May 2026 11:27:22 +0200 Subject: [PATCH] chore: format discover and dropdown --- static/discover.ts | 52 +++++++++++++++++++++++----------------------- static/dropdown.ts | 34 +++++++++++++++--------------- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/static/discover.ts b/static/discover.ts index 5ca087f..0d11cab 100644 --- a/static/discover.ts +++ b/static/discover.ts @@ -1,4 +1,4 @@ -import { parseClassList } from './utils'; +import { parseClassList } from "./utils"; const setActiveDiscoverTab = (clickedTab: Element): void => { const group = clickedTab.closest('[data-tab-group="discover"]'); @@ -7,17 +7,17 @@ const setActiveDiscoverTab = (clickedTab: Element): void => { } // reset all tabs in group - const triggers = group.querySelectorAll('[data-tab-trigger]'); - triggers.forEach(tab => { - const activeClasses = parseClassList(tab.getAttribute('data-tab-active-classes')); - const inactiveClasses = parseClassList(tab.getAttribute('data-tab-inactive-classes')); + const triggers = group.querySelectorAll("[data-tab-trigger]"); + triggers.forEach((tab) => { + const activeClasses = parseClassList(tab.getAttribute("data-tab-active-classes")); + const inactiveClasses = parseClassList(tab.getAttribute("data-tab-inactive-classes")); tab.classList.remove(...activeClasses); tab.classList.add(...inactiveClasses); }); // mark clicked tab as active - const activeClasses = parseClassList(clickedTab.getAttribute('data-tab-active-classes')); - const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes')); + const activeClasses = parseClassList(clickedTab.getAttribute("data-tab-active-classes")); + const inactiveClasses = parseClassList(clickedTab.getAttribute("data-tab-inactive-classes")); clickedTab.classList.remove(...inactiveClasses); clickedTab.classList.add(...activeClasses); }; @@ -28,7 +28,7 @@ const onDiscoverTabClick = (event: MouseEvent): void => { return; } - const trigger = target.closest('[data-tab-trigger]'); + const trigger = target.closest("[data-tab-trigger]"); if (!trigger) { return; } @@ -37,7 +37,7 @@ const onDiscoverTabClick = (event: MouseEvent): void => { }; const initDiscoverTabs = (): void => { - document.addEventListener('click', onDiscoverTabClick); + document.addEventListener("click", onDiscoverTabClick); }; initDiscoverTabs(); @@ -48,46 +48,46 @@ const initSurpriseMe = (): void => { const onClick = async (): Promise => { if (isFetchingRandom) return; - const btn = document.getElementById('surprise-btn') as HTMLButtonElement | null; + const btn = document.getElementById("surprise-btn") as HTMLButtonElement | null; if (!btn) return; isFetchingRandom = true; - const spinner = document.getElementById('surprise-spinner'); - const text = document.getElementById('surprise-text'); - const icon = document.getElementById('surprise-icon'); + const spinner = document.getElementById("surprise-spinner"); + const text = document.getElementById("surprise-text"); + const icon = document.getElementById("surprise-icon"); btn.disabled = true; - spinner?.classList.remove('hidden'); - icon?.classList.add('hidden'); - if (text) text.textContent = 'Picking…'; + spinner?.classList.remove("hidden"); + icon?.classList.add("hidden"); + if (text) text.textContent = "Picking…"; try { - const res = await fetch(`/api/jikan/random/anime?t=${Date.now()}`, { cache: 'no-store' }); - if (!res.ok) throw new Error('Failed to fetch random anime'); + const res = await fetch(`/api/jikan/random/anime?t=${Date.now()}`, { cache: "no-store" }); + if (!res.ok) throw new Error("Failed to fetch random anime"); const json = (await res.json()) as unknown; const data = (json as { data?: unknown }).data as { mal_id?: unknown } | undefined; - const malId = typeof data?.mal_id === 'number' ? data.mal_id : 0; + const malId = typeof data?.mal_id === "number" ? data.mal_id : 0; if (malId > 0) { window.location.href = `/anime/${malId}`; return; } - throw new Error('Random anime missing mal_id'); + throw new Error("Random anime missing mal_id"); } catch (error) { console.error(error); - alert('Could not pick a random anime right now. Please try again.'); + alert("Could not pick a random anime right now. Please try again."); } finally { isFetchingRandom = false; btn.disabled = false; - spinner?.classList.add('hidden'); - icon?.classList.remove('hidden'); - if (text) text.textContent = 'Surprise Me'; + spinner?.classList.add("hidden"); + icon?.classList.remove("hidden"); + if (text) text.textContent = "Surprise Me"; } }; - document.addEventListener('click', e => { + document.addEventListener("click", (e) => { const target = e.target; if (!(target instanceof Element)) return; - const surprise = target.closest('[data-surprise-me]'); + const surprise = target.closest("[data-surprise-me]"); if (!surprise) return; void onClick(); }); diff --git a/static/dropdown.ts b/static/dropdown.ts index c4b496e..89c2350 100644 --- a/static/dropdown.ts +++ b/static/dropdown.ts @@ -10,22 +10,22 @@ class UIDropdown extends HTMLElement { } connectedCallback(): void { - const trigger = this.querySelector('[data-trigger]'); - this.contentEl = this.querySelector('[data-content]'); + const trigger = this.querySelector("[data-trigger]"); + this.contentEl = this.querySelector("[data-content]"); if (trigger) { - trigger.addEventListener('click', this.toggle); + trigger.addEventListener("click", this.toggle); } - document.addEventListener('click', this.handleClickOutside); + document.addEventListener("click", this.handleClickOutside); } disconnectedCallback(): void { - const trigger = this.querySelector('[data-trigger]'); + const trigger = this.querySelector("[data-trigger]"); if (trigger) { - trigger.removeEventListener('click', this.toggle); + trigger.removeEventListener("click", this.toggle); } - document.removeEventListener('click', this.handleClickOutside); + document.removeEventListener("click", this.handleClickOutside); } toggle(): void { @@ -35,9 +35,9 @@ class UIDropdown extends HTMLElement { this.isOpen = !this.isOpen; if (this.contentEl) { if (this.isOpen) { - this.contentEl.classList.remove('hidden'); + this.contentEl.classList.remove("hidden"); } else { - this.contentEl.classList.add('hidden'); + this.contentEl.classList.add("hidden"); } } } @@ -49,7 +49,7 @@ class UIDropdown extends HTMLElement { this.isClosing = true; this.isOpen = false; if (this.contentEl) { - this.contentEl.classList.add('hidden'); + this.contentEl.classList.add("hidden"); } setTimeout(() => { this.isClosing = false; @@ -63,24 +63,24 @@ class UIDropdown extends HTMLElement { } } -customElements.define('ui-dropdown', UIDropdown); +customElements.define("ui-dropdown", UIDropdown); const initStudioDropdown = (): void => { - document.addEventListener('click', e => { + document.addEventListener("click", (e) => { const target = e.target; if (!(target instanceof Element)) return; - const btn = target.closest('button[data-studio-select]'); + const btn = target.closest("button[data-studio-select]"); if (!btn) return; - const input = document.getElementById('studio-input') as HTMLInputElement | null; - const form = document.getElementById('browse-search-form') as HTMLFormElement | null; + const input = document.getElementById("studio-input") as HTMLInputElement | null; + const form = document.getElementById("browse-search-form") as HTMLFormElement | null; if (!input || !form) return; - input.value = btn.dataset.studioSelect ?? ''; + input.value = btn.dataset.studioSelect ?? ""; form.requestSubmit(); - const dropdown = btn.closest('ui-dropdown') as { close?: () => void } | null; + const dropdown = btn.closest("ui-dropdown") as { close?: () => void } | null; dropdown?.close?.(); }); };