sysops
55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
/* Tab switching — enige bron van waarheid voor zichtbaarheid (geen hidden attr) */
|
|
(function () {
|
|
var DEFAULT = 'overview';
|
|
|
|
function show(tab) {
|
|
if (!tab) tab = DEFAULT;
|
|
document.querySelectorAll('.doc-hub [data-tab-panel]').forEach(function (el) {
|
|
var on = el.getAttribute('data-tab-panel') === tab;
|
|
el.classList.toggle('tab-active', on);
|
|
});
|
|
document.querySelectorAll('#doc-nav .doc-nav-btn[data-tab]').forEach(function (btn) {
|
|
btn.classList.toggle('active', btn.getAttribute('data-tab') === tab);
|
|
});
|
|
}
|
|
|
|
function onClick(ev) {
|
|
var btn = ev.target.closest('.doc-nav-btn[data-tab]');
|
|
if (!btn) return;
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
var tab = btn.getAttribute('data-tab');
|
|
show(tab);
|
|
var hub = document.querySelector('.doc-hub');
|
|
if (hub && window.Alpine) {
|
|
try {
|
|
var d = Alpine.$data(hub);
|
|
if (!d) return;
|
|
if (d.activeTab !== tab) d.activeTab = tab;
|
|
if (typeof d.onTabShown === 'function') d.onTabShown(tab);
|
|
} catch (e) {
|
|
console.warn('doc-tabs', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
function bind() {
|
|
var nav = document.getElementById('doc-nav');
|
|
if (!nav || nav.dataset.bound) return;
|
|
nav.dataset.bound = '1';
|
|
nav.addEventListener('click', onClick, true);
|
|
show(DEFAULT);
|
|
}
|
|
|
|
window.DocTabs = { show: show };
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', bind);
|
|
} else {
|
|
bind();
|
|
}
|
|
document.addEventListener('alpine:initialized', function () {
|
|
show(window.__docActiveTab || DEFAULT);
|
|
});
|
|
})();
|