fix: remove inline watchlist js
This commit is contained in:
@@ -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