coup de polish

This commit is contained in:
Valentin
2024-11-08 06:12:36 +01:00
parent 217b84c755
commit cd3b47e913
15 changed files with 265 additions and 168 deletions

View File

@@ -114,25 +114,35 @@
} else if (document.querySelector('.offre-content')) {
fluoButtons = document.querySelectorAll('.liens_fixed > div, .file_fixed > div > div');
} else if (document.querySelector('.projets')) {
fluoButtons = document.querySelectorAll('.file_fixed > div > div > div, .liens > div > div > div');
fluoButtons = document.querySelectorAll('.file_fixed > div > div, .liens > div > div > div');
} else {
fluoButtons = document.querySelectorAll('.liens_fixed > div > div:not(.visually-hidden), .file_fixed > div > div, .liens > div > div');
}
let footer = document.querySelector('#footer_top');
function positionFluoLinks() {
// if window is more than 960px
let footer = document.querySelector('footer');
function positionFluoLinks(scrollTop) {
for (let i = fluoButtons.length; i > 0 ; i--) {
if (window.innerWidth > 1080) {
const layoutContainerEl = document.querySelector('.layout-container');
let pageScrollableHeight = layoutContainerEl.offsetHeight;
let prevButtonBottom = fluoButtons[i] ? parseInt(fluoButtons[i].style.bottom) : 0;
let prevButtonHeight = fluoButtons[i] ? fluoButtons[i].offsetHeight : 0;
fluoButtons[i - 1].style.position = 'fixed';
fluoButtons[i - 1].style.left = document.querySelector('.projets') ? '76vw' : '75vw';
if (footer.offsetTop < window.innerHeight + window.scrollY && i === fluoButtons.length) {
fluoButtons[i - 1].style.bottom = `${window.innerHeight - footer.offsetTop + window.scrollY + 30}px`;
/* console.log(`
pageScrollableHeight: ${pageScrollableHeight},
footer.offsetHeight: ${footer.offsetHeight},
window.innerHeight: ${window.innerHeight},
scrollTop: ${scrollTop}
`); */
if (pageScrollableHeight - footer.offsetHeight < window.innerHeight + scrollTop && i === fluoButtons.length) {
let margin = document.querySelector('.projets') ? 15 : 30;
fluoButtons[i - 1].style.bottom = `${window.innerHeight - footer.offsetTop + scrollTop + margin}px`;
} else {
fluoButtons[i - 1].style.bottom = i === fluoButtons.length ? '30px' : `${prevButtonBottom + prevButtonHeight + 15}px`;
let margin = document.querySelector('.projets') ? 0 : 15;
fluoButtons[i - 1].style.bottom = i === fluoButtons.length ? '30px' : `${prevButtonBottom + prevButtonHeight + margin}px`;
}
} else {
fluoButtons[i - 1].style.position = 'relative';
@@ -146,9 +156,10 @@
for (let lien of liens) {
lien.setAttribute('target', '_blank');
}
positionFluoLinks();
document.addEventListener('scroll', () => {
positionFluoLinks();
document.body.addEventListener('scroll', (e) => {
positionFluoLinks(e.target.scrollTop);
});
window.addEventListener('resize', () => {
positionFluoLinks();
@@ -325,50 +336,25 @@
//
// set bg middle placement
//
setBgContainer();
setBgMiddlePlacement();
setBgBottomPlacement();
let pageHeight = document.querySelector('.layout-container').offsetHeight;
toggleBgMiddle(pageHeight)
window.addEventListener('resize', () => {
setBgMiddlePlacement();
setBgBottomPlacement();
setBgContainer();
});
pageHeight = document.querySelector('.layout-container').offsetHeight;
toggleBgMiddle(pageHeight);
})
function setBgContainer() {
const bg = document.querySelector('#background');
const pageHeight = document.documentElement.scrollHeight;
bg.style.height = `${pageHeight}px`;
}
function setBgMiddlePlacement() {
const bgMiddleImgs = document.querySelectorAll('#bg-middle img');
const carousel = document.querySelector('.carousel_container');
const pageHeight = document.documentElement.scrollHeight;
for (let img of bgMiddleImgs) {
if (carousel) {
img.style.paddingTop = `${carousel.offsetHeight}px`;
} else {
img.style.paddingTop = `${pageHeight / 2}px`;
}
}
function toggleBgMiddle(pageHeight) {
const bgMiddle = document.querySelector('#bg-middle');
const bgOnze = document.querySelector('#bg-11');
if (pageHeight < 2000) {
const bgMiddle = document.querySelector('#bg-middle');
bgMiddle.style.display = 'none';
bgOnze.style.display = 'none';
} else {
bgMiddle.style.display = 'block';
bgOnze.style.display = 'block';
}
}
function setBgBottomPlacement() {
const bgBottomImgs = document.querySelectorAll('#bg-bottom img');
const pageHeight = document.documentElement.scrollHeight;
for (let img of bgBottomImgs) {
img.style.paddingTop = `${pageHeight}px`;
}
}
}
}