fix: remove inline watchlist js
This commit is contained in:
@@ -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 => {
|
||||
|
||||
@@ -4,20 +4,20 @@
|
||||
<div id="watchlist-content" class="flex w-full flex-col gap-6">
|
||||
<h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Watchlist</h1>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<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">
|
||||
<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"/>
|
||||
<div class="flex items-center gap-4">
|
||||
<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"/>
|
||||
<path d="M12 15V3"/>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -29,19 +29,19 @@
|
||||
<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="m6 9 6 6 6-6"/></svg>
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</ui-dropdown>
|
||||
<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 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)">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="watchlist-items" class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 mt-6">
|
||||
{{range $.AllEntries}}
|
||||
@@ -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}}
|
||||
{{end}}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<div id="watchlist-content" class="flex w-full flex-col gap-6">
|
||||
<h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Watchlist</h1>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<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">
|
||||
<ui-dropdown class="relative block" data-align="right" data-width="min-w-[150px]">
|
||||
@@ -20,19 +20,19 @@
|
||||
<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="m6 9 6 6 6-6"/></svg>
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</ui-dropdown>
|
||||
<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 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)">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="watchlist-items">
|
||||
{{range $status := $.StatusOrder}}
|
||||
@@ -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}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user