tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 17:19:10 +00:00
Code Issues Releases Wiki Activity

Homogénéiser les IntersectionObserver

Browse Source
This commit is contained in:
Thibaud
2024-09-13 18:02:31 +02:00
parent 2030381b45
commit 51970485f2
3 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/scripts/UI/IntersectionObserver/footer.js
View File

@@ -1,8 +1,7 @@
// Create a function that will handle any intersection between some elements and the viewport. // Create a function that will handle any intersection between some elements and the viewport.
const handleFooterIntersection = function (entries) { const handleFooterIntersection = function (entries) {
// Loop through all the observed elements // Loop through all the observed elements
for (let entry of entries) { entries.forEach(entry => { // Check if the element is intersecting the viewport
// Check if the element is intersecting the viewport
if (entry.isIntersecting) { if (entry.isIntersecting) {
console.log("The footer is visible in the viewport"); console.log("The footer is visible in the viewport");
if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry); if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
@@ -10,10 +9,11 @@ const handleFooterIntersection = function (entries) {
console.log("The footer is invisible in the viewport"); console.log("The footer is invisible in the viewport");
if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry); if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
} }
} });
} }
const footer = document.querySelector("#footer");
if (footer) { const section_footer = document.querySelector("#footer");
if (section_footer) {
const footerObserver = new IntersectionObserver(handleFooterIntersection); const footerObserver = new IntersectionObserver(handleFooterIntersection);
footerObserver.observe(footer); if (footerObserver) footerObserver.observe(section_footer);
} } else myLog('No footer to observe');

15
frontend/src/scripts/UI/IntersectionObserver/header.js
View File

@@ -1,12 +1,15 @@
const headerObserver = new IntersectionObserver(entries => { // Create a function that will handle any intersection between some elements and the viewport.
const handleHeaderIntersection = function (entries) {
entries.forEach(entry => { entries.forEach(entry => {
if (typeof headerIsVisible === 'function') headerIsVisible(entry.isIntersecting); if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
}); });
}); }
const header = document.querySelector("header"); const section_header = document.querySelector("header");
if (header) headerObserver.observe(header); if (section_header) {
else myLog('No header to observe'); const headerObserver = new IntersectionObserver(handleSynthesisIntersection);
if (headerObserver) headerObserver.observe(section_header);
} else myLog('No header to observe');

17
frontend/src/scripts/UI/IntersectionObserver/synthesis.js
View File

@@ -1,17 +1,20 @@
const synthesisTopObserver = new IntersectionObserver(entries => { // Create a function that will handle any intersection between some elements and the viewport.
const handleSynthesisIntersection = function (entries) {
entries.forEach(entry => { entries.forEach(entry => {
// Check if the element is intersecting the viewport // Check if the element is intersecting the viewport
if (entry.isIntersecting) { if (entry.isIntersecting) {
myLog("The synthesis is visible in the viewport"); myLog("The synthesis is visible in the viewport");
if (typeof synthesisTopIsNowVisible === 'function') synthesisTopIsNowVisible(entry); if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
} else { } else {
myLog("The synthesis is invisible in the viewport"); myLog("The synthesis is invisible in the viewport");
if (typeof synthesisTopIsNowInvisible === 'function') synthesisTopIsNowInvisible(entry); if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
} }
}); });
}); }
const synthesis_top = document.querySelector("#synthesis_top"); const section_synthesis = document.querySelector("#synthesis");
if (synthesis_top) synthesisTopObserver.observe(synthesis_top); if (section_synthesis) {
else myLog('No #synthesis_top to obseve'); const synthesisObserver = new IntersectionObserver(handleSynthesisIntersection);
if (synthesisObserver) synthesisObserver.observe(section_synthesis);
} else myLog('No #synthesis to observe');