From f2680fc65a659075c58d0ca8385a6837e01a8824 Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 13 Nov 2024 11:42:30 +0100 Subject: [PATCH] champs url dans les icones de la map et suppr du data attribute nid sur les liens --- config/sync/views.view.etapes.yml | 2 +- .../caravane/assets/js/stores/content.js | 30 +++++++++---------- .../caravane/assets/js/stores/layout.js | 15 +++++----- .../assets/js/utils/handle-navigation.js | 8 ++--- .../js/utils/process-clickable-elements.js | 18 ++++------- 5 files changed, 33 insertions(+), 40 deletions(-) diff --git a/config/sync/views.view.etapes.yml b/config/sync/views.view.etapes.yml index 9dc6b62..352b3da 100644 --- a/config/sync/views.view.etapes.yml +++ b/config/sync/views.view.etapes.yml @@ -269,7 +269,7 @@ display: popupAnchor: x: '' 'y': '' - html: "
\r\n
\r\n
\r\n
{{ nid }}
\r\n
{{ field_couleur }}
" + html: "
\r\n
\r\n
\r\n
[node:url]
\r\n
[node:field_couleur]
" html_class: 'leaflet-map-divicon ' circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}' leaflet_markercluster: diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js index ab8ebe7..186d9ce 100644 --- a/web/themes/custom/caravane/assets/js/stores/content.js +++ b/web/themes/custom/caravane/assets/js/stores/content.js @@ -27,7 +27,7 @@ export const useContentStore = defineStore('content', { this.resetStore(false); const contentTypes = [ 'etape', 'static' ]; try { - let rawContent, + let rawContent, contentType, response; @@ -58,11 +58,11 @@ export const useContentStore = defineStore('content', { // vignette const vignetteFetch = await this.fetchDeeperContent('field_vignette', rawContent.relationships); if (vignetteFetch) { - this.content.vignette = { + this.content.vignette = { url: vignetteFetch.attributes.uri.url, alt: rawContent.relationships.field_vignette.data.meta.alt }; - } + } if (contentType === 'etape') { // coordinates @@ -84,12 +84,12 @@ export const useContentStore = defineStore('content', { // previous / next await this.getRelatedEtape('previous', response.data.data, path); await this.getRelatedEtape('next', response.data.data, path); - } + } // parties const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static'; const partiesFetch = await this.fetchDeeperContent(fieldParties, rawContent.relationships); - + if (partiesFetch) { this.content.parties = []; for (let partie of partiesFetch) { @@ -100,7 +100,7 @@ export const useContentStore = defineStore('content', { switch (partieType) { case 'carte_sensible': - const carteSensibleFetch = await this.fetchDeeperContent('field_image_carte', partie.relationships); + const carteSensibleFetch = await this.fetchDeeperContent('field_image_carte', partie.relationships); if (carteSensibleFetch) { partieContent.carteSensible = { url: carteSensibleFetch.attributes.uri.url, @@ -110,7 +110,7 @@ export const useContentStore = defineStore('content', { break; case 'titre_texte': partieContent.titre = partie.attributes.field_titre; - partieContent.texte = partie.attributes.field_texte.value; + partieContent.texte = partie.attributes.field_texte.value; break; case 'chiffres_cles': const chiffresClesFetch = await this.fetchDeeperContent('field_chiffres_clefs', partie.relationships); @@ -144,7 +144,7 @@ export const useContentStore = defineStore('content', { partieContent.entretien.personnes = []; for (let personne of personnesFetch) { const portraitFetch = await this.fetchDeeperContent('field_portrait', personne.relationships); - if (portraitFetch) { + if (portraitFetch) { partieContent.entretien.personnes.push({ portrait: portraitFetch.attributes.uri.url, alt: personne.relationships.field_portrait.data.meta.alt, @@ -158,7 +158,7 @@ export const useContentStore = defineStore('content', { question: qr.attributes.field_question, reponse: qr.attributes.field_reponse.value, }); - } + } } break; case 'exergue': @@ -169,7 +169,7 @@ export const useContentStore = defineStore('content', { for (let video of partie.attributes.field_videos) { const videoId = video.split('?v=')[1]; const videoUrl = `https://www.youtube.com/embed/${videoId}`; - partieContent.videos.push(videoUrl); + partieContent.videos.push(videoUrl); } break; } @@ -179,8 +179,8 @@ export const useContentStore = defineStore('content', { } catch (error) { this.error = 'Failed to fetch data'; console.error('Issue with getNodeData', error); - } finally { - this.loading = false; + } finally { + this.loading = false; } }, getCleanDate(date) { @@ -195,7 +195,7 @@ export const useContentStore = defineStore('content', { const baseUrl = window.location.protocol + "//" + window.location.host; for (let etape of allEtapesData) { for (let tag of etape.attributes.metatag) { - if (tag.tag === "link" && tag.attributes.href === baseUrl + relatedPath) { + if (tag.tag === "link" && tag.attributes.href === baseUrl + relatedPath) { const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href); this.content[direction] = { url: tag.attributes.href, @@ -223,7 +223,7 @@ export const useContentStore = defineStore('content', { if (path.endsWith(liHref)) { const previousEtapeItemPath = li.previousElementSibling?.querySelector('a').getAttribute('href'); const nextEtapeItemPath = li.nextElementSibling?.querySelector('a').getAttribute('href'); - + if (previousEtapeItemPath && direction === 'previous') { let prevContent = await getRelatedEtapeContent(previousEtapeItemPath, allEtapesData); return prevContent; @@ -256,4 +256,4 @@ export const useContentStore = defineStore('content', { this.error = null; } }, -}); \ No newline at end of file +}); diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index 4e11c6a..801b3d3 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/web/themes/custom/caravane/assets/js/stores/layout.js @@ -37,26 +37,27 @@ export const useLayoutStore = defineStore('layout', { const menuTitle = document.querySelector('#menu-title'); const menuH2 = document.querySelector('#menu > h2'); - menuBurger.addEventListener('click', (e) => { + menuBurger.addEventListener('click', (e) => { setTimeout(() => { if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; menuContainer.classList.toggle('open'); menuTitle.classList.toggle('open'); menuBurger.classList.toggle('open'); menuH2.classList.toggle('open'); - if (this.isHamburgerMenuOpen) { - setTimeout(() => { - menuContainer.style.display = 'none'; + 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'); + menuH2.classList.remove('open'); setTimeout(() => { if (this.isHamburgerMenuOpen) { menuContainer.style.display = 'none'; @@ -68,4 +69,4 @@ export const useLayoutStore = defineStore('layout', { }); } }, -}) \ No newline at end of file +}) 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 835f142..9325d2b 100644 --- a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js +++ b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js @@ -4,11 +4,11 @@ import { useLayoutStore } from '../stores/layout'; export async function initFirstLoadRouting(store, router, baseUrl, siteName) { const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin')); - if(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; + document.title = store.pageTitle; setActiveNavItem(store.contentType, decoupled_origin.url); } else { document.title = siteName; @@ -29,7 +29,7 @@ export function handleClickableElements(clickableElements, store, router, baseUr mapStore.resetMap(); } else { await store.fetchContentData(baseUrl + href); - document.title = store.pageTitle; + document.title = store.pageTitle; } setActiveNavItem(store.contentType, href); @@ -38,4 +38,4 @@ export function handleClickableElements(clickableElements, store, router, baseUr } } } -} \ No newline at end of file +} diff --git a/web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js b/web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js index 9fa005c..4613495 100644 --- a/web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js +++ b/web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js @@ -1,5 +1,5 @@ export function processClickableElements() { - return { + return { etapeListLinks: processEtapeLinks(), generalListLinks: processStaticLinks(), logoLink: processLogoLink(), @@ -26,15 +26,7 @@ function processEtapeLinks() { 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 !== '') { - 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()); + general_link_fields[i].addEventListener('click', (e) => e.preventDefault()); } return general_link_fields; @@ -70,11 +62,11 @@ function processMapIcons() { 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; -} \ No newline at end of file +}