42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { parseClassList } from './utils';
|
|
|
|
const setActiveDiscoverTab = (clickedTab: Element): void => {
|
|
const group = clickedTab.closest('[data-tab-group="discover"]');
|
|
if (!group) {
|
|
return;
|
|
}
|
|
|
|
const triggers = group.querySelectorAll('[data-tab-trigger]');
|
|
triggers.forEach(tab => {
|
|
const activeClasses = parseClassList(tab.getAttribute('data-tab-active-classes'));
|
|
const inactiveClasses = parseClassList(tab.getAttribute('data-tab-inactive-classes'));
|
|
tab.classList.remove(...activeClasses);
|
|
tab.classList.add(...inactiveClasses);
|
|
});
|
|
|
|
const activeClasses = parseClassList(clickedTab.getAttribute('data-tab-active-classes'));
|
|
const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes'));
|
|
clickedTab.classList.remove(...inactiveClasses);
|
|
clickedTab.classList.add(...activeClasses);
|
|
};
|
|
|
|
const onDiscoverTabClick = (event: MouseEvent): void => {
|
|
const target = event.target;
|
|
if (!(target instanceof Element)) {
|
|
return;
|
|
}
|
|
|
|
const trigger = target.closest('[data-tab-trigger]');
|
|
if (!trigger) {
|
|
return;
|
|
}
|
|
|
|
setActiveDiscoverTab(trigger);
|
|
};
|
|
|
|
const initDiscoverTabs = (): void => {
|
|
document.addEventListener('click', onDiscoverTabClick);
|
|
};
|
|
|
|
initDiscoverTabs();
|