refactor: use CSS popover attr, remove JS

6 files changed, 24 insertions, 48 deletions

diff --git a/assets/js/fediform.js b/assets/js/fediform.js
index da5055ac..c867aa39 100644
--- a/assets/js/fediform.js
+++ b/assets/js/fediform.js
@@ -1,36 +1,4 @@
 document.addEventListener("DOMContentLoaded", () => {
-    const actionArea = document.getElementById('action-area');
-    if (actionArea) {
-        // toggle action area
-        function toggleActionArea() {
-            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');
-            }
-        });
-        // toggle action area
-        function toggleActionArea() {
-            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')
     if (instanceInput) {
diff --git a/layouts/_partials/posts/action-area.html b/layouts/_partials/posts/action-area.html
new file mode 100644
index 00000000..06f0003d
--- /dev/null
+++ b/layouts/_partials/posts/action-area.html
@@ -0,0 +1,16 @@
+<div popover
+    id="action-area"
+    class="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">
+    {{ partial "posts/fediverse-form" . }}
+    {{ partial "posts/webmention-form" . }}
+  </div>
+  <div class="flex justify-between mt-2 items-center">
+      <p class="text-sm text-secondary m-0"><a href="mailto:hi@eltr.ac?subject=Re%3A%20{{ .Title }}">📧 {{ T "actionMenu.email" }}</a></p>
+      {{ if eq .Site.Language.Lang "zh" }}
+      <p class="m-0 text-xs"><a class="text-secondary" href="/posts/site-report-4/#所以怎么点赞和评论你的博客">这是什么？</a></p>
+      {{ end }}
+  </div>
+</div>
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index b5204bc2..452996e6 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -14,6 +14,7 @@
 {{ end }}
 {{ end }}
 
+{{ partial "posts/action-area" . }}
 <details class="my-4 mb-5">
     <summary class="cursor-pointer">
         {{ partial "posts/webmention-summary" (dict
diff --git a/layouts/_partials/posts/fediverse-form.html b/layouts/_partials/posts/fediverse-form.html
index 585cb1ef..faff355f 100644
--- a/layouts/_partials/posts/fediverse-form.html
+++ b/layouts/_partials/posts/fediverse-form.html
@@ -1,6 +1,6 @@
 {{ if .Params.toot }}
 <div class="flex flex-col gap-2">
-    <h4 class="text-sm font-semibold m-0">{{ T "actionMenu.fediverse" }}</h4>
+    <h4 class="text-sm font-semibold m-0 dark:text-white">{{ T "actionMenu.fediverse" }}</h4>
     <input type="text" id="fediverse-instance" placeholder="{{ T "actionMenu.fediversePlaceholder" }}" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent dark:text-white">
     <div class="flex gap-2">
         <button id="fediform-copy-button" class="text-xs px-2 py-1 bg-neutral-100 dark:bg-neutral-700 rounded hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors">📋</button>
diff --git a/layouts/_partials/posts/webmention-form.html b/layouts/_partials/posts/webmention-form.html
index 4430961b..8f9a5ffb 100644
--- a/layouts/_partials/posts/webmention-form.html
+++ b/layouts/_partials/posts/webmention-form.html
@@ -1,5 +1,5 @@
 <form action="https://webmention.io/www.geedea.pro/webmention" method="POST" class="flex flex-col gap-2">
-    <h4 class="text-sm font-semibold m-0">{{ T "actionMenu.webmention" }}</h4>
+    <h4 class="text-sm font-semibold m-0 dark:text-white">{{ T "actionMenu.webmention" }}</h4>
     <input type="url" name="source" placeholder="{{ T "actionMenu.webmentionPlaceholder" }}" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent dark:text-white">
     <input type="hidden" name="target" value="{{ .Permalink }}">
     <button type="submit" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">{{ T "actionMenu.send" }}</button>
diff --git a/layouts/_partials/posts/webmention-summary.html b/layouts/_partials/posts/webmention-summary.html
index 65bd8b31..b7c19451 100644
--- a/layouts/_partials/posts/webmention-summary.html
+++ b/layouts/_partials/posts/webmention-summary.html
@@ -4,23 +4,14 @@
 
 <section class="group relative mb-6 vertical-middle">
       <!-- Action Area Toggle -->
-      <button data-tooltip id="action-area-btn" title="{{ T "actionMenu.interact" }}" class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer float-left mr-2">
+      <button
+        popovertarget="action-area"
+        data-tooltip
+        title="{{ T "actionMenu.interact" }}"
+        class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer float-left mr-2">
           <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
       </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">
-            {{ partial "posts/fediverse-form" $page }}
-            {{ partial "posts/webmention-form" $page }}
-          </div>
-          <div class="flex justify-between mt-2 items-center">
-              <p class="text-sm text-secondary m-0"><a href="mailto:hi@eltr.ac?subject=Re%3A%20{{ $page.Title }}">📧 {{ T "actionMenu.email" }}</a></p>
-              {{ if eq $page.Site.Language.Lang "zh" }}
-              <p class="m-0 text-xs"><a class="text-secondary" href="/posts/site-report-4/#所以怎么点赞和评论你的博客">这是什么？</a></p>
-              {{ end }}
-          </div>
-      </div>
 
       <!-- Likes -->
       {{ range $likes }}