FEATURE Handling the different pannel behaviours

resources/js/singles/index-panel.ts

@@ -1,10 +1,13 @@
-export default function handleIndexPanels(): void {
+import { scrollToFootnote } from './footnote-format';
+import { handleSmoothScrollToTitle } from './sommaire';
+
+export default function handleIndexPanel(): void {
   const indexPanel = document.querySelector('.index-panel');
   if (!indexPanel) return;
 
-  console.log('indexPanel');
   observeTabsButtons();
   observeFootnotesLinks();
+  observeSommaireLinks();
 }
 
 // HANDLE TABS
@@ -13,26 +16,19 @@ function observeTabsButtons(): void {
 
   buttons.forEach((button) => {
     button.addEventListener('click', () => {
-      toggleActiveTabsButton(button as HTMLElement);
+      toggleActiveTabPanel(button.getAttribute('data-index') as string);
-      toggleActiveTabsPanel(button as HTMLElement);
     });
   });
 }
 
-function toggleActiveTabsButton(button: HTMLElement): void {
+export function toggleActiveTabPanel(dataIndex: string): 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;
+  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');
@@ -46,36 +42,125 @@ function toggleActiveTabsPanel(activeButton: HTMLElement): void {
     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');
+// ************* SOMMAIRE *********************************
+// ********************************************************
 
-  footnotesButtons.forEach((footnoteButton) => {
+function observeSommaireLinks(): void {
-    footnoteButton.addEventListener('click', (e) => {
+  console.log('observeSommaireLinks');
+  const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
+  for (const title of sommaireTitles) {
+    title.addEventListener('click', (e) => {
       e.preventDefault();
-      const target = e.target as HTMLElement;
-      const targetId = target.getAttribute('href');
 
+      const href = title.getAttribute('href');
+      if (!href) return;
+
+      const targetId = href.startsWith('#') ? href.substring(1) : href;
       if (!targetId) return;
 
-      document.querySelector(targetId)?.scrollIntoView({ behavior: 'smooth' });
+      handleSmoothScrollToTitle(targetId);
-      toggleActiveFootnote(footnoteButton as HTMLElement);
+      toggleActiveChapterLinkInIndexPanel(targetId);
+    });
+  }
+}
+
+function handleSmoothScrollToTitle(targetId: string): void {
+  const targetElement = document.querySelector(`#${targetId}`);
+  if (!targetElement) return;
+
+  targetElement.scrollIntoView({ behavior: 'smooth' });
+}
+function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
+  const sommaireLinks: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
+
+  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
+  const currentLink = indexPanel.querySelector(`a[href="#${targetId}"]`) as HTMLElement;
+
+  console.log(currentLink);
+
+  if (!currentLink) return;
+
+  for (const link of sommaireLinks) {
+    link.setAttribute('active', 'false');
+  }
+
+  currentLink?.setAttribute('active', 'true');
+}
+
+// export function handleSmoothScrollToTitle(): void {
+//   const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
+//   for (const title of sommaireTitles) {
+//     title.addEventListener('click', (e) => {
+//       e.preventDefault();
+
+//       const target = title.getAttribute('href');
+//       if (!target) return;
+
+//       const targetElement = document.querySelector(target);
+//       if (!targetElement) return;
+
+//       targetElement.scrollIntoView({ behavior: 'smooth' });
+//     });
+//   }
+// }
+
+// ********************************************************
+// ************* FOOTNOTES *********************************
+// ********************************************************
+
+function observeFootnotesLinks(): void {
+  const footnotesLinks = document.querySelectorAll('.footnotes-index a');
+
+  footnotesLinks.forEach((footnoteLink) => {
+    footnoteLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      const target = e.target as HTMLElement;
+      const href = target.getAttribute('href');
+      if (!href) return;
+
+      const targetId = href.startsWith('#') ? href.substring(1) : href;
+      if (!targetId) return;
+      scrollToFootnote(targetId);
+      // document.querySelector(`#${targetId}`)?.scrollIntoView({ behavior: 'smooth' });
+
+      toggleActiveFootnoteLinkInIndexPanel(targetId);
+      scrollToFootnoteInIndexPanel(targetId);
     });
   });
 }
 
-function toggleActiveFootnote(button: HTMLElement): void {
+export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void {
-  const buttons = document.querySelectorAll('footnote-reference-item');
+  const footnotesIndexLinks = document.querySelectorAll('.footnote-reference-item');
+  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
+  const currentFootnote = indexPanel.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;
 
-  const footnotesItems = document.querySelectorAll('.footnote-reference-item');
+  footnotesIndexLinks.forEach((footnoteLink) => {
-
+    footnoteLink.setAttribute('active', 'false');
-  footnotesItems.forEach((footnoteItem) => {
-    footnoteItem.setAttribute('active', 'false');
   });
 
-  button.setAttribute('active', 'true');
+  currentFootnote?.setAttribute('active', 'true');
+}
+
+export function scrollToFootnoteInIndexPanel(footnoteId: string): void {
+  const footnotesIndex = document.querySelector('#footnotes-index') as HTMLElement;
+  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
+  const currentFootnote = indexPanel?.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;
+
+  if (currentFootnote && indexPanel) {
+    const containerRect = indexPanel.getBoundingClientRect();
+    const elementRect = currentFootnote.getBoundingClientRect();
+
+    const relativeTop = elementRect.top - containerRect.top;
+    const scrollTop = indexPanel.scrollTop + relativeTop - 20;
+
+    indexPanel.scrollTo({
+      top: scrollTop,
+      behavior: 'smooth',
+    });
+  }
 }