FEATURE Introducing dedicated external component to handle the sommaire features

resources/css/components/footnote-reference.css

@@ -1,6 +1,21 @@
 .footnote-reference {
   color: unset;
+  cursor: pointer;
+  &:hover {
+    @apply underline underline-offset-8;
+    text-decoration-thickness: 1px;
+    &:after {
+      transform: translate(0px, -2px) scale(1.1);
+
+      z-index: 10;
+      transition: all 0.3s ease;
+      @apply nunito;
+    }
+  }
+
   &:after {
+    transform: translate(0px, -2px) scale(1);
+    transition: all 0.3s ease;
     @apply nunito;
   }
 

resources/css/components/index-panel.css

@@ -31,4 +31,10 @@
       @apply hidden;
     }
   }
+
+  .sommaire-index a:hover,
+  .footnotes-index a:hover {
+    @apply text-carhop-green-800 underline-offset-8 underline;
+    text-decoration-thickness: 1px;
+  }
 }

resources/css/components/sommaire-index.css

@@ -6,4 +6,7 @@
   a {
     @apply text-xl text-carhop-gray opacity-80;
   }
+  a[active='true'] {
+    @apply text-carhop-green-700 font-bold;
+  }
 }

resources/js/singles/footnote-format.ts

@@ -0,0 +1,27 @@
+import {
+  scrollToFootnoteInIndexPanel,
+  toggleActiveTabPanel,
+  toggleActiveFootnoteLinkInIndexPanel,
+} from './index-panel';
+
+export default function handleFootnoteFormat(): void {
+  const footnotes = document.querySelectorAll('.content-area .footnote-reference');
+
+  footnotes.forEach((footnote) => {
+    const footnoteId = footnote.getAttribute('id');
+    if (!footnoteId) return;
+
+    footnote.addEventListener('click', () => {
+      toggleActiveTabPanel('footnotes');
+      scrollToFootnoteInIndexPanel(footnoteId);
+      toggleActiveFootnoteLinkInIndexPanel(footnoteId);
+    });
+  });
+}
+
+export function scrollToFootnote(footnoteId: string): void {
+  const footnote = document.querySelector(`a.footnote-reference#${footnoteId}`);
+  if (!footnote) return;
+
+  footnote.scrollIntoView({ behavior: 'smooth' });
+}

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);
-      toggleActiveTabsPanel(button as HTMLElement);
+      toggleActiveTabPanel(button.getAttribute('data-index') as string);
     });
   });
 }
 
-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');
+export function toggleActiveTabPanel(dataIndex: string): void {
   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) => {
-    footnoteButton.addEventListener('click', (e) => {
+function observeSommaireLinks(): void {
+  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' });
-      toggleActiveFootnote(footnoteButton as HTMLElement);
+      handleSmoothScrollToTitle(targetId);
+      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 {
-  const buttons = document.querySelectorAll('footnote-reference-item');
+export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void {
+  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');
-
-  footnotesItems.forEach((footnoteItem) => {
-    footnoteItem.setAttribute('active', 'false');
+  footnotesIndexLinks.forEach((footnoteLink) => {
+    footnoteLink.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',
+    });
+  }
 }

resources/js/singles/singles.ts

@@ -1,4 +1,5 @@
-import handleIndexPanels from './index-panel';
+import handleIndexPanel from './index-panel';
+import handleFootnoteFormat from './footnote-format';
 
 export default function singles(): void {
   const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@@ -7,9 +8,9 @@ export default function singles(): void {
 
   injectIdToNativeTitles();
 
-  handleIndexPanels();
+  handleIndexPanel();
+  handleFootnoteFormat();
   handleCiteButton();
-  handleSmoothScrollToTitle();
 }
 
 function handleCiteButton(): void {
@@ -75,20 +76,3 @@ function injectIdToNativeTitles(): void {
     title.setAttribute('id', slug);
   });
 }
-
-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' });
-    });
-  }
-}

resources/js/singles/sommaire.ts

@@ -0,0 +1,16 @@
+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' });
+    });
+  }
+}

single-articles.php

@@ -49,7 +49,7 @@
 								}
 								?>
 							</ul>
-							<ul data-index="footnotes" class="footnotes-index" aria-hidden="true">
+							<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
 								<?php
 								$footnotes = build_footnotes_index_from_content(get_the_content());
 								?>