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

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

@ -1,8 +1,4 @@
export default function SchemaBulletPointsInit() { function initBullet(focusPoint) {
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
if (!focusBulletPoints) return;
function initBullet(focusPoint) {
const focusTitle = focusPoint.getAttribute('data-focus-bullet-title'); const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
const focusPointPosition = { const focusPointPosition = {
x: focusPoint.getAttribute('data-postion-x'), x: focusPoint.getAttribute('data-postion-x'),
@ -29,37 +25,49 @@ export default function SchemaBulletPointsInit() {
focusPoint.setAttribute('data-hovered', ''); focusPoint.setAttribute('data-hovered', '');
// focusPoint.style.zIndex = 1; // focusPoint.style.zIndex = 1;
// focusPointPopupContainer.style.zIndex = 99; // focusPointPopupContainer.style.zIndex = 99;
} }
function handleVisibility(focusPoint) { function getCurrentPos(entry) {
// console.log(focusPoint); return parseInt(getComputedStyle(entry.target, null).getPropertyValue('left'));
} }
// Register IntersectionObserver
async function observeBullets(focusBulletPoints) {
const bulletsObserver = new IntersectionObserver((entries) => { const bulletsObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
// Check aspect ratio to be sure the element is visible const margin = 10;
const aspect = entry.intersectionRatio > 0;
if (entry.isIntersecting) { if (!entry.isIntersecting) {
// console.log(entry.target); return;
// console.log(entry.intersectionRatio); }
// Add 'active' class if observation target is inside viewport // DEPASSE À GAUCHE
// entry.target.classList.add('active'); if (entry.boundingClientRect.x < 0) {
// const blockId = entry.target.getAttribute('id'); const currentPos = getCurrentPos(entry);
// const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`); const missingSpace = Math.abs(entry.boundingClientRect.x);
// handleChapterIndicatorPosition(relatedChapterLink.offsetTop); entry.target.style.left = `${currentPos + missingSpace + margin}px`;
} else { entry.target.style.setProperty('--bullet-x-position', '15%');
// Remove 'active' class otherwise }
// entry.target.classList.remove('active'); // 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((focusPoint) => { focusBulletPoints.forEach((focusBullet) => {
const focusPointsContainer = focusPoint.parentElement; const bulletExplanationSibling = focusBullet.nextElementSibling;
initBullet(focusPoint); console.log(bulletExplanationSibling);
const focusPointTooltipContainer = focusPoint.querySelector( bulletsObserver.observe(bulletExplanationSibling);
'.homegrade-blocks-focus-point-bullet__tooltip-container'
);
// bulletsObserver.observe(focusPointTooltipContainer);
}); });
} }
export default function SchemaBulletPointsInit() {
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
if (!focusBulletPoints) return;
focusBulletPoints.forEach((focusPoint) => {
initBullet(focusPoint);
});
observeBullets(focusBulletPoints);
}