From 31b577cc8beafee2f02f4a65889478adf9b7f125 Mon Sep 17 00:00:00 2001 From: Valentin Date: Thu, 14 Nov 2024 04:28:38 +0100 Subject: [PATCH] navigation prev next browser --- web/themes/custom/caravane/assets/js/main.js | 16 +++-- .../caravane/assets/js/router/router.js | 10 +-- .../caravane/assets/js/stores/layout.js | 69 +++++++++++-------- .../custom/caravane/assets/js/stores/map.js | 2 - .../assets/js/utils/handle-navigation.js | 21 ++++++ 5 files changed, 75 insertions(+), 43 deletions(-) diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js index 6cf9003..9823fec 100644 --- a/web/themes/custom/caravane/assets/js/main.js +++ b/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) \ No newline at end of file +})(jQuery, Drupal, drupalSettings) diff --git a/web/themes/custom/caravane/assets/js/router/router.js b/web/themes/custom/caravane/assets/js/router/router.js index 453d4eb..049bf8e 100644 --- a/web/themes/custom/caravane/assets/js/router/router.js +++ b/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; \ No newline at end of file + + export default router; diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index 801b3d3..3a00302 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/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); } }, }) diff --git a/web/themes/custom/caravane/assets/js/stores/map.js b/web/themes/custom/caravane/assets/js/stores/map.js index 613de31..69a3bd4 100644 --- a/web/themes/custom/caravane/assets/js/stores/map.js +++ b/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, diff --git a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js index 9325d2b..4ef6c89 100644 --- a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js +++ b/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); +}