67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
|
/* Documenten tabs — CSS radio primary, JS syncs Alpine */
|
||
|
|
(function () {
|
||
|
|
var DEFAULT = 'overview';
|
||
|
|
|
||
|
|
function radioId(tab) {
|
||
|
|
return 'doctab-' + tab;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getActiveTab() {
|
||
|
|
var checked = document.querySelector('.doc-tab-input:checked');
|
||
|
|
return (checked && checked.value) || window.__docActiveTab || DEFAULT;
|
||
|
|
}
|
||
|
|
|
||
|
|
function show(tab) {
|
||
|
|
if (!tab) tab = DEFAULT;
|
||
|
|
var radio = document.getElementById(radioId(tab));
|
||
|
|
if (radio) radio.checked = true;
|
||
|
|
document.querySelectorAll('#doc-tab-stage [data-tab-panel]').forEach(function (el) {
|
||
|
|
el.classList.toggle('tab-active', el.getAttribute('data-tab-panel') === tab);
|
||
|
|
});
|
||
|
|
window.__docActiveTab = tab;
|
||
|
|
}
|
||
|
|
|
||
|
|
function syncAlpine(tab) {
|
||
|
|
var hub = document.querySelector('.doc-hub');
|
||
|
|
if (!hub || !window.Alpine) return;
|
||
|
|
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 alpine', e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onTabChange() {
|
||
|
|
var tab = getActiveTab();
|
||
|
|
window.__docActiveTab = tab;
|
||
|
|
document.querySelectorAll('#doc-tab-stage [data-tab-panel]').forEach(function (el) {
|
||
|
|
el.classList.toggle('tab-active', el.getAttribute('data-tab-panel') === tab);
|
||
|
|
});
|
||
|
|
syncAlpine(tab);
|
||
|
|
}
|
||
|
|
|
||
|
|
function bind() {
|
||
|
|
document.querySelectorAll('.doc-tab-input').forEach(function (radio) {
|
||
|
|
if (radio.dataset.bound) return;
|
||
|
|
radio.dataset.bound = '1';
|
||
|
|
radio.addEventListener('change', onTabChange);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
window.DocTabs = { show: show, getActive: getActiveTab };
|
||
|
|
|
||
|
|
bind();
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
bind();
|
||
|
|
show(window.__docActiveTab || getActiveTab());
|
||
|
|
});
|
||
|
|
document.addEventListener('alpine:initialized', function () {
|
||
|
|
bind();
|
||
|
|
show(window.__docActiveTab || getActiveTab());
|
||
|
|
syncAlpine(getActiveTab());
|
||
|
|
});
|
||
|
|
})();
|