55 lines
2.1 KiB
JavaScript
55 lines
2.1 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 focusPointPopupContainer = document.createElement('div');
|
|
focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
|
|
|
|
const focusPointPopupTitle = document.createElement('h4');
|
|
focusPointPopupTitle.textContent = focusTitle;
|
|
focusPointPopupTitle.className = 'tooltip-title';
|
|
|
|
focusPointPopupContainer.appendChild(focusPointPopupTitle);
|
|
focusPoint.appendChild(focusPointPopupContainer);
|
|
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);
|
|
});
|
|
}
|