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 { }
z-index: 9999; /* CAPTION */
.focus-point-title {
@apply text-black font-bold mr-2;
} }
} }

49
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;
focusPoint.addEventListener('mouseover', (event) => {
const aleradyHoveredFocusPoint = document.querySelector('[data-hovered]');
console.log(aleradyHoveredFocusPoint);
const focusTitle = focusPoint.getAttribute('data-focus-bullet-title'); const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
const focusPointPopupContainer = document.createElement('div'); const focusPointPopupContainer = document.createElement('div');
focusPointPopupContainer.className = 'focus-point-popup-container'; focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
const focusPointPopupTitle = document.createElement('h4'); const focusPointPopupTitle = document.createElement('h4');
focusPointPopupTitle.textContent = focusTitle; focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.className = 'focus-point-popup-container__title'; focusPointPopupTitle.className = 'tooltip-title';
focusPointPopupContainer.appendChild(focusPointPopupTitle); focusPointPopupContainer.appendChild(focusPointPopupTitle);
focusPoint.appendChild(focusPointPopupContainer); focusPoint.appendChild(focusPointPopupContainer);
focusPoint.setAttribute('data-hovered', ''); 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');
}
});
}); });
focusPoint.addEventListener('mouseout', function () { focusBulletPoints.forEach((focusPoint) => {
const focusPointPopupContainer = focusPoint.querySelector('.focus-point-popup-container'); const focusPointsContainer = focusPoint.parentElement;
focusPointPopupContainer.remove(); initBullet(focusPoint);
}); const focusPointTooltipContainer = focusPoint.querySelector(
'.homegrade-blocks-focus-point-bullet__tooltip-container'
);
// bulletsObserver.observe(focusPointTooltipContainer);
}); });
} }