35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
export function handleArticleToolbar() {
|
|
observeTabsButtons();
|
|
}
|
|
|
|
function observeTabsButtons(): void {
|
|
const toolbarButtons = document.querySelectorAll('#article-toolbar button[role="tab"]');
|
|
|
|
toolbarButtons.forEach((toolbarButton) => {
|
|
toolbarButton.addEventListener('click', () => {
|
|
const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
|
|
toggleActiveTab(toolbarButton as HTMLElement);
|
|
handleActiveTabContent(currentTabValue as string);
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleActiveTab(toolbarButton: HTMLElement): void {
|
|
resetActiveToolbarButtons();
|
|
toolbarButton.setAttribute('aria-selected', 'true');
|
|
}
|
|
|
|
function resetActiveToolbarButtons(): void {
|
|
const toolbarButtons = document.querySelectorAll('#article-toolbar button[role="tab"]');
|
|
toolbarButtons.forEach((toolbarButton) => {
|
|
toolbarButton.setAttribute('aria-selected', 'false');
|
|
});
|
|
}
|
|
|
|
function handleActiveTabContent(tab: string): void {
|
|
const contentWrapper = document.querySelector('.content-wrapper');
|
|
contentWrapper?.setAttribute('data-active-tab', tab);
|
|
console.log(tab);
|
|
console.log('contentWrapper');
|
|
}
|