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

refactor du système de routing (EXPORTS DES SETTINGS DRUPAL)

Browse Source
This commit is contained in:
Valentin
2024-10-17 02:50:39 +02:00
parent 74f099ebdd
commit d5c5d81841
20 changed files with 613 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/themes/custom/caravane/assets/js/utils/handle-navigation.js Normal file
View File

@@ -0,0 +1,37 @@
import { setActiveNavItem } from "./set-active-nav-item";
export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
if(decoupled_origin) {
await store.fetchContentData(baseUrl + decoupled_origin.url);
router.push(decoupled_origin.url);
window.localStorage.removeItem("decoupled_origin");
document.title = store.pageTitle;
setActiveNavItem(store.contentType, decoupled_origin.url);
} else {
document.title = siteName;
}
}
export function handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore) {
for (const link of clickableElements) {
let href = link.href || link.dataset.href;
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
link.onclick = async function (e) {
router.push(href);
if (href !== window.location.pathname) {
if (href === '/') {
store.resetStore(true);
document.title = siteName;
mapStore.resetMap();
} else {
await store.fetchContentData(baseUrl + href);
document.title = store.pageTitle;
}
setActiveNavItem(store.contentType, href);
}
}
}
}

37
web/themes/custom/caravane/assets/js/utils/layout-setup.js Normal file
View File

@@ -0,0 +1,37 @@
export function setMenuToggle() {
const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
const menuTitle = document.querySelector('#menu-title');
const menuBurger = document.querySelector('#hamburger');
const menuH2 = document.querySelector('#menu > h2');
menuButton.addEventListener('click', (e) => {
setTimeout(() => {
menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open');
menuBurger.classList.toggle('open');
menuH2.classList.toggle('open');
}, 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');
}
});
}
export function setHamburgerWhenLogged(drupalSettings) {
if (drupalSettings.user.uid != 0) {
const menuBurger = document.querySelector('#hamburger');
const menuTitle = document.querySelector('#menu-title');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
const header = document.querySelector('.dialog-off-canvas-main-canvas');
const headerTop = header.getBoundingClientRect().top;
menuTitle.style.top = `${headerTop}px`;
menuBurger.style.top = `${headerTop}px`;
menuContainer.style.paddingTop = `${headerTop}px`;
}
}

6
web/themes/custom/caravane/assets/js/utils/map-setup.js Normal file
View File

@@ -0,0 +1,6 @@
export function setupMapStore(mapStore, map, settings) {
mapStore.map = map;
mapStore.defaultMapCenter = map.getCenter();
mapStore.maxZoom = settings.settings.maxZoom;
mapStore.defaultZoom = settings.settings.minZoom;
}

80
web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js Normal file
View File

@@ -0,0 +1,80 @@
export function processClickableElements() {
return {
etapeListLinks: processEtapeLinks(),
generalListLinks: processStaticLinks(),
logoLink: processLogoLink(),
mapIcons: processMapIcons(),
};
}
function processEtapeLinks() {
const etape_li = document.querySelectorAll('#etapes-liste li');
etape_li.forEach((li) => {
const etape_link = li.querySelector('a.etape-link');
etape_link.addEventListener('click', (e) => e.preventDefault());
const couleur = etape_link.dataset.couleur;
li.dataset.href = etape_link.attributes.href.value;
const iconElements = li.querySelectorAll('.icone-arret > div');
for (let element of iconElements) {
element.style.backgroundColor = couleur;
}
});
return etape_li;
}
function processStaticLinks() {
const general_link_fields = document.querySelectorAll('#menu > ul > li > a');
for (let i = 0; i < general_link_fields.length; i ++) {
let general_link_path = general_link_fields[i].getAttribute('data-drupal-link-system-path');
if (general_link_path && general_link_path !== '<front>') {
const match = [...general_link_path.match(/^node\/(\d+)$/)];
if (match) {
const nid = match[1];
general_link_fields[i].setAttribute('data-nid', parseInt(nid));
}
}
general_link_fields[i].addEventListener('click', (e) => e.preventDefault());
}
return general_link_fields;
}
function processLogoLink() {
const logo = document.querySelector('#block-caravane-logocaravane a');
logo.addEventListener('click', (e) => e.preventDefault());
return logo;
}
function processMapIcons() {
const icons = document.querySelectorAll('.leaflet-map-divicon');
for (let icon of icons) {
icon.setAttribute('title', '');
const hrefContainer = icon.querySelector('.url');
icon.dataset.href = hrefContainer.innerText;
hrefContainer.style.display = "none";
const colorContainer = icon.querySelector('.couleur');
let color = colorContainer.innerText;
colorContainer.style.display = "none";
const iconElements = icon.querySelectorAll('div');
for (let iconElement of iconElements) {
iconElement.style.backgroundColor = color;
}
icon.addEventListener('mouseenter', () => {
icon.style.transform = `${icon.style.transform} scale(1.1)`;
const popup = document.querySelector('.leaflet-tooltip-center > div');
popup.style.opacity = "1";
});
icon.addEventListener('mouseleave', () => {
icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
});
}
return icons;
}

35
web/themes/custom/caravane/assets/js/utils/set-active-nav-item.js Normal file
View File

@@ -0,0 +1,35 @@
export function setActiveNavItem(contentType, href) {
const staticNavItems = document.querySelectorAll('#menu > ul > li > a');
const etapeNavItems = document.querySelectorAll('#etapes-liste li a');
for (let item of staticNavItems) {
item.classList.remove('is-active');
}
for (let item of etapeNavItems) {
item.closest('li').classList.add('inactive');
}
if (href === '/' || href === '') {
staticNavItems[0].classList.add('is-active');
for (let item of etapeNavItems) {
item.closest('li').classList.remove('inactive');
}
} else {
if (contentType === 'static') {
for (let item of staticNavItems) {
if (item.getAttribute('href') === href) {
item.classList.add('is-active');
}
}
} else if (contentType === 'etape') {
for (let item of etapeNavItems) {
if (item.getAttribute('href') === href) {
item.closest('li').classList.remove('inactive');
}
}
}
}
}

22
web/themes/custom/caravane/assets/js/utils/vue-setup.js Normal file
View File

@@ -0,0 +1,22 @@
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from '../router/router';
import Modale from '../vuejs/Modale.vue';
import VueImageZoomer from 'vue-image-zoomer';
import 'vue-image-zoomer/dist/style.css';
import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/mapState';
export function initVueContentModale() {
const app = createApp(Modale)
.use(createPinia())
.use(router)
.use(VueImageZoomer);
const store = useContentStore();
const mapStore = useMapStore();
app.mount('#content-modale');
return { store, mapStore, router };
}