toggle animations

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

@@ -10,23 +10,32 @@ export const useMapStore = defineStore('mapState', {
         currentPlace: Object,
         maxZoom: Number,
         currentZoom: Number,
-        duration: 3,
+        animationsAreEnabled: true,
+        animationDuration: 3,
     }),
     actions: {
         zoomToPlace(lat, long) {
             if (useLayoutStore().isDesktop) long = long - 0.03;
-            this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
+            this.map.flyTo(
-            this.currentZoom = this.maxZoom;            
+              [lat, long],
+              this.maxZoom,
+              { animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
+            this.currentZoom = this.maxZoom;
         },
         resetMap() {
-            this.map.flyTo(this.defaultMapCenter, useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile, { duration: this.duration });
+          console.log(this.defaultMapCenter);
+
+            this.map.flyTo(
+              this.defaultMapCenter,
+              useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
+              { animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
             this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
         },
         lockMap() {
             setTimeout(() => {
                 this.map.options.minZoom = this.currentZoom;
                 this.map.options.maxZoom = this.currentZoom;
-            }, this.duration * 1000 + 100);
+            }, this.animationDuration * 1000 + 100);
             this.map.dragging.disable();
             this.map.touchZoom.disable();
             this.map.doubleClickZoom.disable();
@@ -34,17 +43,28 @@ export const useMapStore = defineStore('mapState', {
             this.map.boxZoom.disable();
             this.map.keyboard.disable();
             // map.tap.disable();
-          },
+        },
-          unlockMap() {
+        unlockMap() {
-            this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
+          this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
-            this.map.options.maxZoom = this.maxZoom;
+          this.map.options.maxZoom = this.maxZoom;
-            this.map.dragging.enable();
+          this.map.dragging.enable();
-            this.map.touchZoom.enable();
+          this.map.touchZoom.enable();
-            this.map.doubleClickZoom.enable();
+          this.map.doubleClickZoom.enable();
-            this.map.scrollWheelZoom.enable();
+          this.map.scrollWheelZoom.enable();
-            this.map.boxZoom.enable();
+          this.map.boxZoom.enable();
-            this.map.keyboard.enable();
+          this.map.keyboard.enable();
-            // map.tap.enable();
+          // map.tap.enable();
-          },
+        },
+        toggleAnimation() {
+            this.animationsAreEnabled = !this.animationsAreEnabled;
+        },
+        checkReducedMotion() {
+          const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+          this.animationsAreEnabled = !mediaQuery.matches;
+
+          mediaQuery.addEventListener('change', (event) => {
+            this.animationsAreEnabled = !event.matches;
+          });
+        },
     },
-});
+});

web/themes/custom/caravane/assets/js/utils/set-active-nav-item.js

@@ -1,7 +1,7 @@
 export function setActiveNavItem(contentType, href) {
     const staticNavItems = document.querySelectorAll('#menu > ul > li > a');
     const etapeNavItems = document.querySelectorAll('#etapes-liste li a');
-    
+
     for (let item of staticNavItems) {
         item.classList.remove('is-active');
     }
@@ -15,7 +15,7 @@ export function setActiveNavItem(contentType, href) {
         for (let item of etapeNavItems) {
             item.closest('li').classList.remove('inactive');
         }
-    
+
     } else {
         if (contentType === 'static') {
             for (let item of staticNavItems) {
@@ -32,4 +32,4 @@ export function setActiveNavItem(contentType, href) {
         }
     }
 
-}
+}

web/themes/custom/caravane/assets/js/utils/vue-setup.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import router from '../router/router';
 import Modale from '../vuejs/Modale.vue';
+import AnimationToggle from '../vuejs/AnimationToggle.vue';
 import VueImageZoomer from 'vue-image-zoomer';
 import 'vue-image-zoomer/dist/style.css';
 
@@ -9,14 +10,20 @@ import { useContentStore } from '../stores/content';
 import { useMapStore } from '../stores/map';
 
 export function initVueContentModale() {
+    const pinia = createPinia();
+
     const app = createApp(Modale)
-        .use(createPinia())
+      .use(pinia)
-        .use(router)
+      .use(router)
-        .use(VueImageZoomer);
+      .use(VueImageZoomer);
 
     const store = useContentStore();
     const mapStore = useMapStore();
-    app.mount('#content-modale');    
+    app.mount('#content-modale');
+
+    const animationToggle = createApp(AnimationToggle)
+      .use(pinia)
+      .mount('#animation-toggle');
 
   return { store, mapStore, router };
-}
+}

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 
+                        <ModaleCarteSensible
-                            v-if="partie.type === 'carte_sensible'" 
+                            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';            
+            isModaleEtape = contentType.value === 'etape';
-            
+
-            if (!wasModaleEtape && isModaleEtape) {
+            // Define helper functions in variables
-                // national -> détail
+            const disableModaleTransition = () => {
-                document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`);
+              document.documentElement.style.setProperty('margin-top', '0');
-                mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon);
+              document.documentElement.style.setProperty('transition', 'none');
-            } 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');
             }
-    
+            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>

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

@@ -63,7 +63,7 @@ body{
           display: flex;
           align-items: center;
           @media screen and (min-width: $desktop-min-width) {
-            grid-column: 1 / span 1;            
+            grid-column: 1 / span 1;
           }
           > div > div > a > img {
             width: 100%;
@@ -76,7 +76,7 @@ body{
           align-items: center;
           padding-right: 2.5rem;
           @media screen and (min-width: $desktop-min-width) {
-            grid-column: 2 / span 2;            
+            grid-column: 2 / span 2;
           }
           > div > div > a > img {
             width: 100%;
@@ -90,7 +90,7 @@ body{
           display: flex;
           align-items: center;
           @media screen and (min-width: $desktop-min-width) {
-            grid-column: 8 / span 2;            
+            grid-column: 8 / span 2;
           }
           > div > div > a > img {
             width: 100%;
@@ -296,7 +296,7 @@ body{
               > div {
                 pointer-events: auto;
               }
-            } 
+            }
             > .layout__region--second {
               position: fixed;
               z-index: 1;
@@ -404,7 +404,7 @@ body{
                       flex-direction: column;
                       justify-content: center;
                       align-items: center;
- */                      
+ */
                       padding-top: 10px;
                       padding-left: 20px;
                       padding-right: 20px;
@@ -597,6 +597,7 @@ body{
                     margin: 30px 0;
                     transform: scale(1);
                     opacity: 1;
+                    padding-right: 0.5rem;
                     transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                     cursor: pointer;
                     > .infos-arret {
@@ -625,7 +626,7 @@ body{
                           text-align: right;
                           @media screen and (min-width: $desktop-min-width) {
                             font-size: $m-font-size-desktop;
-                          }                          
+                          }
                         }
                       }
                       > .views-field-field-adresse-postal-code {
@@ -647,7 +648,7 @@ body{
                             content: ')';
                           }
                         }
-                        
+
                       }
                       > .views-field-field-dates {
                         grid-column: 1 / span 2;
@@ -821,7 +822,7 @@ body{
                           @media screen and (min-width: $tablet-min-width) {
                             width: calc($modale-width-mobile - $modale-x-padding * 6);
                             margin-left: $modale-x-padding * 3;
-                            
+
                           }
                           @media screen and (min-width: $desktop-min-width) {
                             width: calc($modale-width-desktop - $modale-x-padding * 4);
@@ -960,7 +961,7 @@ body{
                           > .description {
                               width: 100%;
                               margin-top: 1rem;
-                              @media screen and (min-width: $desktop-min-width) {                        
+                              @media screen and (min-width: $desktop-min-width) {
                                 width: calc(100% - 6rem);
                                 margin-top: 0;
                               }
@@ -1178,6 +1179,75 @@ body{
                 }
               }
             }
+            > #animation-toggle > div {
+              cursor: pointer;
+              position: fixed;
+              bottom: $body-margin-bottom;
+              right: $body-margin-x;
+              z-index: 999;
+              display: flex;
+              align-items: center;
+              padding: 0.4rem 1.2rem;
+              border-radius: 10rem;
+              background-color: white;
+              transition: background-color 0.3s ease-out;
+
+              > div {
+                margin-right: 1rem;
+                > p {
+                  font-size: $sm-font-size-mobile;
+                  @media screen and (min-width: $desktop-min-width) {
+                    font-size: $sm-font-size-desktop;
+                  }
+                }
+              }
+              > .switch {
+                position: relative;
+                display: inline-block;
+                width: 2.2rem;
+                height: 1.2rem;
+                > input {
+                  opacity: 0;
+                  width: 0;
+                  height: 0;
+                  &:checked + .slider {
+                    background-color: $brand-color;
+                  }
+                  &:focus + .slider {
+                    box-shadow: 0 0 1px $brand-color;
+                  }
+                  &:checked + .slider::before {
+                    -webkit-transform: translateX(1rem);
+                    -ms-transform: translateX(1rem);
+                    transform: translateX(1rem);
+                  }
+                }
+                > .slider {
+                  position: absolute;
+                  cursor: pointer;
+                  top: 0;
+                  left: 0;
+                  right: 0;
+                  bottom: 0;
+                  border-radius: 34px;
+                  background-color: $main-color-light;
+                  -webkit-transition: .4s;
+                  transition: .4s;
+                  &::before {
+                    position: absolute;
+                    content: "";
+                    height: 1rem;
+                    width: 1rem;
+                    border-radius: 50%;
+                    left: 0.1rem;
+                    bottom: 0.1rem;
+                    background-color: $light-color;
+                    -webkit-transition: .4s;
+                    transition: .4s;
+                  }
+                }
+              }
+            }
           }
           > .user-login-form {
             height: 90vh;
@@ -1192,5 +1262,5 @@ body{
         }
       }
     }
-  } 
+  }
-}
+}

web/themes/custom/caravane/templates/layout--threecol-25-50-25.html.twig

@@ -52,5 +52,6 @@
       </div>
     {% endif %}
     <div id="content-modale"></div>
+    <div id="animation-toggle"></div>
   </div>
 {% endif %}