1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
{{/*
Reusable Toggle Button Component
Parameters:
- id: (string) Unique identifier for the button group (e.g. "comments").
Used to generate IDs: {id}-toggle, {id}-section, {id}-count.
- title: (string) Tooltip title.
- icon: (string) Path to the icon image.
- 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>
<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 }}">...</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>
|
