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

chore: format watchlist

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:28:25 +02:00
parent 9f88e48786
commit a4cf0375b7
1 changed files with 135 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
static/watchlist.ts
View File

@@ -1,13 +1,13 @@
export {}; export {};
type WatchlistStatus = 'watching' | 'completed' | 'plan_to_watch' | 'dropped'; type WatchlistStatus = "watching" | "completed" | "plan_to_watch" | "dropped";
type WatchlistUpdateDisplay = type WatchlistUpdateDisplay =
| 'Watching' | "Watching"
| 'Completed' | "Completed"
| 'Plan to Watch' | "Plan to Watch"
| 'Dropped' | "Dropped"
| 'Add to Watchlist'; | "Add to Watchlist";
const watchlistIds = new Set<number>(); const watchlistIds = new Set<number>();
const inflight = new Set<number>(); const inflight = new Set<number>();
@@ -16,7 +16,7 @@ const getShowToast = (): ((opts: { message: string; duration?: number }) => void
const anyWindow = window as unknown as { const anyWindow = window as unknown as {
showToast?: (opts: { message: string; duration?: number }) => void; showToast?: (opts: { message: string; duration?: number }) => void;
}; };
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 => {
@@ -32,13 +32,13 @@ const toInt = (value: string | undefined): number | null => {
const withTimeout = async <T>(promise: Promise<T>, ms: number): Promise<T> => { const withTimeout = async <T>(promise: Promise<T>, ms: number): Promise<T> => {
let timeoutId: number | undefined; let timeoutId: number | undefined;
const timeout = new Promise<never>((_, reject) => { const timeout = new Promise<never>((_, reject) => {
timeoutId = window.setTimeout(() => reject(new Error('timeout')), ms); timeoutId = window.setTimeout(() => reject(new Error("timeout")), ms);
}); });
try { try {
return await Promise.race([promise, timeout]); return await Promise.race([promise, timeout]);
} finally { } finally {
if (typeof timeoutId === 'number') { if (typeof timeoutId === "number") {
window.clearTimeout(timeoutId); window.clearTimeout(timeoutId);
} }
} }
@@ -50,29 +50,31 @@ const requestJson = async (input: string, init: RequestInit): Promise<Response>
const syncRemoveButtonVisibility = (id: number): void => { const syncRemoveButtonVisibility = (id: number): void => {
const container = document.getElementById(`remove-watchlist-container-${id}`); const container = document.getElementById(`remove-watchlist-container-${id}`);
if (!container) return; if (!container) return;
container.classList.toggle('hidden', !watchlistIds.has(id)); container.classList.toggle("hidden", !watchlistIds.has(id));
}; };
const syncWatchlistDropdown = (id: number, inWatchlist: boolean): void => { const syncWatchlistDropdown = (id: number, inWatchlist: boolean): void => {
const statusDisplay = document.getElementById(`watchlist-status-display-${id}`); const statusDisplay = document.getElementById(`watchlist-status-display-${id}`);
if (!statusDisplay) return; if (!statusDisplay) return;
statusDisplay.textContent = inWatchlist ? 'Plan to Watch' : 'Add to Watchlist'; statusDisplay.textContent = inWatchlist ? "Plan to Watch" : "Add to Watchlist";
syncRemoveButtonVisibility(id); syncRemoveButtonVisibility(id);
}; };
const syncIconsForId = (id: number): void => { const syncIconsForId = (id: number): void => {
const shouldBeInWatchlist = watchlistIds.has(id); const shouldBeInWatchlist = watchlistIds.has(id);
document.querySelectorAll<HTMLElement>('[data-watchlist-toggle][data-mal-id]').forEach(button => { document
const malId = toInt(button.dataset.malId); .querySelectorAll<HTMLElement>("[data-watchlist-toggle][data-mal-id]")
if (malId !== id) return; .forEach((button) => {
button.classList.toggle('in-watchlist', shouldBeInWatchlist); const malId = toInt(button.dataset.malId);
button.dataset.watchlistState = shouldBeInWatchlist ? 'in' : 'out'; if (malId !== id) return;
button.setAttribute( button.classList.toggle("in-watchlist", shouldBeInWatchlist);
'aria-label', button.dataset.watchlistState = shouldBeInWatchlist ? "in" : "out";
shouldBeInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist' button.setAttribute(
); "aria-label",
button.toggleAttribute('aria-busy', inflight.has(id)); shouldBeInWatchlist ? "Remove from Watchlist" : "Add to Watchlist",
}); );
button.toggleAttribute("aria-busy", inflight.has(id));
});
}; };
const setBusy = (id: number, busy: boolean): void => { const setBusy = (id: number, busy: boolean): void => {
@@ -83,29 +85,29 @@ const setBusy = (id: number, busy: boolean): void => {
} }
document document
.querySelectorAll<HTMLButtonElement>('[data-watchlist-toggle][data-mal-id]') .querySelectorAll<HTMLButtonElement>("[data-watchlist-toggle][data-mal-id]")
.forEach(button => { .forEach((button) => {
const malId = toInt(button.dataset.malId); const malId = toInt(button.dataset.malId);
if (malId !== id) return; if (malId !== id) return;
button.disabled = busy; button.disabled = busy;
button.toggleAttribute('aria-busy', busy); button.toggleAttribute("aria-busy", busy);
}); });
document document
.querySelectorAll<HTMLButtonElement>( .querySelectorAll<HTMLButtonElement>(
'[data-watchlist-update][data-mal-id], [data-watchlist-remove][data-mal-id]' "[data-watchlist-update][data-mal-id], [data-watchlist-remove][data-mal-id]",
) )
.forEach(button => { .forEach((button) => {
const malId = toInt(button.dataset.malId); const malId = toInt(button.dataset.malId);
if (malId !== id) return; if (malId !== id) return;
button.disabled = busy; button.disabled = busy;
button.toggleAttribute('aria-busy', busy); button.toggleAttribute("aria-busy", busy);
}); });
}; };
const closeClosestDropdown = (from: HTMLElement): void => { const closeClosestDropdown = (from: HTMLElement): void => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
const dropdown = from.closest('ui-dropdown') as { close?: () => void } | null; const dropdown = from.closest("ui-dropdown") as { close?: () => void } | null;
dropdown?.close?.(); dropdown?.close?.();
}); });
}; };
@@ -113,12 +115,12 @@ const closeClosestDropdown = (from: HTMLElement): void => {
const toggleWatchlist = async ( const toggleWatchlist = async (
id: number, id: number,
title: string, title: string,
renderedState: string | undefined renderedState: string | undefined,
): Promise<void> => { ): Promise<void> => {
if (inflight.has(id)) return; if (inflight.has(id)) return;
if (renderedState === 'in') { if (renderedState === "in") {
watchlistIds.add(id); watchlistIds.add(id);
} else if (renderedState === 'out') { } else if (renderedState === "out") {
watchlistIds.delete(id); watchlistIds.delete(id);
} }
@@ -135,21 +137,21 @@ const toggleWatchlist = async (
syncIconsForId(id); syncIconsForId(id);
syncWatchlistDropdown(id, optimisticNext); syncWatchlistDropdown(id, optimisticNext);
const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist'; const url = isInWatchlist ? `/api/watchlist/${id}` : "/api/watchlist";
const method: 'DELETE' | 'POST' = isInWatchlist ? 'DELETE' : 'POST'; const method: "DELETE" | "POST" = isInWatchlist ? "DELETE" : "POST";
const body = isInWatchlist const body = isInWatchlist
? null ? null
: JSON.stringify({ animeId: id, status: 'plan_to_watch' satisfies WatchlistStatus }); : JSON.stringify({ animeId: id, status: "plan_to_watch" satisfies WatchlistStatus });
try { try {
const response = await requestJson(url, { const response = await requestJson(url, {
method, method,
headers: body ? { 'Content-Type': 'application/json' } : {}, headers: body ? { "Content-Type": "application/json" } : {},
body: body ?? undefined, body: body ?? undefined,
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('not ok'); throw new Error("not ok");
} }
toast(optimisticNext ? `Added ${title} to watchlist` : `Removed ${title} from watchlist`); toast(optimisticNext ? `Added ${title} to watchlist` : `Removed ${title} from watchlist`);
@@ -161,7 +163,7 @@ const toggleWatchlist = async (
} }
syncIconsForId(id); syncIconsForId(id);
syncWatchlistDropdown(id, watchlistIds.has(id)); syncWatchlistDropdown(id, watchlistIds.has(id));
toast('Failed to update watchlist'); toast("Failed to update watchlist");
} finally { } finally {
setBusy(id, false); setBusy(id, false);
syncIconsForId(id); syncIconsForId(id);
@@ -169,10 +171,10 @@ const toggleWatchlist = async (
} }
}; };
type WatchlistSort = 'date' | 'title'; type WatchlistSort = "date" | "title";
const csvEscape = (value: unknown): string => { const csvEscape = (value: unknown): string => {
const str = String(value ?? ''); const str = String(value ?? "");
if (/[",\r\n]/.test(str)) { if (/[",\r\n]/.test(str)) {
return `"${str.replace(/"/g, '""')}"`; return `"${str.replace(/"/g, '""')}"`;
} }
@@ -180,36 +182,36 @@ const csvEscape = (value: unknown): string => {
}; };
const watchlistItems = (): HTMLElement[] => const watchlistItems = (): HTMLElement[] =>
Array.from(document.querySelectorAll<HTMLElement>('.watchlist-item')); Array.from(document.querySelectorAll<HTMLElement>(".watchlist-item"));
const sortVisibleWatchlistItems = (sortBy: WatchlistSort, desc: boolean): void => { const sortVisibleWatchlistItems = (sortBy: WatchlistSort, desc: boolean): void => {
const grids: HTMLElement[] = []; const grids: HTMLElement[] = [];
const singleGrid = document.getElementById('watchlist-items'); const singleGrid = document.getElementById("watchlist-items");
if (singleGrid) { if (singleGrid) {
grids.push(singleGrid); grids.push(singleGrid);
} }
document document
.querySelectorAll<HTMLElement>('.watchlist-section .grid') .querySelectorAll<HTMLElement>(".watchlist-section .grid")
.forEach(grid => grids.push(grid)); .forEach((grid) => grids.push(grid));
const sortItemsInGrid = (grid: HTMLElement): void => { const sortItemsInGrid = (grid: HTMLElement): void => {
const items = Array.from(grid.querySelectorAll<HTMLElement>('.watchlist-item')); const items = Array.from(grid.querySelectorAll<HTMLElement>(".watchlist-item"));
items.sort((a, b) => { items.sort((a, b) => {
let comparison = 0; let comparison = 0;
if (sortBy === 'title') { if (sortBy === "title") {
const titleA = (a.querySelector('h3')?.textContent ?? '').toLowerCase().trim(); const titleA = (a.querySelector("h3")?.textContent ?? "").toLowerCase().trim();
const titleB = (b.querySelector('h3')?.textContent ?? '').toLowerCase().trim(); const titleB = (b.querySelector("h3")?.textContent ?? "").toLowerCase().trim();
comparison = titleA.localeCompare(titleB); comparison = titleA.localeCompare(titleB);
} else { } else {
const dateA = Number.parseInt(a.dataset.updatedAt ?? '0', 10) || 0; const dateA = Number.parseInt(a.dataset.updatedAt ?? "0", 10) || 0;
const dateB = Number.parseInt(b.dataset.updatedAt ?? '0', 10) || 0; const dateB = Number.parseInt(b.dataset.updatedAt ?? "0", 10) || 0;
comparison = dateA - dateB; comparison = dateA - dateB;
} }
return desc ? -comparison : comparison; return desc ? -comparison : comparison;
}); });
items.forEach(item => grid.appendChild(item)); items.forEach((item) => grid.appendChild(item));
}; };
grids.forEach(sortItemsInGrid); grids.forEach(sortItemsInGrid);
@@ -218,37 +220,37 @@ const sortVisibleWatchlistItems = (sortBy: WatchlistSort, desc: boolean): void =
const setActiveFilterButton = (clicked: HTMLButtonElement): void => { const setActiveFilterButton = (clicked: HTMLButtonElement): void => {
const parent = clicked.parentElement; const parent = clicked.parentElement;
if (!parent) return; if (!parent) return;
parent.querySelectorAll('button').forEach(b => { parent.querySelectorAll("button").forEach((b) => {
b.classList.remove('text-foreground'); b.classList.remove("text-foreground");
b.classList.add('text-foreground-muted'); b.classList.add("text-foreground-muted");
b.classList.remove('border-accent'); b.classList.remove("border-accent");
b.classList.add('border-transparent'); b.classList.add("border-transparent");
}); });
clicked.classList.remove('text-foreground-muted'); clicked.classList.remove("text-foreground-muted");
clicked.classList.add('text-foreground'); clicked.classList.add("text-foreground");
clicked.classList.remove('border-transparent'); clicked.classList.remove("border-transparent");
clicked.classList.add('border-accent'); clicked.classList.add("border-accent");
}; };
const applyWatchlistFilter = (status: string): void => { const applyWatchlistFilter = (status: string): void => {
const sections = Array.from(document.querySelectorAll<HTMLElement>('.watchlist-section')); const sections = Array.from(document.querySelectorAll<HTMLElement>(".watchlist-section"));
if (sections.length) { if (sections.length) {
sections.forEach(section => { sections.forEach((section) => {
if (status === 'all') { if (status === "all") {
section.style.display = 'block'; section.style.display = "block";
return; return;
} }
section.style.display = section.dataset.status === status ? 'block' : 'none'; section.style.display = section.dataset.status === status ? "block" : "none";
}); });
return; return;
} }
watchlistItems().forEach(item => { watchlistItems().forEach((item) => {
if (status === 'all') { if (status === "all") {
item.style.display = 'flex'; item.style.display = "flex";
return; return;
} }
item.style.display = item.dataset.status === status ? 'flex' : 'none'; item.style.display = item.dataset.status === status ? "flex" : "none";
}); });
}; };
@@ -256,26 +258,26 @@ const exportWatchlistCsv = (): void => {
const rows = watchlistItems() const rows = watchlistItems()
.slice() .slice()
.sort((a, b) => { .sort((a, b) => {
const dateA = Number.parseInt(a.dataset.updatedAt ?? '0', 10) || 0; const dateA = Number.parseInt(a.dataset.updatedAt ?? "0", 10) || 0;
const dateB = Number.parseInt(b.dataset.updatedAt ?? '0', 10) || 0; const dateB = Number.parseInt(b.dataset.updatedAt ?? "0", 10) || 0;
return dateB - dateA; return dateB - dateA;
}) })
.map(item => { .map((item) => {
const updatedAt = Number.parseInt(item.dataset.updatedAt ?? '0', 10) || 0; const updatedAt = Number.parseInt(item.dataset.updatedAt ?? "0", 10) || 0;
const updatedAtISO = updatedAt > 0 ? new Date(updatedAt * 1000).toISOString() : ''; const updatedAtISO = updatedAt > 0 ? new Date(updatedAt * 1000).toISOString() : "";
const title = item.dataset.title || item.querySelector('h3')?.textContent?.trim() || ''; const title = item.dataset.title || item.querySelector("h3")?.textContent?.trim() || "";
return [item.dataset.malId || '', title, item.dataset.status || '', updatedAtISO]; return [item.dataset.malId || "", title, item.dataset.status || "", updatedAtISO];
}); });
const csv = [['mal_id', 'title', 'status', 'updated_at'], ...rows] const csv = [["mal_id", "title", "status", "updated_at"], ...rows]
.map(row => row.map(csvEscape).join(',')) .map((row) => row.map(csvEscape).join(","))
.join('\r\n'); .join("\r\n");
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' }); const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement('a'); const link = document.createElement("a");
link.href = url; link.href = url;
link.download = 'watchlist.csv'; link.download = "watchlist.csv";
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
link.remove(); link.remove();
@@ -283,58 +285,58 @@ const exportWatchlistCsv = (): void => {
}; };
const initWatchlistPage = (): void => { const initWatchlistPage = (): void => {
let currentSortBy: WatchlistSort = 'date'; let currentSortBy: WatchlistSort = "date";
let sortOrderDesc = true; let sortOrderDesc = true;
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc); sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
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 filterBtn = target.closest<HTMLButtonElement>('button[data-watchlist-filter]'); const filterBtn = target.closest<HTMLButtonElement>("button[data-watchlist-filter]");
if (filterBtn) { if (filterBtn) {
const status = filterBtn.dataset.watchlistFilter ?? 'all'; const status = filterBtn.dataset.watchlistFilter ?? "all";
setActiveFilterButton(filterBtn); setActiveFilterButton(filterBtn);
applyWatchlistFilter(status); applyWatchlistFilter(status);
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc); sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
return; return;
} }
const sortBtn = target.closest<HTMLButtonElement>('button[data-watchlist-sort]'); const sortBtn = target.closest<HTMLButtonElement>("button[data-watchlist-sort]");
if (sortBtn) { if (sortBtn) {
const sortBy = sortBtn.dataset.watchlistSort === 'title' ? 'title' : 'date'; const sortBy = sortBtn.dataset.watchlistSort === "title" ? "title" : "date";
currentSortBy = sortBy; currentSortBy = sortBy;
const display = document.getElementById('sort-by-display'); const display = document.getElementById("sort-by-display");
if (display) { if (display) {
display.textContent = currentSortBy === 'date' ? 'Date Added' : 'Title'; display.textContent = currentSortBy === "date" ? "Date Added" : "Title";
} }
const dropdownContent = sortBtn.closest('[data-content]'); const dropdownContent = sortBtn.closest("[data-content]");
dropdownContent?.querySelectorAll('button').forEach(b => { dropdownContent?.querySelectorAll("button").forEach((b) => {
b.classList.remove('text-foreground'); b.classList.remove("text-foreground");
b.classList.add('text-foreground-muted'); b.classList.add("text-foreground-muted");
}); });
sortBtn.classList.remove('text-foreground-muted'); sortBtn.classList.remove("text-foreground-muted");
sortBtn.classList.add('text-foreground'); sortBtn.classList.add("text-foreground");
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc); sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
const parentDropdown = sortBtn.closest('ui-dropdown') as { close?: () => void } | null; const parentDropdown = sortBtn.closest("ui-dropdown") as { close?: () => void } | null;
parentDropdown?.close?.(); parentDropdown?.close?.();
return; return;
} }
const sortOrderBtn = target.closest<HTMLButtonElement>('button[data-watchlist-sort-order]'); const sortOrderBtn = target.closest<HTMLButtonElement>("button[data-watchlist-sort-order]");
if (sortOrderBtn) { if (sortOrderBtn) {
sortOrderDesc = !sortOrderDesc; sortOrderDesc = !sortOrderDesc;
const icon = sortOrderBtn.querySelector('svg'); const icon = sortOrderBtn.querySelector("svg");
icon?.classList.toggle('rotate-180', !sortOrderDesc); icon?.classList.toggle("rotate-180", !sortOrderDesc);
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc); sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
return; return;
} }
const exportBtn = target.closest<HTMLButtonElement>('button[data-watchlist-export]'); const exportBtn = target.closest<HTMLButtonElement>("button[data-watchlist-export]");
if (exportBtn) { if (exportBtn) {
exportWatchlistCsv(); exportWatchlistCsv();
return; return;
@@ -347,7 +349,7 @@ const updateWatchlist = async (
status: WatchlistStatus, status: WatchlistStatus,
display: WatchlistUpdateDisplay, display: WatchlistUpdateDisplay,
title: string, title: string,
source: HTMLElement source: HTMLElement,
): Promise<void> => { ): Promise<void> => {
if (inflight.has(id)) return; if (inflight.has(id)) return;
setBusy(id, true); setBusy(id, true);
@@ -358,14 +360,14 @@ const updateWatchlist = async (
syncRemoveButtonVisibility(id); syncRemoveButtonVisibility(id);
try { try {
const response = await requestJson('/api/watchlist', { const response = await requestJson("/api/watchlist", {
method: 'POST', method: "POST",
headers: { 'Content-Type': 'application/json' }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ animeId: id, status }), body: JSON.stringify({ animeId: id, status }),
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('not ok'); throw new Error("not ok");
} }
const statusDisplay = document.getElementById(`watchlist-status-display-${id}`); const statusDisplay = document.getElementById(`watchlist-status-display-${id}`);
@@ -381,7 +383,7 @@ const updateWatchlist = async (
} }
syncIconsForId(id); syncIconsForId(id);
syncRemoveButtonVisibility(id); syncRemoveButtonVisibility(id);
toast('Failed to update watchlist'); toast("Failed to update watchlist");
} finally { } finally {
setBusy(id, false); setBusy(id, false);
} }
@@ -397,18 +399,18 @@ const removeWatchlist = async (id: number, title: string, source: HTMLElement):
syncWatchlistDropdown(id, false); syncWatchlistDropdown(id, false);
try { try {
const response = await requestJson(`/api/watchlist/${id}`, { method: 'DELETE' }); const response = await requestJson(`/api/watchlist/${id}`, { method: "DELETE" });
if (!response.ok) { if (!response.ok) {
throw new Error('not ok'); throw new Error("not ok");
} }
closeClosestDropdown(source); closeClosestDropdown(source);
toast(`Removed ${title} from watchlist`); toast(`Removed ${title} from watchlist`);
const card = source.closest('.watchlist-item'); const card = source.closest(".watchlist-item");
if (card instanceof HTMLElement) { if (card instanceof HTMLElement) {
card.remove(); card.remove();
const remaining = document.querySelectorAll('.watchlist-item').length; const remaining = document.querySelectorAll(".watchlist-item").length;
if (remaining === 0) { if (remaining === 0) {
window.setTimeout(() => window.location.reload(), 50); window.setTimeout(() => window.location.reload(), 50);
} }
@@ -419,22 +421,22 @@ const removeWatchlist = async (id: number, title: string, source: HTMLElement):
} }
syncIconsForId(id); syncIconsForId(id);
syncWatchlistDropdown(id, watchlistIds.has(id)); syncWatchlistDropdown(id, watchlistIds.has(id));
toast('Failed to update watchlist'); toast("Failed to update watchlist");
} finally { } finally {
setBusy(id, false); setBusy(id, false);
syncRemoveButtonVisibility(id); syncRemoveButtonVisibility(id);
} }
}; };
if (document.readyState === 'loading') { if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', initWatchlistPage); document.addEventListener("DOMContentLoaded", initWatchlistPage);
} else { } else {
initWatchlistPage(); initWatchlistPage();
} }
const initWatchlist = (ids: number[]): void => { const initWatchlist = (ids: number[]): void => {
ids.forEach(id => watchlistIds.add(id)); ids.forEach((id) => watchlistIds.add(id));
ids.forEach(id => { ids.forEach((id) => {
syncRemoveButtonVisibility(id); syncRemoveButtonVisibility(id);
syncIconsForId(id); syncIconsForId(id);
}); });
@@ -445,9 +447,9 @@ const getRenderedWatchlistIds = (): number[] => {
document document
.querySelectorAll<HTMLElement>( .querySelectorAll<HTMLElement>(
'[data-watchlist-toggle][data-watchlist-state="in"][data-mal-id]' '[data-watchlist-toggle][data-watchlist-state="in"][data-mal-id]',
) )
.forEach(button => { .forEach((button) => {
const id = toInt(button.dataset.malId); const id = toInt(button.dataset.malId);
if (id === null) return; if (id === null) return;
ids.add(id); ids.add(id);
@@ -457,8 +459,8 @@ const getRenderedWatchlistIds = (): number[] => {
}; };
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;
} }
@@ -466,45 +468,45 @@ const onReady = (fn: () => void): void => {
}; };
const installDelegatedHandlers = (): void => { const installDelegatedHandlers = (): void => {
document.addEventListener('click', event => { document.addEventListener("click", (event) => {
const target = event.target; const target = event.target;
if (!(target instanceof Element)) return; if (!(target instanceof Element)) return;
const toggleButton = target.closest('[data-watchlist-toggle]') as HTMLElement | null; const toggleButton = target.closest("[data-watchlist-toggle]") as HTMLElement | null;
if (toggleButton) { if (toggleButton) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const id = toInt(toggleButton.getAttribute('data-mal-id') ?? undefined); const id = toInt(toggleButton.getAttribute("data-mal-id") ?? undefined);
if (id === null) return; if (id === null) return;
const title = toggleButton.getAttribute('data-watchlist-title') ?? 'anime'; const title = toggleButton.getAttribute("data-watchlist-title") ?? "anime";
void toggleWatchlist(id, title, toggleButton.dataset.watchlistState); void toggleWatchlist(id, title, toggleButton.dataset.watchlistState);
return; return;
} }
const updateButton = target.closest('[data-watchlist-update]') as HTMLElement | null; const updateButton = target.closest("[data-watchlist-update]") as HTMLElement | null;
if (updateButton) { if (updateButton) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const id = toInt(updateButton.getAttribute('data-mal-id') ?? undefined); const id = toInt(updateButton.getAttribute("data-mal-id") ?? undefined);
if (id === null) return; if (id === null) return;
const status = updateButton.getAttribute('data-watchlist-status') as WatchlistStatus | null; const status = updateButton.getAttribute("data-watchlist-status") as WatchlistStatus | null;
const display = updateButton.getAttribute( const display = updateButton.getAttribute(
'data-watchlist-display' "data-watchlist-display",
) as WatchlistUpdateDisplay | null; ) as WatchlistUpdateDisplay | null;
const title = updateButton.getAttribute('data-watchlist-title') ?? 'anime'; const title = updateButton.getAttribute("data-watchlist-title") ?? "anime";
if (!status || !display) return; if (!status || !display) return;
void updateWatchlist(id, status, display, title, updateButton); void updateWatchlist(id, status, display, title, updateButton);
return; return;
} }
const removeButton = target.closest('[data-watchlist-remove]') as HTMLElement | null; const removeButton = target.closest("[data-watchlist-remove]") as HTMLElement | null;
if (removeButton) { if (removeButton) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const id = toInt(removeButton.getAttribute('data-mal-id') ?? undefined); const id = toInt(removeButton.getAttribute("data-mal-id") ?? undefined);
if (id === null) return; if (id === null) return;
const title = removeButton.getAttribute('data-watchlist-title') ?? 'anime'; const title = removeButton.getAttribute("data-watchlist-title") ?? "anime";
void removeWatchlist(id, title, removeButton); void removeWatchlist(id, title, removeButton);
} }
}); });
@@ -522,7 +524,7 @@ window.initWatchlist = initWatchlist;
onReady(() => { onReady(() => {
const raw = window.__WATCHLIST_IDS__; const raw = window.__WATCHLIST_IDS__;
if (Array.isArray(raw)) { if (Array.isArray(raw)) {
const ids: number[] = raw.filter((entry): entry is number => typeof entry === 'number'); const ids: number[] = raw.filter((entry): entry is number => typeof entry === "number");
if (ids.length > 0) { if (ids.length > 0) {
initWatchlist(ids); initWatchlist(ids);
} }