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

refactor: extract inline JS to modules

Browse Source
This commit is contained in:
mkelvers
2026-05-25 01:16:02 +02:00
parent 83f64a1dfe
commit 6932d4b8d0
12 changed files with 608 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/anime.gohtml
View File

@@ -92,7 +92,7 @@
{{define "title"}}{{.Anime.DisplayTitle}}{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
{{$anime := .Anime}}
<div class="flex w-full flex-col gap-10 lg:pr-80">

210
templates/base.gohtml
View File

@@ -53,6 +53,11 @@
html[data-theme="dark"] .theme-icon-light { display: block; }
html[data-theme="light"] .theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark { display: block; }
[data-htmx-loading="true"] {
opacity: 0.65;
pointer-events: none;
}
</style>
<script type="module" src="/dist/static/theme.js" defer></script>
<template id="toast-template">
@@ -76,6 +81,9 @@
<script type="module" src="/dist/static/sort_filter.js" defer></script>
<script type="module" src="/dist/static/dedupe.js" defer></script>
<script type="module" src="/dist/static/toast.js" defer></script>
<script type="module" src="/dist/static/shell.js" defer></script>
<script type="module" src="/dist/static/watchlist.js" defer></script>
<script type="module" src="/dist/static/htmx.js" defer></script>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script>
document.addEventListener('htmx:afterSwap', function(evt) {
@@ -87,208 +95,6 @@
if (window.showToast) showToast({ message: 'Something went wrong' });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menu = document.getElementById('mobile-menu');
const backdrop = document.getElementById('mobile-menu-backdrop');
const toggle = document.querySelector('[data-mobile-menu-toggle]');
if (!menu || !backdrop || !toggle) return;
const openMenu = function() {
menu.dataset.mobileOpen = 'true';
backdrop.dataset.mobileOpen = 'true';
backdrop.classList.remove('hidden');
toggle.setAttribute('aria-expanded', 'true');
};
const closeMenu = function() {
menu.dataset.mobileOpen = 'false';
backdrop.dataset.mobileOpen = 'false';
backdrop.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
};
toggle.addEventListener('click', function() {
if (menu.dataset.mobileOpen === 'true') {
closeMenu();
return;
}
openMenu();
});
backdrop.addEventListener('click', closeMenu);
menu.querySelectorAll('a, button').forEach(function(el) {
el.addEventListener('click', function() {
if (window.innerWidth < 1024) closeMenu();
});
});
});
// Initialize sidebar state on load
document.addEventListener('DOMContentLoaded', () => {
// Small delay to ensure styles are applied before enabling transitions
requestAnimationFrame(() => {
document.documentElement.classList.add('sidebar-ready');
});
});
const watchlistIds = new Set()
function initWatchlist(ids) {
ids.forEach(id => watchlistIds.add(id));
const sync = () => ids.forEach(id => syncRemoveButtonVisibility(id));
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', sync);
} else {
sync();
}
}
function syncRemoveButtonVisibility(id) {
const container = document.getElementById('remove-watchlist-container-' + id);
if (container) {
container.classList.toggle('hidden', !watchlistIds.has(id));
}
}
function toggleWatchlist(id, title, btn) {
// determine action based on current watchlist state
const isInWatchlist = watchlistIds.has(id)
const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist'
const method = isInWatchlist ? 'DELETE' : 'POST'
// add to watchlist with default status; remove doesn't need body
const body = isInWatchlist ? null : JSON.stringify({ animeId: id, status: 'plan_to_watch' })
fetch(url, {
method,
headers: body ? { 'Content-Type': 'application/json' } : {},
body
}).then(res => {
if (res.ok) {
if (isInWatchlist) {
watchlistIds.delete(id)
btn.classList.remove('in-watchlist')
btn.setAttribute('aria-label', 'Add to Watchlist')
if (window.showToast) showToast({ message: `Removed ${title} from watchlist` })
// Update dropdown status if on anime page
syncWatchlistDropdown(id, false)
} else {
watchlistIds.add(id)
btn.classList.add('in-watchlist')
btn.setAttribute('aria-label', 'Remove from Watchlist')
if (window.showToast) showToast({ message: `Added ${title} to watchlist` })
// Update dropdown status if on anime page
syncWatchlistDropdown(id, true)
}
// Update all other watchlist icons on the page for this anime
document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
const button = icon.closest('button')
if (button && button !== btn) {
const malId = button.dataset.malId
if (malId && parseInt(malId) === id) {
if (watchlistIds.has(id)) {
button.classList.add('in-watchlist')
} else {
button.classList.remove('in-watchlist')
}
}
}
})
} else {
if (window.showToast) showToast({ message: 'Failed to update watchlist' })
}
}).catch(() => {
if (window.showToast) showToast({ message: 'Something went wrong' })
})
}
function syncWatchlistDropdown(id, inWatchlist) {
const statusDisplay = document.getElementById('watchlist-status-display-' + id)
if (statusDisplay) {
statusDisplay.textContent = inWatchlist ? 'Plan to Watch' : 'Add to Watchlist'
syncRemoveButtonVisibility(id)
}
}
function removeFromWatchlist(id, btn) {
fetch(`/api/watchlist/${id}`, { method: 'DELETE' }).then(res => {
if (res.ok) {
watchlistIds.delete(id)
const card = btn.closest('.group').parentElement
if (card) card.remove()
if (window.showToast) showToast({ message: 'Removed from watchlist' })
setTimeout(() => location.reload(), 100)
} else {
if (window.showToast) showToast({ message: 'Failed to update watchlist' })
}
})
}
function updateWatchlist(id, status, display, title, btn) {
fetch('/api/watchlist', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ animeId: id, status: status })
}).then(res => {
if (res.ok) {
watchlistIds.add(id);
document.getElementById('watchlist-status-display-' + id).textContent = display;
syncRemoveButtonVisibility(id);
document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
const button = icon.closest('button');
if (button) {
const malId = button.dataset.malId;
if (malId && parseInt(malId) === id) {
button.classList.add('in-watchlist');
}
}
});
requestAnimationFrame(() => {
const dropdown = btn.closest('ui-dropdown');
if (dropdown) dropdown.close();
});
if (window.showToast) showToast({ message: `Marked ${title} as ${display}` });
} else {
if (window.showToast) showToast({ message: 'Failed to update watchlist' });
}
}).catch(() => {
if (window.showToast) showToast({ message: 'Something went wrong' });
});
}
function removeWatchlist(id, title, btn) {
fetch('/api/watchlist/' + id, { method: 'DELETE' }).then(res => {
if (res.ok) {
watchlistIds.delete(id);
document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist';
syncRemoveButtonVisibility(id);
if (window.showToast) showToast({ message: `Removed ${title} from watchlist` });
document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
const button = icon.closest('button');
if (button) {
const malId = button.dataset.malId;
if (malId && parseInt(malId) === id) {
button.classList.remove('in-watchlist');
}
}
});
if (btn) {
const dropdown = btn.closest('ui-dropdown');
if (dropdown) dropdown.close();
}
} else {
if (window.showToast) showToast({ message: 'Failed to update watchlist' });
}
}).catch(() => {
if (window.showToast) showToast({ message: 'Something went wrong' });
});
}
</script>
</head>
<body class="bg-background text-foreground">
<div class="flex min-h-screen flex-col">

2
templates/browse.gohtml
View File

@@ -1,6 +1,6 @@
{{define "title"}}Browse{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
{{template "browse_content" .}}
{{end}}

9
templates/components/anime_card.gohtml
View File

@@ -35,7 +35,14 @@
{{end}}
<div class="mt-auto flex items-center justify-start pb-2 pl-2">
<button type="button" data-mal-id="{{$anime.MalID}}" onclick="event.preventDefault(); event.stopPropagation(); toggleWatchlist({{$anime.MalID}}, '{{$anime.DisplayTitle}}', this)" class="text-accent hover:text-accent/80 transition-colors focus:outline-none {{if $isWatchlist}}in-watchlist{{end}}" aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}">
<button
type="button"
data-watchlist-toggle
data-mal-id="{{$anime.MalID}}"
data-watchlist-title="{{$anime.DisplayTitle}}"
class="text-accent hover:text-accent/80 transition-colors focus:outline-none disabled:opacity-50 {{if $isWatchlist}}in-watchlist{{end}}"
aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}"
>
<svg class="size-6 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
</button>
</div>

4
templates/components/continue_watching.gohtml
View File

@@ -2,7 +2,7 @@
<section id="continue-watching-section" class="w-full empty:hidden">
<h2 class="mb-3 text-lg font-normal text-foreground">Continue Watching</h2>
<div id="continue-watching-items" class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]" hx-on::after-request="if(this.querySelectorAll('.continue-watching-item').length === 0) document.getElementById('continue-watching-section')?.remove()">
<div id="continue-watching-items" class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
{{range .}}
{{$title := .TitleOriginal}}
{{if .TitleEnglish.Valid}}{{$title = .TitleEnglish.String}}{{end}}
@@ -15,7 +15,7 @@
<div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 bg-black/40 pointer-events-none">
<div class="flex justify-end pointer-events-auto">
<button hx-delete="/api/continue-watching/{{.AnimeID}}" hx-target="#continue-watching-{{.AnimeID}}" hx-swap="delete" hx-on::after-request="if(document.querySelectorAll('.continue-watching-item').length === 0) document.getElementById('continue-watching-section')?.remove()" class="bg-black/60 hover:bg-black/80 rounded-full p-1.5 text-white transition-colors focus:outline-none disabled:opacity-50 backdrop-blur-sm" aria-label="Remove from Continue Watching">
<button hx-delete="/api/continue-watching/{{.AnimeID}}" hx-target="#continue-watching-{{.AnimeID}}" hx-swap="delete" class="bg-black/60 hover:bg-black/80 rounded-full p-1.5 text-white transition-colors focus:outline-none disabled:opacity-50 backdrop-blur-sm" aria-label="Remove from Continue Watching">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>

47
templates/components/watchlist_actions.gohtml
View File

@@ -23,16 +23,48 @@
<div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2">
<div class="flex flex-col py-1">
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.DisplayTitle}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="watching"
data-watchlist-display="Watching"
data-watchlist-title="{{$anime.DisplayTitle}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
>
<span class="font-medium text-sm text-foreground">Watching</span>
</button>
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', '{{$anime.DisplayTitle}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="completed"
data-watchlist-display="Completed"
data-watchlist-title="{{$anime.DisplayTitle}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
>
<span class="font-medium text-sm text-foreground">Completed</span>
</button>
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', '{{$anime.DisplayTitle}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="plan_to_watch"
data-watchlist-display="Plan to Watch"
data-watchlist-title="{{$anime.DisplayTitle}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
>
<span class="font-medium text-sm text-foreground">Plan to Watch</span>
</button>
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', '{{$anime.DisplayTitle}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="dropped"
data-watchlist-display="Dropped"
data-watchlist-title="{{$anime.DisplayTitle}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
>
<span class="font-medium text-sm text-foreground">Dropped</span>
</button>
@@ -56,7 +88,12 @@
{{define "watchlist_remove_button"}}
<div id="remove-watchlist-container-{{.ID}}" class="{{.ContainerClass}}">
<button class="{{.ButtonClass}}" onclick="removeWatchlist({{.ID}}, '{{.Title}}', this)">
<button
data-watchlist-remove
data-mal-id="{{.ID}}"
data-watchlist-title="{{.Title}}"
class="{{.ButtonClass}} disabled:opacity-50"
>
<span class="{{.SpanClass}}">Remove from Watchlist</span>
</button>
</div>

42
templates/watch.gohtml
View File

@@ -1,6 +1,6 @@
{{define "title"}}Watch {{.Anime.Title}}{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
{{$anime := .Anime}}
{{$episodes := .Episodes}}
{{$currentEpID := .CurrentEpID}}
@@ -28,16 +28,48 @@
</div>
<div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-[var(--shadow-card)] right-0 top-full mt-2">
<div class="flex flex-col py-1">
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.Title}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="watching"
data-watchlist-display="Watching"
data-watchlist-title="{{$anime.Title}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
>
<span class="text-sm text-foreground">Watching</span>
</button>
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', '{{$anime.Title}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="completed"
data-watchlist-display="Completed"
data-watchlist-title="{{$anime.Title}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
>
<span class="text-sm text-foreground">Completed</span>
</button>
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', '{{$anime.Title}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="plan_to_watch"
data-watchlist-display="Plan to Watch"
data-watchlist-title="{{$anime.Title}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
>
<span class="text-sm text-foreground">Plan to Watch</span>
</button>
<button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', '{{$anime.Title}}', this)">
<button
data-unstyled-button
data-watchlist-update
data-mal-id="{{$anime.MalID}}"
data-watchlist-status="dropped"
data-watchlist-display="Dropped"
data-watchlist-title="{{$anime.Title}}"
class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
>
<span class="text-sm text-foreground">Dropped</span>
</button>
{{template "watchlist_remove_button" dict

12
templates/watchlist.gohtml
View File

@@ -1,6 +1,6 @@
{{define "title"}}Watchlist{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
<div id="watchlist-content" class="flex w-full flex-col gap-6">
<h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-xl font-normal text-foreground">Watchlist</h1>
@@ -53,7 +53,15 @@
<div class="absolute inset-0 z-20 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 pointer-events-none">
<div class="flex justify-end">
<button type="button" data-unstyled-button hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none pointer-events-auto" aria-label="Remove from Watchlist">
<button
type="button"
data-unstyled-button
data-watchlist-remove
data-mal-id="{{.AnimeID}}"
data-watchlist-title="{{.DisplayTitle}}"
class="text-white/70 transition-colors hover:text-white focus:outline-none pointer-events-auto disabled:opacity-50"
aria-label="Remove from Watchlist"
>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>

9
templates/watchlist_partial.gohtml
View File

@@ -48,7 +48,14 @@
<div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div class="flex justify-end">
<button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
<button
type="button"
data-watchlist-remove
data-mal-id="{{.AnimeID}}"
data-watchlist-title="{{.DisplayTitle}}"
class="text-white/70 transition-colors hover:text-white focus:outline-none disabled:opacity-50"
aria-label="Remove from Watchlist"
>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>