toggle animations

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

@@ -0,0 +1,37 @@
+<template>
+  <div @click="handleClick" class="animation-toggle-container">
+    <div><p>Activer les animations</p></div>
+    <label class="switch">
+      <input type="checkbox" v-model="animationsAreEnabled"  @click.stop @change="toggleAnimation" />
+      <span class="slider round"></span>
+    </label>
+  </div>
+</template>
+
+<script>
+
+import { useMapStore } from '../stores/map';
+import { storeToRefs } from 'pinia';
+
+export default {
+  setup() {
+    const mapStore = useMapStore();
+
+    const { animationsAreEnabled } = storeToRefs(mapStore);
+
+    const toggleAnimation = () => {
+      mapStore.toggleAnimation();
+    };
+
+    const handleClick = () => {
+      toggleAnimation();
+    };
+
+    return {
+      handleClick,
+      toggleAnimation,
+      animationsAreEnabled,
+    };
+  },
+};
+</script>

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

@@ -1,5 +1,8 @@
 <template>
-    <Transition>
+    <Transition
+      :enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
+      :leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
+    >
         <div v-if="!loading && (contentType === 'etape' || contentType === 'static')">
             <div class="content-wrapper">
                 <ModaleHeader
@@ -8,8 +11,8 @@
                     :couleur="content.couleur || brandColor" />
                 <main>
                     <div v-for="partie in content.parties" class="partie">
-                        <ModaleCarteSensible 
-                            v-if="partie.type === 'carte_sensible'" 
+                        <ModaleCarteSensible
+                            v-if="partie.type === 'carte_sensible'"
                             :partie="partie" />
                         <ModaleTitreTexte
                             v-if="partie.type === 'titre_texte'"
@@ -78,10 +81,10 @@ const {
     contentType,
     content,
     loading,
-    error, 
+    error,
 } = storeToRefs(store);
 
-const { map, duration } = storeToRefs(mapState);
+const { defaultMapCenter, animationDuration, animationsAreEnabled } = storeToRefs(mapState);
 
 let isModaleEtape, wasModaleEtape;
 
@@ -90,10 +93,10 @@ const brandColor = "#80c8bf";
 const handleColorChange = () => {
   watch(
     () => content.value.couleur,
-    () => {    
+    () => {
         if (contentType.value === 'etape' && content.value.couleur) {
             document.documentElement.style.setProperty('--etape-couleur', content.value.couleur || brandColor);
-        }   
+        }
     }
   );
 };
@@ -103,33 +106,59 @@ const handleMapMovement = () => {
     () => loading.value,
     () => {
         if (!loading.value) {
-            isModaleEtape = contentType.value === 'etape';            
-            
-            if (!wasModaleEtape && isModaleEtape) {
-                // national -> détail
-                document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`);
-                mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon);
-            } else if (wasModaleEtape && isModaleEtape) { 
-                // détail -> détail
-                document.documentElement.style.setProperty('--modale-leave-delay', 0);
-                document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value * 2}s`);
-                mapState.resetMap(map.value);
-                setTimeout(() => {
-                mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon);
-                }, duration.value * 1000);
-    
-            } else if (wasModaleEtape && !isModaleEtape) { 
-                // détail -> national
-                document.documentElement.style.setProperty('--modale-leave-delay', 0);
-                document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`);
-                mapState.resetMap();
-            } else if (!wasModaleEtape && !isModaleEtape) {
-                // national -> national
-                console.log('national -> national');
-                document.documentElement.style.setProperty('--modale-leave-delay', 0);
-                document.documentElement.style.setProperty('--modale-enter-delay', '0.5s');
+            isModaleEtape = contentType.value === 'etape';
+
+            // Define helper functions in variables
+            const disableModaleTransition = () => {
+              document.documentElement.style.setProperty('margin-top', '0');
+              document.documentElement.style.setProperty('transition', 'none');
             }
-    
+            const setModaleTransition = (enterDelay) => {
+              document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
+            };
+
+            const zoomToContentPlace = () => {
+              mapState.zoomToPlace(
+                content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
+                content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
+              );
+            };
+
+            if (animationsAreEnabled.value) {
+
+              if (isModaleEtape) {
+                if (!wasModaleEtape) {
+                  console.log('national -> détail');
+                  setModaleTransition(animationDuration.value);
+                  zoomToContentPlace();
+                } else {
+                  console.log('détail -> détail');
+                  setModaleTransition(animationDuration.value);
+                  //mapState.resetMap();
+                  zoomToContentPlace();
+                  //setTimeout(zoomToContentPlace, animationDuration.value * 1000);
+                }
+              } else {
+                if (wasModaleEtape) {
+                  console.log('détail -> national');
+                  setModaleTransition(animationDuration.value);
+                  mapState.resetMap();
+                } else {
+                  console.log('national -> national');
+                  setModaleTransition(0);
+                }
+              }
+            } else {
+              if (isModaleEtape) {
+                zoomToContentPlace();
+              } else {
+                mapState.resetMap();
+              }
+              disableModaleTransition();
+            }
+
+            scrollTo(0, 0);
+
             wasModaleEtape = isModaleEtape;
         }
     },
@@ -138,7 +167,7 @@ const handleMapMovement = () => {
 
 onMounted(() => {
     isModaleEtape = contentType.value === 'etape';
-    wasModaleEtape = isModaleEtape;    
+    wasModaleEtape = isModaleEtape;
     handleColorChange();
     handleMapMovement();
 });
@@ -150,7 +179,7 @@ onMounted(() => {
 }
 
 .v-leave-active {
-    transition: margin-top 0.5s ease-in var(--modale-leave-delay);
+  transition: margin-top 0.5s ease-in;
 }
 
 .v-enter-from,
@@ -160,6 +189,12 @@ onMounted(() => {
 
 .v-enter-to,
 .v-leave-from {
-    margin-top: 0vh;
+  margin-top: 0vh;
 }
-</style>
+
+/* This class will disable transitions */
+.no-transition {
+  margin-top: 0 !important;
+  transition: none !important;
+}
+</style>

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

@@ -3,9 +3,9 @@
         <div class="brand-pattern pattern-bottom" :style="{ backgroundColor: couleur }">
             <div class="pattern"></div>
         </div>
-    
+
         <div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
-            <div v-if="content.previous" class="card previous" @click="displayRelatedElement(content.previous.url)">
+            <div v-if="content.previous" class="card previous" @click="clickRelatedElement(content.previous.url)">
                 <div class="icon">
                     <div :style="{ backgroundColor: content.previous.couleur }"></div>
                     <div :style="{ backgroundColor: content.previous.couleur }"></div>
@@ -21,7 +21,7 @@
                     </div>
                 </div>
             </div>
-            <div v-if="content.next" class="card next" @click="displayRelatedElement(content.next.url)">
+            <div v-if="content.next" class="card next" @click="clickRelatedElement(content.next.url)">
                 <div class="icon">
                     <div :style="{ backgroundColor: content.next.couleur }"></div>
                     <div :style="{ backgroundColor: content.next.couleur }"></div>
@@ -57,10 +57,19 @@ const props = defineProps({
 
 async function displayRelatedElement(href) {
     const baseUrl = window.location.protocol + "//" + window.location.host;
-    if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');  
+    if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
 
     router.push(href);
     await store.fetchContentData(baseUrl + href);
     document.title = store.pageTitle;
 }
-</script>
+
+import { setActiveNavItem } from '../../utils/set-active-nav-item.js';
+
+function clickRelatedElement(href) {
+  const baseUrl = window.location.protocol + "//" + window.location.host;
+  if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
+  setActiveNavItem('etape', href);
+  displayRelatedElement(href);
+}
+</script>