refactor content store data fetching with promises
This commit is contained in:
parent
dffd179bc9
commit
2ca44f2550
@ -3,6 +3,25 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import REST from '../api/rest-axios';
|
import REST from '../api/rest-axios';
|
||||||
|
|
||||||
|
import { findContentByPath } from '../utils/content/findContentByPath';
|
||||||
|
import {
|
||||||
|
getCleanDate,
|
||||||
|
fetchFromRelationships,
|
||||||
|
getRelatedEtape,
|
||||||
|
} from '../utils/content/contentFetchUtils';
|
||||||
|
import {
|
||||||
|
getCarteSensible,
|
||||||
|
getTitreTexte,
|
||||||
|
getChiffresCles,
|
||||||
|
getDiaporama,
|
||||||
|
getEntretien,
|
||||||
|
getVideos,
|
||||||
|
} from '../utils/content/cleanParties';
|
||||||
|
import {
|
||||||
|
getPartenaires,
|
||||||
|
getGouvernance,
|
||||||
|
} from '../utils/content/multiItemPages';
|
||||||
|
|
||||||
export const useContentStore = defineStore('content', {
|
export const useContentStore = defineStore('content', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
contentType: '',
|
contentType: '',
|
||||||
@ -14,7 +33,7 @@ export const useContentStore = defineStore('content', {
|
|||||||
etape_number: '',
|
etape_number: '',
|
||||||
couleur: '',
|
couleur: '',
|
||||||
dates: {},
|
dates: {},
|
||||||
previous : {},
|
previous: {},
|
||||||
next: {},
|
next: {},
|
||||||
vignette: {},
|
vignette: {},
|
||||||
parties: [],
|
parties: [],
|
||||||
@ -30,105 +49,23 @@ export const useContentStore = defineStore('content', {
|
|||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
async fetchContentData(path) {
|
async fetchContentData(path) {
|
||||||
console.log('start fetch content');
|
|
||||||
this.resetStore(false);
|
this.resetStore(false);
|
||||||
const contentTypes = [ 'etape', 'static', 'gouvernance', 'partenaire' ];
|
const contentTypes = ['etape', 'static', 'gouvernance', 'partenaire'];
|
||||||
try {
|
try {
|
||||||
const findContentByPath = async (contentTypes, path) => {
|
|
||||||
for (let type of contentTypes) {
|
|
||||||
const response = await REST.get(`/jsonapi/node/${type}/`);
|
|
||||||
|
|
||||||
const content = response.data.data.find(content =>
|
|
||||||
content.attributes.metatag.some(tag =>
|
|
||||||
tag.tag === "link" && tag.attributes.href === path
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (content) {
|
|
||||||
console.log('content found');
|
|
||||||
|
|
||||||
return {
|
|
||||||
contentType: type,
|
|
||||||
rawContent: content,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle special case for governance/partners (multiple items per page)
|
|
||||||
const pageRequested = window.location.href.split('/').pop().replace(/s?$/, '');
|
|
||||||
if (type === pageRequested
|
|
||||||
|| (type === 'gouvernance' && pageRequested === 'contact')
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
contentType: type,
|
|
||||||
rawContent: response.data.data,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
|
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
|
||||||
this.contentType = contentType;
|
this.contentType = contentType;
|
||||||
|
|
||||||
// console.log(`current type: ${contentType}`);
|
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {
|
||||||
|
const vignettePromise = fetchFromRelationships('field_vignette', rawContent.relationships);
|
||||||
|
const partiesPromise = fetchFromRelationships('field_parties', rawContent.relationships);
|
||||||
|
|
||||||
// TO DEBUG
|
let previousEtapePromise, nextEtapePromise;
|
||||||
const cleanContentMethod = 'original';
|
|
||||||
|
|
||||||
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
|
|
||||||
&& cleanContentMethod === 'original'
|
|
||||||
) {
|
|
||||||
console.time('etape content processing');
|
|
||||||
// pageTitle
|
|
||||||
for (let tag of rawContent.attributes.metatag) {
|
|
||||||
if (tag.tag === "meta") {
|
|
||||||
this.pageTitle = tag.attributes.content;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// contentTitle
|
|
||||||
this.content.contentTitle = rawContent.attributes.title;
|
|
||||||
|
|
||||||
// vignette
|
|
||||||
const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships);
|
|
||||||
if (vignetteFetch) {
|
|
||||||
this.content.vignette = {
|
|
||||||
url: {
|
|
||||||
original: vignetteFetch.attributes.uri.url,
|
|
||||||
small: vignetteFetch.attributes.image_style_uri.content_small,
|
|
||||||
medium: vignetteFetch.attributes.image_style_uri.content_medium,
|
|
||||||
large: vignetteFetch.attributes.image_style_uri.content_large,
|
|
||||||
},
|
|
||||||
alt: rawContent.relationships.field_vignette.data.meta.alt
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// liens
|
|
||||||
if (rawContent.attributes.field_liens.length) {
|
|
||||||
this.content.liens = [];
|
|
||||||
for (let lien of rawContent.attributes.field_liens) {
|
|
||||||
this.content.liens.push({
|
|
||||||
title: lien.title,
|
|
||||||
url: lien.uri,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// pièces jointes
|
|
||||||
if (rawContent.relationships.field_pieces_jointes.data.length) {
|
|
||||||
this.content.pieces_jointes = [];
|
|
||||||
for (let pieceJointe of rawContent.relationships.field_pieces_jointes.data) {
|
|
||||||
if (pieceJointe.meta.display) {
|
|
||||||
const uuid = pieceJointe.id;
|
|
||||||
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
|
|
||||||
this.content.pieces_jointes.push({
|
|
||||||
title: pieceJointe.meta.description,
|
|
||||||
url: response.data.data.attributes.uri.url,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (contentType === 'etape') {
|
if (contentType === 'etape') {
|
||||||
|
// related étapes
|
||||||
|
previousEtapePromise = getRelatedEtape('previous', path);
|
||||||
|
nextEtapePromise = getRelatedEtape('next', path);
|
||||||
|
|
||||||
// coordinates
|
// coordinates
|
||||||
this.content.coordinates = {
|
this.content.coordinates = {
|
||||||
lat: rawContent.attributes.field_geofield.lat,
|
lat: rawContent.attributes.field_geofield.lat,
|
||||||
@ -142,185 +79,9 @@ export const useContentStore = defineStore('content', {
|
|||||||
this.content.couleur = rawContent.attributes.field_couleur;
|
this.content.couleur = rawContent.attributes.field_couleur;
|
||||||
// dates
|
// dates
|
||||||
this.content.dates = {
|
this.content.dates = {
|
||||||
start: this.getCleanDate(rawContent.attributes.field_dates.value),
|
start: getCleanDate(rawContent.attributes.field_dates.value),
|
||||||
end: this.getCleanDate(rawContent.attributes.field_dates.end_value),
|
end: getCleanDate(rawContent.attributes.field_dates.end_value),
|
||||||
}
|
}
|
||||||
// previous / next
|
|
||||||
await this.getRelatedEtape('previous', path);
|
|
||||||
await this.getRelatedEtape('next', path);
|
|
||||||
}
|
|
||||||
|
|
||||||
// parties
|
|
||||||
const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static';
|
|
||||||
const partiesFetch = await this.fetchFromRelationships(fieldParties, rawContent.relationships);
|
|
||||||
console.log(this.content);
|
|
||||||
console.timeEnd('etape content processing');
|
|
||||||
if (partiesFetch) {
|
|
||||||
this.content.parties = [];
|
|
||||||
for (let partie of partiesFetch) {
|
|
||||||
const partieType = partie.type.replace(/^paragraph--/, "");
|
|
||||||
let partieContent = {
|
|
||||||
type: partieType,
|
|
||||||
};
|
|
||||||
|
|
||||||
switch (partieType) {
|
|
||||||
case 'carte_sensible':
|
|
||||||
const carteSensibleFetch = await this.fetchFromRelationships('field_image_carte', partie.relationships);
|
|
||||||
if (carteSensibleFetch) {
|
|
||||||
partieContent.carteSensible = {
|
|
||||||
url: {
|
|
||||||
original: carteSensibleFetch.attributes.uri.url,
|
|
||||||
small: carteSensibleFetch.attributes.image_style_uri.content_small,
|
|
||||||
medium: carteSensibleFetch.attributes.image_style_uri.content_medium,
|
|
||||||
large: carteSensibleFetch.attributes.image_style_uri.content_large,
|
|
||||||
xlarge: carteSensibleFetch.attributes.image_style_uri.content_x_large,
|
|
||||||
},
|
|
||||||
alt: partie.relationships.field_image_carte.data.meta.alt,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'titre_texte':
|
|
||||||
console.time('get images from text original')
|
|
||||||
partieContent.titre = partie.attributes.field_titre;
|
|
||||||
partieContent.texte = partie.attributes.field_texte.value;
|
|
||||||
|
|
||||||
// get the resized images from the text
|
|
||||||
const imgRegex = /<img[^>]+>/g;
|
|
||||||
const uuidRegex = /data-entity-uuid="([^"]+)"/;
|
|
||||||
|
|
||||||
const imgTags = partieContent.texte.match(imgRegex);
|
|
||||||
|
|
||||||
if (imgTags) {
|
|
||||||
for (const imgTag of imgTags) {
|
|
||||||
const uuidMatch = imgTag.match(uuidRegex);
|
|
||||||
if (uuidMatch && uuidMatch[1]) {
|
|
||||||
const uuid = uuidMatch[1];
|
|
||||||
|
|
||||||
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
|
|
||||||
const imagesFetch = response.data.data;
|
|
||||||
|
|
||||||
const newImgTag = imgTag
|
|
||||||
.replace(/src="[^"]+"/,`src="${imagesFetch.attributes.image_style_uri.content_medium}"`)
|
|
||||||
.replace('>',' data-large-src="' + imagesFetch.attributes.image_style_uri.content_large + '">');
|
|
||||||
partieContent.texte = partieContent.texte.replace(imgTag, newImgTag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
console.timeEnd('get images from text original')
|
|
||||||
break;
|
|
||||||
case 'chiffres_cles':
|
|
||||||
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
|
|
||||||
if (chiffresClesFetch) {
|
|
||||||
partieContent.chiffresCles = [];
|
|
||||||
for (let chiffre of chiffresClesFetch) {
|
|
||||||
partieContent.chiffresCles.push({
|
|
||||||
chiffre: chiffre.attributes.field_chiffre,
|
|
||||||
description: chiffre.attributes.field_description,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'diaporama':
|
|
||||||
const diaporamaFetch = await this.fetchFromRelationships('field_diaporama', partie.relationships);
|
|
||||||
|
|
||||||
if (diaporamaFetch) {
|
|
||||||
partieContent.diaporama = [];
|
|
||||||
for (let [index, image] of diaporamaFetch.entries()) {
|
|
||||||
partieContent.diaporama.push({
|
|
||||||
url: {
|
|
||||||
original: image.attributes.uri.url,
|
|
||||||
small: image.attributes.image_style_uri.content_small,
|
|
||||||
medium: image.attributes.image_style_uri.content_medium,
|
|
||||||
large: image.attributes.image_style_uri.content_large,
|
|
||||||
},
|
|
||||||
alt: partie.relationships.field_diaporama.data[index].meta.alt,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'entretien':
|
|
||||||
partieContent.entretien = {};
|
|
||||||
partieContent.entretien.titre = partie.attributes.field_titre;
|
|
||||||
const personnesFetch = await this.fetchFromRelationships('field_personne_s', partie.relationships);
|
|
||||||
const questionsReponsesFetch = await this.fetchFromRelationships('field_questions_reponses', partie.relationships);
|
|
||||||
if (personnesFetch && questionsReponsesFetch) {
|
|
||||||
partieContent.entretien.personnes = [];
|
|
||||||
for (let personne of personnesFetch) {
|
|
||||||
const portraitFetch = await this.fetchFromRelationships('field_portrait', personne.relationships);
|
|
||||||
if (portraitFetch) {
|
|
||||||
partieContent.entretien.personnes.push({
|
|
||||||
portrait: {
|
|
||||||
original: portraitFetch.attributes.uri.url,
|
|
||||||
small: portraitFetch.attributes.image_style_uri.content_small,
|
|
||||||
medium: portraitFetch.attributes.image_style_uri.content_medium,
|
|
||||||
large: portraitFetch.attributes.image_style_uri.content_large,
|
|
||||||
},
|
|
||||||
alt: personne.relationships.field_portrait.data.meta.alt,
|
|
||||||
description: personne.attributes.field_description,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
partieContent.entretien.questionsReponses = [];
|
|
||||||
for (let qr of questionsReponsesFetch) {
|
|
||||||
partieContent.entretien.questionsReponses.push({
|
|
||||||
question: qr.attributes.field_question,
|
|
||||||
reponse: qr.attributes.field_reponse.value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'exergue':
|
|
||||||
partieContent.exergue = partie.attributes.field_texte_exergue.value;
|
|
||||||
break;
|
|
||||||
case 'video':
|
|
||||||
partieContent.videos = [];
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.content.parties.push(partieContent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log('content cleaned');
|
|
||||||
} else if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
|
|
||||||
&& cleanContentMethod === 'promise'
|
|
||||||
) {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.time('etape content promise processing');
|
|
||||||
|
|
||||||
|
|
||||||
const vignettePromise = this.fetchFromRelationships('field_vignette', rawContent.relationships);
|
|
||||||
const partiesPromise = this.fetchFromRelationships('field_parties', rawContent.relationships);
|
|
||||||
|
|
||||||
const previousEtapePromise = contentType === 'etape'? this.getRelatedEtape('previous', path) : null;
|
|
||||||
const nextEtapePromise = contentType === 'etape' ? this.getRelatedEtape('next', path) : null;
|
|
||||||
|
|
||||||
if (contentType === 'etape') {
|
|
||||||
// coordinates
|
|
||||||
this.content.coordinates = {
|
|
||||||
lat: rawContent.attributes.field_geofield.lat,
|
|
||||||
lon: rawContent.attributes.field_geofield.lon,
|
|
||||||
};
|
|
||||||
// adresse
|
|
||||||
this.content.adresse = rawContent.attributes.field_adresse;
|
|
||||||
// étape number
|
|
||||||
this.content.etape_number = rawContent.attributes.field_arret_numero;
|
|
||||||
// couleur
|
|
||||||
this.content.couleur = rawContent.attributes.field_couleur;
|
|
||||||
// dates
|
|
||||||
this.content.dates = {
|
|
||||||
start: this.getCleanDate(rawContent.attributes.field_dates.value),
|
|
||||||
end: this.getCleanDate(rawContent.attributes.field_dates.end_value),
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// pageTitle
|
// pageTitle
|
||||||
@ -353,74 +114,29 @@ export const useContentStore = defineStore('content', {
|
|||||||
const partieType = partie.type.replace(/^paragraph--/, "");
|
const partieType = partie.type.replace(/^paragraph--/, "");
|
||||||
let partieContent = { type: partieType };
|
let partieContent = { type: partieType };
|
||||||
|
|
||||||
switch(partieType) {
|
switch (partieType) {
|
||||||
case 'carte_sensible':
|
case 'carte_sensible':
|
||||||
const carteSensiblePromise = this.fetchFromRelationships('field_image_carte', partie.relationships);
|
partieContent.carteSensible = await getCarteSensible(partie);
|
||||||
|
|
||||||
const carteSensibleData = await carteSensiblePromise;
|
|
||||||
if (carteSensibleData) {
|
|
||||||
partieContent.carteSensible = {
|
|
||||||
url: {
|
|
||||||
original: carteSensibleData.attributes.uri.url,
|
|
||||||
small: carteSensibleData.attributes.image_style_uri.content_small,
|
|
||||||
medium: carteSensibleData.attributes.image_style_uri.content_medium,
|
|
||||||
large: carteSensibleData.attributes.image_style_uri.content_large,
|
|
||||||
xlarge: carteSensibleData.attributes.image_style_uri.content_x_large,
|
|
||||||
},
|
|
||||||
alt: partie.relationships.field_image_carte.data.meta.alt,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'titre_texte':
|
case 'titre_texte':
|
||||||
partieContent.titre = partie.attributes.field_titre;
|
const { titre, texte } = await getTitreTexte(partie);
|
||||||
partieContent.texte = partie.attributes.field_texte.value;
|
partieContent.titre = titre;
|
||||||
|
partieContent.texte = texte;
|
||||||
// get the resized images from the text
|
|
||||||
const imgRegex = /<img[^>]+>/g;
|
|
||||||
const uuidRegex = /data-entity-uuid="([^"]+)"/;
|
|
||||||
const imgTags = partieContent.texte.match(imgRegex);
|
|
||||||
|
|
||||||
if (imgTags) {
|
|
||||||
const imagePromises = imgTags.map(imgTag => {
|
|
||||||
const uuidMatch = imgTag.match(uuidRegex);
|
|
||||||
if (uuidMatch && uuidMatch[1]) {
|
|
||||||
return REST.get(`/jsonapi/file/file/${uuidMatch[1]}`)
|
|
||||||
.then(response => ({
|
|
||||||
originalTag: imgTag,
|
|
||||||
imageData: response.data.data
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const images = await Promise.all(imagePromises);
|
|
||||||
images.forEach(({originalTag, imageData}) => {
|
|
||||||
const newImgTag = originalTag
|
|
||||||
.replace(/src="[^"]+"/,`src="${imageData.attributes.image_style_uri.content_medium}"`)
|
|
||||||
.replace('>',' data-large-src="' + imageData.attributes.image_style_uri.content_large + '">');
|
|
||||||
partieContent.texte = partieContent.texte.replace(originalTag, newImgTag);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'chiffres_cles':
|
case 'chiffres_cles':
|
||||||
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
|
partieContent.chiffresCles = await getChiffresCles(partie);
|
||||||
if (chiffresClesFetch) {
|
|
||||||
partieContent.chiffresCles = [];
|
|
||||||
for (let chiffre of chiffresClesFetch) {
|
|
||||||
partieContent.chiffresCles.push({
|
|
||||||
chiffre: chiffre.attributes.field_chiffre,
|
|
||||||
description: chiffre.attributes.field_description,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'diaporama':
|
case 'diaporama':
|
||||||
|
partieContent.diaporama = await getDiaporama(partie);
|
||||||
break;
|
break;
|
||||||
case 'entretien':
|
case 'entretien':
|
||||||
|
partieContent.entretien = await getEntretien(partie);
|
||||||
break;
|
break;
|
||||||
case 'exergue':
|
case 'exergue':
|
||||||
|
partieContent.exergue = partie.attributes.field_texte_exergue.value;
|
||||||
break;
|
break;
|
||||||
case 'video':
|
case 'video':
|
||||||
|
partieContent.videos = getVideos(partie);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return partieContent;
|
return partieContent;
|
||||||
@ -430,72 +146,32 @@ export const useContentStore = defineStore('content', {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// related étapes
|
// related étapes
|
||||||
if (contentType === 'etape') await Promise.all([previousEtapePromise, nextEtapePromise]);
|
if (contentType === 'etape') {
|
||||||
|
const [prevContent, nextContent] = await Promise.all([previousEtapePromise, nextEtapePromise]);
|
||||||
console.log(this.content);
|
this.content.previous = prevContent;
|
||||||
console.timeEnd('etape content promise processing');
|
this.content.next = nextContent;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// pages gouvernance (contact) et partenaire
|
// pages gouvernance (contact) et partenaire
|
||||||
// ont plusieurs items par pages
|
// ont plusieurs items par pages
|
||||||
const intro = await REST.get(`/jsonapi/config_pages/intro_${this.contentType}/`);
|
const intro = await REST.get(`/jsonapi/config_pages/intro_${this.contentType}/`);
|
||||||
const introContent = intro.data.data[0];
|
const introContent = intro.data.data[0];
|
||||||
|
|
||||||
this.pageTitle =
|
this.pageTitle =
|
||||||
`${introContent.attributes.field_titre} ${introContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content}`;
|
`${introContent.attributes.field_titre} ${introContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content}`;
|
||||||
|
|
||||||
this.content.contentTitle = introContent.attributes.field_titre;
|
this.content.contentTitle = introContent.attributes.field_titre;
|
||||||
this.content.intro = introContent.attributes.field_intro?.value;
|
this.content.intro = introContent.attributes.field_intro?.value;
|
||||||
|
|
||||||
const multiItemPageArray = [];
|
let multiItemPageArray = [];
|
||||||
|
|
||||||
if (this.contentType === 'partenaire') {
|
if (this.contentType === 'partenaire') {
|
||||||
for (let item of rawContent) {
|
multiItemPageArray = await getPartenaires(rawContent);
|
||||||
const logoFetch = await REST.get(item.relationships.field_logo.links.related.href);
|
|
||||||
|
|
||||||
multiItemPageArray.push({
|
|
||||||
title: item.attributes.title,
|
|
||||||
description: item.attributes.body.value,
|
|
||||||
weight: item.attributes.field_poid,
|
|
||||||
link_url: item.attributes.field_lien.uri ,
|
|
||||||
logo_alt: item.relationships.field_logo.data.meta.alt,
|
|
||||||
logo_url: {
|
|
||||||
original: logoFetch.data.data.attributes.uri.url,
|
|
||||||
small: logoFetch.data.data.attributes.image_style_uri.content_small,
|
|
||||||
medium: logoFetch.data.data.attributes.image_style_uri.content_medium,
|
|
||||||
large: logoFetch.data.data.attributes.image_style_uri.content_large,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if (this.contentType === 'gouvernance') {
|
} else if (this.contentType === 'gouvernance') {
|
||||||
for (let item of rawContent) {
|
multiItemPageArray = await getGouvernance(rawContent);
|
||||||
const personnesFetch = await REST.get(item.relationships.field_personne_s.links.related.href);
|
|
||||||
let personnes = [];
|
|
||||||
for (let personne of personnesFetch.data.data) {
|
|
||||||
const portraitFetch = await REST.get(personne.relationships.field_portrait.links.related.href);
|
|
||||||
personnes.push({
|
|
||||||
nom: personne.attributes.field_nom,
|
|
||||||
prenom: personne.attributes.field_prenom,
|
|
||||||
description: personne.attributes.field_description,
|
|
||||||
photo_meta: personne.relationships.field_portrait.data?.meta.alt,
|
|
||||||
photo_url: portraitFetch.data.data ? {
|
|
||||||
original: portraitFetch.data.data.attributes.uri.url,
|
|
||||||
small: portraitFetch.data.data.attributes.image_style_uri.content_small,
|
|
||||||
medium: portraitFetch.data.data.attributes.image_style_uri.content_medium,
|
|
||||||
large: portraitFetch.data.data.attributes.image_style_uri.content_large,
|
|
||||||
} : null
|
|
||||||
});
|
|
||||||
}
|
|
||||||
multiItemPageArray.push({
|
|
||||||
title: item.attributes.title,
|
|
||||||
weight: item.attributes.field_poid,
|
|
||||||
personnes: personnes,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.content[`${this.contentType}s`] = multiItemPageArray;
|
this.content[`${this.contentType}s`] = multiItemPageArray;
|
||||||
|
|
||||||
// console.log(this.content);
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.error = 'Failed to fetch data';
|
this.error = 'Failed to fetch data';
|
||||||
@ -504,107 +180,6 @@ export const useContentStore = defineStore('content', {
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getCleanDate(date) {
|
|
||||||
return {
|
|
||||||
d: date.split('-')[2],
|
|
||||||
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
|
|
||||||
y: date.split('-')[0],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getRelatedEtape(direction, path) {
|
|
||||||
const getRelatedEtapeContent = async (relatedEtapeData) => {
|
|
||||||
if (relatedEtapeData) {
|
|
||||||
const vignetteFetch = await REST.get(relatedEtapeData.relationships.field_vignette.links.related.href);
|
|
||||||
if (vignetteFetch.data.data) {
|
|
||||||
this.content[direction] = {
|
|
||||||
url: relatedEtapeData.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
|
|
||||||
couleur: relatedEtapeData.attributes.field_couleur,
|
|
||||||
title: relatedEtapeData.attributes.title,
|
|
||||||
postalCode: relatedEtapeData.attributes.field_adresse.postal_code,
|
|
||||||
dates: {
|
|
||||||
start: this.getCleanDate(relatedEtapeData.attributes.field_dates.value),
|
|
||||||
end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
|
|
||||||
},
|
|
||||||
vignette: {
|
|
||||||
url: {
|
|
||||||
original: vignetteFetch.data.data.attributes.uri.url,
|
|
||||||
small: vignetteFetch.data.data.attributes.image_style_uri.content_small,
|
|
||||||
medium: vignetteFetch.data.data.attributes.image_style_uri.content_medium,
|
|
||||||
large: vignetteFetch.data.data.attributes.image_style_uri.content_large,
|
|
||||||
},
|
|
||||||
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const allEtapesData = await REST.get('/jsonapi/views/etapes/block_1/');
|
|
||||||
for (let [index, etape] of allEtapesData.data.data.entries()) {
|
|
||||||
if (etape.attributes.metatag.some(tag =>
|
|
||||||
tag.tag === "link" && tag.attributes.href === path
|
|
||||||
)) {
|
|
||||||
const relatedEtapeIndex = direction === 'next' ? index + 1 : index - 1;
|
|
||||||
await getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getRelatedEtape(direction, path) {
|
|
||||||
const getRelatedEtapeContent = (relatedEtapeData) => {
|
|
||||||
if (relatedEtapeData) {
|
|
||||||
return this.fetchFromRelationships('field_vignette', relatedEtapeData.relationships)
|
|
||||||
.then(vignetteFetch => {
|
|
||||||
if (vignetteFetch) {
|
|
||||||
this.content[direction] = {
|
|
||||||
url: relatedEtapeData.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
|
|
||||||
couleur: relatedEtapeData.attributes.field_couleur,
|
|
||||||
title: relatedEtapeData.attributes.title,
|
|
||||||
postalCode: relatedEtapeData.attributes.field_adresse.postal_code,
|
|
||||||
dates: {
|
|
||||||
start: this.getCleanDate(relatedEtapeData.attributes.field_dates.value),
|
|
||||||
end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
|
|
||||||
},
|
|
||||||
vignette: {
|
|
||||||
url: {
|
|
||||||
original: vignetteFetch.attributes.uri.url,
|
|
||||||
small: vignetteFetch.attributes.image_style_uri.content_small,
|
|
||||||
medium: vignetteFetch.attributes.image_style_uri.content_medium,
|
|
||||||
large: vignetteFetch.attributes.image_style_uri.content_large,
|
|
||||||
},
|
|
||||||
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const allEtapesPromise = REST.get('/jsonapi/views/etapes/block_1/');
|
|
||||||
|
|
||||||
return allEtapesPromise.then(allEtapesData => {
|
|
||||||
for (let [index, etape] of allEtapesData.data.data.entries()) {
|
|
||||||
if (etape.attributes.metatag.some(tag =>
|
|
||||||
tag.tag === "link" && tag.attributes.href === path
|
|
||||||
)) {
|
|
||||||
const relatedEtapeIndex = direction === 'next' ? index + 1 : index - 1;
|
|
||||||
return getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
async fetchFromRelationships(field, relationships) {
|
|
||||||
if (relationships[field].links) {
|
|
||||||
const contentLink = relationships[field].links.related.href;
|
|
||||||
return REST.get(contentLink)
|
|
||||||
.then(contentFetch => contentFetch.data.data)
|
|
||||||
.catch(error => {
|
|
||||||
this.error = 'Failed to fetch data';
|
|
||||||
console.error('Issue with getNodeData', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
resetStore(forFrontDisplay) {
|
resetStore(forFrontDisplay) {
|
||||||
this.contentType = '';
|
this.contentType = '';
|
||||||
this.pageTitle = '';
|
this.pageTitle = '';
|
||||||
|
|||||||
@ -0,0 +1,134 @@
|
|||||||
|
import REST from '../../api/rest-axios';
|
||||||
|
import { fetchFromRelationships } from './contentFetchUtils';
|
||||||
|
|
||||||
|
|
||||||
|
export async function getCarteSensible(partie) {
|
||||||
|
const carteSensiblePromise = fetchFromRelationships('field_image_carte', partie.relationships);
|
||||||
|
|
||||||
|
const carteSensibleData = await carteSensiblePromise;
|
||||||
|
if (carteSensibleData) {
|
||||||
|
return {
|
||||||
|
url: {
|
||||||
|
original: carteSensibleData.attributes.uri.url,
|
||||||
|
small: carteSensibleData.attributes.image_style_uri.content_small,
|
||||||
|
medium: carteSensibleData.attributes.image_style_uri.content_medium,
|
||||||
|
large: carteSensibleData.attributes.image_style_uri.content_large,
|
||||||
|
xlarge: carteSensibleData.attributes.image_style_uri.content_x_large,
|
||||||
|
},
|
||||||
|
alt: partie.relationships.field_image_carte.data.meta.alt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getTitreTexte(partie) {
|
||||||
|
let titre = partie.attributes.field_titre;
|
||||||
|
let texte = partie.attributes.field_texte.value;
|
||||||
|
|
||||||
|
// get the resized images from the text
|
||||||
|
const imgRegex = /<img[^>]+>/g;
|
||||||
|
const uuidRegex = /data-entity-uuid="([^"]+)"/;
|
||||||
|
const imgTags = texte.match(imgRegex);
|
||||||
|
|
||||||
|
if (imgTags) {
|
||||||
|
const imagePromises = imgTags.map(imgTag => {
|
||||||
|
const uuidMatch = imgTag.match(uuidRegex);
|
||||||
|
if (uuidMatch && uuidMatch[1]) {
|
||||||
|
return REST.get(`/jsonapi/file/file/${uuidMatch[1]}`)
|
||||||
|
.then(response => ({
|
||||||
|
originalTag: imgTag,
|
||||||
|
imageData: response.data.data
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const images = await Promise.all(imagePromises);
|
||||||
|
images.forEach(({originalTag, imageData}) => {
|
||||||
|
const newImgTag = originalTag
|
||||||
|
.replace(/src="[^"]+"/,`src="${imageData.attributes.image_style_uri.content_medium}"`)
|
||||||
|
.replace('>',' data-large-src="' + imageData.attributes.image_style_uri.content_large + '">');
|
||||||
|
texte = texte.replace(originalTag, newImgTag);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { titre, texte };
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getChiffresCles(partie) {
|
||||||
|
const chiffresClesFetch = await fetchFromRelationships('field_chiffres_clefs', partie.relationships);
|
||||||
|
if (chiffresClesFetch) {
|
||||||
|
let chiffresCles = [];
|
||||||
|
for (let chiffre of chiffresClesFetch) {
|
||||||
|
chiffresCles.push({
|
||||||
|
chiffre: chiffre.attributes.field_chiffre,
|
||||||
|
description: chiffre.attributes.field_description,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return chiffresCles;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getDiaporama(partie) {
|
||||||
|
const diaporamaFetch = await fetchFromRelationships('field_diaporama', partie.relationships);
|
||||||
|
|
||||||
|
if (diaporamaFetch) {
|
||||||
|
const diaporamaPromises = diaporamaFetch.map((image, index) => {
|
||||||
|
return {
|
||||||
|
url: {
|
||||||
|
original: image.attributes.uri.url,
|
||||||
|
small: image.attributes.image_style_uri.content_small,
|
||||||
|
medium: image.attributes.image_style_uri.content_medium,
|
||||||
|
large: image.attributes.image_style_uri.content_large,
|
||||||
|
},
|
||||||
|
alt: partie.relationships.field_diaporama.data[index].meta.alt,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return await Promise.all(diaporamaPromises);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getEntretien(partie) {
|
||||||
|
const [personnesFetch, questionsReponsesFetch] = await Promise.all([
|
||||||
|
fetchFromRelationships('field_personne_s', partie.relationships),
|
||||||
|
fetchFromRelationships('field_questions_reponses', partie.relationships)
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (personnesFetch && questionsReponsesFetch) {
|
||||||
|
const personnesPromises = personnesFetch.map(async (personne) => {
|
||||||
|
const portraitFetch = await fetchFromRelationships('field_portrait', personne.relationships);
|
||||||
|
if (portraitFetch) {
|
||||||
|
return {
|
||||||
|
portrait: {
|
||||||
|
original: portraitFetch.attributes.uri.url,
|
||||||
|
small: portraitFetch.attributes.image_style_uri.content_small,
|
||||||
|
medium: portraitFetch.attributes.image_style_uri.content_medium,
|
||||||
|
large: portraitFetch.attributes.image_style_uri.content_large,
|
||||||
|
},
|
||||||
|
alt: personne.relationships.field_portrait.data.meta.alt,
|
||||||
|
description: personne.attributes.field_description,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const questionsReponses = questionsReponsesFetch.map(qr => ({
|
||||||
|
question: qr.attributes.field_question,
|
||||||
|
reponse: qr.attributes.field_reponse.value,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return {
|
||||||
|
titre: partie.attributes.field_titre,
|
||||||
|
personnes: await Promise.all(personnesPromises),
|
||||||
|
questionsReponses: questionsReponses
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getVideos(partie) {
|
||||||
|
let videos = [];
|
||||||
|
for (let video of partie.attributes.field_videos) {
|
||||||
|
const videoId = video.split('?v=')[1];
|
||||||
|
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||||
|
videos.push(videoUrl);
|
||||||
|
}
|
||||||
|
return videos;
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import REST from '../../api/rest-axios';
|
||||||
|
|
||||||
|
export async function fetchFromRelationships(field, relationships) {
|
||||||
|
field = relationships[field] ? field : `${field}_static`;
|
||||||
|
|
||||||
|
if (relationships[field].links) {
|
||||||
|
const contentLink = relationships[field].links.related.href;
|
||||||
|
return REST.get(contentLink)
|
||||||
|
.then(contentFetch => contentFetch.data.data)
|
||||||
|
.catch(error => {
|
||||||
|
this.error = 'Failed to fetch data';
|
||||||
|
console.error('Issue with getNodeData', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCleanDate(date) {
|
||||||
|
return {
|
||||||
|
d: date.split('-')[2],
|
||||||
|
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
|
||||||
|
y: date.split('-')[0],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getRelatedEtape(direction, path) {
|
||||||
|
const getRelatedEtapeContent = (relatedEtapeData) => {
|
||||||
|
if (relatedEtapeData) {
|
||||||
|
return fetchFromRelationships('field_vignette', relatedEtapeData.relationships)
|
||||||
|
.then(vignetteFetch => {
|
||||||
|
if (vignetteFetch) {
|
||||||
|
return {
|
||||||
|
url: relatedEtapeData.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
|
||||||
|
couleur: relatedEtapeData.attributes.field_couleur,
|
||||||
|
title: relatedEtapeData.attributes.title,
|
||||||
|
postalCode: relatedEtapeData.attributes.field_adresse.postal_code,
|
||||||
|
dates: {
|
||||||
|
start: getCleanDate(relatedEtapeData.attributes.field_dates.value),
|
||||||
|
end: getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
|
||||||
|
},
|
||||||
|
vignette: {
|
||||||
|
url: {
|
||||||
|
original: vignetteFetch.attributes.uri.url,
|
||||||
|
small: vignetteFetch.attributes.image_style_uri.content_small,
|
||||||
|
medium: vignetteFetch.attributes.image_style_uri.content_medium,
|
||||||
|
large: vignetteFetch.attributes.image_style_uri.content_large,
|
||||||
|
},
|
||||||
|
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const allEtapesPromise = REST.get('/jsonapi/views/etapes/block_1/');
|
||||||
|
|
||||||
|
return allEtapesPromise.then(allEtapesData => {
|
||||||
|
for (let [index, etape] of allEtapesData.data.data.entries()) {
|
||||||
|
if (etape.attributes.metatag.some(tag =>
|
||||||
|
tag.tag === "link" && tag.attributes.href === path
|
||||||
|
)) {
|
||||||
|
const relatedEtapeIndex = direction === 'next' ? index + 1 : index - 1;
|
||||||
|
return getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import REST from '../../api/rest-axios';
|
||||||
|
|
||||||
|
export async function findContentByPath(contentTypes, path) {
|
||||||
|
for (let type of contentTypes) {
|
||||||
|
const response = await REST.get(`/jsonapi/node/${type}/`);
|
||||||
|
|
||||||
|
const content = response.data.data.find(content =>
|
||||||
|
content.attributes.metatag.some(tag =>
|
||||||
|
tag.tag === "link" && tag.attributes.href === path
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (content) {
|
||||||
|
return {
|
||||||
|
contentType: type,
|
||||||
|
rawContent: content,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle special case for governance/partners (multiple items per page)
|
||||||
|
const pageRequested = window.location.href.split('/').pop().replace(/s?$/, '');
|
||||||
|
if (type === pageRequested
|
||||||
|
|| (type === 'gouvernance' && pageRequested === 'contact')
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
contentType: type,
|
||||||
|
rawContent: response.data.data,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import REST from '../../api/rest-axios';
|
||||||
|
|
||||||
|
export async function getPartenaires(rawContent) {
|
||||||
|
const logoPromises = rawContent.map(item =>
|
||||||
|
REST.get(item.relationships.field_logo.links.related.href)
|
||||||
|
.then(logoFetch => ({
|
||||||
|
title: item.attributes.title,
|
||||||
|
description: item.attributes.body.value,
|
||||||
|
weight: item.attributes.field_poid,
|
||||||
|
link_url: item.attributes.field_lien.uri,
|
||||||
|
logo_alt: item.relationships.field_logo.data.meta.alt,
|
||||||
|
logo_url: {
|
||||||
|
original: logoFetch.data.data.attributes.uri.url,
|
||||||
|
small: logoFetch.data.data.attributes.image_style_uri.content_small,
|
||||||
|
medium: logoFetch.data.data.attributes.image_style_uri.content_medium,
|
||||||
|
large: logoFetch.data.data.attributes.image_style_uri.content_large,
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
return await Promise.all(logoPromises);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getGouvernance(rawContent) {
|
||||||
|
const itemPromises = rawContent.map(item =>
|
||||||
|
REST.get(item.relationships.field_personne_s.links.related.href)
|
||||||
|
.then(async personnesFetch => {
|
||||||
|
const portraitPromises = personnesFetch.data.data.map(personne =>
|
||||||
|
REST.get(personne.relationships.field_portrait.links.related.href)
|
||||||
|
.then(portraitFetch => ({
|
||||||
|
nom: personne.attributes.field_nom,
|
||||||
|
prenom: personne.attributes.field_prenom,
|
||||||
|
description: personne.attributes.field_description,
|
||||||
|
photo_meta: personne.relationships.field_portrait.data?.meta.alt,
|
||||||
|
photo_url: portraitFetch.data.data ? {
|
||||||
|
original: portraitFetch.data.data.attributes.uri.url,
|
||||||
|
small: portraitFetch.data.data.attributes.image_style_uri.content_small,
|
||||||
|
medium: portraitFetch.data.data.attributes.image_style_uri.content_medium,
|
||||||
|
large: portraitFetch.data.data.attributes.image_style_uri.content_large,
|
||||||
|
} : null
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
return Promise.all(portraitPromises)
|
||||||
|
.then(personnes => ({
|
||||||
|
title: item.attributes.title,
|
||||||
|
weight: item.attributes.field_poid,
|
||||||
|
personnes
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return await Promise.all(itemPromises);
|
||||||
|
}
|
||||||
@ -22,7 +22,7 @@ export function handleClickableElements(clickableElements, store, router, baseUr
|
|||||||
let href = link.href || link.dataset.href;
|
let href = link.href || link.dataset.href;
|
||||||
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
|
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
|
||||||
|
|
||||||
link.onclick = async function (e) {
|
link.onclick = async function (e) {
|
||||||
if (href !== window.location.pathname) {
|
if (href !== window.location.pathname) {
|
||||||
router.push(href);
|
router.push(href);
|
||||||
pageChange(href, store, siteName, mapStore, baseUrl);
|
pageChange(href, store, siteName, mapStore, baseUrl);
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
|
<div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
|
||||||
<div v-if="content.previous" class="card previous" @click="goToRelatedElement(content.previous.url)">
|
<div v-if="content.previous" class="card previous" :data-href="content.previous.url">
|
||||||
<div class="icon" :style="{ backgroundColor: content.previous.couleur }"></div>
|
<div class="icon" :style="{ backgroundColor: content.previous.couleur }"></div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="infos">
|
<div class="infos">
|
||||||
@ -17,7 +17,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="content.next" class="card next" @click="goToRelatedElement(content.next.url)">
|
<div v-if="content.next" class="card next" :data-href="content.next.url">
|
||||||
<div class="icon" :style="{ backgroundColor: content.next.couleur }"></div>
|
<div class="icon" :style="{ backgroundColor: content.next.couleur }"></div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="infos">
|
<div class="infos">
|
||||||
@ -34,13 +34,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import router from '../../router/router';
|
||||||
|
|
||||||
import { useContentStore } from '../../stores/content';
|
import { useContentStore } from '../../stores/content';
|
||||||
import { pageChange } from '../../utils/handle-navigation.js';
|
import { useMapStore } from '../../stores/map';
|
||||||
|
|
||||||
|
import { handleClickableElements } from '../../utils/handle-navigation.js';
|
||||||
|
|
||||||
const brandColor = "#80c8bf";
|
const brandColor = "#80c8bf";
|
||||||
|
|
||||||
const store = useContentStore();
|
const store = useContentStore();
|
||||||
const mapStore = useContentStore();
|
const mapStore = useMapStore();
|
||||||
const siteName = document.querySelector('#site_name').innerText;
|
const siteName = document.querySelector('#site_name').innerText;
|
||||||
|
|
||||||
|
|
||||||
@ -51,10 +56,9 @@ const props = defineProps({
|
|||||||
map: Object,
|
map: Object,
|
||||||
});
|
});
|
||||||
|
|
||||||
async function goToRelatedElement(href) {
|
onMounted(() => {
|
||||||
const baseUrl = window.location.protocol + "//" + window.location.host;
|
const relatedEtapesCards = document.querySelectorAll('.card');
|
||||||
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
|
const baseUrl = window.location.protocol + "//" + window.location.host;
|
||||||
pageChange(href, store, siteName, mapStore, baseUrl)
|
handleClickableElements(relatedEtapesCards, store, router, baseUrl, siteName, mapStore);
|
||||||
}
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -18,4 +18,4 @@ regions:
|
|||||||
content: 'Content'
|
content: 'Content'
|
||||||
sidebar_first: 'Sidebar first'
|
sidebar_first: 'Sidebar first'
|
||||||
sidebar_second: 'Sidebar second'
|
sidebar_second: 'Sidebar second'
|
||||||
footer: 'Footer'
|
footer: 'Footer'
|
||||||
Loading…
x
Reference in New Issue
Block a user