106 lines
No EOL
3.2 KiB
JavaScript
106 lines
No EOL
3.2 KiB
JavaScript
export function initSliderBeforeAfter(container = document){
|
|
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
|
|
slidersBeforeAfter.forEach(function (sliderContainer, index) {
|
|
const sliderInput = sliderContainer.querySelector('.slider');
|
|
if (sliderInput) {
|
|
sliderInput.addEventListener('input', (e) => {
|
|
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
export function navInvestigation(){
|
|
const nav = document.getElementById('nav-investigation');
|
|
if (!nav) return;
|
|
|
|
const items = nav.querySelectorAll('li');
|
|
const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;
|
|
|
|
const sections = Array.from(items).map(li => {
|
|
const href = li.querySelector('a')?.getAttribute('href');
|
|
const target = href ? document.querySelector(href) : null;
|
|
return { li, target };
|
|
}).filter(s => s.target);
|
|
|
|
const update = () => {
|
|
const scrollY = window.scrollY + headerOffset;
|
|
let current = sections[0];
|
|
|
|
for (const section of sections) {
|
|
if (section.target.offsetTop <= scrollY) {
|
|
current = section;
|
|
}
|
|
}
|
|
|
|
items.forEach(li => li.classList.remove('is-selected'));
|
|
if (current) current.li.classList.add('is-selected');
|
|
};
|
|
|
|
window.addEventListener('scroll', update, { passive: true });
|
|
update();
|
|
}
|
|
|
|
|
|
|
|
|
|
export function progressBar(){
|
|
const bar = document.getElementById('progressBar');
|
|
if (!bar) return;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const progress = docHeight > 0 ? (scrollTop / docHeight) * 160 : 0;
|
|
bar.style.width = `${progress}%`;
|
|
}, { passive: true });
|
|
}
|
|
|
|
|
|
export function scrollBack(){
|
|
const bottomBar = document.getElementById('bottom-bar');
|
|
const navInvestigation = document.getElementById('nav-investigation');
|
|
const header = document.getElementById('site-header');
|
|
|
|
let lastY = window.scrollY;
|
|
let peakY = window.scrollY;
|
|
let visible = false;
|
|
|
|
const show = () => {
|
|
visible = true;
|
|
if (bottomBar) bottomBar.classList.add('is-visible');
|
|
if (navInvestigation && header) header.classList.add('has-nav-investigation');
|
|
};
|
|
|
|
const hide = () => {
|
|
visible = false;
|
|
if (bottomBar) bottomBar.classList.remove('is-visible');
|
|
if (navInvestigation && header) header.classList.remove('has-nav-investigation');
|
|
};
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const currentY = window.scrollY;
|
|
|
|
// header : basé uniquement sur la position absolue
|
|
if (navInvestigation && header) {
|
|
header.classList.toggle('has-nav-investigation', currentY >= 160);
|
|
}
|
|
|
|
// bottom-bar : show au scroll bas > 280px, hide après 200px de scroll haut
|
|
if (currentY > lastY) {
|
|
peakY = currentY;
|
|
if (!visible && currentY > 280) {
|
|
visible = true;
|
|
if (bottomBar) bottomBar.classList.add('is-visible');
|
|
}
|
|
} else {
|
|
if (visible && peakY - currentY >= 200) {
|
|
visible = false;
|
|
if (bottomBar) bottomBar.classList.remove('is-visible');
|
|
}
|
|
}
|
|
|
|
lastY = currentY;
|
|
}, { passive: true });
|
|
} |