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

refactoring and observing shema bullets when outside screen

Browse Source
This commit is contained in:
Antoine M 2024-01-23 17:21:29 +01:00
parent 1f5b6eaab1
commit 3593838946
1 changed files with 58 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/schema-bullet-points.js
View File

@ -1,7 +1,3 @@
export default function SchemaBulletPointsInit() {
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
if (!focusBulletPoints) return;
function initBullet(focusPoint) {
const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
const focusPointPosition = {
@ -30,36 +26,48 @@ export default function SchemaBulletPointsInit() {
// focusPoint.style.zIndex = 1;
// focusPointPopupContainer.style.zIndex = 99;
}
function handleVisibility(focusPoint) {
// console.log(focusPoint);
function getCurrentPos(entry) {
return parseInt(getComputedStyle(entry.target, null).getPropertyValue('left'));
}
// Register IntersectionObserver
async function observeBullets(focusBulletPoints) {
const bulletsObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
// Check aspect ratio to be sure the element is visible
const aspect = entry.intersectionRatio > 0;
const margin = 10;
if (entry.isIntersecting) {
// console.log(entry.target);
// console.log(entry.intersectionRatio);
// 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');
if (!entry.isIntersecting) {
return;
}
// DEPASSE À GAUCHE
if (entry.boundingClientRect.x < 0) {
const currentPos = getCurrentPos(entry);
const missingSpace = Math.abs(entry.boundingClientRect.x);
entry.target.style.left = `${currentPos + missingSpace + margin}px`;
entry.target.style.setProperty('--bullet-x-position', '15%');
}
// DEPASSE À DROITE
if (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {
const currentPos = getCurrentPos(entry);
const difference = entry.boundingClientRect.width - entry.intersectionRect.width;
entry.target.style.left = `${currentPos - difference - margin}px`;
entry.target.style.setProperty('--bullet-x-position', `85% `);
}
});
});
focusBulletPoints.forEach((focusBullet) => {
const bulletExplanationSibling = focusBullet.nextElementSibling;
console.log(bulletExplanationSibling);
bulletsObserver.observe(bulletExplanationSibling);
});
}
export default function SchemaBulletPointsInit() {
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
if (!focusBulletPoints) return;
focusBulletPoints.forEach((focusPoint) => {
const focusPointsContainer = focusPoint.parentElement;
initBullet(focusPoint);
const focusPointTooltipContainer = focusPoint.querySelector(
'.homegrade-blocks-focus-point-bullet__tooltip-container'
);
// bulletsObserver.observe(focusPointTooltipContainer);
});
observeBullets(focusBulletPoints);
}