drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-07-01 05:27:27 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Sync tabs across groups

Browse Source
This commit is contained in:
Xin
2025-06-04 00:52:20 +01:00
parent 40b1c5f2f1
commit 43c930f1ac
2 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/js/tabs.js
View File

@ -1,20 +1,50 @@
document.querySelectorAll('.hextra-tabs-toggle').forEach(function (button) { (function () {
button.addEventListener('click', function (e) { function updateGroup(container, index) {
// set parent tabs to unselected const tabs = Array.from(container.querySelectorAll('.hextra-tabs-toggle'));
const tabs = Array.from(e.target.parentElement.querySelectorAll('.hextra-tabs-toggle')); tabs.forEach((tab, i) => {
tabs.map(tab => tab.dataset.state = ''); tab.dataset.state = i === index ? 'selected' : '';
if (i === index) {
// set current tab to selected tab.setAttribute('aria-selected', 'true');
e.target.dataset.state = 'selected'; tab.tabIndex = 0;
} else {
// set all panels to unselected tab.removeAttribute('aria-selected');
const panelsContainer = e.target.parentElement.parentElement.nextElementSibling; tab.removeAttribute('tabindex');
Array.from(panelsContainer.children).forEach(function (panel) { }
panel.dataset.state = '';
}); });
const panelsContainer = container.parentElement.nextElementSibling;
Array.from(panelsContainer.children).forEach((panel, i) => {
panel.dataset.state = i === index ? 'selected' : '';
if (i === index) {
panel.tabIndex = 0;
} else {
panel.removeAttribute('tabindex');
}
});
}
const panelId = e.target.getAttribute('aria-controls'); const groups = document.querySelectorAll('[data-tab-group]');
const panel = panelsContainer.querySelector(`#${panelId}`);
panel.dataset.state = 'selected'; groups.forEach((group) => {
const key = group.dataset.tabGroup;
const saved = localStorage.getItem('hextra-tab-' + key);
if (saved !== null) {
updateGroup(group, parseInt(saved, 10));
}
}); });
});
document.querySelectorAll('.hextra-tabs-toggle').forEach((button) => {
button.addEventListener('click', function (e) {
const container = e.target.parentElement;
const index = Array.from(container.querySelectorAll('.hextra-tabs-toggle')).indexOf(
e.target
);
const key = container.dataset.tabGroup;
document
.querySelectorAll('[data-tab-group="' + key + '"]')
.forEach((grp) => updateGroup(grp, index));
if (key) {
localStorage.setItem('hextra-tab-' + key, index.toString());
}
});
});
})();

2
layouts/_shortcodes/tabs.html
View File

@ -6,7 +6,7 @@
{{- end -}} {{- end -}}
<div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain"> <div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
<div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800"> <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800" data-tab-group="{{ delimit $items "," }}">
{{- range $i, $item := $items -}} {{- range $i, $item := $items -}}
<button <button
class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white" class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"