73 lines
2.8 KiB
JavaScript
73 lines
2.8 KiB
JavaScript
function initBullet(focusPoint) {
|
|
const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
|
|
const focusPointPosition = {
|
|
x: focusPoint.getAttribute('data-postion-x'),
|
|
y: focusPoint.getAttribute('data-postion-y'),
|
|
};
|
|
|
|
const focusPointPopupContainer = document.createElement('div');
|
|
focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
|
|
|
|
const focusPointPopupTitle = document.createElement('h4');
|
|
// 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);
|
|
|
|
focusPoint.setAttribute('data-hovered', '');
|
|
// focusPoint.style.zIndex = 1;
|
|
// focusPointPopupContainer.style.zIndex = 99;
|
|
}
|
|
function getCurrentPos(entry) {
|
|
return parseInt(getComputedStyle(entry.target, null).getPropertyValue('left'));
|
|
}
|
|
|
|
async function observeBullets(focusBulletPoints) {
|
|
const bulletsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
const margin = 10;
|
|
|
|
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;
|
|
bulletsObserver.observe(bulletExplanationSibling);
|
|
});
|
|
}
|
|
|
|
export default function SchemaBulletPointsInit() {
|
|
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
|
|
if (!focusBulletPoints) return;
|
|
|
|
focusBulletPoints.forEach((focusPoint) => {
|
|
initBullet(focusPoint);
|
|
});
|
|
observeBullets(focusBulletPoints);
|
|
}
|