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 {
@apply text-black font-bold;
/* TOOLTIP */
.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;
}
}

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