refactor: move toggle action area script to JavaScript file

Former-commit-id: 066b0797563d7d1b486009f95c14d6d86452212d

2 files changed, 19 insertions, 21 deletions

diff --git a/assets/js/fediform.js b/assets/js/fediform.js
index 42ce5ed8..4a407fea 100644
--- a/assets/js/fediform.js
+++ b/assets/js/fediform.js
@@ -1,4 +1,20 @@
 document.addEventListener("DOMContentLoaded", () => {
+    // toggle action area
+    function toggleActionArea() {
+        const actionArea = document.getElementById('action-area');
+        actionArea.classList.toggle('hidden');
+    }
+    document.getElementById("action-area-btn").addEventListener("click", toggleActionArea)
+    // Close action area when clicking outside
+    document.addEventListener('click', function(event) {
+        const actionArea = document.getElementById('action-area');
+        const toggleBtn = event.target.closest('#action-area-btn');
+
+        if (!toggleBtn && !actionArea.contains(event.target)) {
+            actionArea.classList.add('hidden');
+        }
+    });
+    // open toot in fediverse
     const instanceInput = document.getElementById('fediverse-instance')
     const savedInstance = localStorage.getItem("geedeapro.fediInstance")
     if (savedInstance) instanceInput.value = savedInstance
diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
index ed52b730..6baa36cd 100644
--- a/layouts/_partials/posts/webmention-likes.html
+++ b/layouts/_partials/posts/webmention-likes.html
@@ -2,10 +2,10 @@
 {{ $page := .page }}
 
 <section class="mb-6 flex gap-2 items-center">
-  <div class="flex gap-1 group relative">
-      <a data-tooltip title="{{ T "actionMenu.interact" }}" class="hover:no-underline cursor-pointer" onclick="toggleActionArea()">
+  <div class="flex gap-1 group relative items-center">
+      <button data-tooltip id="action-area-btn" title="{{ T "actionMenu.interact" }}" class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer">
           <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
-      </a>
+      </button>
       <!-- Action Area -->
       <div id="action-area" class="hidden absolute top-7 left-0 z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rd-md shadow-lg p-4 w-80">
           <div class="grid grid-cols-2 gap-4">
@@ -26,21 +26,3 @@
  <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len $likes ) }}</p>
 </section>
 
-<script>
-function toggleActionArea() {
-    const actionArea = document.getElementById('action-area');
-    actionArea.classList.toggle('hidden');
-}
-
-
-// Close action area when clicking outside
-document.addEventListener('click', function(event) {
-    const actionArea = document.getElementById('action-area');
-    const toggleBtn = event.target.closest('[onclick="toggleActionArea()"]');
-
-    if (!toggleBtn && !actionArea.contains(event.target)) {
-        actionArea.classList.add('hidden');
-    }
-});
-</script>
-