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

navigation prev next browser

This commit is contained in:
Valentin 2024-11-14 04:28:38 +01:00
parent 9bf84290ac
commit 31b577cc8b
5 changed files with 75 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/themes/custom/caravane/assets/js/main.js
View File

@ -1,7 +1,7 @@
import { initVueContentModale } from './utils/vue-setup'; import { initVueContentModale } from './utils/vue-setup';
import { processClickableElements } from './utils/process-clickable-elements'; import { processClickableElements } from './utils/process-clickable-elements';
import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup'; 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 { setupMapStore } from './utils/map-setup';
import '../scss/main.scss' import '../scss/main.scss'
@ -39,6 +39,10 @@ import '../scss/main.scss'
initFirstLoadRouting(store, router, baseUrl, siteName); initFirstLoadRouting(store, router, baseUrl, siteName);
handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore); handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore);
window.addEventListener("popstate", () => {
handleBrowserNavigation(store, baseUrl, siteName, mapStore);
});
}); });
} }
} }

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

@ -38,22 +38,13 @@ export const useLayoutStore = defineStore('layout', {
const menuH2 = document.querySelector('#menu > h2'); const menuH2 = document.querySelector('#menu > h2');
menuBurger.addEventListener('click', (e) => { menuBurger.addEventListener('click', (e) => {
setTimeout(() => { this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2);
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) => { document.addEventListener('click', (e) => {
if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) { if (
(!menuContainer.contains(e.target) && !menuBurger.contains(e.target))
|| e.target.tagName === 'A'
) {
menuContainer.classList.remove('open'); menuContainer.classList.remove('open');
menuTitle.classList.remove('open'); menuTitle.classList.remove('open');
menuBurger.classList.remove('open'); menuBurger.classList.remove('open');
@ -62,11 +53,29 @@ export const useLayoutStore = defineStore('layout', {
if (this.isHamburgerMenuOpen) { if (this.isHamburgerMenuOpen) {
menuContainer.style.display = 'none'; menuContainer.style.display = 'none';
} }
this.isHamburgerMenuOpen = false;
}, 300); }, 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);
} }
}, },
}) })

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

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

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

@ -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);
}