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

affichage des pièces jointes et liens

Browse Source
This commit is contained in:
Valentin Le Moign
2025-02-12 14:42:24 +01:00
parent eeb4702e96
commit 1b88937a6f
7 changed files with 380 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,8 @@ export const useContentStore = defineStore('content', {
next: {},
vignette: {},
parties: [],
liens: [],
pieces_jointes: [],
intro: '',
partenaires: [],
@@ -28,6 +30,7 @@ export const useContentStore = defineStore('content', {
}),
actions: {
async fetchContentData(path) {
console.log('start fetch content');
this.resetStore(false);
const contentTypes = [ 'etape', 'static', 'gouvernance', 'partenaire' ];
try {
@@ -42,6 +45,8 @@ export const useContentStore = defineStore('content', {
);
if (content) {
console.log('content found');
return {
contentType: type,
rawContent: content,
@@ -60,17 +65,20 @@ export const useContentStore = defineStore('content', {
}
}
return null;
};
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
};
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
this.contentType = contentType;
// console.log(`current type: ${contentType}`);
// TO DEBUG
const cleanContentMethod = 'original';
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {
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") {
@@ -95,6 +103,31 @@ export const useContentStore = defineStore('content', {
};
}
// 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') {
// coordinates
this.content.coordinates = {
@@ -120,7 +153,8 @@ export const useContentStore = defineStore('content', {
// 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) {
@@ -146,6 +180,7 @@ export const useContentStore = defineStore('content', {
}
break;
case 'titre_texte':
console.time('get images from text original')
partieContent.titre = partie.attributes.field_titre;
partieContent.texte = partie.attributes.field_texte.value;
@@ -170,8 +205,10 @@ export const useContentStore = defineStore('content', {
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);
@@ -250,6 +287,153 @@ export const useContentStore = defineStore('content', {
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
for (let tag of rawContent.attributes.metatag) {
if (tag.tag === "meta") {
this.pageTitle = tag.attributes.content;
break;
}
}
// contentTitle
this.content.contentTitle = rawContent.attributes.title;
const [vignetteData, partiesData] = await Promise.all([vignettePromise, partiesPromise]);
if (vignetteData) {
this.content.vignette = {
url: {
original: vignetteData.attributes.uri.url,
small: vignetteData.attributes.image_style_uri.content_small,
medium: vignetteData.attributes.image_style_uri.content_medium,
large: vignetteData.attributes.image_style_uri.content_large,
},
alt: rawContent.relationships.field_vignette.data.meta.alt
};
}
if (partiesData) {
const partiesPromises = partiesData.map(async (partie) => {
const partieType = partie.type.replace(/^paragraph--/, "");
let partieContent = { type: partieType };
switch(partieType) {
case 'carte_sensible':
const carteSensiblePromise = this.fetchFromRelationships('field_image_carte', partie.relationships);
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;
case 'titre_texte':
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) {
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;
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':
break;
case 'entretien':
break;
case 'exergue':
break;
case 'video':
break;
}
return partieContent;
});
this.content.parties = await Promise.all(partiesPromises);
}
// related étapes
if (contentType === 'etape') await Promise.all([previousEtapePromise, nextEtapePromise]);
console.log(this.content);
console.timeEnd('etape content promise processing');
} else {
// pages gouvernance (contact) et partenaire
// ont plusieurs items par pages
@@ -366,18 +550,61 @@ export const useContentStore = defineStore('content', {
}
}
},
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) {
try {
const contentLink = relationships[field].links.related.href;
const contentFetch = await REST.get(contentLink);
return contentFetch.data.data;
} catch (error) {
this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error);
}
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) {
this.contentType = '';
this.pageTitle = '';

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

@@ -23,6 +23,8 @@ export function handleClickableElements(clickableElements, store, router, baseUr
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
link.onclick = async function (e) {
console.log('click on link, route push');
router.push(href);
if (href !== window.location.pathname) {
pageChange(href, store, siteName, mapStore, baseUrl);
@@ -38,6 +40,7 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
}
export async function pageChange(href, store, siteName, mapStore, baseUrl) {
console.log('trigger page change');
if (href === '/') {
store.resetStore(true);
document.title = siteName;

107
web/themes/custom/caravane/assets/js/vuejs/Modale.vue
View File

@@ -51,11 +51,15 @@
v-if="contentType === 'partenaire'"
:content="content" />
</main>
<PiecesJointes
:content="content"
:couleur="content.couleur || brandColor"
/>
<ModaleFooter
:contentType="contentType"
:content="content"
:couleur="content.couleur || brandColor"
/>
:contentType="contentType"
:content="content"
:couleur="content.couleur || brandColor"
/>
</div>
</div>
</Transition>
@@ -72,6 +76,7 @@ import ModaleHeader from './components/ModaleHeader.vue';
import ModaleFooter from './components/ModaleFooter.vue';
import EquipeContent from './components/EquipeContent.vue';
import PartenairesContent from './components/PartenairesContent.vue';
import PiecesJointes from './components/PiecesJointes.vue';
import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
@@ -113,68 +118,70 @@ const handleMapMovement = () => {
() => loading.value,
() => {
if (!loading.value) {
isModaleEtape = contentType.value === 'etape';
console.log('loading done');
isModaleEtape = contentType.value === 'etape';
// Define helper functions in variables
const disableModaleTransition = () => {
document.documentElement.style.setProperty('margin-top', '0');
document.documentElement.style.setProperty('transition', 'none');
}
const setModaleTransition = (enterDelay) => {
document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
};
// Define helper functions in variables
const disableModaleTransition = () => {
document.documentElement.style.setProperty('margin-top', '0');
document.documentElement.style.setProperty('transition', 'none');
}
const setModaleTransition = (enterDelay) => {
document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
};
const zoomToContentPlace = () => {
mapState.zoomToPlace(
content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
);
};
const zoomToContentPlace = () => {
mapState.zoomToPlace(
content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
);
};
if (animationsAreEnabled.value) {
if (animationsAreEnabled.value) {
if (isModaleEtape) {
if (!wasModaleEtape) {
// national -> détail
setModaleTransition(animationDuration.value);
zoomToContentPlace();
} else {
// détail -> détail
setModaleTransition(animationDuration.value);
zoomToContentPlace();
}
} else {
if (wasModaleEtape) {
// détail -> national
setModaleTransition(animationDuration.value);
mapState.resetMap();
} else {
// national -> national
setModaleTransition(0);
}
}
} else {
if (isModaleEtape) {
if (isModaleEtape) {
if (!wasModaleEtape) {
// national -> détail
setModaleTransition(animationDuration.value);
zoomToContentPlace();
} else {
mapState.resetMap();
// détail -> détail
setModaleTransition(animationDuration.value);
zoomToContentPlace();
}
} else {
if (wasModaleEtape) {
// détail -> national
setModaleTransition(animationDuration.value);
mapState.resetMap();
} else {
// national -> national
setModaleTransition(0);
}
disableModaleTransition();
}
} else {
if (isModaleEtape) {
zoomToContentPlace();
} else {
mapState.resetMap();
}
disableModaleTransition();
}
scrollTo(0, 0);
scrollTo(0, 0);
wasModaleEtape = isModaleEtape;
wasModaleEtape = isModaleEtape;
}
},
);
};
onMounted(() => {
isModaleEtape = contentType.value === 'etape';
wasModaleEtape = isModaleEtape;
handleColorChange();
handleMapMovement();
console.log('modale mounted');
isModaleEtape = contentType.value === 'etape';
wasModaleEtape = isModaleEtape;
handleColorChange();
handleMapMovement();
});
</script>

17
web/themes/custom/caravane/assets/js/vuejs/components/PiecesJointes.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="pieces-jointes">
<div v-for="pj in content.pieces_jointes">
<a class="pj-link" :href="pj.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ pj.title }}</a>
</div>
<div v-for="lien in content.liens">
<a class="lien-link" :href="lien.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ lien.title }}</a>
</div>
</div>
</template>
<script setup>
const props = defineProps({
content: Object,
couleur: String,
});
</script>

1
web/themes/custom/caravane/assets/pictograms/arrow_forward.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

1
web/themes/custom/caravane/assets/pictograms/download.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 278 B

59
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -1177,12 +1177,71 @@ body{
}
}
}
> .pieces-jointes {
z-index: 1;
position: relative;
padding: 0 $modale-x-padding;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 1.8rem 1rem;
justify-content: space-between;
padding-bottom: 3rem;
> div {
padding-top: 5px;
> a {
background-color: white;
padding: 0.8rem 1rem;
padding-left: 1.2rem;
border-radius: 10rem;
text-decoration: none;
color: $main-color;
display: flex;
transition: transform 0.2s ease-in-out;
transform: translateY(0px);
&:hover {
transform: translateY(-4px);
}
}
> a.pj-link {
&::after {
mask: url('/themes/custom/caravane/assets/pictograms/download.svg') no-repeat center;
content: '';
mask-size: contain;
background-color: $main-color;
display: inline-block;
width: 1rem;
height: 1rem;
margin-top: 0.3rem;
margin-left: 0.5rem;
}
}
> a.lien-link {
&::after {
mask: url('/themes/custom/caravane/assets/pictograms/arrow_forward.svg') no-repeat center;
content: '';
mask-size: contain;
background-color: $main-color;
display: inline-block;
width: 1rem;
height: 1rem;
margin-top: 0.3rem;
margin-left: 0.5rem;
}
}
}
}
> footer {
z-index: 0;
.pattern-bottom {
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
height: $modale-bottom-padding;
position: absolute;
bottom: 0;
width: 100%;
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
background-size: 300px;
background-size: repeat;
}
.related-etape-links {
position: absolute;