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

fix: remove inline watchlist js

Browse Source
This commit is contained in:
mkelvers
2026-05-26 22:33:27 +02:00
parent 2a266c6b1e
commit b63a5c48a2
3 changed files with 224 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
static/watchlist.ts
View File

@@ -169,6 +169,177 @@ const toggleWatchlist = async (
}
};
type WatchlistSort = 'date' | 'title';
const csvEscape = (value: unknown): string => {
const str = String(value ?? '');
if (/[",\r\n]/.test(str)) {
return `"${str.replace(/"/g, '""')}"`;
}
return str;
};
const watchlistItems = (): HTMLElement[] =>
Array.from(document.querySelectorAll<HTMLElement>('.watchlist-item'));
const sortVisibleWatchlistItems = (sortBy: WatchlistSort, desc: boolean): void => {
const grids: HTMLElement[] = [];
const singleGrid = document.getElementById('watchlist-items');
if (singleGrid) {
grids.push(singleGrid);
}
document.querySelectorAll<HTMLElement>('.watchlist-section .grid').forEach(grid => grids.push(grid));
const sortItemsInGrid = (grid: HTMLElement): void => {
const items = Array.from(grid.querySelectorAll<HTMLElement>('.watchlist-item'));
items.sort((a, b) => {
let comparison = 0;
if (sortBy === 'title') {
const titleA = (a.querySelector('h3')?.textContent ?? '').toLowerCase().trim();
const titleB = (b.querySelector('h3')?.textContent ?? '').toLowerCase().trim();
comparison = titleA.localeCompare(titleB);
} else {
const dateA = Number.parseInt(a.dataset.updatedAt ?? '0', 10) || 0;
const dateB = Number.parseInt(b.dataset.updatedAt ?? '0', 10) || 0;
comparison = dateA - dateB;
}
return desc ? -comparison : comparison;
});
items.forEach(item => grid.appendChild(item));
};
grids.forEach(sortItemsInGrid);
};
const setActiveFilterButton = (clicked: HTMLButtonElement): void => {
const parent = clicked.parentElement;
if (!parent) return;
parent.querySelectorAll('button').forEach(b => {
b.classList.remove('text-foreground');
b.classList.add('text-foreground-muted');
b.classList.remove('border-accent');
b.classList.add('border-transparent');
});
clicked.classList.remove('text-foreground-muted');
clicked.classList.add('text-foreground');
clicked.classList.remove('border-transparent');
clicked.classList.add('border-accent');
};
const applyWatchlistFilter = (status: string): void => {
const sections = Array.from(document.querySelectorAll<HTMLElement>('.watchlist-section'));
if (sections.length) {
sections.forEach(section => {
if (status === 'all') {
section.style.display = 'block';
return;
}
section.style.display = section.dataset.status === status ? 'block' : 'none';
});
return;
}
watchlistItems().forEach(item => {
if (status === 'all') {
item.style.display = 'flex';
return;
}
item.style.display = item.dataset.status === status ? 'flex' : 'none';
});
};
const exportWatchlistCsv = (): void => {
const rows = watchlistItems()
.slice()
.sort((a, b) => {
const dateA = Number.parseInt(a.dataset.updatedAt ?? '0', 10) || 0;
const dateB = Number.parseInt(b.dataset.updatedAt ?? '0', 10) || 0;
return dateB - dateA;
})
.map(item => {
const updatedAt = Number.parseInt(item.dataset.updatedAt ?? '0', 10) || 0;
const updatedAtISO = updatedAt > 0 ? new Date(updatedAt * 1000).toISOString() : '';
const title = item.dataset.title || item.querySelector('h3')?.textContent?.trim() || '';
return [item.dataset.malId || '', title, item.dataset.status || '', updatedAtISO];
});
const csv = [['mal_id', 'title', 'status', 'updated_at'], ...rows]
.map(row => row.map(csvEscape).join(','))
.join('\r\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'watchlist.csv';
document.body.appendChild(link);
link.click();
link.remove();
URL.revokeObjectURL(url);
};
const initWatchlistPage = (): void => {
let currentSortBy: WatchlistSort = 'date';
let sortOrderDesc = true;
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
document.addEventListener('click', e => {
const target = e.target;
if (!(target instanceof Element)) return;
const filterBtn = target.closest<HTMLButtonElement>('button[data-watchlist-filter]');
if (filterBtn) {
const status = filterBtn.dataset.watchlistFilter ?? 'all';
setActiveFilterButton(filterBtn);
applyWatchlistFilter(status);
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
return;
}
const sortBtn = target.closest<HTMLButtonElement>('button[data-watchlist-sort]');
if (sortBtn) {
const sortBy = sortBtn.dataset.watchlistSort === 'title' ? 'title' : 'date';
currentSortBy = sortBy;
const display = document.getElementById('sort-by-display');
if (display) {
display.textContent = currentSortBy === 'date' ? 'Date Added' : 'Title';
}
const dropdownContent = sortBtn.closest('[data-content]');
dropdownContent?.querySelectorAll('button').forEach(b => {
b.classList.remove('text-foreground');
b.classList.add('text-foreground-muted');
});
sortBtn.classList.remove('text-foreground-muted');
sortBtn.classList.add('text-foreground');
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
const parentDropdown = sortBtn.closest('ui-dropdown') as { close?: () => void } | null;
parentDropdown?.close?.();
return;
}
const sortOrderBtn = target.closest<HTMLButtonElement>('button[data-watchlist-sort-order]');
if (sortOrderBtn) {
sortOrderDesc = !sortOrderDesc;
const icon = sortOrderBtn.querySelector('svg');
icon?.classList.toggle('rotate-180', !sortOrderDesc);
sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
return;
}
const exportBtn = target.closest<HTMLButtonElement>('button[data-watchlist-export]');
if (exportBtn) {
exportWatchlistCsv();
return;
}
});
};
const updateWatchlist = async (
id: number,
status: WatchlistStatus,
@@ -253,6 +424,12 @@ const removeWatchlist = async (id: number, title: string, source: HTMLElement):
}
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initWatchlistPage);
} else {
initWatchlistPage();
}
const initWatchlist = (ids: number[]): void => {
ids.forEach(id => watchlistIds.add(id));
ids.forEach(id => {

146
templates/watchlist.gohtml
View File

@@ -6,15 +6,15 @@
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-4">
<button data-unstyled-button class="border-b border-accent pb-1 text-sm font-normal text-foreground transition-colors" onclick="filterWatchlist('all', this)">All</button>
<button data-unstyled-button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
<button data-unstyled-button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
<button data-unstyled-button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
<button data-unstyled-button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
<button data-unstyled-button data-watchlist-filter="all" class="border-b border-accent pb-1 text-sm font-normal text-foreground transition-colors">All</button>
<button data-unstyled-button data-watchlist-filter="watching" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Watching</button>
<button data-unstyled-button data-watchlist-filter="plan_to_watch" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Plan to Watch</button>
<button data-unstyled-button data-watchlist-filter="completed" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Completed</button>
<button data-unstyled-button data-watchlist-filter="dropped" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Dropped</button>
</div>
<div class="flex items-center gap-4">
<button type="button" data-unstyled-button class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" onclick="exportWatchlistCsv()" title="Export to CSV" aria-label="Export to CSV">
<button type="button" data-unstyled-button data-watchlist-export class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" title="Export to CSV" aria-label="Export to CSV">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<path d="M7 10l5 5 5-5"/>
@@ -31,13 +31,13 @@
</div>
<div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 right-0 top-full mt-2">
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent" onclick="setSortBy('date', this)">Date Added</button>
<button class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent" onclick="setSortBy('title', this)">Title</button>
<button data-watchlist-sort="date" class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent">Date Added</button>
<button data-watchlist-sort="title" class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent">Title</button>
</div>
</div>
</ui-dropdown>
<button type="button" id="sort-order-btn" data-unstyled-button class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" onclick="toggleSortOrder(this)">
<button type="button" id="sort-order-btn" data-unstyled-button data-watchlist-sort-order class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
</button>
</div>
@@ -88,132 +88,4 @@
</div>
</div>
<script>
let currentSortBy = 'date'
let sortOrderDesc = true
function filterWatchlist(status, btn) {
// Update active tab styling
const parent = btn.parentElement
parent.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
b.classList.remove('border-accent')
b.classList.add('border-transparent')
})
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
btn.classList.remove('border-transparent')
btn.classList.add('border-accent')
// Show/hide items
document.querySelectorAll('.watchlist-item').forEach(function(item) {
if (status === 'all') {
item.style.display = 'flex'
} else if (item.dataset.status === status) {
item.style.display = 'flex'
} else {
item.style.display = 'none'
}
})
sortItems()
}
function setSortBy(sort, btn) {
currentSortBy = sort
document.getElementById('sort-by-display').textContent = sort === 'date' ? 'Date Added' : 'Title'
// Update button colors in dropdown
const dropdown = btn.closest('[data-content]')
dropdown.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
sortItems()
// Close dropdown
const parentDropdown = btn.closest('ui-dropdown')
if (parentDropdown) parentDropdown.close()
}
function toggleSortOrder(btn) {
sortOrderDesc = !sortOrderDesc
btn.querySelector('svg').classList.toggle('rotate-180', !sortOrderDesc)
sortItems()
}
function sortItems() {
const grid = document.getElementById('watchlist-items')
const items = Array.from(grid.querySelectorAll('.watchlist-item'))
items.sort(function(a, b) {
let comparison = 0
if (currentSortBy === 'title') {
const titleA = a.querySelector('h3').textContent.toLowerCase().trim()
const titleB = b.querySelector('h3').textContent.toLowerCase().trim()
comparison = titleA.localeCompare(titleB)
} else {
const dateA = parseInt(a.dataset.updatedAt || 0)
const dateB = parseInt(b.dataset.updatedAt || 0)
comparison = dateA - dateB
}
return sortOrderDesc ? -comparison : comparison
})
items.forEach(function(item) {
grid.appendChild(item)
})
}
function csvEscape(value) {
const str = String(value ?? '')
if (/[",\r\n]/.test(str)) {
return '"' + str.replace(/"/g, '""') + '"'
}
return str
}
function exportWatchlistCsv() {
const rows = Array.from(document.querySelectorAll('.watchlist-item'))
.sort(function(a, b) {
return parseInt(b.dataset.updatedAt || 0) - parseInt(a.dataset.updatedAt || 0)
})
.map(function(item) {
const updatedAt = parseInt(item.dataset.updatedAt || 0)
const updatedAtISO = updatedAt > 0 ? new Date(updatedAt * 1000).toISOString() : ''
return [
item.dataset.malId || '',
item.dataset.title || item.querySelector('h3')?.textContent.trim() || '',
item.dataset.status || '',
updatedAtISO,
]
})
const csv = [
['mal_id', 'title', 'status', 'updated_at'],
...rows,
].map(function(row) {
return row.map(csvEscape).join(',')
}).join('\r\n')
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'watchlist.csv'
document.body.appendChild(link)
link.click()
link.remove()
URL.revokeObjectURL(url)
}
// Ensure items are sorted correctly on initial load
window.addEventListener('DOMContentLoaded', () => {
sortItems()
})
</script>
{{end}}

103
templates/watchlist_partial.gohtml
View File

@@ -5,11 +5,11 @@
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-4">
<button class="border-b border-accent pb-1 text-sm font-normal text-foreground transition-colors" onclick="filterWatchlist('all', this)">All</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
<button data-watchlist-filter="all" class="border-b border-accent pb-1 text-sm font-normal text-foreground transition-colors">All</button>
<button data-watchlist-filter="watching" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Watching</button>
<button data-watchlist-filter="plan_to_watch" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Plan to Watch</button>
<button data-watchlist-filter="completed" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Completed</button>
<button data-watchlist-filter="dropped" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Dropped</button>
</div>
<div class="flex items-center gap-4">
@@ -22,13 +22,13 @@
</div>
<div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 right-0 top-full mt-2">
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent" onclick="setSortBy('date', this)">Date Added</button>
<button class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent" onclick="setSortBy('title', this)">Title</button>
<button data-watchlist-sort="date" class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent">Date Added</button>
<button data-watchlist-sort="title" class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent">Title</button>
</div>
</div>
</ui-dropdown>
<button type="button" id="sort-order-btn" class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" onclick="toggleSortOrder(this)">
<button type="button" id="sort-order-btn" data-watchlist-sort-order class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
</button>
</div>
@@ -81,91 +81,4 @@
</div>
</div>
<script>
let currentSortBy = 'date'
let sortOrderDesc = true
function filterWatchlist(status, btn) {
// Update active tab styling
const parent = btn.parentElement
parent.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
// Show/hide sections
document.querySelectorAll('.watchlist-section').forEach(function(section) {
if (status === 'all') {
section.style.display = 'block'
} else if (section.dataset.status === status) {
section.style.display = 'block'
} else {
section.style.display = 'none'
}
})
sortItems()
}
function setSortBy(sort, btn) {
currentSortBy = sort
document.getElementById('sort-by-display').textContent = sort === 'date' ? 'Date Added' : 'Title'
// Update button colors in dropdown
const dropdown = btn.closest('[data-content]')
dropdown.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
sortItems()
// Close dropdown
const parentDropdown = btn.closest('ui-dropdown')
if (parentDropdown) parentDropdown.close()
}
function toggleSortOrder(btn) {
sortOrderDesc = !sortOrderDesc
btn.querySelector('svg').classList.toggle('rotate-180', !sortOrderDesc)
sortItems()
}
function sortItems() {
document.querySelectorAll('.watchlist-section').forEach(function(section) {
const grid = section.querySelector('.grid')
const items = Array.from(grid.children)
items.sort(function(a, b) {
let comparison = 0
if (currentSortBy === 'title') {
const titleA = a.querySelector('h3').textContent.toLowerCase()
const titleB = b.querySelector('h3').textContent.toLowerCase()
comparison = titleA.localeCompare(titleB)
} else {
const dateA = parseInt(a.dataset.updatedAt || 0)
const dateB = parseInt(b.dataset.updatedAt || 0)
comparison = dateA - dateB
}
return sortOrderDesc ? -comparison : comparison
})
items.forEach(function(item) {
grid.appendChild(item)
})
})
}
// Handle HTMX partial swaps
if (document.readyState === 'complete') {
sortItems()
} else {
window.addEventListener('DOMContentLoaded', () => {
sortItems()
})
}
</script>
{{end}}