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

2025-06-26 15:26:18 +02:00
parent e85851bd4d
commit f44fbd8d06
21 changed files with 465 additions and 367 deletions
--- a/web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js
+++ b/web/themes/custom/caravane/assets/js/utils/content/contentFetchUtils.js
@@ -122,7 +122,7 @@ export async function getRessourceItemCard(item) {
        }

        const relatedEtape = await REST.get(item.relationships.field_etape.links.related.href);
-        console.log(item);
+        // console.log(item);
        
        
        return {
--- a/web/themes/custom/caravane/assets/js/utils/content/fetchMultiple.js
+++ b/web/themes/custom/caravane/assets/js/utils/content/fetchMultiple.js
@@ -0,0 +1,43 @@
+import REST from '../../api/rest-axios';
+import { useLayoutStore } from '../../stores/layout';
+import { getPartenaires, getGouvernance, getRessources } from './multiItemPages';
+
+export async function fetchMultiplePartialContent(contentType) {
+    let partialContent = {};
+    let pageTitle = '';
+
+    const intro = await REST.get(`/jsonapi/config_pages/intro_${contentType}/`);
+    const introContent = intro.data.data[0];
+
+    pageTitle =
+        `${introContent.attributes.field_titre} ${introContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content}`;                    
+
+    partialContent.contentTitle = introContent.attributes.field_titre;
+    partialContent.intro = introContent.attributes.field_intro?.value;
+
+    return { pageTitle, partialContent };
+}
+
+export async function fetchMultipleFullContent(contentType, rawContent) {
+    let content = {};
+    
+    let multiItemPageArray = [];                    
+
+    switch (contentType) {
+        case 'ressource':
+            multiItemPageArray = await getRessources(rawContent);                            
+            content.ressourceTypes = new Set(multiItemPageArray.map(item => item.ressourceType));
+            useLayoutStore().hideEtapeList(true);
+            break;
+        case 'partenaire':
+            multiItemPageArray = await getPartenaires(rawContent);
+            break;
+        case 'gouvernance':
+            multiItemPageArray = await getGouvernance(rawContent);
+            break;
+    }
+
+    content[`${contentType}s`] = multiItemPageArray;
+    
+    return content;
+}
--- a/web/themes/custom/caravane/assets/js/utils/content/fetchSingleton.js
+++ b/web/themes/custom/caravane/assets/js/utils/content/fetchSingleton.js
@@ -0,0 +1,153 @@
+import REST from '../../api/rest-axios';
+
+import { getCleanDate, fetchFromRelationships, getRelatedEtape, getRelatedRessources } from './contentFetchUtils';
+import { getCarteSensible, getTitreTexte, getChiffresCles, getDiaporama, getEntretien, getVideos, getDocument, getGallerie } from './cleanParties';
+import { useLayoutStore } from '../../stores/layout';
+
+export function fetchSingletonPartialContent(contentType, rawContent) {
+    let partialContent = {};
+
+    let pageTitle = rawContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content;
+
+    partialContent.contentTitle = rawContent.attributes.title;
+
+    if (contentType === 'etape') {
+        partialContent.coordinates = {
+            lat: rawContent.attributes.field_geofield.lat,
+            lon: rawContent.attributes.field_geofield.lon,
+        };
+        partialContent.adresse = rawContent.attributes.field_adresse;
+        partialContent.etape_number = rawContent.attributes.field_arret_numero;
+        partialContent.couleur = rawContent.attributes.field_couleur;
+        partialContent.dates = {
+            start: getCleanDate(rawContent.attributes.field_dates.value),
+            end: getCleanDate(rawContent.attributes.field_dates.end_value),
+        }
+    }
+
+    if (contentType === 'ressourceItem') {   
+        partialContent.ressourceType = rawContent.attributes.field_type_de_ressource;
+        partialContent.auteurice = rawContent.attributes.field_autheurice;
+        partialContent.date = getCleanDate(rawContent.attributes.field_date_ressource);
+    }
+    
+    return { pageTitle, partialContent };
+}
+
+export async function fetchSingletonFullContent(contentType, rawContent, path) {
+    let content = {};
+
+    const vignettePromise = fetchFromRelationships('field_vignette', rawContent.relationships);
+    const partiesPromise = fetchFromRelationships(contentType === 'ressourceItem' ? 'field_parties_ressource' : 'field_parties', rawContent.relationships);
+
+    let previousEtapePromise, nextEtapePromise;
+
+    if (contentType === 'etape') {
+        previousEtapePromise = getRelatedEtape('previous', path);
+        nextEtapePromise = getRelatedEtape('next', path);
+        content.relatedRessources = await getRelatedRessources(rawContent.id);
+    }
+
+    if (contentType === 'ressourceItem') {
+        content.introduction = rawContent.attributes.field_introduction?.processed;                        
+        if (rawContent.relationships.field_etape.data) {
+            const relatedEtapeFetch = fetchFromRelationships('field_etape', rawContent.relationships);
+            const relatedEtape = await Promise.resolve(relatedEtapeFetch);
+            const relatedEtapeUrl = relatedEtape.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href;
+            content.relatedEtape = await getRelatedEtape('', relatedEtapeUrl);                        
+        }
+        
+        useLayoutStore().hideEtapeList(true);
+    }
+
+    const [vignetteData, partiesData] = await Promise.all([vignettePromise, partiesPromise]);
+
+    if (vignetteData) {
+        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':
+                    partieContent.carteSensible = await getCarteSensible(partie);
+                    break;
+                case 'titre_texte':
+                    const { titre, texte } = await getTitreTexte(partie);
+                    partieContent.titre = titre;
+                    partieContent.texte = texte;
+                    break;
+                case 'chiffres_cles':
+                    partieContent.chiffresCles = await getChiffresCles(partie);
+                    break;
+                case 'diaporama':
+                    partieContent.diaporama = await getDiaporama(partie);
+                    break;
+                case 'entretien':
+                    partieContent.entretien = await getEntretien(partie);
+                    break;
+                case 'exergue':
+                    partieContent.exergue = partie.attributes.field_texte_exergue.value;
+                    break;
+                case 'video':
+                    partieContent.videos = getVideos(partie);
+                    break;
+                case 'document':
+                    partieContent.document = await getDocument(partie);
+                    break;
+                case 'galleries':
+                    partieContent.gallerie = await getGallerie(partie);
+                    break;
+            }
+            return partieContent;
+        });
+
+        // liens
+        if (rawContent.attributes.field_liens?.length) {
+            content.liens = [];
+            for (let lien of rawContent.attributes.field_liens) {
+                content.liens.push({
+                    title: lien.title,
+                    url: lien.uri,
+                });
+            }                            
+        }
+        // pièces jointes
+        if (rawContent.relationships.field_pieces_jointes?.data.length) {
+            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}`);
+                    content.pieces_jointes.push({
+                        title: pieceJointe.meta.description,
+                        url: response.data.data.attributes.uri.url,
+                    });
+                }
+            }
+        } 
+
+        content.parties = await Promise.all(partiesPromises);
+    }
+
+    // related étapes
+    if (contentType === 'etape') {
+        const [prevContent, nextContent] = await Promise.all([previousEtapePromise, nextEtapePromise]);
+        content.previous = prevContent;
+        content.next = nextContent;
+    }
+
+    return content;
+}
--- a/web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
+++ b/web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
@@ -55,7 +55,7 @@ export async function getGouvernance(rawContent) {
 }

 export async function getRessources(rawContent) {
-    console.log(rawContent);
+    // console.log(rawContent);
    
    const ressourcesPromises = rawContent.map(item => getRessourceItemCard(item));        

--- a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js
+++ b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js
@@ -1,23 +1,27 @@
 import { setActiveNavItem } from "./set-active-nav-item";
+import { useContentStore } from "../stores/content";
+import { useMapStore } from "../stores/map";
 import { useLayoutStore } from '../stores/layout';

-export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
+export async function initFirstLoadRouting(router, baseUrl, siteName) {
+    const store = useContentStore();
    const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));

    if(decoupled_origin) {
        router.push(decoupled_origin.url);
-        await store.fetchContentData(baseUrl + decoupled_origin.url);
+        await store.fetchPartialContentData(baseUrl + decoupled_origin.url);
        window.localStorage.removeItem("decoupled_origin");
        document.title = store.pageTitle;
        setActiveNavItem(store.contentType, decoupled_origin.url);
        useLayoutStore().setHeaderPosition(false);
+        await store.fetchFullContentData(baseUrl + decoupled_origin.url);
    } else {
        document.title = siteName;
        useLayoutStore().setHeaderPosition(true);
    }
 }

-export function handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore) {
+export function handleClickableElements(clickableElements, router, baseUrl, siteName) {
    for (const link of clickableElements) {
        let href = link.href || link.dataset.href;
        if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
@@ -25,26 +29,29 @@ export function handleClickableElements(clickableElements, store, router, baseUr
        link.onclick = async function (e) {            
            if (href !== window.location.pathname) {
                router.push(href);
-                pageChange(href, store, siteName, mapStore, baseUrl);
+                pageChange(href, siteName, baseUrl);
            }
        }
    }
 }

-export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore) {
-  let href = window.location.pathname;
-  if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
-  pageChange(href, store, siteName, mapStore, baseUrl)
+export async function handleBrowserNavigation(baseUrl, siteName) {
+    let href = window.location.pathname;
+    if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
+    pageChange(href, siteName, baseUrl)
 }

-export async function pageChange(href, store, siteName, mapStore, baseUrl) {
+export async function pageChange(href, siteName, baseUrl) {
+    const store = useContentStore();
+    const mapStore = useMapStore();
+
  if (href === '/') {
      store.resetStore(true);
      document.title = siteName;
      mapStore.resetMap();
      useLayoutStore().setHeaderPosition(true);
  } else {
-      await store.fetchContentData(baseUrl + href);
+      await store.fetchPartialContentData(baseUrl + href);
      document.title = store.pageTitle;
      useLayoutStore().setHeaderPosition(false);
  }
@@ -53,4 +60,8 @@ export async function pageChange(href, store, siteName, mapStore, baseUrl) {
  const listeEtape = document.querySelector('#etapes-liste');
  const animationToggle = document.querySelector('#animation-toggle');
  if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape, animationToggle);
+
+  if (href !== '/') {
+      await store.fetchFullContentData(baseUrl + href);
+  }
 }
--- a/web/themes/custom/caravane/assets/js/utils/layout-setup.js
+++ b/web/themes/custom/caravane/assets/js/utils/layout-setup.js
@@ -56,7 +56,7 @@ export function setMenuToggle() {
    layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
 }

-export function setHamburgerWhenLogged(drupalSettings) {
+export function setRightSectionsWhenLogged(drupalSettings) {
    if (drupalSettings.user.uid != 0) {
      const menuBurger = document.querySelector('#hamburger');
      const menuTitle = document.querySelector('#menu-title');
@@ -65,7 +65,11 @@ export function setHamburgerWhenLogged(drupalSettings) {
      const headerTop = header.getBoundingClientRect().top;

      menuTitle.style.top = `${headerTop}px`;
-      menuBurger.style.top = `${headerTop}px`;
-      menuContainer.style.paddingTop = `${headerTop}px`;
+      menuContainer.style.paddingTop = `${headerTop + 10}px`;
+      menuBurger.style.top = `${headerTop + 2}px`;
+
+      const etapesListContainer = document.querySelector('.block-region-third');
+      etapesListContainer.style.paddingTop = `50px`;
+
    }
 }
--- a/web/themes/custom/caravane/assets/js/utils/map-setup.js
+++ b/web/themes/custom/caravane/assets/js/utils/map-setup.js
@@ -1,7 +1,10 @@
 import { useLayoutStore } from '../stores/layout';
+import { useMapStore } from '../stores/map';
 import REST from '../api/rest-axios';

-export function setupMapStore(mapStore, map, settings) {
+export function setupMapStore(map, settings) {
+    const mapStore = useMapStore();
+
    mapStore.map = map;
    mapStore.defaultMapCenter = map.getCenter();
    mapStore.maxZoom = settings.settings.maxZoom;
@@ -13,7 +16,9 @@ export function setupMapStore(mapStore, map, settings) {

 // not working
 // may or may not rework on it later
-export async function preloadEtapesTiles(mapStore, map) {
+export async function preloadEtapesTiles(map) {
+    const mapStore = useMapStore();
+    
    function waitForEvent(el, eventName) {
        return new Promise((resolve) => {
            el.once(eventName, resolve);
--- a/web/themes/custom/caravane/assets/js/utils/set-active-nav-item.js
+++ b/web/themes/custom/caravane/assets/js/utils/set-active-nav-item.js
@@ -11,13 +11,19 @@ export function setActiveNavItem(contentType, href) {
    }

    if (href === '/' || href === '') {
-        staticNavItems[0].classList.add('is-active');
+        staticNavItems[1].classList.add('is-active');
        for (let item of etapeNavItems) {
            item.closest('li').classList.remove('inactive');
        }

    } else {
-        if (contentType === 'static') {
+        
+        if (
+            contentType === 'static'
+            || contentType === 'partenaire'
+            || contentType === 'gouvernance'
+            || contentType === 'ressource'
+        ) {
            for (let item of staticNavItems) {
                if (item.getAttribute('href') === href) {
                    item.classList.add('is-active');
@@ -26,9 +32,12 @@ export function setActiveNavItem(contentType, href) {
        } else if (contentType === 'etape') {
            for (let item of etapeNavItems) {
                if (item.getAttribute('href') === href) {
-                    item.closest('li').classList.remove('inactive');
+                    item.closest('li').classList.remove('inactive');                    
+                    document.querySelector('#etapes-liste').scrollTo(0, item.closest('li').offsetTop);
                }
            }
+        } else if (contentType === "ressourceItem") {
+            staticNavItems[2].classList.add('is-active');
        }
    }

--- a/web/themes/custom/caravane/assets/js/utils/vue-setup.js
+++ b/web/themes/custom/caravane/assets/js/utils/vue-setup.js
@@ -6,9 +6,6 @@ import AnimationToggle from '../vuejs/AnimationToggle.vue';
 import VueImageZoomer from 'vue-image-zoomer';
 import 'vue-image-zoomer/dist/style.css';

-import { useContentStore } from '../stores/content';
-import { useMapStore } from '../stores/map';
-
 export function initVueContentModale() {
    const pinia = createPinia();

@@ -16,14 +13,12 @@ export function initVueContentModale() {
      .use(pinia)
      .use(router)
      .use(VueImageZoomer);
-
-    const store = useContentStore();
-    const mapStore = useMapStore();
+      
    app.mount('#content-modale');

    const animationToggle = createApp(AnimationToggle)
      .use(pinia)
      .mount('#animation-toggle');

-  return { store, mapStore, router };
+  return router;
 }