82 lines
3.0 KiB
JavaScript
82 lines
3.0 KiB
JavaScript
export default function singleConseil() {
|
|
const hasChapterIndex = document.querySelector('.chapter_index__list');
|
|
if (!hasChapterIndex) return;
|
|
|
|
let chapterIndex = document.querySelector('.chapter_index');
|
|
let questionBlocks = document.querySelectorAll('.questions-container-block');
|
|
|
|
function handleLinkScrollToTarget(e) {
|
|
e.preventDefault();
|
|
let target = e.target.getAttribute('href');
|
|
let targetBlock = document.querySelector(target);
|
|
|
|
targetBlock.setAttribute('tabindex', '0');
|
|
targetBlock.scrollIntoView({
|
|
behavior: 'smooth',
|
|
});
|
|
targetBlock.focus({ preventScroll: true });
|
|
}
|
|
function handleChapterIndicatorPosition(targetLink) {
|
|
const targetPosition = targetLink.offsetTop;
|
|
const targetHeight = targetLink.offsetHeight;
|
|
let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
|
|
chapterIndicator.style.top = targetPosition + 'px';
|
|
chapterIndicator.style.height = targetHeight + 'px';
|
|
}
|
|
|
|
let chapterLinks = document.querySelectorAll('.chapter_index__link');
|
|
|
|
chapterLinks.forEach((link) => {
|
|
link.addEventListener('click', (e) => {
|
|
handleLinkScrollToTarget(e);
|
|
handleChapterIndicatorPosition(e.target.offsetTop);
|
|
});
|
|
});
|
|
|
|
// CHAPTER IntersectionObserver
|
|
const chapterProgressionObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
const blockId = entry.target.getAttribute('id');
|
|
const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
|
|
relatedChapterLink.classList.remove('active');
|
|
|
|
if (entry.isIntersecting) {
|
|
// Add 'active' class if observation target is inside viewport
|
|
handleChapterIndicatorPosition(relatedChapterLink);
|
|
entry.target.classList.add('active');
|
|
relatedChapterLink.classList.add('active');
|
|
} else {
|
|
// Remove 'active' class otherwise
|
|
// entry.target.classList.remove('active');
|
|
}
|
|
});
|
|
},
|
|
{
|
|
rootMargin: '-10% 0px -70% 0px',
|
|
}
|
|
);
|
|
|
|
function buildAllBlocksToObserve() {
|
|
const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
|
|
const chapitresThematiques = document.querySelectorAll('.homegrade-blocks-chapitre-thematique');
|
|
const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
|
|
const plusLoinBlock = document.querySelector('#aller-plus-loin');
|
|
let allBlocks = [];
|
|
|
|
if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock);
|
|
if (plusLoinBlock) allBlocks.push(plusLoinBlock);
|
|
if (questionsContainerBlocks.length > 0)
|
|
allBlocks = [...allBlocks, ...questionsContainerBlocks];
|
|
if (chapitresThematiques.length > 0) allBlocks = [...allBlocks, ...chapitresThematiques];
|
|
|
|
return allBlocks;
|
|
}
|
|
|
|
allBlocks = buildAllBlocksToObserve();
|
|
|
|
allBlocks.forEach((block) => {
|
|
chapterProgressionObserver.observe(block);
|
|
});
|
|
}
|