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

handling scroll indicator position for page conseils

Browse Source
This commit is contained in:
Antoine M 2023-09-28 12:10:31 +02:00
parent c0705482c0
commit d90462e64b
5 changed files with 88 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/app.css
View File

@ -4444,6 +4444,8 @@ article > *:not(.entry-content, .chapter-header-block),
height: 2rem;
border-radius: 1rem;
width: 3px;
/* transition: top 0.3s ease-out; */
transition: top 0.7s cubic-bezier(0, 0.75, 0.47, 0.99);
}
.conseils_wrapper .chapter_index a {

4
css/editor-style.css
View File

@ -127,10 +127,6 @@
flex-grow: 1
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.flex-col {
flex-direction: column
}

44
js/app.js
View File

@ -227,8 +227,8 @@
let chapterIndex = document.querySelector(".chapter_index");
let questionBlocks = document.querySelectorAll(".questions-container-block");
function handleLinksBehavior() {
let chapterLinks = document.querySelectorAll(".chapter_index__link");
chapterLinks.forEach((link) => {
let chapterLinks2 = document.querySelectorAll(".chapter_index__link");
chapterLinks2.forEach((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
let target = e.target.getAttribute("href");
@ -240,10 +240,44 @@
});
});
}
function handleChapterIndicatorPosition() {
let chapterIndicator = document.querySelector(".chapter_index__position-indicator");
function handleLinkScrollToTarget(e) {
e.preventDefault();
let target = e.target.getAttribute("href");
let targetBlock = document.querySelector(target);
targetBlock.scrollIntoView({
behavior: "smooth"
});
targetBlock.focus();
}
handleLinksBehavior();
function handleChapterIndicatorPosition(targetPosition) {
let chapterIndicator = document.querySelector(".chapter_index__position-indicator");
chapterIndicator.style.top = targetPosition + "px";
}
let chapterLinks = document.querySelectorAll(".chapter_index__link");
chapterLinks.forEach((link) => {
link.addEventListener("click", (e) => {
handleLinkScrollToTarget(e);
handleChapterIndicatorPosition(e.target.offsetTop);
});
});
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add("active");
const blockId = entry.target.getAttribute("id");
const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
} else {
}
});
});
const questionsContainerBlocks = document.querySelectorAll(".questions-container-block");
const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary");
const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
console.log(vocabulaireSummaryBlock);
allBlocks.forEach((el) => {
io.observe(el);
});
}
// resources/js/app.js

2
resources/css/pages/single-conseils.css
View File

@ -23,6 +23,8 @@
&__position-indicator {
@apply h-8 absolute top-0 -left-4 rounded-2xl;
width: 3px;
/* transition: top 0.3s ease-out; */
transition: top 0.7s cubic-bezier(0, 0.75, 0.47, 0.99);
}
a {

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

@ -18,12 +18,51 @@ export default function singleConseil() {
});
});
}
function handleLinkScrollToTarget(e) {
e.preventDefault();
let target = e.target.getAttribute('href');
let targetBlock = document.querySelector(target);
function handleChapterIndicatorPosition() {
targetBlock.scrollIntoView({
behavior: 'smooth',
});
targetBlock.focus();
}
function handleChapterIndicatorPosition(targetPosition) {
let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
chapterIndicator.style.top = targetPosition + 'px';
}
handleLinksBehavior();
let chapterLinks = document.querySelectorAll('.chapter_index__link');
chapterLinks.forEach((link) => {
link.addEventListener('click', (e) => {
handleLinkScrollToTarget(e);
handleChapterIndicatorPosition(e.target.offsetTop);
});
});
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
// Add 'active' class if observation target is inside viewport
entry.target.classList.add('active');
const blockId = entry.target.getAttribute('id');
const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
} else {
// Remove 'active' class otherwise
// entry.target.classList.remove('active');
}
});
});
const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
console.log(vocabulaireSummaryBlock);
allBlocks.forEach((el) => {
io.observe(el);
});
}
// console.log(chapterIndex);
// console.log(questionBlocks);
// console.log(chapterLinks);