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

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

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

10
web/themes/custom/caravane/assets/js/router/router.js
View File

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

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

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

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;
},
resetMap() {
console.log(this.defaultMapCenter);
this.map.flyTo(
this.defaultMapCenter,
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);
}