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

champs url dans les icones de la map et suppr du data attribute nid sur les liens

This commit is contained in:
Valentin 2024-11-13 11:42:30 +01:00
parent c82fc633aa
commit f2680fc65a
5 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/sync/views.view.etapes.yml
View File

@ -269,7 +269,7 @@ display:
popupAnchor: popupAnchor:
x: '' x: ''
'y': '' 'y': ''
html: "<div></div>\r\n<div></div>\r\n<div></div>\r\n<div class=\"nid\">{{ nid }}</div>\r\n<div class=\"couleur\">{{ field_couleur }}</div>" html: "<div></div>\r\n<div></div>\r\n<div></div>\r\n<div class=\"url\">[node:url]</div>\r\n<div class=\"couleur\">[node:field_couleur]</div>"
html_class: 'leaflet-map-divicon ' html_class: 'leaflet-map-divicon '
circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}' circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}'
leaflet_markercluster: leaflet_markercluster:

30
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -27,7 +27,7 @@ export const useContentStore = defineStore('content', {
this.resetStore(false); this.resetStore(false);
const contentTypes = [ 'etape', 'static' ]; const contentTypes = [ 'etape', 'static' ];
try { try {
let rawContent, let rawContent,
contentType, contentType,
response; response;
@ -58,11 +58,11 @@ export const useContentStore = defineStore('content', {
// vignette // vignette
const vignetteFetch = await this.fetchDeeperContent('field_vignette', rawContent.relationships); const vignetteFetch = await this.fetchDeeperContent('field_vignette', rawContent.relationships);
if (vignetteFetch) { if (vignetteFetch) {
this.content.vignette = { this.content.vignette = {
url: vignetteFetch.attributes.uri.url, url: vignetteFetch.attributes.uri.url,
alt: rawContent.relationships.field_vignette.data.meta.alt alt: rawContent.relationships.field_vignette.data.meta.alt
}; };
} }
if (contentType === 'etape') { if (contentType === 'etape') {
// coordinates // coordinates
@ -84,12 +84,12 @@ export const useContentStore = defineStore('content', {
// previous / next // previous / next
await this.getRelatedEtape('previous', response.data.data, path); await this.getRelatedEtape('previous', response.data.data, path);
await this.getRelatedEtape('next', response.data.data, path); await this.getRelatedEtape('next', response.data.data, path);
} }
// parties // parties
const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static'; const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static';
const partiesFetch = await this.fetchDeeperContent(fieldParties, rawContent.relationships); const partiesFetch = await this.fetchDeeperContent(fieldParties, rawContent.relationships);
if (partiesFetch) { if (partiesFetch) {
this.content.parties = []; this.content.parties = [];
for (let partie of partiesFetch) { for (let partie of partiesFetch) {
@ -100,7 +100,7 @@ export const useContentStore = defineStore('content', {
switch (partieType) { switch (partieType) {
case 'carte_sensible': 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) { if (carteSensibleFetch) {
partieContent.carteSensible = { partieContent.carteSensible = {
url: carteSensibleFetch.attributes.uri.url, url: carteSensibleFetch.attributes.uri.url,
@ -110,7 +110,7 @@ export const useContentStore = defineStore('content', {
break; break;
case 'titre_texte': case 'titre_texte':
partieContent.titre = partie.attributes.field_titre; partieContent.titre = partie.attributes.field_titre;
partieContent.texte = partie.attributes.field_texte.value; partieContent.texte = partie.attributes.field_texte.value;
break; break;
case 'chiffres_cles': case 'chiffres_cles':
const chiffresClesFetch = await this.fetchDeeperContent('field_chiffres_clefs', partie.relationships); const chiffresClesFetch = await this.fetchDeeperContent('field_chiffres_clefs', partie.relationships);
@ -144,7 +144,7 @@ export const useContentStore = defineStore('content', {
partieContent.entretien.personnes = []; partieContent.entretien.personnes = [];
for (let personne of personnesFetch) { for (let personne of personnesFetch) {
const portraitFetch = await this.fetchDeeperContent('field_portrait', personne.relationships); const portraitFetch = await this.fetchDeeperContent('field_portrait', personne.relationships);
if (portraitFetch) { if (portraitFetch) {
partieContent.entretien.personnes.push({ partieContent.entretien.personnes.push({
portrait: portraitFetch.attributes.uri.url, portrait: portraitFetch.attributes.uri.url,
alt: personne.relationships.field_portrait.data.meta.alt, alt: personne.relationships.field_portrait.data.meta.alt,
@ -158,7 +158,7 @@ export const useContentStore = defineStore('content', {
question: qr.attributes.field_question, question: qr.attributes.field_question,
reponse: qr.attributes.field_reponse.value, reponse: qr.attributes.field_reponse.value,
}); });
} }
} }
break; break;
case 'exergue': case 'exergue':
@ -169,7 +169,7 @@ export const useContentStore = defineStore('content', {
for (let video of partie.attributes.field_videos) { for (let video of partie.attributes.field_videos) {
const videoId = video.split('?v=')[1]; const videoId = video.split('?v=')[1];
const videoUrl = `https://www.youtube.com/embed/${videoId}`; const videoUrl = `https://www.youtube.com/embed/${videoId}`;
partieContent.videos.push(videoUrl); partieContent.videos.push(videoUrl);
} }
break; break;
} }
@ -179,8 +179,8 @@ export const useContentStore = defineStore('content', {
} catch (error) { } catch (error) {
this.error = 'Failed to fetch data'; this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error); console.error('Issue with getNodeData', error);
} finally { } finally {
this.loading = false; this.loading = false;
} }
}, },
getCleanDate(date) { getCleanDate(date) {
@ -195,7 +195,7 @@ export const useContentStore = defineStore('content', {
const baseUrl = window.location.protocol + "//" + window.location.host; const baseUrl = window.location.protocol + "//" + window.location.host;
for (let etape of allEtapesData) { for (let etape of allEtapesData) {
for (let tag of etape.attributes.metatag) { 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); const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
this.content[direction] = { this.content[direction] = {
url: tag.attributes.href, url: tag.attributes.href,
@ -223,7 +223,7 @@ export const useContentStore = defineStore('content', {
if (path.endsWith(liHref)) { if (path.endsWith(liHref)) {
const previousEtapeItemPath = li.previousElementSibling?.querySelector('a').getAttribute('href'); const previousEtapeItemPath = li.previousElementSibling?.querySelector('a').getAttribute('href');
const nextEtapeItemPath = li.nextElementSibling?.querySelector('a').getAttribute('href'); const nextEtapeItemPath = li.nextElementSibling?.querySelector('a').getAttribute('href');
if (previousEtapeItemPath && direction === 'previous') { if (previousEtapeItemPath && direction === 'previous') {
let prevContent = await getRelatedEtapeContent(previousEtapeItemPath, allEtapesData); let prevContent = await getRelatedEtapeContent(previousEtapeItemPath, allEtapesData);
return prevContent; return prevContent;
@ -256,4 +256,4 @@ export const useContentStore = defineStore('content', {
this.error = null; this.error = null;
} }
}, },
}); });

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

@ -37,26 +37,27 @@ export const useLayoutStore = defineStore('layout', {
const menuTitle = document.querySelector('#menu-title'); const menuTitle = document.querySelector('#menu-title');
const menuH2 = document.querySelector('#menu > h2'); const menuH2 = document.querySelector('#menu > h2');
menuBurger.addEventListener('click', (e) => { menuBurger.addEventListener('click', (e) => {
setTimeout(() => { setTimeout(() => {
if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
menuContainer.classList.toggle('open'); menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open'); menuTitle.classList.toggle('open');
menuBurger.classList.toggle('open'); menuBurger.classList.toggle('open');
menuH2.classList.toggle('open'); menuH2.classList.toggle('open');
if (this.isHamburgerMenuOpen) { setTimeout(() => {
setTimeout(() => { // console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
menuContainer.style.display = 'none'; if (this.isHamburgerMenuOpen) {
menuContainer.style.display = 'none';
}
this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen; this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
}, 300); }, 300);
}
}, 50); }, 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)) {
menuContainer.classList.remove('open'); menuContainer.classList.remove('open');
menuTitle.classList.remove('open'); menuTitle.classList.remove('open');
menuBurger.classList.remove('open'); menuBurger.classList.remove('open');
menuH2.classList.remove('open'); menuH2.classList.remove('open');
setTimeout(() => { setTimeout(() => {
if (this.isHamburgerMenuOpen) { if (this.isHamburgerMenuOpen) {
menuContainer.style.display = 'none'; menuContainer.style.display = 'none';
@ -68,4 +69,4 @@ export const useLayoutStore = defineStore('layout', {
}); });
} }
}, },
}) })

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

@ -4,11 +4,11 @@ import { useLayoutStore } from '../stores/layout';
export async function initFirstLoadRouting(store, router, baseUrl, siteName) { export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin')); const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
if(decoupled_origin) { if(decoupled_origin) {
await store.fetchContentData(baseUrl + decoupled_origin.url); await store.fetchContentData(baseUrl + decoupled_origin.url);
router.push(decoupled_origin.url); router.push(decoupled_origin.url);
window.localStorage.removeItem("decoupled_origin"); window.localStorage.removeItem("decoupled_origin");
document.title = store.pageTitle; document.title = store.pageTitle;
setActiveNavItem(store.contentType, decoupled_origin.url); setActiveNavItem(store.contentType, decoupled_origin.url);
} else { } else {
document.title = siteName; document.title = siteName;
@ -29,7 +29,7 @@ export function handleClickableElements(clickableElements, store, router, baseUr
mapStore.resetMap(); mapStore.resetMap();
} else { } else {
await store.fetchContentData(baseUrl + href); await store.fetchContentData(baseUrl + href);
document.title = store.pageTitle; document.title = store.pageTitle;
} }
setActiveNavItem(store.contentType, href); setActiveNavItem(store.contentType, href);
@ -38,4 +38,4 @@ export function handleClickableElements(clickableElements, store, router, baseUr
} }
} }
} }
} }

18
web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js
View File

@ -1,5 +1,5 @@
export function processClickableElements() { export function processClickableElements() {
return { return {
etapeListLinks: processEtapeLinks(), etapeListLinks: processEtapeLinks(),
generalListLinks: processStaticLinks(), generalListLinks: processStaticLinks(),
logoLink: processLogoLink(), logoLink: processLogoLink(),
@ -26,15 +26,7 @@ function processEtapeLinks() {
function processStaticLinks() { function processStaticLinks() {
const general_link_fields = document.querySelectorAll('#menu > ul > li > a'); const general_link_fields = document.querySelectorAll('#menu > ul > li > a');
for (let i = 0; i < general_link_fields.length; i ++) { for (let i = 0; i < general_link_fields.length; i ++) {
let general_link_path = general_link_fields[i].getAttribute('data-drupal-link-system-path'); general_link_fields[i].addEventListener('click', (e) => e.preventDefault());
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; return general_link_fields;
@ -70,11 +62,11 @@ function processMapIcons() {
const popup = document.querySelector('.leaflet-tooltip-center > div'); const popup = document.querySelector('.leaflet-tooltip-center > div');
popup.style.opacity = "1"; popup.style.opacity = "1";
}); });
icon.addEventListener('mouseleave', () => { icon.addEventListener('mouseleave', () => {
icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2]; icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
}); });
} }
return icons; return icons;
} }