navigation prev next browser

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

@@ -1,7 +1,7 @@
 import { initVueContentModale } from './utils/vue-setup';
 import { processClickableElements } from './utils/process-clickable-elements';
 import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
-import { initFirstLoadRouting, handleClickableElements } from './utils/handle-navigation';
+import { initFirstLoadRouting, handleClickableElements, handleBrowserNavigation } from './utils/handle-navigation';
 import { setupMapStore } from './utils/map-setup';
 
 import '../scss/main.scss'
@@ -11,11 +11,11 @@ import '../scss/main.scss'
 (function ($, Drupal, drupalSettings) {
     const CaravaneTheme = function () {
         function init () {
-            console.log('DrupalSettings', drupalSettings);            
+            console.log('DrupalSettings', drupalSettings);
 
             const baseUrl = window.location.protocol + "//" + window.location.host;
             const siteName = document.querySelector('#site_name').innerText;
-            const { store, mapStore, router, route } = initVueContentModale();            
+            const { store, mapStore, router, route } = initVueContentModale();
 
             handleReactiveness();
             setMenuToggle();
@@ -25,8 +25,8 @@ import '../scss/main.scss'
 
             Drupal.behaviors.customLeafletInteraction = {
                 attach: function(context, settings) {
-                    $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) { 
-                        const { 
+                    $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
+                        const {
                             etapeListLinks,
                             generalListLinks,
                             logoLink,
@@ -39,6 +39,10 @@ import '../scss/main.scss'
                         initFirstLoadRouting(store, router, baseUrl, siteName);
 
                         handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore);
+
+                        window.addEventListener("popstate", () => {
+                          handleBrowserNavigation(store, baseUrl, siteName, mapStore);
+                        });
                     });
                 }
             }
@@ -47,4 +51,4 @@ import '../scss/main.scss'
         init()
     }
     CaravaneTheme()
-})(jQuery, Drupal, drupalSettings)
+})(jQuery, Drupal, drupalSettings)

web/themes/custom/caravane/assets/js/router/router.js

@@ -2,13 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 import ModaleView from '../vuejs/Modale.vue';
 
 const routes = [
-/*     { 
+/*     {
       name: 'etape',
       path: '/etapes/:title?',
       component: ModaleView,
       props: {id: null},
     },
-    { 
+    {
       name: 'home',
       path: '/',
       component: ModaleView,
@@ -20,10 +20,10 @@ const routes = [
       component: ModaleView,
     }
   ];
-  
+
   const router = createRouter({
     history: createWebHistory(),
     routes,
   });
-  
-  export default router;
+
+  export default router;

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

@@ -34,39 +34,48 @@ export const useLayoutStore = defineStore('layout', {
             this.isEtapeListRetracted = false;
         },
         setUpHamburgerToggle(menuBurger, menuContainer) {
-            const menuTitle = document.querySelector('#menu-title');
-            const menuH2 = document.querySelector('#menu > h2');
+          const menuTitle = document.querySelector('#menu-title');
+          const menuH2 = document.querySelector('#menu > h2');
 
-            menuBurger.addEventListener('click', (e) => {
+          menuBurger.addEventListener('click', (e) => {
+            this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2);
+          });
+          document.addEventListener('click', (e) => {
+            if (
+              (!menuContainer.contains(e.target) && !menuBurger.contains(e.target))
+              || e.target.tagName === 'A'
+            ) {
+              menuContainer.classList.remove('open');
+              menuTitle.classList.remove('open');
+              menuBurger.classList.remove('open');
+              menuH2.classList.remove('open');
               setTimeout(() => {
-                  if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
-                  menuContainer.classList.toggle('open');
-                  menuTitle.classList.toggle('open');
-                  menuBurger.classList.toggle('open');
-                  menuH2.classList.toggle('open');
-                  setTimeout(() => {
-                        // console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
-                        if (this.isHamburgerMenuOpen) {
-                            menuContainer.style.display = 'none';
-                        }
-                        this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
-                    }, 300);
-              }, 50);
-              document.addEventListener('click', (e) => {
-                if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
-                  menuContainer.classList.remove('open');
-                  menuTitle.classList.remove('open');
-                  menuBurger.classList.remove('open');
-                  menuH2.classList.remove('open');
-                  setTimeout(() => {
-                    if (this.isHamburgerMenuOpen) {
-                        menuContainer.style.display = 'none';
-                    }
-                    this.isHamburgerMenuOpen = false;
-                  }, 300);
+                if (this.isHamburgerMenuOpen) {
+                    menuContainer.style.display = 'none';
                 }
-              });
-            });
+              }, 300);
+              this.isHamburgerMenuOpen = false;
+            }
+          });
+        },
+        toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) {
+          setTimeout(() => {
+            if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
+            menuContainer.classList.toggle('open');
+            menuTitle.classList.toggle('open');
+            menuBurger.classList.toggle('open');
+            menuH2.classList.toggle('open');
+            // console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
+            console.log(this.isHamburgerMenuOpen);
+            if (this.isHamburgerMenuOpen) {
+              setTimeout(() => {
+                menuContainer.style.display = 'none';
+              }, 300);
+            }
+            console.log('TOGGLE', this.isHamburgerMenuOpen);
+            console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
+            this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
+          }, 50);
         }
     },
 })

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

@@ -23,8 +23,6 @@ export const useMapStore = defineStore('mapState', {
             this.currentZoom = this.maxZoom;
         },
         resetMap() {
-          console.log(this.defaultMapCenter);
-
             this.map.flyTo(
               this.defaultMapCenter,
               useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,

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

@@ -39,3 +39,24 @@ export function handleClickableElements(clickableElements, store, router, baseUr
         }
     }
 }
+
+export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore) {
+  let href = window.location.pathname;
+  if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
+  pageChange(href, store, siteName, mapStore, baseUrl)
+}
+
+async function pageChange(href, store, siteName, mapStore, baseUrl ) {
+  if (href === '/') {
+      store.resetStore(true);
+      document.title = siteName;
+      mapStore.resetMap();
+  } else {
+      await store.fetchContentData(baseUrl + href);
+      document.title = store.pageTitle;
+  }
+  setActiveNavItem(store.contentType, href);
+
+  const listeEtape = document.querySelector('#etapes-liste');
+  if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
+}