diff options
| author | BigCoke233 <hi@guhub.cn> | 2025-12-17 12:02:49 +0800 |
|---|---|---|
| committer | BigCoke233 <hi@guhub.cn> | 2025-12-17 12:02:49 +0800 |
| commit | dd27c7bfb5932d8402b1f89984196f8566c14d5e (patch) | |
| tree | c1c1d2eb2ff074d979afd3ec44cf7b2f76ac0d1b /layouts/_partials/posts/action-menu/comment-button.html | |
| parent | d73c7239a5d3a469278b012088142eb856847d0b (diff) | |
feat: add webmention to action menu
Diffstat (limited to 'layouts/_partials/posts/action-menu/comment-button.html')
| -rw-r--r-- | layouts/_partials/posts/action-menu/comment-button.html | 41 |
1 files changed, 6 insertions, 35 deletions
diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html index d646ca27..cd6fe33b 100644 --- a/layouts/_partials/posts/action-menu/comment-button.html +++ b/layouts/_partials/posts/action-menu/comment-button.html @@ -1,42 +1,14 @@ -<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" - alt="{{ T "actionMenu.comment" }}" - 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> +{{ partial "components/toggle-button.html" (dict + "id" "comments" + "title" (T "actionMenu.comment") + "icon" "/img/comments.svg" + "countId" "comment-count" +) }} <script> // initialize button features and comment count document.addEventListener('DOMContentLoaded', () => { - function initButtonFeature() { - 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); - } - }); - } - function initCommentCount() { const commentCountEl = document.getElementById('comment-count'); if (!commentCountEl) return; @@ -66,7 +38,6 @@ document.addEventListener('DOMContentLoaded', () => { observer.observe(document.body, { childList: true, subtree: true }); } - initButtonFeature(); initCommentCount(); }); </script> |
