refactor: extract inline JS to modules

2026-05-25 01:16:02 +02:00
parent 83f64a1dfe
commit 6932d4b8d0
12 changed files with 608 additions and 220 deletions
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -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>
--- a/templates/components/continue_watching.gohtml
+++ b/templates/components/continue_watching.gohtml
@@ -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>
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -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>