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
parent 2823c6f026
commit 41128bd632
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 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<void> => {
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();
});

34
static/dropdown.ts
View File

@@ -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<HTMLButtonElement>('button[data-studio-select]');
const btn = target.closest<HTMLButtonElement>("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?.();
});
};