Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining focused and focus point operating behaviour

Browse Source
This commit is contained in:
Antoine M 2023-10-12 12:03:42 +02:00
parent 6616c511da
commit 7b8f5b8751
2 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/css/blocks/focused-schema.css
View File

@ -5,10 +5,14 @@
} }
} }
.focus-point-popup-container__title { /* TOOLTIP */
@apply text-black font-bold; .homegrade-blocks-focus-point-bullet__tooltip-container {
.tooltip-title {
@apply !text-black font-bold;
}
} }
.focus-point-popup-container { /* CAPTION */
z-index: 9999; .focus-point-title {
@apply text-black font-bold mr-2;
} }
} }

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

@ -2,30 +2,53 @@ export default function SchemaBulletPointsInit() {
const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet'); const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
if (!focusBulletPoints) return; if (!focusBulletPoints) return;
focusBulletPoints.forEach((focusPoint) => { function initBullet(focusPoint) {
const focusPointsContainer = focusPoint.parentElement; const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
focusPoint.addEventListener('mouseover', (event) => { const focusPointPopupContainer = document.createElement('div');
const aleradyHoveredFocusPoint = document.querySelector('[data-hovered]'); focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
console.log(aleradyHoveredFocusPoint);
const focusTitle = focusPoint.getAttribute('data-focus-bullet-title'); const focusPointPopupTitle = document.createElement('h4');
focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.className = 'tooltip-title';
const focusPointPopupContainer = document.createElement('div'); focusPointPopupContainer.appendChild(focusPointPopupTitle);
focusPointPopupContainer.className = 'focus-point-popup-container'; focusPoint.appendChild(focusPointPopupContainer);
focusPoint.setAttribute('data-hovered', '');
// focusPoint.style.zIndex = 1;
// focusPointPopupContainer.style.zIndex = 99;
const focusPointPopupTitle = document.createElement('h4'); }
focusPointPopupTitle.textContent = focusTitle; function handleVisibility(focusPoint) {
focusPointPopupTitle.className = 'focus-point-popup-container__title'; // 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;
focusPointPopupContainer.appendChild(focusPointPopupTitle); if (entry.isIntersecting) {
focusPoint.appendChild(focusPointPopupContainer); console.log(entry.target);
focusPoint.setAttribute('data-hovered', ''); console.log(entry.intersectionRatio);
}); // Add 'active' class if observation target is inside viewport
// entry.target.classList.add('active');
focusPoint.addEventListener('mouseout', function () { // const blockId = entry.target.getAttribute('id');
const focusPointPopupContainer = focusPoint.querySelector('.focus-point-popup-container'); // const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
focusPointPopupContainer.remove(); // 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);
});
} }