web/sites/default/development.services.yml

@@ -31,7 +31,7 @@ parameters:
     #
     # Not recommended in production environments
     # @default null
-    auto_reload: null
+    auto_reload: true
     # Twig cache:
     #
     # By default, Twig templates will be compiled and stored in the filesystem

web/themes/custom/caravane/assets/js/stores/layout.js

@@ -5,7 +5,6 @@ export const useLayoutStore = defineStore('layout', {
         minDesktopWidth: 992,
         isDesktop: Boolean,
         isEtapeListRetracted: Boolean,
-        isEtapeListeScrollable: false,
         isHamburgerMenuOpen: false,
     }),
     actions: {
@@ -33,29 +32,41 @@ export const useLayoutStore = defineStore('layout', {
             animationToggle.classList.remove('hidden');
             setTimeout(() => {
                 listeEtape.classList.remove('retracted');
+                this.checkIfEtapeListeShouldScroll();
             }, 300);
             this.isEtapeListRetracted = false;
         },
-        shouldEtapeListeScroll({ listeEtape, column, listeEtapeContent, header, animationToggle }) {
+        checkIfEtapeListeShouldScroll() {
+          const listeEtape = document.querySelector('#etapes-liste');
+          const column = document.querySelector('.layout__region--third');
+          
           const columnRect = column.getBoundingClientRect();
-          const listeEtapeContentRect = listeEtapeContent.getBoundingClientRect();
-          const headerRect = header.getBoundingClientRect();
-          const animationToggleRect = animationToggle.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;    
 
-          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;
+          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 = isIntersecting ? `${headerHeight}px` : 'unset';
-          listeEtape.style.maxHeight = isIntersecting ? `calc(100vh - (100vh - ${animationToggleTop}px) - ${headerHeight}px)` : 'unset';
+          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');
@@ -100,10 +111,6 @@ 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';
         }
     },
 })

web/themes/custom/caravane/assets/js/stores/map.js

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

web/themes/custom/caravane/assets/js/utils/handle-navigation.js

@@ -10,10 +10,8 @@ export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
         window.localStorage.removeItem("decoupled_origin");
         document.title = store.pageTitle;
         setActiveNavItem(store.contentType, decoupled_origin.url);
-        useLayoutStore().setHeaderPosition(false);
     } else {
         document.title = siteName;
-        useLayoutStore().setHeaderPosition(true);
     }
 }
 
@@ -42,11 +40,9 @@ export async function pageChange(href, store, siteName, mapStore, baseUrl) {
       store.resetStore(true);
       document.title = siteName;
       mapStore.resetMap();
-      useLayoutStore().setHeaderPosition(true);
   } else {
       await store.fetchContentData(baseUrl + href);
       document.title = store.pageTitle;
-      useLayoutStore().setHeaderPosition(false);
   }
   setActiveNavItem(store.contentType, href);
 

web/themes/custom/caravane/assets/js/utils/layout-setup.js

@@ -4,30 +4,16 @@ export function handleReactiveness() {
   const layoutStore = useLayoutStore();
   layoutStore.setupResizeListenner();
 
-  // toggle collapse and scroll for etape liste
-  (function setEtapeListe() {
-    const listeEtape = document.querySelector('#etapes-liste');
+  (function setupEtapeListeCollapse() {
     const listeToggleButton = document.querySelector('#retractable-message');
-    const column = document.querySelector('.layout__region--third');
-    const header = document.querySelector('.layout-container > header');
+
+    const listeEtape = document.querySelector('#etapes-liste');
 
     const animationToggle = document.querySelector('#animation-toggle');
 
-    const EtapeListeScrollElements = {
-      listeEtape,
-      column,
-      listeEtapeContent: listeEtape.querySelector('.item-list'),
-      header,
-      animationToggle: animationToggle.querySelector('.animation-toggle-container')
-    }
-
-    layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
-
     if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle);
 
     window.addEventListener('resize', () => {
-      layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
-  
       if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
         layoutStore.expandEtapeListe(listeEtape, animationToggle);
       } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
@@ -41,11 +27,16 @@ export function handleReactiveness() {
           layoutStore.collapseEtapeListe(listeEtape, animationToggle);
         } else {
           layoutStore.expandEtapeListe(listeEtape, animationToggle);
-          layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
         }
       }
     });
   })();
+
+  layoutStore.checkIfEtapeListeShouldScroll();
+
+  window.addEventListener('resize', () => {
+    layoutStore.checkIfEtapeListeShouldScroll();
+  });
 }
 
 export function setMenuToggle() {

web/themes/custom/caravane/assets/js/utils/map-setup.js

@@ -7,5 +7,4 @@ export function setupMapStore(mapStore, map, settings) {
     mapStore.defaultZoomDesktop = settings.settings.minZoom;
     mapStore.defaultZoomMobile = settings.settings.minZoom - 1;
     mapStore.map.flyTo([mapStore.defaultMapCenter.lat, mapStore.defaultMapCenter.lng], useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile);
-    mapStore.checkReducedMotion();
 }

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -134,21 +134,21 @@ const handleMapMovement = () => {
 
               if (isModaleEtape) {
                 if (!wasModaleEtape) {
-                  // national -> détail
+                  console.log('national -> détail');
                   setModaleTransition(animationDuration.value);
                   zoomToContentPlace();
                 } else {
-                  // détail -> détail
+                  console.log('détail -> détail');
                   setModaleTransition(animationDuration.value);
                   zoomToContentPlace();
                 }
               } else {
                 if (wasModaleEtape) {
-                  // détail -> national
+                  console.log('détail -> national');
                   setModaleTransition(animationDuration.value);
                   mapState.resetMap();
                 } else {
-                  // national -> national
+                  console.log('national -> national');
                   setModaleTransition(0);
                 }
               }

web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue

@@ -13,7 +13,7 @@
                 </div>
                 <div class="card-content">
                     <div class="infos">
-                        <div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode.slice(0, 2) }})</span></div>
+                        <div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode }})</span></div>
                         <div class="date">Du {{ content.previous.dates.start.d }} {{ content.previous.dates.start.m }}<br>au {{ content.previous.dates.end.d }} {{ content.previous.dates.end.m }} {{ content.previous.dates.end.y }}</div>
                     </div>
                     <div class="vignette">
@@ -29,7 +29,7 @@
                 </div>
                 <div class="card-content">
                     <div class="infos">
-                        <div class="titre">{{ content.next.title }} <span>({{ content.next.postalCode.slice(0, 2) }})</span></div>
+                        <div class="titre">{{ content.next.title }} <span>({{ content.next.postalCode }})</span></div>
                         <div class="date">Du {{ content.next.dates.start.d }} {{ content.next.dates.start.m }}<br>au {{ content.next.dates.end.d }} {{ content.next.dates.end.m }} {{ content.next.dates.end.y }}</div>
                     </div>
                     <div class="vignette">

web/themes/custom/caravane/assets/scss/main.scss

@@ -53,6 +53,7 @@ body{
   .layout-container {
     > header {
       z-index: 2;
+      position: fixed;
       > div {
         padding: $body-margin-y $body-margin-x 0 $body-margin-x;
         display: grid;