72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import handleChapterProgression, { observeSommaireLinks } from './sommaire';
|
|
import { observeFootnotesLinks } from './footnote-format';
|
|
|
|
export default function handleIndexPanel(): void {
|
|
const indexPanel = document.querySelector('.index-panel');
|
|
if (!indexPanel) return;
|
|
|
|
// TABS
|
|
observeTabsButtons();
|
|
// FOOTNOTES
|
|
observeFootnotesLinks();
|
|
// INDEX PANEL MOBILE
|
|
handleMobileOpenToggle();
|
|
// CHAPITRES
|
|
observeSommaireLinks();
|
|
handleChapterProgression();
|
|
handleMobileOpenToggle();
|
|
}
|
|
|
|
function handleMobileOpenToggle(): void {
|
|
const mobileOpenToggle = document.querySelector('#mobile-open-toggle');
|
|
const indexPanel = document.querySelector('.index-panel');
|
|
if (!mobileOpenToggle) return;
|
|
if (!indexPanel) return;
|
|
|
|
mobileOpenToggle.addEventListener('click', () => {
|
|
const isMobileOpen = indexPanel.getAttribute('data-mobile-open');
|
|
|
|
if (isMobileOpen === 'true') {
|
|
indexPanel.setAttribute('data-mobile-open', 'false');
|
|
} else {
|
|
indexPanel.setAttribute('data-mobile-open', 'true');
|
|
}
|
|
});
|
|
}
|
|
|
|
// HANDLE TABS
|
|
function observeTabsButtons(): void {
|
|
const buttons = document.querySelectorAll('.index-panel__header button');
|
|
|
|
buttons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
toggleActiveTabPanel(button.getAttribute('data-index') as string);
|
|
});
|
|
});
|
|
}
|
|
|
|
export function toggleActiveTabPanel(dataIndex: string): void {
|
|
const activePanel = document.querySelector<HTMLElement>(
|
|
`.index-panel__content > [data-index="${dataIndex}"]`
|
|
);
|
|
const activeButton = document.querySelector<HTMLElement>(
|
|
`.index-panel__header button[data-index="${dataIndex}"]`
|
|
);
|
|
if (!dataIndex || !activePanel || !activeButton) 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');
|
|
});
|
|
|
|
activeButton.setAttribute('aria-selected', 'true');
|
|
activePanel.setAttribute('aria-hidden', 'false');
|
|
}
|