script report

assets/js/report.js

@@ -0,0 +1,178 @@
+export function report(responsiveSmall) {
+  if (document.body.dataset.template === 'report') {
+    console.log('report');
+
+    // Ne fonctionne que pour les écrans plus grands que responsiveSmall
+    if (window.matchMedia(responsiveSmall).matches) {
+      return;
+    }
+
+    initMediaDisplay();
+  }
+}
+
+function initMediaDisplay() {
+  const reportMedias = document.querySelector('#report__medias');
+  if (!reportMedias) return;
+
+  // Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body))
+  const rootStyles = getComputedStyle(document.documentElement);
+  const headerH = rootStyles.getPropertyValue('--header-h').trim();
+  const paddingBody = rootStyles.getPropertyValue('--padding-body').trim();
+
+  // Convertir en pixels si nécessaire
+  const headerHPx = parseFloat(headerH);
+  const paddingBodyPx = parseFloat(paddingBody);
+  const totalOffset = headerHPx + paddingBodyPx;
+
+  const sections = document.querySelectorAll('.section-content');
+  const mediaElements = [];
+  let mediaCounter = 0;
+
+  // 1. Pour chaque section, traiter les .media
+  sections.forEach((section) => {
+    const medias = section.querySelectorAll('.media');
+
+    medias.forEach((media) => {
+      // Générer un ID unique si nécessaire
+      if (!media.id) {
+        media.id = `media-${mediaCounter++}`;
+      }
+
+      // Créer une ancre
+      const anchor = document.createElement('div');
+      anchor.className = 'media-anchor';
+      anchor.dataset.mediaId = media.id;
+
+      // Style visuel pour debug (carré rouge de 10px)
+      anchor.style.width = '10px';
+      anchor.style.height = '10px';
+      anchor.style.backgroundColor = 'red';
+      anchor.style.position = 'relative';
+
+      // Vérifier si le media est précédé d'un titre
+      let previousElement = media.previousElementSibling;
+      let insertBeforeElement = media;
+
+      // Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre
+      if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) {
+        insertBeforeElement = previousElement;
+      }
+
+      // Insérer l'ancre
+      insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement);
+
+      // Stocker la référence pour l'observer
+      mediaElements.push({
+        anchor: anchor,
+        media: media.cloneNode(true), // Cloner le media
+        originalMedia: media,
+        section: section
+      });
+
+      // Masquer le media original
+      media.style.display = 'none';
+    });
+  });
+
+  // 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
+  let currentMediaId = null;
+
+  function updateActiveMedia() {
+    // Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
+    let closestAnchor = null;
+    let closestDistance = Infinity;
+
+    mediaElements.forEach(({ anchor }) => {
+      const rect = anchor.getBoundingClientRect();
+
+      // Si l'ancre est au-dessus ou à la ligne de déclenchement
+      if (rect.top <= totalOffset) {
+        const distance = totalOffset - rect.top;
+
+        // Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne)
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestAnchor = anchor;
+        }
+      }
+    });
+
+    // Si on a trouvé une ancre
+    if (closestAnchor) {
+      const mediaId = closestAnchor.dataset.mediaId;
+
+      // Si c'est déjà le media affiché, ne rien faire
+      if (currentMediaId === mediaId) return;
+
+      // Trouver le media correspondant
+      const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
+
+      if (mediaData) {
+        // Vider le conteneur
+        reportMedias.innerHTML = '';
+
+        // Ajouter le nouveau media
+        reportMedias.appendChild(mediaData.media.cloneNode(true));
+        currentMediaId = mediaId;
+      }
+    } else {
+      // Aucune ancre n'a encore franchi la ligne, vider le conteneur
+      if (currentMediaId !== null) {
+        reportMedias.innerHTML = '';
+        currentMediaId = null;
+      }
+    }
+  }
+
+  // 3. Écouter le scroll
+  let scrollTimeout;
+  window.addEventListener('scroll', () => {
+    // Throttle pour optimiser les performances
+    if (scrollTimeout) return;
+
+    scrollTimeout = setTimeout(() => {
+      updateActiveMedia();
+      scrollTimeout = null;
+    }, 10);
+  });
+
+  // Appeler une première fois au chargement
+  updateActiveMedia();
+
+  // 4. Gérer les sections sans media immédiat
+  // Observer aussi les sections elles-mêmes
+  const sectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const section = entry.target;
+
+        // Vérifier si cette section a un media juste après son premier titre
+        const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6');
+        if (firstTitle) {
+          let nextElement = firstTitle.nextElementSibling;
+
+          // Chercher le prochain élément qui n'est pas une ancre
+          while (nextElement && nextElement.classList.contains('media-anchor')) {
+            nextElement = nextElement.nextElementSibling;
+          }
+
+          // Si le prochain élément n'est pas un .media, vider #report__medias
+          if (!nextElement || !nextElement.classList.contains('media')) {
+            reportMedias.innerHTML = '';
+            currentMediaId = null;
+          }
+        }
+      }
+    });
+  }, {
+    root: null,
+    rootMargin: `-${totalOffset}px 0px 0px 0px`,
+    threshold: 0
+  });
+
+  // Observer toutes les sections
+  sections.forEach(section => {
+    sectionObserver.observe(section);
+  });
+}