summaryrefslogtreecommitdiff
path: root/layouts/_partials/components/toggle-button.html
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/_partials/components/toggle-button.html')
-rw-r--r--layouts/_partials/components/toggle-button.html69
1 files changed, 0 insertions, 69 deletions
diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html
deleted file mode 100644
index edc0e930..00000000
--- a/layouts/_partials/components/toggle-button.html
+++ /dev/null
@@ -1,69 +0,0 @@
-{{ $id := .id }}
-{{ $buttonId := default (printf "%s-toggle" $id) .buttonId }}
-{{ $sectionId := default (printf "%s-section" $id) .sectionId }}
-{{ $countId := default (printf "%s-count" $id) .countId }}
-{{ $count := default "0" .count }}
-{{ $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>
- <img src="{{ .icon }}" width="20" height="20"
- alt="{{ .title }}"
- 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="{{ $countId }}">{{ $count }}</span>
-</button>
-
-<script>
- (function() {
- 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');
-
- if (isHidden) {
- if (group) {
- const event = new CustomEvent('toggle-group-open', {
- detail: { group: group, sourceId: "{{ $buttonId }}" }
- });
- document.dispatchEvent(event);
- }
- openSection();
- } else {
- closeSection();
- }
- });
- });
- })();
-</script>