refactor: move all action menu js to individual modules

1 files changed, 117 insertions, 5 deletions

diff --git a/layouts/_partials/posts/action-menu/like-button.html b/layouts/_partials/posts/action-menu/like-button.html
index c4c50c91..c9e793b8 100644
--- a/layouts/_partials/posts/action-menu/like-button.html
+++ b/layouts/_partials/posts/action-menu/like-button.html
@@ -1,17 +1,18 @@
+{{ $pageID := .File.UniqueID | urlize }}
 <!-- 点赞按钮 -->
-<div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
+<div class="relative" id="like-container-{{ $pageID }}">
   <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2
       border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200
       hover:bg-black/5 hover:rounded-lg group animate-count-infinite"
-      onclick="sendLike('{{ .File.UniqueID | urlize }}')"
-      id="like-btn-{{ .File.UniqueID | urlize }}"
+      onclick="sendLike('{{ $pageID }}')"
+      id="like-btn-{{ $pageID }}"
       title="{{ T "actionMenu.like" }}"
       data-liked-title="{{ T "actionMenu.liked" }}"
       data-tooltip>
     <img src="/img/heart-organ.svg" width="20" height="20"
         alt="{{ T "actionMenu.like" }}"
-        class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ .File.UniqueID | urlize }}" />
-    <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
+        class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ $pageID }}" />
+    <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ $pageID }}">...</span>
   </button>
 </div>
 
@@ -24,3 +25,114 @@
   color: #8B0000 !important;
 }
 </style>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  // get page ID to fetch and update like data
+  const pageId = "{{ $pageID }}";
+
+  // get required elements
+  const elements = {
+    count: document.getElementById("like-count-" + pageId),
+    btn: document.getElementById("like-btn-" + pageId),
+    container: document.getElementById("like-container-" + pageId),
+    icon: document.getElementById("like-icon-" + pageId)
+  };
+
+  // return if no page ID found or not in production or no elements
+  if (
+    !pageId || window.location.host !== 'www.geedea.pro' ||
+    !elements.count || !elements.btn || !elements.container
+  ) return;
+
+  function setLikedState() {
+    // update classes
+    elements.icon?.classList.add('liked-heart');
+    elements.icon?.classList.add('animate-heart-beat');
+    elements.count?.classList.add('liked-count');
+    elements.btn.disabled = true;
+    elements.container.classList.add('liked');
+    // update tooltip
+    elements.btn.setAttribute('title',
+      elements.container.classList.contains('liked')
+        ? elements.btn.getAttribute('data-liked-title')
+        : '为这篇文章献上心脏'
+    );
+  }
+
+  async function fetchLikes() {
+    try {
+      const response = await fetch("https://like.guhub.cn/like/" + pageId);
+      const data = await response.json();
+      elements.count.innerText = data.likes ?? 0;
+      if (localStorage.getItem("liked_" + pageId)) {
+        setLikedState();
+        updateOrganFarm(data.likes);
+      }
+    } catch(e) {
+      console.log(e);
+      elements.count.innerText = "❌";
+    }
+  }
+
+  window.sendLike = async function(pageId) {
+    if (localStorage.getItem("liked_" + pageId)) return;
+
+    try {
+      const response = await fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" });
+      const data = await response.json();
+      localStorage.setItem("liked_" + pageId, "1");
+      elements.count.innerText = data.likes ?? 1;
+      updateOrganFarm(data.likes);
+      setLikedState();
+    } catch(e) {
+      console.log(e);
+      alert("点赞失败，请稍后再试");
+    }
+  };
+
+  function updateOrganFarm(count) {
+    const organFarm = document.getElementById("organ-farm");
+    const organCount = count || parseInt(elements.count.innerText);
+    const organImages = [
+      "https://image.guhub.cn/picgo2025/oragn-3.png",
+      "https://image.guhub.cn/picgo2025/organ-1.png",
+      "https://image.guhub.cn/picgo2025/organ-2.png"
+    ];
+
+    if (!organFarm) return;
+    if (organFarm.classList.contains("hidden")) {
+      organFarm.classList.remove("hidden");
+      organFarm.classList.add("animate-slide-in-down");
+    }
+
+    organFarm.innerHTML = "";
+    for (let i = 0; i < organCount; i++) {
+      const img = document.createElement("img");
+      img.className = "transition hover:scale-150 dark:invert";
+
+      const sizeRange = [6, 10];
+      const size = Math.floor(Math.random() * (sizeRange[1] - sizeRange[0] + 1)) + sizeRange[0];
+      img.classList.add(`w-${size}`, `h-${size}`);
+
+      img.src = organImages[Math.floor(Math.random() * organImages.length)];
+      // randomly offset and rotate
+      img.classList.add("rotate-" + Math.floor(Math.random() * 5));
+      img.classList.add("translate-x-" + Math.floor(Math.random() * 5));
+      img.classList.add("translate-y-" + Math.floor(Math.random() * 5));
+      img.classList.add("opacity" + (100 - Math.floor(Math.random() * 3)*10));
+
+      organFarm.appendChild(img);
+    }
+  }
+
+  // fetch likes when action menu is visible
+  const observer = new IntersectionObserver((entries, obs) => {
+    if (entries[0].isIntersecting) {
+      fetchLikes();
+      obs.disconnect();
+    }
+  });
+  observer.observe(document.getElementById("action-menu"));
+});
+</script>