Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX debugging handling of custom titles & adding a debug function to preview intersection observer rootMargins

Browse Source
This commit is contained in:
Antoine M 2025-05-14 16:51:14 +02:00
parent 6f6f6f75ff
commit 8cbf873df0
1 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
resources/js/chapter-progression.js
View File

@ -2,6 +2,25 @@ export default function observeChapterProgression() {
const hasChapterIndex = document.querySelector('.chapter_index__list');
if (!hasChapterIndex) return;
// Debug function to visualize rootMargin
// function createDebugOverlay() {
// const overlay = document.createElement('div');
// overlay.style.position = 'fixed';
// overlay.style.top = '10%';
// overlay.style.bottom = '70%';
// overlay.style.left = '0';
// overlay.style.right = '0';
// overlay.style.border = '2px solid red';
// overlay.style.pointerEvents = 'none';
// overlay.style.zIndex = '9999';
// overlay.style.opacity = '0.3';
// overlay.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
// document.body.appendChild(overlay);
// }
// Uncomment the line below to see the detection zone
// createDebugOverlay();
function handleLinkScrollToTarget(e) {
e.preventDefault();
let target = e.target.getAttribute('href');
@ -14,6 +33,9 @@ export default function observeChapterProgression() {
targetBlock.focus({ preventScroll: true });
}
function handleChapterIndicatorPosition(targetLink) {
// console.log('targetLink', targetLink);
// console.log('targetLink.offsetTop', targetLink.offsetTop);
// console.log('targetLink.offsetHeight', targetLink.offsetHeight);
const targetPosition = targetLink.offsetTop;
const targetHeight = targetLink.offsetHeight;
let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
@ -21,12 +43,24 @@ export default function observeChapterProgression() {
chapterIndicator.style.height = targetHeight + 'px';
}
function handleSetLinkActive(targetLink) {
// console.log('####################');
// console.log(targetLink);
const allLinks = document.querySelectorAll('.chapter_index__link');
allLinks.forEach((link) => {
link.classList.remove('active');
});
// targetLink.classList.add('active');
}
let chapterLinks = document.querySelectorAll('.chapter_index__link');
chapterLinks.forEach((link) => {
link.addEventListener('click', (e) => {
handleLinkScrollToTarget(e);
handleChapterIndicatorPosition(e.target.offsetTop);
handleChapterIndicatorPosition(e.target);
handleSetLinkActive(e.target);
});
});
@ -39,8 +73,10 @@ export default function observeChapterProgression() {
relatedChapterLink.classList.remove('active');
if (entry.isIntersecting) {
console.log('entry.isIntersecting', entry.isIntersecting);
// Add 'active' class if observation target is inside viewport
handleChapterIndicatorPosition(relatedChapterLink);
entry.target.classList.add('active');
relatedChapterLink.classList.add('active');
} else {
@ -62,7 +98,7 @@ export default function observeChapterProgression() {
const plusLoinBlock = document.querySelector('#aller-plus-loin');
const helpHomegradeBlock = document.querySelector('#homegrade-vous-aide');
const partnersOtherServices = document.querySelector('#partenaires-autres-services');
const customTitles = document.querySelectorAll('.homegrade-blocks-custom-heading[id]');
let allBlocks = [];
if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock);
@ -73,7 +109,7 @@ export default function observeChapterProgression() {
allBlocks = [...allBlocks, ...questionsContainerBlocks];
if (postsContainerBlocks.length > 0) allBlocks = [...allBlocks, ...postsContainerBlocks];
if (chapitresThematiques.length > 0) allBlocks = [...allBlocks, ...chapitresThematiques];
if (customTitles.length > 0) allBlocks = [...allBlocks, ...customTitles];
return allBlocks;
}