studio-variable/index-main
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

divide report in subsection
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 16:03:17 +01:00
parent 4262be067d
commit ecd379dee4
5 changed files with 396 additions and 579 deletions
Download patch file Download diff file Expand all files Collapse all files

189
assets/js/report.js
View file

@ -14,9 +14,7 @@ export function report(responsiveSmall) {
return;
}
// Sur desktop : initMediaDisplay va gérer les media dynamiquement
// Les swipers seront initialisés au moment de l'insertion dans #report__medias
initMediaDisplay();
}
}
@ -33,188 +31,3 @@ function initSliderBeforeAfter(container = document){
}
});
}
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();
const spacingH = rootStyles.getPropertyValue('--spacing').trim();
// Convertir en pixels si nécessaire
const headerHPx = parseFloat(headerH);
const paddingBodyPx = parseFloat(paddingBody);
const spacingHPx = parseFloat(paddingBody);
const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5;
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;
anchor.innerHTML = '<span class="arrow-report">▶</span>'
// 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;
let isUpdating = false; // Flag pour éviter les mises à jour simultanées
function updateActiveMedia() {
// Éviter les mises à jour simultanées
if (isUpdating) return;
// 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) {
isUpdating = true;
// Utiliser requestAnimationFrame pour éviter les conflits de reflow
requestAnimationFrame(() => {
// Vider le conteneur
reportMedias.innerHTML = '';
// Ajouter le nouveau media
const newMediaElement = mediaData.media.cloneNode(true);
reportMedias.appendChild(newMediaElement);
currentMediaId = mediaId;
// Attendre le prochain frame pour initialiser les sliders/swipers
requestAnimationFrame(() => {
initSliderBeforeAfter(reportMedias);
initSwipers(reportMedias);
// Débloquer les mises à jour après un court délai
setTimeout(() => {
isUpdating = false;
}, 100);
});
});
}
} 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);
});
}