bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

liste etape scrollable if window too small

Browse Source
This commit is contained in:
Valentin Le Moign
2025-01-15 01:39:56 +01:00
parent fc005904e2
commit 9049939b92
3 changed files with 63 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/themes/custom/caravane/assets/js/stores/layout.js
View File

@@ -32,9 +32,42 @@ export const useLayoutStore = defineStore('layout', {
animationToggle.classList.remove('hidden');
setTimeout(() => {
listeEtape.classList.remove('retracted');
this.checkIfEtapeListeShouldScroll();
}, 300);
this.isEtapeListRetracted = false;
},
checkIfEtapeListeShouldScroll() {
const listeEtape = document.querySelector('#etapes-liste');
const column = document.querySelector('.layout__region--third');
const columnRect = column.getBoundingClientRect();
const listeEtapeContentRect = document.querySelector('#etapes-liste .item-list').getBoundingClientRect();
const headerRect = document.querySelector('.layout-container > header').getBoundingClientRect();
const animationToggleRect = document.querySelector('.animation-toggle-container').getBoundingClientRect();
const isIntersecting = headerRect.bottom >= (columnRect.height - listeEtapeContentRect.height) / 2;
if (isIntersecting) {
this.enableEtapeListeScroll(listeEtape, column, headerRect.height, animationToggleRect.top);
} else {
this.disableEtapeListeScroll(listeEtape, column);
}
},
enableEtapeListeScroll(listeEtape, column, headerHeight, animationToggleTop) {
listeEtape.classList.add('scrollable');
column.classList.add('liste-etapes-scrollable');
listeEtape.style.marginTop = `${headerHeight}px`;
listeEtape.style.maxHeight = `calc(100vh - (100vh - ${animationToggleTop}px) - ${headerHeight}px)`;
},
disableEtapeListeScroll(listeEtape, column) {
listeEtape.classList.remove('scrollable');
column.classList.remove('liste-etapes-scrollable');
listeEtape.style.marginTop = 'unset';
listeEtape.style.maxHeight = 'unset';
},
setUpHamburgerToggle(menuBurger, menuContainer) {
const menuTitle = document.querySelector('#menu-title');
const menuH2 = document.querySelector('#menu > h2');