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

clear liste etape scroll, set header position based on content or not, local storage for disable animation

Browse Source
This commit is contained in:
Valentin Le Moign
2025-01-16 17:32:31 +01:00
parent 421187c128
commit 113c418c40
11 changed files with 1092 additions and 1197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ export const useLayoutStore = defineStore('layout', {
minDesktopWidth: 992,
isDesktop: Boolean,
isEtapeListRetracted: Boolean,
isEtapeListeScrollable: false,
isHamburgerMenuOpen: false,
}),
actions: {
@@ -32,41 +33,29 @@ 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');
shouldEtapeListeScroll({ listeEtape, column, listeEtapeContent, header, animationToggle }) {
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 listeEtapeContentRect = listeEtapeContent.getBoundingClientRect();
const headerRect = header.getBoundingClientRect();
const animationToggleRect = animationToggle.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);
this.toggleEtapeListScroll(isIntersecting, listeEtape, column, headerRect.height, animationToggleRect.top);
},
toggleEtapeListScroll(isIntersecting, listeEtape, column, headerHeight, animationToggleTop) {
if (isIntersecting && !this.isEtapeListeScrollable
|| !isIntersecting && this.isEtapeListeScrollable) {
listeEtape.classList.toggle('scrollable');
column.classList.toggle('liste-etapes-scrollable');
this.isEtapeListeScrollable = !this.isEtapeListeScrollable;
}
},
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';
listeEtape.style.marginTop = isIntersecting ? `${headerHeight}px` : 'unset';
listeEtape.style.maxHeight = isIntersecting ? `calc(100vh - (100vh - ${animationToggleTop}px) - ${headerHeight}px)` : 'unset';
},
setUpHamburgerToggle(menuBurger, menuContainer) {
const menuTitle = document.querySelector('#menu-title');
@@ -111,6 +100,10 @@ export const useLayoutStore = defineStore('layout', {
this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
}, 50);
}, 50);
},
setHeaderPosition(currentPageIsIndex) {
const header = document.querySelector('.layout-container > header');
header.style.position = currentPageIsIndex ? 'fixed' : 'relative';
}
},
})

13
web/themes/custom/caravane/assets/js/stores/map.js
View File

@@ -10,7 +10,9 @@ export const useMapStore = defineStore('mapState', {
currentPlace: Object,
maxZoom: Number,
currentZoom: Number,
animationsAreEnabled: true,
animationsAreEnabled: localStorage.getItem('animationsEnabled') !== null
? JSON.parse(localStorage.getItem('animationsEnabled'))
: true,
animationDuration: 3,
}),
actions: {
@@ -55,13 +57,18 @@ export const useMapStore = defineStore('mapState', {
},
toggleAnimation() {
this.animationsAreEnabled = !this.animationsAreEnabled;
localStorage.setItem('animationsEnabled', JSON.stringify(this.animationsAreEnabled));
},
checkReducedMotion() {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
this.animationsAreEnabled = !mediaQuery.matches;
if (mediaQuery.matches) {
this.animationsAreEnabled = false;
localStorage.setItem('animationsEnabled', JSON.stringify(this.animationsAreEnabled));
}
mediaQuery.addEventListener('change', (event) => {
this.animationsAreEnabled = !event.matches;
localStorage.setItem('animationsEnabled', JSON.stringify(this.animationsAreEnabled));
});
},
},