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

chore: format discover and dropdown

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:27:22 +02:00
committed by Milas Holsting
parent 1536590fa2
commit 7aff463580
2 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
static/discover.ts
View File

@@ -1,4 +1,4 @@
import { parseClassList } from './utils'; import { parseClassList } from "./utils";
const setActiveDiscoverTab = (clickedTab: Element): void => { const setActiveDiscoverTab = (clickedTab: Element): void => {
const group = clickedTab.closest('[data-tab-group="discover"]'); const group = clickedTab.closest('[data-tab-group="discover"]');
@@ -7,17 +7,17 @@ const setActiveDiscoverTab = (clickedTab: Element): void => {
} }
// reset all tabs in group // reset all tabs in group
const triggers = group.querySelectorAll('[data-tab-trigger]'); const triggers = group.querySelectorAll("[data-tab-trigger]");
triggers.forEach(tab => { triggers.forEach((tab) => {
const activeClasses = parseClassList(tab.getAttribute('data-tab-active-classes')); const activeClasses = parseClassList(tab.getAttribute("data-tab-active-classes"));
const inactiveClasses = parseClassList(tab.getAttribute('data-tab-inactive-classes')); const inactiveClasses = parseClassList(tab.getAttribute("data-tab-inactive-classes"));
tab.classList.remove(...activeClasses); tab.classList.remove(...activeClasses);
tab.classList.add(...inactiveClasses); tab.classList.add(...inactiveClasses);
}); });
// mark clicked tab as active // mark clicked tab as active
const activeClasses = parseClassList(clickedTab.getAttribute('data-tab-active-classes')); const activeClasses = parseClassList(clickedTab.getAttribute("data-tab-active-classes"));
const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes')); const inactiveClasses = parseClassList(clickedTab.getAttribute("data-tab-inactive-classes"));
clickedTab.classList.remove(...inactiveClasses); clickedTab.classList.remove(...inactiveClasses);
clickedTab.classList.add(...activeClasses); clickedTab.classList.add(...activeClasses);
}; };
@@ -28,7 +28,7 @@ const onDiscoverTabClick = (event: MouseEvent): void => {
return; return;
} }
const trigger = target.closest('[data-tab-trigger]'); const trigger = target.closest("[data-tab-trigger]");
if (!trigger) { if (!trigger) {
return; return;
} }
@@ -37,7 +37,7 @@ const onDiscoverTabClick = (event: MouseEvent): void => {
}; };
const initDiscoverTabs = (): void => { const initDiscoverTabs = (): void => {
document.addEventListener('click', onDiscoverTabClick); document.addEventListener("click", onDiscoverTabClick);
}; };
initDiscoverTabs(); initDiscoverTabs();
@@ -48,46 +48,46 @@ const initSurpriseMe = (): void => {
const onClick = async (): Promise<void> => { const onClick = async (): Promise<void> => {
if (isFetchingRandom) return; if (isFetchingRandom) return;
const btn = document.getElementById('surprise-btn') as HTMLButtonElement | null; const btn = document.getElementById("surprise-btn") as HTMLButtonElement | null;
if (!btn) return; if (!btn) return;
isFetchingRandom = true; isFetchingRandom = true;
const spinner = document.getElementById('surprise-spinner'); const spinner = document.getElementById("surprise-spinner");
const text = document.getElementById('surprise-text'); const text = document.getElementById("surprise-text");
const icon = document.getElementById('surprise-icon'); const icon = document.getElementById("surprise-icon");
btn.disabled = true; btn.disabled = true;
spinner?.classList.remove('hidden'); spinner?.classList.remove("hidden");
icon?.classList.add('hidden'); icon?.classList.add("hidden");
if (text) text.textContent = 'Picking…'; if (text) text.textContent = "Picking…";
try { try {
const res = await fetch(`/api/jikan/random/anime?t=${Date.now()}`, { cache: 'no-store' }); 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'); if (!res.ok) throw new Error("Failed to fetch random anime");
const json = (await res.json()) as unknown; const json = (await res.json()) as unknown;
const data = (json as { data?: unknown }).data as { mal_id?: unknown } | undefined; 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) { if (malId > 0) {
window.location.href = `/anime/${malId}`; window.location.href = `/anime/${malId}`;
return; return;
} }
throw new Error('Random anime missing mal_id'); throw new Error("Random anime missing mal_id");
} catch (error) { } catch (error) {
console.error(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 { } finally {
isFetchingRandom = false; isFetchingRandom = false;
btn.disabled = false; btn.disabled = false;
spinner?.classList.add('hidden'); spinner?.classList.add("hidden");
icon?.classList.remove('hidden'); icon?.classList.remove("hidden");
if (text) text.textContent = 'Surprise Me'; if (text) text.textContent = "Surprise Me";
} }
}; };
document.addEventListener('click', e => { document.addEventListener("click", (e) => {
const target = e.target; const target = e.target;
if (!(target instanceof Element)) return; if (!(target instanceof Element)) return;
const surprise = target.closest('[data-surprise-me]'); const surprise = target.closest("[data-surprise-me]");
if (!surprise) return; if (!surprise) return;
void onClick(); void onClick();
}); });

34
static/dropdown.ts
View File

@@ -10,22 +10,22 @@ class UIDropdown extends HTMLElement {
} }
connectedCallback(): void { connectedCallback(): void {
const trigger = this.querySelector('[data-trigger]'); const trigger = this.querySelector("[data-trigger]");
this.contentEl = this.querySelector('[data-content]'); this.contentEl = this.querySelector("[data-content]");
if (trigger) { if (trigger) {
trigger.addEventListener('click', this.toggle); trigger.addEventListener("click", this.toggle);
} }
document.addEventListener('click', this.handleClickOutside); document.addEventListener("click", this.handleClickOutside);
} }
disconnectedCallback(): void { disconnectedCallback(): void {
const trigger = this.querySelector('[data-trigger]'); const trigger = this.querySelector("[data-trigger]");
if (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 { toggle(): void {
@@ -35,9 +35,9 @@ class UIDropdown extends HTMLElement {
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen;
if (this.contentEl) { if (this.contentEl) {
if (this.isOpen) { if (this.isOpen) {
this.contentEl.classList.remove('hidden'); this.contentEl.classList.remove("hidden");
} else { } else {
this.contentEl.classList.add('hidden'); this.contentEl.classList.add("hidden");
} }
} }
} }
@@ -49,7 +49,7 @@ class UIDropdown extends HTMLElement {
this.isClosing = true; this.isClosing = true;
this.isOpen = false; this.isOpen = false;
if (this.contentEl) { if (this.contentEl) {
this.contentEl.classList.add('hidden'); this.contentEl.classList.add("hidden");
} }
setTimeout(() => { setTimeout(() => {
this.isClosing = false; this.isClosing = false;
@@ -63,24 +63,24 @@ class UIDropdown extends HTMLElement {
} }
} }
customElements.define('ui-dropdown', UIDropdown); customElements.define("ui-dropdown", UIDropdown);
const initStudioDropdown = (): void => { const initStudioDropdown = (): void => {
document.addEventListener('click', e => { document.addEventListener("click", (e) => {
const target = e.target; const target = e.target;
if (!(target instanceof Element)) return; if (!(target instanceof Element)) return;
const btn = target.closest<HTMLButtonElement>('button[data-studio-select]'); const btn = target.closest<HTMLButtonElement>("button[data-studio-select]");
if (!btn) return; if (!btn) return;
const input = document.getElementById('studio-input') as HTMLInputElement | null; const input = document.getElementById("studio-input") as HTMLInputElement | null;
const form = document.getElementById('browse-search-form') as HTMLFormElement | null; const form = document.getElementById("browse-search-form") as HTMLFormElement | null;
if (!input || !form) return; if (!input || !form) return;
input.value = btn.dataset.studioSelect ?? ''; input.value = btn.dataset.studioSelect ?? "";
form.requestSubmit(); form.requestSubmit();
const dropdown = btn.closest('ui-dropdown') as { close?: () => void } | null; const dropdown = btn.closest("ui-dropdown") as { close?: () => void } | null;
dropdown?.close?.(); dropdown?.close?.();
}); });
}; };