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

rerefactor du fetching de contenus une mielleure ux au load des modales (description dans le readme)

Browse Source
This commit is contained in:
Valentin Le Moign
2025-06-26 15:26:18 +02:00
parent e85851bd4d
commit f44fbd8d06
21 changed files with 465 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/themes/custom/caravane/assets/js/vuejs/components/EtapeCard.vue
View File

@@ -22,18 +22,13 @@ const props = defineProps({
import { onMounted } from 'vue';
import router from '../../router/router';
import { useContentStore } from '../../stores/content';
import { useMapStore } from '../../stores/map';
import { handleClickableElements } from '../../utils/handle-navigation.js';
const store = useContentStore();
const mapStore = useMapStore();
const siteName = document.querySelector('#site_name').innerText;
onMounted(() => {
const relatedEtapesCards = document.querySelectorAll('.card');
const baseUrl = window.location.protocol + "//" + window.location.host;
handleClickableElements(relatedEtapesCards, store, router, baseUrl, siteName, mapStore);
handleClickableElements(relatedEtapesCards, router, baseUrl, siteName);
});
</script>

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

@@ -1,7 +1,7 @@
<template>
<header :class="{ 'not-etape': contentType !== 'etape' }">
<div class="cover">
<img v-if="content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
<div v-if="contentType === 'etape'" class="cover" :style="{ backgroundColor: `${couleur.substring(0, 7)}99`, aspectRatio: '3 / 2' }">
<img v-if="!loading && content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
</div>
<div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }">
<p>Étape n°{{content.etape_number}}</p>
@@ -23,6 +23,7 @@
<script setup>
const props = defineProps({
loading: Boolean,
contentType: String,
content: Object,
couleur: String,

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

@@ -4,12 +4,12 @@
:id="`ressource-${index}`"
:class="ressource.promoted ? 'promoted' : ''">
<figure>
<img :src="ressource.vignette.url" :alt="ressource.vignette.alt" />
<img :src="ressource?.vignette.url" :alt="ressource?.vignette.alt" />
</figure>
<div>
<h4>{{ ressource.title }}</h4>
<p>Le {{ ressource.date.d }} {{ ressource.date.m }} {{ ressource.date.y }}</p>
<p>Par {{ ressource.auteurice }}</p>
<p>Le {{ ressource?.date.d }} {{ ressource?.date.m }} {{ ressource?.date.y }}</p>
<p>Par {{ ressource?.auteurice }}</p>
</div>
</div>
</template>
@@ -19,14 +19,8 @@ import { onMounted } from 'vue';
import router from '../../router/router';
import { handleClickableElements } from '../../utils/handle-navigation.js';
import { useContentStore } from '../../stores/content';
import { useMapStore } from '../../stores/map';
const store = useContentStore();
const mapStore = useMapStore();
const siteName = document.querySelector('#site_name').innerText;
let relatedItemCards, baseUrl;
onMounted(() => {
@@ -36,7 +30,7 @@ onMounted(() => {
const setClickableElements = () => {
relatedItemCards = document.querySelector(`#ressource-${props.index}`);
handleClickableElements([relatedItemCards], store, router, baseUrl, siteName, mapStore);
handleClickableElements([relatedItemCards], router, baseUrl, siteName);
}
defineExpose({

19
web/themes/custom/caravane/assets/js/vuejs/components/RessourceItemHeader.vue
View File

@@ -3,14 +3,16 @@
<div class="retour">
<p data-href="/ressources">← Retour au centre de ressources</p>
</div>
<div class="type">{{ content.displayedType }}</div>
<div class="type">{{ content?.displayedType }}</div>
<div class="title">
<h2
:style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
{{ content.contentTitle }}
{{ content?.contentTitle }}
</h2>
</div>
<div class="meta">Par {{ content.auteurice }}, le {{ content.date.d }} {{ content.date.m }} {{ content.date.y }}</div>
<div v-if="content.auteurice && content.date" class="meta">
Par {{ content?.auteurice }}, le {{ content?.date.d }} {{ content?.date.m }} {{ content?.date.y }}
</div>
</header>
</template>
@@ -18,14 +20,9 @@
import { onMounted } from 'vue';
import router from '../../router/router';
import { useContentStore } from '../../stores/content';
import { useMapStore } from '../../stores/map';
import { handleClickableElements } from '../../utils/handle-navigation.js';
const store = useContentStore();
const mapStore = useMapStore();
const siteName = document.querySelector('#site_name').innerText;
const siteName = document.querySelector('#site_name')?.innerText;
const props = defineProps({
content: Object,
@@ -33,7 +30,7 @@ const props = defineProps({
});
function setDisplayedType() {
const ressourceType = props.content.ressourceType;
const ressourceType = props.content?.ressourceType;
switch (ressourceType) {
case 'cartes_blanches':
props.content.displayedType = 'Carte blanche';
@@ -57,7 +54,7 @@ function setDisplayedType() {
onMounted(() => {
const backToRessourcesLink = document.querySelectorAll('.retour > p');
const baseUrl = window.location.protocol + "//" + window.location.host;
handleClickableElements(backToRessourcesLink, store, router, baseUrl, siteName, mapStore);
handleClickableElements(backToRessourcesLink, router, baseUrl, siteName);
setDisplayedType();
});
</script>