FEATURE Introducing panel behaviour handling

resources/js/singles/index-panel.ts

@@ -0,0 +1,80 @@
+export default function handleIndexPanels(): void {
+  const indexPanel = document.querySelector('.index-panel');
+  if (!indexPanel) return;
+
+  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');
+}