diff options
| -rw-r--r-- | layouts/_partials/components/toggle-button.html | 46 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/comment-button.html | 1 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/webmention-button.html | 3 |
3 files changed, 40 insertions, 10 deletions
diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html index 3aef1509..2b1de2f9 100644 --- a/layouts/_partials/components/toggle-button.html +++ b/layouts/_partials/components/toggle-button.html @@ -9,11 +9,13 @@ - countId: (string, optional) Override for count element ID. Defaults to "{id}-count". - sectionId: (string, optional) Override for section element ID. Defaults to "{id}-section". - buttonId: (string, optional) Override for button element ID. Defaults to "{id}-toggle". + - group: (string, optional) Mutual exclusion group name. If provided, opening this toggle will close others in the same group. */}} {{ $id := .id }} {{ $buttonId := default (printf "%s-toggle" $id) .buttonId }} {{ $sectionId := default (printf "%s-section" $id) .sectionId }} {{ $countId := default (printf "%s-count" $id) .countId }} +{{ $group := .group }} <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="{{ $buttonId }}" title="{{ .title }}" data-tooltip> @@ -29,23 +31,49 @@ document.addEventListener('DOMContentLoaded', () => { const button = document.getElementById("{{ $buttonId }}"); const section = document.getElementById("{{ $sectionId }}"); + const group = "{{ $group }}"; if (!button || !section) return; + const entranceAnimation = 'animate-slide-in-down'; + const exitAnimation = 'animate-slide-out-up'; + + const closeSection = () => { + if (section.classList.contains('hidden')) return; + + section.classList.remove(entranceAnimation); + section.classList.add(exitAnimation); + setTimeout(() => { + section.classList.add('hidden'); + }, 200); + }; + + const openSection = () => { + section.classList.remove('hidden', exitAnimation); + section.classList.add(entranceAnimation); + }; + + if (group) { + document.addEventListener('toggle-group-open', (e) => { + if (e.detail.group === group && e.detail.sourceId !== "{{ $buttonId }}") { + closeSection(); + } + }); + } + button.addEventListener('click', () => { const isHidden = section.classList.contains('hidden'); - const entranceAnimation = 'animate-slide-in-down'; - const exitAnimation = 'animate-slide-out-up'; if (isHidden) { - section.classList.remove('hidden', exitAnimation); - section.classList.add(entranceAnimation); + if (group) { + const event = new CustomEvent('toggle-group-open', { + detail: { group: group, sourceId: "{{ $buttonId }}" } + }); + document.dispatchEvent(event); + } + openSection(); } else { - section.classList.remove(entranceAnimation); - section.classList.add(exitAnimation); - setTimeout(() => { - section.classList.add('hidden'); - }, 200); + closeSection(); } }); }); diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html index cd6fe33b..7dcea107 100644 --- a/layouts/_partials/posts/action-menu/comment-button.html +++ b/layouts/_partials/posts/action-menu/comment-button.html @@ -3,6 +3,7 @@ "title" (T "actionMenu.comment") "icon" "/img/comments.svg" "countId" "comment-count" + "group" "action-menu-section" ) }} <script> diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html index c9d3ffc7..e0940d9a 100644 --- a/layouts/_partials/posts/action-menu/webmention-button.html +++ b/layouts/_partials/posts/action-menu/webmention-button.html @@ -1,8 +1,9 @@ -{{ partial "components/toggle-button.html" (dict +{{ partial "components/toggle-button.html" (dict "id" "webmention" "title" (T "actionMenu.webmention") "icon" "/img/mention.svg" "countId" "mention-count" + "group" "action-menu-section" ) }} <script> |