avancées centre de ressource

2025-03-26 00:28:41 +01:00
parent 9093caa557
commit a1916e3219
14 changed files with 670 additions and 30 deletions
--- a/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue
@@ -1,14 +1,153 @@
 <template>
    <div id="centre-de-ressource">
        <div v-if="content.intro" class="intro">
-            <p v-html="content.intro"></p>
+            <!-- <p v-html="content.intro"></p> -->
        </div>
+        <div class="filters">
+            <input type="text" v-model="searchQuery" placeholder="Rechercher..." class="search-bar">
+            <select v-model="selectedType">
+                <option value="">Tous les types</option>
+                <option v-for="type in content.ressourceTypes" :key="type" :value="type">
+                    {{ type.replace(/_/g, ' ').replace(/^\w/, char => char.toUpperCase()) }}
+                </option>
+            </select>
+        </div>
+        <template v-for="type in filteredTypes" :key="type">
+            <div class="type-section" v-if="ressourcesToDisplay[type] && ressourcesToDisplay[type].length > 0">
+                <h3>{{ type.replace(/_/g, ' ').replace(/^\w/, char => char.toUpperCase()) }}</h3>
+                <div class="ressource-list">
+                    <TransitionGroup name="itemFade" tag="div" appear>
+                        <div class="ressource-item" 
+                            :data-href="ressource.url"
+                            v-for="(ressource, ressourceIndex) in ressourcesToDisplay[type]"
+                            :key="`${type}-${ressourceIndex}`"
+                            :style="{ '--index': ressourceIndex - visibleItemsPerSection }">
+                            <figure>
+                                <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>
+                            </div>
+                        </div>
+                    </TransitionGroup>
+                </div>
+                <div class="button-container">
+                    <div v-if="ressourcesByType(type).length > visibleItemsPerSection
+                        && ressourcesToDisplay[type].length === visibleItemsPerSection"
+                         class="ressource-button"
+                         @click="loadMore(type)">
+                        Voir plus ↓
+                    </div>
+                    <div v-if="ressourcesToDisplay[type].length > visibleItemsPerSection"
+                         class="ressource-button"
+                         @click="showLess(type)">
+                        Voir moins ↑
+                    </div>
+                </div>
+            </div>
+        </template>
    </div>
 </template>

 <script setup>
+import { ref, computed, watch, 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 props = defineProps({
  content: Object,
  couleur: String,
 });
-</script>
+
+const searchQuery = ref('');
+const selectedType = ref('');
+const ressourcesToDisplay = ref({});
+const visibleItemsPerSection = 4;
+
+const filteredTypes = computed(() => {
+    return selectedType.value ? [selectedType.value] : props.content.ressourceTypes;
+});
+
+const ressourcesByType = (type) => {
+    return props.content.ressources
+        .filter(ressource => ressource.ressourceType === type)
+        .filter(ressource => 
+            searchQuery.value === '' || 
+            ressource.title.toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+}
+
+const initializeRessources = (type) => {
+    ressourcesToDisplay.value[type] = ressourcesByType(type).slice(0, visibleItemsPerSection);
+};
+
+props.content.ressourceTypes.forEach(type => initializeRessources(type));
+
+const loadMore = (type) => {
+    const currentLength = ressourcesToDisplay.value[type].length;
+
+    if (currentLength < ressourcesByType(type).length) {
+        ressourcesToDisplay.value[type] = ressourcesByType(type).slice(0, currentLength + visibleItemsPerSection);
+    }
+};
+
+const showLess = (type) => {
+    ressourcesToDisplay.value[type] = ressourcesByType(type).slice(0, visibleItemsPerSection);
+};
+
+watch(searchQuery, () => {
+    props.content.ressourceTypes.forEach(type => {
+        initializeRessources(type);
+    });
+});
+
+
+let relatedItemCards, baseUrl;
+
+watch(ressourcesToDisplay.value, () => {
+    setClickableElements();
+}, { deep: true });
+
+watch(selectedType, () => {
+    setClickableElements();
+});
+
+onMounted(() => {
+    baseUrl = window.location.protocol + "//" + window.location.host;
+    setClickableElements();
+});
+
+function setClickableElements() {
+    setTimeout(() => {
+        relatedItemCards = document.querySelectorAll('.ressource-item');
+        handleClickableElements(relatedItemCards, store, router, baseUrl, siteName, mapStore);
+    }, 50);
+}
+</script>
+
+<style scoped>
+.itemFade-enter-active, .itemFade-leave-active {
+  transition: all 0.3s ease !important;
+  transition-delay: calc(0.1s * var(--index)) !important;
+}
+
+.itemFade-enter-from, .itemFade-leave-to {
+  opacity: 0;
+  transform: translateY(-20px) !important;
+}
+
+.itemFade-enter-to, .itemFade-leave-from {
+  opacity: 1;
+  transform: translateY(0px);
+}
+</style>
--- a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue
@@ -14,7 +14,7 @@
            <div class="locality">
                <div class="top-triangle" v-if="contentType === 'etape'"></div>
                <div class="locality-title">
-                    <h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
+                    <h1>{{ contentType === 'ressourceItem' ? 'Centre de ressources' : content.contentTitle }} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
                </div>
            </div>
        </div>
--- a/web/themes/custom/caravane/assets/js/vuejs/components/RessourceItemHeader.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/RessourceItemHeader.vue
@@ -0,0 +1,60 @@
+<template>
+  <header id="ressource-item-header">
+    <div class="retour">
+      <p data-href="/ressources">← Retour au centre de ressources</p>
+    </div>
+    <div class="type">{{ content.displayedType }}</div>
+    <div class="title">
+      <h2
+      :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
+        {{ content.contentTitle }}
+      </h2>
+    </div>
+    <div class="meta">Par {{ content.auteurice }}, le {{ content.date.d }} {{ content.date.m }} {{ content.date.y }}</div>
+  </header>
+</template>
+
+<script setup>
+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 props = defineProps({
+  content: Object,
+  couleur: String,
+});
+
+function setDisplayedType() {
+    const ressourceType = props.content.ressourceType;
+    switch (ressourceType) {
+      case 'cartes_blanches':
+        props.content.displayedType = 'Carte blanche';
+        break;
+      case 'documents':
+        props.content.displayedType = 'Document';
+        break;
+      case 'galleries':
+        props.content.displayedType = 'Galerie';
+        break;
+      case 'videos':
+        props.content.displayedType = 'Vidéo';
+        break;
+    }
+    
+}
+
+onMounted(() => {
+    const backToRessourcesLink = document.querySelectorAll('.retour > p');
+    const baseUrl = window.location.protocol + "//" + window.location.host;
+    handleClickableElements(backToRessourcesLink, store, router, baseUrl, siteName, mapStore);
+    setDisplayedType();
+});
+</script>
--- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
@@ -59,7 +59,7 @@ const handleImageClick = (event) => {
      const swiperEl = img.closest('swiper-container');
      swiperEl.querySelectorAll('swiper-slide').forEach((slide) => {
        const img = slide.querySelector('img');
-        const altText = slide.querySelector('figcaption')?.textContent || '';        
+        const altText = slide.querySelector('figcaption')?.textContent || '';
        Object.values(props.partie.diaporama).forEach((image) => {
          if (image.url.medium === img.src) {
            swiperMedia.push({ src: image.url.large, alt: altText });
--- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDocument.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDocument.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="document"
+    :style="{ '--couleur': couleur }">
+        <div 
+        class="intro" 
+        v-html="partie.document.description">
+        </div>
+        <div class="document-grid">
+            <figure>
+                <a :href="partie.document.url" target="_blank">
+                    <img :src="partie.document.vignette.url" :alt="partie.document.vignette.alt" />
+                </a>
+            </figure>
+            <div class="infos">
+                <p>{{ partie.document.titre }}</p>
+                <p>{{ partie.document.sousTitre }}</p>
+                <p>{{ partie.document.auteurice }}</p>
+                <p>{{ partie.document.date?.m }} {{ partie.document.date?.y }}</p>
+            </div>
+            <div class="download">
+                <a :href="partie.document.url" target="_blank">Télécharger le document</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    partie: Object,
+    couleur: String,
+});
+</script>
+
+<style lang="scss" scoped>
+.intro {
+    position: relative;
+    padding-left: 1.8rem;
+    margin: 3rem 0;
+    &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        background-color: var(--couleur);
+        width: 0.8rem;
+        height: 100%;
+        margin-right: 1rem;
+        left: 0;
+    }
+}
+.document-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    column-gap: 2rem;
+    > figure {
+        grid-column: 1 / 2;
+        grid-row: 1 / 3;
+        margin: 0;
+        background-color: var(--couleur);
+        img {
+            padding: 2rem;
+            box-sizing: border-box;
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+            transform: scale(1);
+            transition: transform 0.2s ease-in-out;
+            &:hover {
+                transform: scale(1.02);
+            }
+        }
+    }
+    > .infos {
+        > p {
+            margin: 0;
+            margin-bottom: 0.8rem;
+            &:first-of-type {
+                font-weight: bold;
+            }
+        }
+
+    }
+    > .download {
+        align-self: end;
+        justify-self: end;
+    }
+}
+</style>
--- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleGallerie.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleGallerie.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="gallerie">
+        <h3><p :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">{{ partie.gallerie.titre }}</p></h3>
+        <div class="intro" v-html="partie.gallerie.introduction"></div>
+        <div class="images-grid">
+            <figure v-for="image in partie.gallerie.images">
+                <img :src="image.url.medium" :alt="image.alt" @click="handleImageClick">
+                <figcaption class="caption">{{ image.alt }}</figcaption>
+            </figure>
+        </div>
+    </div>
+
+    <ImageModale
+        :isOpen="isModaleOpen"
+        :image="currentImage"
+        :swiperContent="swiperPopupContent"
+        @close="closeImageModale" />
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { useImageModal } from '../../composables/useImageModale';
+import ImageModale from '../ImageModale.vue';
+
+const props = defineProps({
+    partie: Object,
+    couleur: String,
+});
+
+const { 
+  isModaleOpen, 
+  currentImage, 
+  swiperPopupContent, 
+  openImageModale, 
+  closeImageModale 
+} = useImageModal();
+
+const handleImageClick = (event) => {
+    const img = event.target;
+    if (img.tagName === 'IMG') {
+        let swiperMedia = [];
+        const imgGrid = img.closest('.images-grid');
+
+        imgGrid.querySelectorAll('figure').forEach((figure) => {
+            const img = figure.querySelector('img');
+            const altText = figure.querySelector('figcaption')?.textContent || '';
+            Object.values(props.partie.gallerie.images).forEach((image) => {
+                if (img.src === image.url.medium) {
+                    swiperMedia.push({ src: image.url.large, alt: altText });
+                }
+            });
+        });
+        console.log(swiperMedia);
+        
+
+        openImageModale(img.src, img.alt, swiperMedia);
+    }
+}
+
+onMounted(() => {
+    setVerticalImages();
+});
+
+function setVerticalImages() {
+    const images = document.querySelectorAll('.images-grid figure img');
+    images.forEach((img) => {
+        if (img.naturalHeight > img.naturalWidth) {
+            img.classList.add('vertical');
+            img.closest('figure').querySelector('figcaption').style.textAlign = 'center';
+        }
+    });
+}
+</script>