EXPORT CONFIG ! fin du centre de ressource

web/themes/custom/caravane/assets/js/main.js

@@ -12,9 +12,7 @@ import '../scss/main.scss'
 
 (function ($, Drupal, drupalSettings) {
     const CaravaneTheme = function () {
-        function init () {
-            console.log('CI/CD FONCTIONNE !');
-            
+        function init () {            
             // console.log('DrupalSettings', drupalSettings);
             
             const baseUrl = window.location.protocol + "//" + window.location.host;

web/themes/custom/caravane/assets/js/stores/map.js

@@ -23,21 +23,15 @@ export const useMapStore = defineStore('mapState', {
               this.maxZoom,
               { animate: this.animationsAreEnabled, duration: this.animationDuration });
             this.currentZoom = this.maxZoom;
-            this.lockMap();
         },
-        resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
+        resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {          
             this.map.flyTo(
               this.defaultMapCenter,
               useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
               { animate, duration });
             this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
-            this.unlockMap();
         },
-        lockMap() {
-            setTimeout(() => {
-                this.map.options.minZoom = this.currentZoom;
-                this.map.options.maxZoom = this.currentZoom;
-            }, this.animationDuration * 1000 + 100);
+        lockMap() {          
             this.map.dragging.disable();
             this.map.touchZoom.disable();
             this.map.doubleClickZoom.disable();

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -62,7 +62,7 @@
                       :content="content"
                       :couleur="brandColor" />
                     <RelatedRessources
-                      v-if="contentType === 'etape' && content.relatedRessources"
+                      v-if="contentType === 'etape' && content.relatedRessources.length"
                       :relatedRessources="content.relatedRessources"
                       :couleur="content.couleur || brandColor" />
                 </main>
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { watch, onMounted } from 'vue';
+import { watch, onMounted, nextTick } from 'vue';
 
 import { storeToRefs } from 'pinia';
 import { useContentStore } from '../stores/content';
@@ -104,7 +104,6 @@ import ModaleExergue from './components/parties/ModaleExergue.vue';
 import ModaleVideos from './components/parties/ModaleVideos.vue';
 import ModaleGallerie from './components/parties/ModaleGallerie.vue';
 import ModaleDocument from './components/parties/ModaleDocument.vue';
-import { getRelatedRessources } from '../utils/content/contentFetchUtils';
 
 const store = useContentStore();
 const mapState = useMapStore();
@@ -138,8 +137,9 @@ const handleMapMovement = () => {
     () => loading.value,
     () => {
         if (!loading.value) {
-          console.log('loading done');
           isModaleEtape = contentType.value === 'etape';
+          console.log(contentType.value);
+          
 
           // Define helper functions in variables
           const disableModaleTransition = () => {
@@ -158,7 +158,6 @@ const handleMapMovement = () => {
           };
 
           if (animationsAreEnabled.value) {
-
             if (isModaleEtape) {
               if (!wasModaleEtape) {
                 // national -> détail
@@ -181,8 +180,10 @@ const handleMapMovement = () => {
             }
           } else {
             if (isModaleEtape) {
+              // ? -> détail
               zoomToContentPlace();
             } else {
+              // ? -> national
               mapState.resetMap();
             }
             disableModaleTransition();
@@ -196,12 +197,38 @@ const handleMapMovement = () => {
   );
 };
 
+watch(() => contentType.value, () => {
+  if (contentType.value === '') {
+    handleMapLock(false);
+  } else {
+    handleMapLock(true);  
+  }
+});
+
+const handleMapLock = (shoudLock) => {
+  const checkAndExecute = () => {
+    const leafletLayer = document.querySelector('.leaflet-layer');
+    
+    if (leafletLayer) {
+      if (shoudLock) {
+        mapState.lockMap();
+      } else {
+        mapState.unlockMap();
+      }
+    } else {
+      setTimeout(checkAndExecute, 100);
+    }
+  }
+  checkAndExecute();
+}
+
 onMounted(() => {
-  console.log('modale mounted');
-  isModaleEtape = contentType.value === 'etape';
-  wasModaleEtape = isModaleEtape;
-  handleColorChange();
-  handleMapMovement();
+  nextTick(() => {
+    isModaleEtape = contentType.value === 'etape';
+    wasModaleEtape = isModaleEtape;
+    handleColorChange();
+    handleMapMovement();
+  });
 });
 </script>
 

web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue

@@ -129,27 +129,4 @@ watch(selectedType, async () => {
   opacity: 1;
   transform: translateY(0px);
 }
-
-.filters {
-    margin: 3rem 0;
-    margin-top: 5rem;
-    > .search-bar{
-        margin-right: 2rem;
-        border: solid 1px var(--couleur);
-        padding: 0.5rem 1rem;
-        border-radius: 1rem;
-        font-family: 'Marianne', sans-serif;
-    }
-    > select {
-        appearance: none;
-        border: solid 1px var(--couleur);
-        padding: 0.5rem 1rem;
-        font-family: 'Marianne', sans-serif;
-        border-radius: 1rem;
-        background-color: white;
-        background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='rgba(128, 200, 191)' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
-        background-position: calc(100% - 1rem) center !important;
-        padding-right: 2.5rem !important;
-    }
-}
 </style>

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

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { onMounted, defineExpose } from 'vue';
+import { onMounted } from 'vue';
 import router from '../../router/router';
 import { handleClickableElements } from '../../utils/handle-navigation.js';
 
@@ -35,7 +35,6 @@ onMounted(() => {
 
 const setClickableElements = () => {
     relatedItemCards = document.querySelector(`#ressource-${props.index}`);
-    console.log(relatedItemCards);
     handleClickableElements([relatedItemCards], store, router, baseUrl, siteName, mapStore);
 }
 

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDocument.vue

@@ -47,42 +47,4 @@ const props = defineProps({
         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>