66 lines
2.7 KiB
JavaScript
66 lines
2.7 KiB
JavaScript
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 = {
|
|
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 handleVisibility(focusPoint) {
|
|
// console.log(focusPoint);
|
|
}
|
|
// Register IntersectionObserver
|
|
const bulletsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
// Check aspect ratio to be sure the element is visible
|
|
const aspect = entry.intersectionRatio > 0;
|
|
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
|
|
focusBulletPoints.forEach((focusPoint) => {
|
|
const focusPointsContainer = focusPoint.parentElement;
|
|
initBullet(focusPoint);
|
|
const focusPointTooltipContainer = focusPoint.querySelector(
|
|
'.homegrade-blocks-focus-point-bullet__tooltip-container'
|
|
);
|
|
// bulletsObserver.observe(focusPointTooltipContainer);
|
|
});
|
|
}
|