82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
export default function handleIndexPanels(): void {
|
|
const indexPanel = document.querySelector('.index-panel');
|
|
if (!indexPanel) return;
|
|
|
|
console.log('indexPanel');
|
|
observeTabsButtons();
|
|
observeFootnotesLinks();
|
|
}
|
|
|
|
// HANDLE TABS
|
|
function observeTabsButtons(): void {
|
|
const buttons = document.querySelectorAll('.index-panel__header button');
|
|
|
|
buttons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
toggleActiveTabsButton(button as HTMLElement);
|
|
toggleActiveTabsPanel(button as HTMLElement);
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleActiveTabsButton(button: HTMLElement): void {
|
|
const buttons = document.querySelectorAll('.index-panel__header button');
|
|
buttons.forEach((button) => {
|
|
button.setAttribute('aria-selected', 'false');
|
|
});
|
|
button.setAttribute('aria-selected', 'true');
|
|
}
|
|
|
|
function toggleActiveTabsPanel(activeButton: HTMLElement): void {
|
|
const dataIndex = activeButton.getAttribute('data-index');
|
|
const activePanel = document.querySelector<HTMLElement>(
|
|
`.index-panel__content > [data-index="${dataIndex}"]`
|
|
);
|
|
if (!dataIndex || !activePanel) return;
|
|
|
|
// Hide all buttons and panels
|
|
const allButtons = document.querySelectorAll<HTMLElement>('.index-panel__header button');
|
|
const allPanels = document.querySelectorAll<HTMLElement>('.index-panel__content > [data-index]');
|
|
|
|
allButtons.forEach((button) => {
|
|
button.setAttribute('aria-selected', 'false');
|
|
});
|
|
|
|
allPanels.forEach((panel) => {
|
|
panel.setAttribute('aria-hidden', 'true');
|
|
});
|
|
|
|
// Active the button and the panel
|
|
activeButton.setAttribute('aria-selected', 'true');
|
|
activePanel.setAttribute('aria-hidden', 'false');
|
|
}
|
|
|
|
function observeFootnotesLinks(): void {
|
|
const footnotesButtons = document.querySelectorAll('.footnotes-index a');
|
|
|
|
footnotesButtons.forEach((footnoteButton) => {
|
|
footnoteButton.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const target = e.target as HTMLElement;
|
|
const targetId = target.getAttribute('href');
|
|
|
|
if (!targetId) return;
|
|
|
|
document.querySelector(targetId)?.scrollIntoView({ behavior: 'smooth' });
|
|
toggleActiveFootnote(footnoteButton as HTMLElement);
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleActiveFootnote(button: HTMLElement): void {
|
|
const buttons = document.querySelectorAll('footnote-reference-item');
|
|
|
|
const footnotesItems = document.querySelectorAll('.footnote-reference-item');
|
|
|
|
footnotesItems.forEach((footnoteItem) => {
|
|
footnoteItem.setAttribute('active', 'false');
|
|
});
|
|
|
|
button.setAttribute('active', 'true');
|
|
}
|