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

handling current active chapter index in intersection observer

Browse Source
This commit is contained in:
Antoine M 2023-11-27 18:51:51 +01:00
parent 5e6bd9751c
commit f5bb2b672d
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/single-conseil.js
View File

@ -34,11 +34,14 @@ export default function singleConseil() {
const chapterProgressionObserver = new IntersectionObserver( const chapterProgressionObserver = new IntersectionObserver(
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
const blockId = entry.target.getAttribute('id');
const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
relatedChapterLink.classList.remove('active');
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Add 'active' class if observation target is inside viewport // Add 'active' class if observation target is inside viewport
entry.target.classList.add('active'); entry.target.classList.add('active');
const blockId = entry.target.getAttribute('id'); relatedChapterLink.classList.add('active');
const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
handleChapterIndicatorPosition(relatedChapterLink.offsetTop); handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
} else { } else {
// Remove 'active' class otherwise // Remove 'active' class otherwise
@ -53,11 +56,13 @@ export default function singleConseil() {
function buildAllBlocksToObserve() { function buildAllBlocksToObserve() {
const questionsContainerBlocks = document.querySelectorAll('.questions-container-block'); const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
const chapitresThematiques = document.querySelectorAll('.homegrade-blocks-chapitre-thematique');
const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary'); const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
const plusLoinBlock = document.querySelector('#aller-plus-loin'); const plusLoinBlock = document.querySelector('#aller-plus-loin');
let allBlocks = []; let allBlocks = [];
if (questionsContainerBlocks) allBlocks = [...questionsContainerBlocks]; if (questionsContainerBlocks) allBlocks = [...questionsContainerBlocks];
if (chapitresThematiques) allBlocks = [...chapitresThematiques];
if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock); if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock);
if (plusLoinBlock) allBlocks.push(plusLoinBlock); if (plusLoinBlock) allBlocks.push(plusLoinBlock);