refactor: move comment toggle script to modular partial

2 files changed, 31 insertions, 35 deletions

diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html
index bc079a4f..563bf4bd 100644
--- a/layouts/_partials/posts/action-menu/comment-button.html
+++ b/layouts/_partials/posts/action-menu/comment-button.html
@@ -1,3 +1,4 @@
+{{ /* button html */}}
 <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"
     id="comments-toggle" title="{{ T "actionMenu.comment" }}" data-tooltip>
   <img src="/img/comments.svg" width="20" height="20"
@@ -5,3 +6,33 @@
       class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
   <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="comment-count">...</span>
 </button>
+
+{{ /* button functionality */}}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const commentsToggle = document.getElementById('comments-toggle');
+  const commentsSection = document.getElementById('comments-section');
+
+  if (!commentsToggle || !commentsSection) return;
+
+  // click on toggle
+  commentsToggle.addEventListener('click', function() {
+    const isHidden = commentsSection.classList.contains('hidden');
+    const entranceAnimation = 'animate-slide-in-down';
+    const exitAnimation = 'animate-slide-out-up';
+
+    if (isHidden) {
+      // swtich on
+      commentsSection.classList.remove('hidden', exitAnimation);
+      commentsSection.classList.add(entranceAnimation);
+    } else {
+      // switch off
+      commentsSection.classList.remove(entranceAnimation);
+      commentsSection.classList.add(exitAnimation);
+      setTimeout(() => {
+        commentsSection.classList.add('hidden');
+      }, 200);
+    }
+  });
+});
+</script>
diff --git a/layouts/_partials/scripts/action-menu-js.html b/layouts/_partials/scripts/action-menu-js.html
index df1c498c..dca99369 100644
--- a/layouts/_partials/scripts/action-menu-js.html
+++ b/layouts/_partials/scripts/action-menu-js.html
@@ -3,7 +3,6 @@
 /**
  * =================
  * Initialize all Action Menu features
- * - comment toggle
  * - comment count
  * - like
  * =================
@@ -11,39 +10,6 @@
 
 /**
  * =================
- * Toggle Comment Section
- * =================
- */
-
-function initializeComments() {
-  const commentsToggle = document.getElementById('comments-toggle');
-  const commentsSection = document.getElementById('comments-section');
-
-  if (!commentsToggle || !commentsSection) return;
-
-  // click on toggle
-  commentsToggle.addEventListener('click', function() {
-    const isHidden = commentsSection.classList.contains('hidden');
-    const entranceAnimation = 'animate-slide-in-down';
-    const exitAnimation = 'animate-slide-out-up';
-
-    if (isHidden) {
-      // swtich on
-      commentsSection.classList.remove('hidden', exitAnimation);
-      commentsSection.classList.add(entranceAnimation);
-    } else {
-      // switch off
-      commentsSection.classList.remove(entranceAnimation);
-      commentsSection.classList.add(exitAnimation);
-      setTimeout(() => {
-        commentsSection.classList.add('hidden');
-      }, 200);
-    }
-  });
-}
-
-/**
- * =================
  * Fetch and set Comment Count
  * =================
  */
@@ -196,7 +162,6 @@ function initializeFeatures() {
   const pageId = "{{ $pageId }}";
   if (!pageId) return;
 
-  initializeComments();
   initializeLikes(pageId);
   initializeCommentCount();
 }