From f106602e73a1a13c575711e7db54a744a83049da Mon Sep 17 00:00:00 2001
From: Valentin Le Moign <valentin_le_moign@figureslibres.io>
Date: Thu, 23 Jan 2025 16:00:05 +0100
Subject: [PATCH] export configs pour les images styles & corrections layout
 diaporamas et modales diaporama

---
 config/sync/core.extension.yml                |  1 +
 config/sync/image.style.content_large.yml     | 15 ++++
 config/sync/image.style.content_medium.yml    | 15 ++++
 config/sync/image.style.content_small.yml     | 15 ++++
 config/sync/image.style.content_x_large.yml   | 15 ++++
 config/sync/jsonapi_image_styles.settings.yml | 12 +++
 config/sync/user.role.editor.yml              |  1 +
 .../caravane/assets/js/stores/content.js      |  4 +-
 .../assets/js/utils/handle-navigation.js      |  3 +-
 .../js/vuejs/components/ImageModale.vue       | 88 ++++++++++++++++---
 .../components/parties/ModaleDiaporama.vue    | 55 +++++++++---
 .../js/vuejs/composables/useWaitForImages.js  | 14 +++
 .../custom/caravane/assets/scss/main.scss     |  1 +
 13 files changed, 210 insertions(+), 29 deletions(-)
 create mode 100644 config/sync/image.style.content_large.yml
 create mode 100644 config/sync/image.style.content_medium.yml
 create mode 100644 config/sync/image.style.content_small.yml
 create mode 100644 config/sync/image.style.content_x_large.yml
 create mode 100644 config/sync/jsonapi_image_styles.settings.yml
 create mode 100644 web/themes/custom/caravane/assets/js/vuejs/composables/useWaitForImages.js

diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
index b335c22..06488f8 100644
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -68,6 +68,7 @@ module:
   image_field_caption: 0
   inline_entity_form: 0
   jsonapi: 0
+  jsonapi_image_styles: 0
   jsonapi_resources: 0
   jsonapi_views: 0
   language: 0
diff --git a/config/sync/image.style.content_large.yml b/config/sync/image.style.content_large.yml
new file mode 100644
index 0000000..2e63e3f
--- /dev/null
+++ b/config/sync/image.style.content_large.yml
@@ -0,0 +1,15 @@
+uuid: 51021857-f408-4a97-96ac-95916834465c
+langcode: fr
+status: true
+dependencies: {  }
+name: content_large
+label: content-large
+effects:
+  9e838862-ccce-4fff-8f63-836c9dbf3da8:
+    uuid: 9e838862-ccce-4fff-8f63-836c9dbf3da8
+    id: image_scale
+    weight: 1
+    data:
+      width: 2048
+      height: null
+      upscale: false
diff --git a/config/sync/image.style.content_medium.yml b/config/sync/image.style.content_medium.yml
new file mode 100644
index 0000000..cc96819
--- /dev/null
+++ b/config/sync/image.style.content_medium.yml
@@ -0,0 +1,15 @@
+uuid: 39e71e90-a87c-43de-b679-ba663dcb1e9a
+langcode: fr
+status: true
+dependencies: {  }
+name: content_medium
+label: content-medium
+effects:
+  9430838c-1da4-412b-ade1-d6e02ab9ecd2:
+    uuid: 9430838c-1da4-412b-ade1-d6e02ab9ecd2
+    id: image_scale
+    weight: 1
+    data:
+      width: 1024
+      height: null
+      upscale: false
diff --git a/config/sync/image.style.content_small.yml b/config/sync/image.style.content_small.yml
new file mode 100644
index 0000000..6fc63b7
--- /dev/null
+++ b/config/sync/image.style.content_small.yml
@@ -0,0 +1,15 @@
+uuid: f77750f4-4cb6-4cdb-9796-4acfa169105a
+langcode: fr
+status: true
+dependencies: {  }
+name: content_small
+label: content-small
+effects:
+  d2acf93c-5264-4ce5-a11c-bfaeaa7a7279:
+    uuid: d2acf93c-5264-4ce5-a11c-bfaeaa7a7279
+    id: image_scale
+    weight: 1
+    data:
+      width: 512
+      height: null
+      upscale: false
diff --git a/config/sync/image.style.content_x_large.yml b/config/sync/image.style.content_x_large.yml
new file mode 100644
index 0000000..47f36d1
--- /dev/null
+++ b/config/sync/image.style.content_x_large.yml
@@ -0,0 +1,15 @@
+uuid: fd11611a-e6eb-4843-b104-982932b90392
+langcode: fr
+status: true
+dependencies: {  }
+name: content_x_large
+label: 'content x-large'
+effects:
+  7bc2e7f9-1c41-4d60-85b3-16a795691e3e:
+    uuid: 7bc2e7f9-1c41-4d60-85b3-16a795691e3e
+    id: image_scale
+    weight: 1
+    data:
+      width: 2500
+      height: null
+      upscale: false
diff --git a/config/sync/jsonapi_image_styles.settings.yml b/config/sync/jsonapi_image_styles.settings.yml
new file mode 100644
index 0000000..9e490ca
--- /dev/null
+++ b/config/sync/jsonapi_image_styles.settings.yml
@@ -0,0 +1,12 @@
+_core:
+  default_config_hash: wOZVD8Wsf3NSSsAU36-FVkO7zaC4TgH_Buj0Up6vHYQ
+image_styles:
+  content_large: content_large
+  content_medium: content_medium
+  content_small: content_small
+  content_x_large: content_x_large
+  large: '0'
+  linkit_result_thumbnail: '0'
+  medium: '0'
+  thumbnail: '0'
+  wide: '0'
diff --git a/config/sync/user.role.editor.yml b/config/sync/user.role.editor.yml
index c1b8ab2..71ab0eb 100644
--- a/config/sync/user.role.editor.yml
+++ b/config/sync/user.role.editor.yml
@@ -49,6 +49,7 @@ permissions:
   - 'edit any partenaire content'
   - 'edit any static content'
   - 'edit intro_gouvernance config page entity'
+  - 'edit intro_partenaire config page entity'
   - 'edit own etape content'
   - 'edit own gallerie_photo content'
   - 'edit own partenaire content'
diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js
index 623dfdc..7848eff 100644
--- a/web/themes/custom/caravane/assets/js/stores/content.js
+++ b/web/themes/custom/caravane/assets/js/stores/content.js
@@ -175,9 +175,7 @@ export const useContentStore = defineStore('content', {
                                                     large: image.attributes.image_style_uri.content_large,
                                                 },
                                                 alt: partie.relationships.field_diaporama.data[index].meta.alt,
-                                            });
-                                            console.log(partieContent.diaporama);
-                                            
+                                            });                                           
                                         }
                                     }
                                     break;
diff --git a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js
index 4284244..efaee8b 100644
--- a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js
+++ b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js
@@ -51,5 +51,6 @@ export async function pageChange(href, store, siteName, mapStore, baseUrl) {
   setActiveNavItem(store.contentType, href);
 
   const listeEtape = document.querySelector('#etapes-liste');
-  if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
+  const animationToggle = document.querySelector('#animation-toggle');
+  if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape, animationToggle);
 }
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue b/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
index 7fb04ab..c39a305 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
@@ -1,6 +1,6 @@
 <template>
   <Transition name="fade">
-    <div v-if="isOpen" class="image-viewer-wrapper">
+    <div v-if="isOpen" class="image-viewer-wrapper" @click="(e) => checkOutsideClick(e.target)">
       <div v-if="!swiperContent" class="img-modale simple-viewer">
           <figure class="img-wrapper">
               <img :src="image.src" :alt="image.alt">
@@ -26,6 +26,7 @@
                   opacity: 0.8;
                 }
               `]"
+              @swiperresize="(e) => setCaptions(e.target)"
             >
               <swiper-slide v-for="media in swiperContent">
                 <figure class="popup-figure">
@@ -46,6 +47,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import { useWaitForImages } from '../composables/useWaitForImages';
 const props = defineProps({
   isOpen: Boolean,
   image: {
@@ -63,23 +65,70 @@ const currentImgIndex = ref(0);
 watch(
   () => props.isOpen,
   () => {
-  if (props.isOpen && props.swiperContent?.length) {
-    for (let i = 0; i < props.swiperContent.length; i++) {
-      const currentImgSrc = props.image.src;
-      const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
-      if (props.swiperContent[i].src === truncatedSrc) {
+    toggleElementsOver(props.isOpen);
+    if (props.isOpen && props.swiperContent?.length) {
+      checkCurrentImage();
+    }
+  }
+)
+
+function toggleElementsOver(isOpen) {
+  const header = document.querySelector('.layout-container > header');
+  const retractedList = document.querySelector('.retracted');
+  if (isOpen) {
+    header.style.opacity = 0;
+    setTimeout(() => {
+      header.style.display = 'none';
+    }, 300);
+    if (retractedList) {
+      retractedList.style.display = 'none';
+    }
+  } else {
+    header.style.display = 'block';
+    header.style.opacity = 1;
+    if (retractedList) {
+      retractedList.style.display = 'flex';
+    }
+  }
+}
+
+function checkCurrentImage() {
+    // CHECK IF IMAGES ARE THE SAME WITH ALT
+    // IS NOT A GREAT SOLUTION
+  for (let i = 0; i < props.swiperContent.length; i++) {
+      if (props.swiperContent[i].alt === props.image.alt) {
         currentImgIndex.value = i;
         break;     
       }
     }
-  }
-})
+}
+
+function setCaptions(container) {
+  useWaitForImages(container, () => {
+    const slides = container.querySelectorAll('swiper-slide');
+    slides.forEach((slide) => {
+      const img = slide.querySelector('img');
+      const caption = slide.querySelector('figcaption');
+      caption.style.width = `${img.offsetWidth}px`;
+    });
+  });
+}
 
 const emit = defineEmits(['close']);
 
 const close = () => {
   emit('close');
 };
+
+function checkOutsideClick(target) {
+  console.log(target);
+  
+  if (target.classList.contains('swiper-wrapper')
+  || target.tagName === 'SWIPER-SLIDE'
+  || target.tagName === 'FIGURE') {
+    close();
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -133,26 +182,37 @@ const close = () => {
         swiper-slide {
           display: flex;
           justify-content: center;
-          align-items: flex-start;
+          align-items: center;
           figure {
             margin-top: 3%;
-            max-width: 60%;
-            height: 80%;
-            max-height: 80vh;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 10vw;
+            box-sizing: border-box;
             img {
-              height: -webkit-fill-available !important;
+              max-height: 100%;
               max-width: 100%;
+              width: auto !important;
+              height: auto !important;
               margin-bottom: -5px;
-              object-fit: cover;
+              object-fit: contain !important;
             }
             figcaption {
               margin: 0;
               background-color: white;
               font-size: 0.8rem; /* cf main.scss */
               padding: 0.5rem 1.5rem;
+              box-sizing: border-box;
             }
           }
         }
+        &::part(pagination) {
+          pointer-events: none;
+        }
       }
     }
   }
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
index 26d07c6..d24a54f 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
@@ -7,7 +7,7 @@
         :navigation="true"
         :pagination="true"
         :injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
-        @swiperresize="(e) => resizeSwiper(e.target)"
+        @swiperresize="(e) => setupSwiper(e.target)"
     >
         <swiper-slide v-for="image in partie.diaporama" style="width: 100%">
         <figure>
@@ -29,6 +29,7 @@
 <script setup>
 import { onMounted } from 'vue';
 import { useImageModal } from '../../composables/useImageModale';
+import { useWaitForImages } from '../../composables/useWaitForImages';
 import ImageModale from '../ImageModale.vue';
 // WebComponent
 // https://swiperjs.com/element
@@ -61,7 +62,7 @@ const handleImageClick = (event) => {
         const altText = slide.querySelector('figcaption')?.textContent || '';        
         Object.values(props.partie.diaporama).forEach((image) => {
           if (image.url.medium === img.src) {
-            swiperMedia.push({ src: largeImgUrl, alt: altText });
+            swiperMedia.push({ src: image.url.large, alt: altText });
           }
         });
 
@@ -71,9 +72,47 @@ const handleImageClick = (event) => {
   }
 };
 
-function resizeSwiper(swiper) {
-  swiper.style.height = 'auto';
-  swiper.style.height = `calc(${swiper.offsetHeight}px + 2rem)`;
+function setupSwiper(swiper) {
+  centerCaptionOnVerticalImgs(swiper);
+  setVerticalImages(swiper);
+  window.addEventListener('resize', () => {
+    setTimeout(() => {
+      setVerticalImages(swiper);
+    }, 50);
+  });
+}
+
+function centerCaptionOnVerticalImgs(swiper) {
+  const slides = swiper.querySelectorAll('swiper-slide');
+  slides.forEach((slide) => {
+    const img = slide.querySelector('img');
+    const caption = slide.querySelector('figcaption');
+    if (img.naturalHeight > img.naturalWidth) {
+      caption.style.textAlign = 'center';
+    } 
+  });
+}
+
+function setVerticalImages(swiper) {
+  const slides = swiper.querySelectorAll('swiper-slide');
+  let imageHeight = 0;
+  useWaitForImages(swiper, () => {
+    
+    for (let i = 0; i < slides.length; i++) {
+      const slide = slides[i];
+      const img = slide.querySelector('img');
+      if (img.offsetHeight < img.naturalWidth) {
+        imageHeight = img.offsetHeight;
+        break;
+      }
+    }
+    slides.forEach((slide) => {
+      const img = slide.querySelector('img');
+      if (img.naturalHeight > img.naturalWidth) {
+        img.style.height = `${imageHeight}px`;
+      }
+    });
+  });
 }
 
 onMounted(() => {
@@ -93,13 +132,7 @@ onMounted(() => {
   --swiper-navigation-size: 1.5rem;
 }
 
-swiper-slide figure:not(.popup-figure) {
-  max-height: 40vh;
-  padding-bottom: 3rem;
-}
-
 swiper-slide img:not(.popup-img) { /* cf main.scss */
-  max-height: 35vh;
   cursor: pointer;
   transition: transform 0.3s ease-out;
   object-fit: contain !important;
diff --git a/web/themes/custom/caravane/assets/js/vuejs/composables/useWaitForImages.js b/web/themes/custom/caravane/assets/js/vuejs/composables/useWaitForImages.js
new file mode 100644
index 0000000..d260e51
--- /dev/null
+++ b/web/themes/custom/caravane/assets/js/vuejs/composables/useWaitForImages.js
@@ -0,0 +1,14 @@
+export function useWaitForImages(container, callback) {
+    const images = container.querySelectorAll('img');
+    const imagePromises = Array.from(images).map(img => {
+        return new Promise(resolve => {
+            if (img.complete) {
+                resolve();
+            } else {
+                img.onload = img.onerror = resolve;
+            }
+        });
+    });
+
+    Promise.all(imagePromises).then(callback);
+}
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index 5652f01..0819cb8 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/web/themes/custom/caravane/assets/scss/main.scss
@@ -53,6 +53,7 @@ body{
   .layout-container {
     > header {
       z-index: 2;
+      transition: opacity 0.3s ease-in-out;
       > div {
         padding: $body-margin-y $body-margin-x 0 $body-margin-x;
         display: grid;