You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
891 B
32 lines
891 B
// Tabs behavior (used on cron pages)
|
|
export default function handleTabPanels() {
|
|
const tabs = document.querySelector('.js-tabs');
|
|
|
|
if (!tabs) {
|
|
return;
|
|
}
|
|
|
|
const tabItems = tabs.querySelectorAll('.tabs-item');
|
|
const panels = tabs.querySelectorAll('.tabs-panel');
|
|
tabItems.forEach((tab) => {
|
|
tab.addEventListener('click', (event) => {
|
|
// Reset state
|
|
panels.forEach((panel) => (panel.hidden = true));
|
|
tabItems.forEach((tab) => {
|
|
tab.setAttribute('aria-selected', false);
|
|
tab.setAttribute('tabindex', -1);
|
|
});
|
|
|
|
// Show the selected panel
|
|
const tabId = event.target.getAttribute('id');
|
|
const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
|
|
panel.hidden = false;
|
|
|
|
// Mark the selected tab as active
|
|
event.target.setAttribute('aria-selected', true);
|
|
event.target.setAttribute('tabindex', 0);
|
|
event.target.focus();
|
|
});
|
|
});
|
|
}
|