tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 13:09:09 +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.
const handleFooterIntersection = function (entries) {
// Loop through all the observed elements
for (let entry of entries) {
// Check if the element is intersecting the viewport
entries.forEach(entry => { // Check if the element is intersecting the viewport
if (entry.isIntersecting) {
console.log("The footer is visible in the viewport");
if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
@@ -10,10 +9,11 @@ const handleFooterIntersection = function (entries) {
console.log("The footer is invisible in the viewport");
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);
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 => {
if (typeof headerIsVisible === 'function') headerIsVisible(entry.isIntersecting);
if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
});
});
}
const header = document.querySelector("header");
if (header) headerObserver.observe(header);
else myLog('No header to observe');
const section_header = document.querySelector("header");
if (section_header) {
const headerObserver = new IntersectionObserver(handleSynthesisIntersection);
if (headerObserver) headerObserver.observe(section_header);
} else myLog('No header to observe');

27
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 => {
// Check if the element is intersecting the viewport
if (entry.isIntersecting) {
myLog("The synthesis is visible in the viewport");
if (typeof synthesisTopIsNowVisible === 'function') synthesisTopIsNowVisible(entry);
} else {
myLog("The synthesis is invisible in the viewport");
if (typeof synthesisTopIsNowInvisible === 'function') synthesisTopIsNowInvisible(entry);
}
if (entry.isIntersecting) {
myLog("The synthesis is visible in the viewport");
if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
} else {
myLog("The synthesis is invisible in the viewport");
if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
}
});
});
}
const synthesis_top = document.querySelector("#synthesis_top");
if (synthesis_top) synthesisTopObserver.observe(synthesis_top);
else myLog('No #synthesis_top to obseve');
const section_synthesis = document.querySelector("#synthesis");
if (section_synthesis) {
const synthesisObserver = new IntersectionObserver(handleSynthesisIntersection);
if (synthesisObserver) synthesisObserver.observe(section_synthesis);
} else myLog('No #synthesis to observe');