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

Compare commits

base: bachir:ac51fc987c99a0bf86df2a48198c1e238433d188
Branches Tags
bachir:master bachir:prod bachir:stage
..
compare: bachir:prod
Branches Tags
bachir:master bachir:prod bachir:stage

4 Commits
ac51fc987c ... prod

Author SHA1 Message Date
Valentin Le Moign
d91e74f61e correction bande blanche cover etape 2025-08-26 16:50:43 +02:00
Valentin Le Moign
c5c1456e80 display bad ressources 2025-06-26 16:13:32 +02:00
Valentin Le Moign
c2174b27c0 display badly filled partenaires 2025-06-26 15:49:00 +02:00
Valentin Le Moign
6f53afa8bf correction footer modale 2025-06-26 15:35:49 +02:00
9 changed files with 50 additions and 48 deletions
Expand all files Collapse all files

10
web/themes/custom/caravane/assets/js/utils/content/cleanParties.js
View File

@ -135,18 +135,18 @@ export function getVideos(partie) {
export async function getDocument(partie) { export async function getDocument(partie) {
// const documentFetch = await fetchFromRelationships('field_document', partie.relationships); // const documentFetch = await fetchFromRelationships('field_document', partie.relationships);
const uuid = partie.relationships.field_document.data.id; const uuid = partie.relationships.field_document.data?.id;
const documentFetch = await REST.get(`/jsonapi/file/file/${uuid}`); const documentFetch = await REST.get(`/jsonapi/file/file/${uuid}`);
const url = documentFetch.data.data.attributes.uri.url; const url = documentFetch.data.data?.attributes.uri.url;
const titre = partie.attributes.field_titre; const titre = partie.attributes.field_titre;
const sousTitre = partie.attributes.field_sous_titre; const sousTitre = partie.attributes.field_sous_titre;
const date = partie.attributes.field_date ? getCleanDate(partie.attributes.field_date) : null; const date = partie.attributes.field_date ? getCleanDate(partie.attributes.field_date) : null;
const auteurice = partie.relationships.field_autheurice_s; const auteurice = partie.relationships.field_autheurice_s;
const description = partie.relationships.field_document.data.meta.description; const description = partie.relationships.field_document.data?.meta.description;
const vignetteFetch = await REST.get(`/jsonapi/file/file/${partie.relationships.field_vignette.data.id}`); const vignetteFetch = await REST.get(`/jsonapi/file/file/${partie.relationships.field_vignette.data?.id}`);
const vignette = { url: vignetteFetch.data.data.attributes.image_style_uri.content_small, alt: partie.relationships.field_vignette.data.meta.alt }; const vignette = { url: vignetteFetch.data.data?.attributes.image_style_uri.content_small, alt: partie.relationships.field_vignette.data?.meta.alt };
return { url, titre, sousTitre, date, auteurice, description, vignette }; return { url, titre, sousTitre, date, auteurice, description, vignette };
} }

28
web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js
View File

@ -71,7 +71,7 @@ export async function getRessourceItemCard(item) {
try { try {
const ressourceFetch = await REST.get(item.links.self.href); const ressourceFetch = await REST.get(item.links.self.href);
const partiesFetch = await REST.get(item.relationships.field_parties_ressource.links.related.href); const partiesFetch = await REST.get(item.relationships.field_parties_ressource?.links.related.href);
const parties = partiesFetch.data.data; const parties = partiesFetch.data.data;
const vignettePartie = parties.find(partie => partie.type !== "paragraph--titre_texte"); const vignettePartie = parties.find(partie => partie.type !== "paragraph--titre_texte");
@ -81,16 +81,16 @@ export async function getRessourceItemCard(item) {
let alt; let alt;
switch (vignettePartie.type) { switch (vignettePartie.type) {
case 'paragraph--diaporama': case 'paragraph--diaporama':
alt = vignettePartie.relationships.field_diaporama.data[0].meta.alt; alt = vignettePartie.relationships.field_diaporama?.data[0]?.meta.alt;
const diaporamaFetch = await REST.get(vignettePartie.relationships.field_diaporama.links.related.href); const diaporamaFetch = await REST.get(vignettePartie.relationships.field_diaporama?.links.related.href);
vignette = { vignette = {
url: diaporamaFetch.data.data[0].attributes.image_style_uri.content_small, url: diaporamaFetch.data.data[0].attributes.image_style_uri?.content_small,
alt alt
}; };
break; break;
case 'paragraph--video': case 'paragraph--video':
const videoId = vignettePartie.attributes.field_videos[0].split('?v=')[1]; const videoId = vignettePartie.attributes.field_videos[0]?.split('?v=')[1];
vignette = { vignette = {
url: `https://img.youtube.com/vi/${videoId}/0.jpg`, url: `https://img.youtube.com/vi/${videoId}/0.jpg`,
alt: item.attributes.title alt: item.attributes.title
@ -98,20 +98,20 @@ export async function getRessourceItemCard(item) {
break; break;
case 'paragraph--galleries': case 'paragraph--galleries':
const gallerieFetch = await REST.get(vignettePartie.relationships.field_gallerie.links.related.href); const gallerieFetch = await REST.get(vignettePartie.relationships.field_gallerie?.links.related.href);
const galleryAlt = gallerieFetch.data.data.relationships.field_images.data[0].meta.alt; const galleryAlt = gallerieFetch.data.data.relationships.field_images?.data[0].meta.alt;
const gallerieImageFetch = await REST.get(gallerieFetch.data.data.relationships.field_images.links.related.href); const gallerieImageFetch = await REST.get(gallerieFetch.data.data.relationships.field_images?.links.related.href);
vignette = { vignette = {
url: gallerieImageFetch.data.data[0].attributes.image_style_uri.content_small, url: gallerieImageFetch.data.data[0].attributes.image_style_uri?.content_small,
alt: galleryAlt alt: galleryAlt
}; };
break; break;
case 'paragraph--document': case 'paragraph--document':
alt = vignettePartie.relationships.field_vignette.data.meta.alt; alt = vignettePartie.relationships.field_vignette?.data?.meta.alt;
const documentFetch = await REST.get(vignettePartie.relationships.field_vignette.links.related.href); const documentFetch = await REST.get(vignettePartie.relationships.field_vignette?.links.related.href);
vignette = { vignette = {
url: documentFetch.data.data.attributes.image_style_uri.content_small, url: documentFetch.data.data?.attributes.image_style_uri?.content_small,
alt alt
}; };
break; break;
@ -130,9 +130,9 @@ export async function getRessourceItemCard(item) {
title: item.attributes.title, title: item.attributes.title,
auteurice: item.attributes.field_autheurice, auteurice: item.attributes.field_autheurice,
promoted: item.attributes.field_mis_en_avant, promoted: item.attributes.field_mis_en_avant,
date: getCleanDate(item.attributes.field_date_ressource), date: item.attributes.field_date_ressource ? getCleanDate(item.attributes.field_date_ressource) : null,
url: ressourceFetch.data.data.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href, url: ressourceFetch.data.data.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
relatedEtape: relatedEtape.data.data.attributes.title, relatedEtape: relatedEtape.data.data?.attributes.title,
vignette vignette
}; };
} catch (error) { } catch (error) {

2
web/themes/custom/caravane/assets/js/utils/content/fetchSingleton.js
View File

@ -28,7 +28,7 @@ export function fetchSingletonPartialContent(contentType, rawContent) {
if (contentType === 'ressourceItem') { if (contentType === 'ressourceItem') {
partialContent.ressourceType = rawContent.attributes.field_type_de_ressource; partialContent.ressourceType = rawContent.attributes.field_type_de_ressource;
partialContent.auteurice = rawContent.attributes.field_autheurice; partialContent.auteurice = rawContent.attributes.field_autheurice;
partialContent.date = getCleanDate(rawContent.attributes.field_date_ressource); partialContent.date = rawContent.attributes.field_date_ressource ? getCleanDate(rawContent.attributes.field_date_ressource) : null;
} }
return { pageTitle, partialContent }; return { pageTitle, partialContent };

39
web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
View File

@ -1,20 +1,20 @@
import REST from '../../api/rest-axios'; import REST from '../../api/rest-axios';
import { getCleanDate, getRessourceItemCard } from './contentFetchUtils'; import { getRessourceItemCard } from './contentFetchUtils';
export async function getPartenaires(rawContent) { export async function getPartenaires(rawContent) {
const logoPromises = rawContent.map(item => const logoPromises = rawContent.map(item =>
REST.get(item.relationships.field_logo.links.related.href) REST.get(item.relationships.field_logo?.links.related.href)
.then(logoFetch => ({ .then(logoFetch => ({
title: item.attributes.title, title: item.attributes?.title,
description: item.attributes.body.value, description: item.attributes?.body?.value,
weight: item.attributes.field_poid, weight: item.attributes?.field_poid,
link_url: item.attributes.field_lien.uri, link_url: item.attributes?.field_lien?.uri,
logo_alt: item.relationships.field_logo.data.meta.alt, logo_alt: item.relationships?.field_logo?.data?.meta.alt,
logo_url: { logo_url: {
original: logoFetch.data.data.attributes.uri.url, original: logoFetch.data.data?.attributes.uri.url,
small: logoFetch.data.data.attributes.image_style_uri.content_small, small: logoFetch.data.data?.attributes.image_style_uri.content_small,
medium: logoFetch.data.data.attributes.image_style_uri.content_medium, medium: logoFetch.data.data?.attributes.image_style_uri.content_medium,
large: logoFetch.data.data.attributes.image_style_uri.content_large, large: logoFetch.data.data?.attributes.image_style_uri.content_large,
} }
})) }))
); );
@ -24,28 +24,28 @@ export async function getPartenaires(rawContent) {
export async function getGouvernance(rawContent) { export async function getGouvernance(rawContent) {
const itemPromises = rawContent.map(item => const itemPromises = rawContent.map(item =>
REST.get(item.relationships.field_personne_s.links.related.href) REST.get(item.relationships.field_personne_s?.links.related.href)
.then(async personnesFetch => { .then(async personnesFetch => {
const portraitPromises = personnesFetch.data.data.map(personne => const portraitPromises = personnesFetch.data.data.map(personne =>
REST.get(personne.relationships.field_portrait.links.related.href) REST.get(personne.relationships.field_portrait?.links.related.href)
.then(portraitFetch => ({ .then(portraitFetch => ({
nom: personne.attributes.field_nom, nom: personne.attributes.field_nom,
prenom: personne.attributes.field_prenom, prenom: personne.attributes.field_prenom,
description: personne.attributes.field_description, description: personne.attributes.field_description,
photo_meta: personne.relationships.field_portrait.data?.meta.alt, photo_meta: personne.relationships.field_portrait.data?.meta.alt,
photo_url: portraitFetch.data.data ? { photo_url: portraitFetch.data.data ? {
original: portraitFetch.data.data.attributes.uri.url, original: portraitFetch.data.data?.attributes.uri.url,
small: portraitFetch.data.data.attributes.image_style_uri.content_small, small: portraitFetch.data.data?.attributes.image_style_uri.content_small,
medium: portraitFetch.data.data.attributes.image_style_uri.content_medium, medium: portraitFetch.data.data?.attributes.image_style_uri.content_medium,
large: portraitFetch.data.data.attributes.image_style_uri.content_large, large: portraitFetch.data.data?.attributes.image_style_uri.content_large,
} : null } : null
})) }))
); );
return Promise.all(portraitPromises) return Promise.all(portraitPromises)
.then(personnes => ({ .then(personnes => ({
title: item.attributes.title, title: item.attributes?.title,
weight: item.attributes.field_poid, weight: item.attributes?.field_poid,
personnes personnes
})); }));
}) })
@ -55,7 +55,6 @@ export async function getGouvernance(rawContent) {
} }
export async function getRessources(rawContent) { export async function getRessources(rawContent) {
// console.log(rawContent);
const ressourcesPromises = rawContent.map(item => getRessourceItemCard(item)); const ressourcesPromises = rawContent.map(item => getRessourceItemCard(item));

2
web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<footer> <footer :class="contentType === 'ressourceItem' ? 'footer-ressource' : ''">
<div class="brand-pattern pattern-bottom" :style="{ backgroundColor: couleur }"> <div class="brand-pattern pattern-bottom" :style="{ backgroundColor: couleur }">
<div class="pattern"></div> <div class="pattern"></div>
</div> </div>

2
web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<header :class="{ 'not-etape': contentType !== 'etape' }"> <header :class="{ 'not-etape': contentType !== 'etape' }">
<div v-if="contentType === 'etape'" class="cover" :style="{ backgroundColor: `${couleur.substring(0, 7)}99`, aspectRatio: '3 / 2' }"> <div v-if="contentType === 'etape'" class="cover" :style="{ backgroundColor: `${couleur.substring(0, 7)}99` }">
<img v-if="!loading && content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt"> <img v-if="!loading && content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
</div> </div>
<div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }"> <div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }">

6
web/themes/custom/caravane/assets/js/vuejs/components/PartenairesContent.vue
View File

@ -4,13 +4,13 @@
<p v-html="content.intro"></p> <p v-html="content.intro"></p>
</div> </div>
<div v-for="partenaire in [...content.partenaires].sort((a, b) => a.weight - b.weight)" class="partenaire"> <div v-for="partenaire in [...content.partenaires].sort((a, b) => a.weight - b.weight)" class="partenaire">
<figure> <figure v-if="partenaire.logo_url && partenaire.link_url">
<a :href="partenaire.link_url" target="_blank"> <a :href="partenaire.link_url" target="_blank">
<img :src="partenaire.logo_url.small" :alt="partenaire.logo_alt"> <img :src="partenaire.logo_url.small" :alt="partenaire.logo_alt">
</a> </a>
</figure> </figure>
<div class="title"><p v-html="partenaire.title"></p></div> <div class="title"><p v-html="partenaire.title || ''"></p></div>
<div class="description"><p v-html="partenaire.description"></p></div> <div class="description"><p v-html="partenaire.description || ''"></p></div>
</div> </div>
</div> </div>
</template> </template>

4
web/themes/custom/caravane/assets/js/vuejs/components/RessourceCard.vue
View File

@ -8,8 +8,8 @@
</figure> </figure>
<div> <div>
<h4>{{ ressource.title }}</h4> <h4>{{ ressource.title }}</h4>
<p>Le {{ ressource?.date.d }} {{ ressource?.date.m }} {{ ressource?.date.y }}</p> <p v-if="ressource.date">Le {{ ressource?.date.d }} {{ ressource?.date.m }} {{ ressource?.date.y }}</p>
<p>Par {{ ressource?.auteurice }}</p> <p v-if="ressource.auteurice">Par {{ ressource?.auteurice }}</p>
</div> </div>
</div> </div>
</template> </template>

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

@ -808,6 +808,7 @@ body{
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
> .cover { > .cover {
grid-row: 1 / span 1; grid-row: 1 / span 1;
min-height: 150px;
max-height: 60vh; max-height: 60vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1467,7 +1468,9 @@ body{
> footer { > footer {
position: relative; position: relative;
z-index: -1; z-index: -1;
overflow: hidden; &.footer-ressource {
overflow: hidden;
}
.pattern-bottom { .pattern-bottom {
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
height: $modale-bottom-padding; height: $modale-bottom-padding;