transition modale et début history

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

@@ -61,11 +61,18 @@ import { useContentStore } from './stores/content';
       
       let a = e.currentTarget;
       let nid = a.dataset.nodeNid;
-      console.log(nid);
+      // console.log(nid);
 
+      let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
+      for (let field of general_link_fields) {
+        if (field.classList.contains('is-active')) {
+          field.classList.remove('is-active');
+        }
+      }
       if (category === 'etape') {
         store.fetchEtapeData(nid);
       } else if (category === 'static') {
+        e.currentTarget.classList.add('is-active');
         store.fetchStaticData(nid);
       }
 
@@ -73,7 +80,7 @@ import { useContentStore } from './stores/content';
     }
 
     function processStaticLinks(store){
-      let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
+      let general_link_fields = document.querySelectorAll('#menu > ul > li:not(:first-of-type) > a');
       for (let field of general_link_fields) {
         let general_link_href = field.getAttribute('href');
         const nid = general_link_href.charAt(general_link_href.length-1);
@@ -116,10 +123,20 @@ import { useContentStore } from './stores/content';
       const menuH2 = document.querySelector('#menu > h2');
       menuButton.addEventListener('click', (e) => { 
         // e.preventDefault();
+        setTimeout(() => {
           menuContainer.classList.toggle('open');
           menuTitle.classList.toggle('open');
           menuBurger.classList.toggle('open');
           menuH2.classList.toggle('open');
+        }, 50);
+      })
+      document.addEventListener('click', (e) => {
+        if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
+          menuContainer.classList.remove('open');
+          menuTitle.classList.remove('open');
+          menuBurger.classList.remove('open');
+          menuH2.classList.remove('open');  
+        }
       })
     }
     

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

@@ -3,8 +3,8 @@ import REST from '../api/rest-axios';
 
 export const useContentStore = defineStore('content', {
   state: () => ({
-      etape: {
       href: '',
+      etape: {
         title: '',
         adresse: {},
         etape_number: '',
@@ -17,7 +17,6 @@ export const useContentStore = defineStore('content', {
         vignette: {},
       },
       page: {
-        href: '',
         title: '', 
         text: '',
       },
@@ -28,6 +27,7 @@ export const useContentStore = defineStore('content', {
       async fetchEtapeData(nid) {
         this.loading = true;
         this.error = null;
+        this.etape = {};
         this.page = {};
         try {
           const response = await REST.get(`/jsonapi/node/etape/`);
@@ -35,7 +35,7 @@ export const useContentStore = defineStore('content', {
             if (etape.attributes.drupal_internal__nid == nid) {
               for (let metatag of etape.attributes.metatag) {
                 if (metatag.tag === "link") {
-                  this.etape.href = metatag.attributes.href;
+                  this.href = metatag.attributes.href;
                 }
               }
               this.etape.title = etape.attributes.title;
@@ -69,6 +69,7 @@ export const useContentStore = defineStore('content', {
         this.loading = true;
         this.error = null;
         this.etape = {};
+        this.page = {};
         try {
           const response = await REST.get(`/jsonapi/node/static/`);
           for (let staticContent of response.data.data) {
@@ -78,11 +79,10 @@ export const useContentStore = defineStore('content', {
                   this.page.title = item.attributes.content;
                 }
                 if (item.tag === 'link') {
-                  this.page.href = item.attributes.href;
+                  this.href = item.attributes.href;
                 }
               })
               this.page.text = staticContent.attributes.field_texte.value;
-              console.log(this.page.title, this.page.href, this.page.text); 
             }
           }
         } catch (error) {

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

@@ -1,4 +1,5 @@
 <template>
+  <Transition>
     <div v-if="etape.etape_number">
       <header>
         <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
@@ -19,12 +20,12 @@
   
   
   
-<!--     
+  <!--     
       <div v-if="loading">Loading...</div>
       <div v-if="error">{{ error }}</div>
    -->
   
-    <div><pre>{{etape.href}}</pre></div>
+      <div><pre>{{href}}</pre></div>
   
       
       <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
@@ -37,6 +38,8 @@
       <div>
       </div>
     </div>
+  </Transition>
+  <Transition>
     <div v-if="page.title">
       <header>
         <h1>{{ page.title }}</h1>
@@ -45,9 +48,11 @@
         <div v-html="page.text"></div>
       </main>
     </div>
+  </Transition>
 </template>
 
 <script setup>
+  import { watch } from 'vue';
   import { storeToRefs } from 'pinia';
   import { useContentStore } from '../stores/content';
 
@@ -55,8 +60,33 @@
 
   const { 
     loading, error,
+    href,
     etape,
     page,
 
   } = storeToRefs(store);
+
+  watch(() => href.value, (newHref) => {
+    if (newHref) {
+      history.pushState(null, '', newHref);
+    }
+  });
 </script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.v-leave-from {
+  transform: translateY(0%);
+  opacity: 1;
+}
+</style>

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

@@ -285,11 +285,15 @@ body{
         top: 15vh;
         left: 25vw;
         width: 50vw;
-        background-color: rgba(255,255,255,0.5);
+        background-color: white;
         img {
           width: 100%;
           height: auto;
         }
+        > div {
+          width: 100%;
+          overflow: hidden;
+        }
       }
     }
   }