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

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

@ -1,65 +1,73 @@
export default function SchemaBulletPointsInit() { function initBullet(focusPoint) {
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet'); const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
if (!focusBulletPoints) return; const focusPointPosition = {
x: focusPoint.getAttribute('data-postion-x'),
y: focusPoint.getAttribute('data-postion-y'),
};
function initBullet(focusPoint) { const focusPointPopupContainer = document.createElement('div');
const focusTitle = focusPoint.getAttribute('data-focus-bullet-title'); focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
const focusPointPosition = {
x: focusPoint.getAttribute('data-postion-x'),
y: focusPoint.getAttribute('data-postion-y'),
};
const focusPointPopupContainer = document.createElement('div'); const focusPointPopupTitle = document.createElement('h4');
focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container'; // focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.innerHTML = focusTitle;
focusPointPopupTitle.className = 'tooltip-title';
focusPointPopupContainer.style.left = `${focusPointPosition.x}%`;
focusPointPopupContainer.style.top = `${focusPointPosition.y}%`;
focusPointPopupContainer.appendChild(focusPointPopupTitle);
const focusPointPopupTitle = document.createElement('h4'); // console.log(focusPointPosition);
// focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.innerHTML = focusTitle;
focusPointPopupTitle.className = 'tooltip-title';
focusPointPopupContainer.style.left = `${focusPointPosition.x}%`;
focusPointPopupContainer.style.top = `${focusPointPosition.y}%`;
focusPointPopupContainer.appendChild(focusPointPopupTitle);
// console.log(focusPointPosition); // focusPointPopupContainer.style.left = `${focusPoint.getAttribute}px`;
// focusPoint.appendChild(focusPointPopupContainer);
focusPoint.parentNode.insertBefore(focusPointPopupContainer, focusPoint.nextSibling);
// focusPointPopupContainer.style.left = `${focusPoint.getAttribute}px`; focusPoint.setAttribute('data-hovered', '');
// focusPoint.appendChild(focusPointPopupContainer); // focusPoint.style.zIndex = 1;
focusPoint.parentNode.insertBefore(focusPointPopupContainer, focusPoint.nextSibling); // focusPointPopupContainer.style.zIndex = 99;
}
function getCurrentPos(entry) {
return parseInt(getComputedStyle(entry.target, null).getPropertyValue('left'));
}
focusPoint.setAttribute('data-hovered', ''); async function observeBullets(focusBulletPoints) {
// focusPoint.style.zIndex = 1;
// focusPointPopupContainer.style.zIndex = 99;
}
function handleVisibility(focusPoint) {
// console.log(focusPoint);
}
// Register IntersectionObserver
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);
}