studio-variable/index-main
4
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

design bottom bar
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-20 14:09:25 +01:00
parent f1ace8cc05
commit a1eda42d87
13 changed files with 288 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

58
assets/js/banner-sticky-desktop.js
View file

@ -1,58 +0,0 @@
let isInitialized = false;
export function bannerStickyDesktop(responsiveSmall) {
if (isInitialized) return;
let body = document.body;
let panel = body.querySelector(".panel-left");
if (!panel) return;
let footer = document.querySelector("#site-footer");
// Stocker la hauteur initiale du banner
const bannerInitialHeight = panel.offsetHeight;
function checkScroll() {
const screenWidth = window.innerWidth;
// Vérifier que l'écran est plus grand que responsiveSmall
if (screenWidth <= responsiveSmall) {
// Réinitialiser le transform si on est en dessous de responsiveSmall
panel.style.transform = '';
return;
}
// Calculer la position du bas de la fenêtre
const windowBottom = window.scrollY + window.innerHeight;
// Calculer dynamiquement la position du footer à chaque scroll
// Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
// Calculer de combien on dépasse le haut du footer
const overlap = windowBottom - footerTop;
if (overlap > 0) {
// Le bas de la fenêtre a atteint le haut du footer
// Déplacer le banner vers le haut du nombre de pixels de dépassement
const translateValue = Math.min(overlap, bannerInitialHeight);
panel.style.transform = `translateY(-${translateValue}px)`;
} else {
// Réinitialiser la position si on n'a pas encore atteint le footer
panel.style.transform = 'translateY(0)';
}
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('resize', () => {
if (window.innerWidth > responsiveSmall) {
panel.style.transform = '';
}
checkScroll();
});
checkScroll();
isInitialized = true;
}

35
assets/js/btn-group-mobile.js
View file

@ -1,35 +0,0 @@
let isInitialized = false;
export function btnGroupMobile() {
if (isInitialized) return;
const btnGroup = document.querySelector(".btn--group__mobile");
let footer = document.querySelector("#site-footer");
if (!btnGroup) return;
function checkScroll() {
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
const footerTop = footer.getBoundingClientRect().top;
if (scrollY > windowHeight * 0.6) {
btnGroup.classList.add('is-visible');
if (footerTop < windowHeight) {
btnGroup.classList.remove('is-visible');
}
} else {
btnGroup.classList.remove('is-visible');
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

50
assets/js/hero-slider.js
View file

@ -1,50 +0,0 @@
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
export function initHeroSlider() {
const heroSlider = document.querySelector('.hero-slider');
if (!heroSlider) {
return;
}
const swiper = new Swiper('.hero-slider', {
// Optional parameters
loop: true,
speed: 600,
effect: 'fade',
fadeEffect: {
crossFade: true
},
// Touch/Swipe settings (activé par défaut, mais configuré ici pour optimisation)
touchRatio: 1,
touchAngle: 45,
grabCursor: true,
simulateTouch: true,
allowTouchMove: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Keyboard control
keyboard: {
enabled: true,
},
// Accessibility
a11y: {
prevSlideMessage: 'Diapositive précédente',
nextSlideMessage: 'Diapositive suivante',
paginationBulletMessage: 'Aller à la diapositive {{index}}',
},
});
}

60
assets/js/panel.js
View file

@ -1,60 +0,0 @@
export function panelToggle(responsiveSmall) {
const toggleBtn = document.querySelector('#toggle-panel');
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
function openPanel() {
main.classList.add('panel-open');
const screenWidth = window.innerWidth;
if (screenWidth <= responsiveSmall) {
console.log("small screen");
document.body.style.overflowY = 'hidden';
}
}
function closePanel() {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
if (toggleBtn) {
toggleBtn.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (toggleBtnMobile) {
toggleBtnMobile.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closePanel);
}
}
export function tocMobile(responsiveSmall) {
const toc = document.querySelector('#toc');
const main = document.querySelector('main');
if (!toc) return;
const tocLinks = toc.querySelectorAll('a');
tocLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= responsiveSmall) {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
});
});
}

11
assets/js/script.js
View file

@ -1,10 +1,6 @@
import { headerToggle, headerScrollVisibility } from './header.js';
import { copyLink } from './share.js';
import { panelToggle, tocMobile } from './panel.js';
import { btnGroupMobile } from './btn-group-mobile.js';
import { bannerStickyDesktop } from './banner-sticky-desktop.js';
import { themeToggle } from './themeToggle.js';
import { initHeroSlider } from './hero-slider.js';
import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js';
import { initSwipers } from './swipers.js';
@ -15,16 +11,11 @@ const responsiveSmall = 768;
window.onload = async function () {
console.log("SCRIPT LOADED");
headerToggle();
panelToggle(responsiveSmall);
themeToggle();
tocMobile(responsiveSmall);
copyLink();
btnGroupMobile(responsiveSmall)
bannerStickyDesktop(responsiveSmall);
initHeroSlider();
playVideo();
initDropdowns(responsiveSmall);
initSwipers();