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);
@@ -114,12 +121,22 @@ import { useContentStore } from './stores/content';
       const menuTitle = document.querySelector('#menu-title');
       const menuBurger = document.querySelector('#hamburger');
       const menuH2 = document.querySelector('#menu > h2');
-      menuButton.addEventListener('click', (e) => {
+      menuButton.addEventListener('click', (e) => { 
         // e.preventDefault();
-        menuContainer.classList.toggle('open');
-        menuTitle.classList.toggle('open');
-        menuBurger.classList.toggle('open');
-        menuH2.classList.toggle('open');
+        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

@@ -2,9 +2,9 @@ import { defineStore } from 'pinia';
 import REST from '../api/rest-axios';
 
 export const useContentStore = defineStore('content', {
-    state: () => ({
+  state: () => ({
+      href: '',
       etape: {
-        href: '',
         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,53 +1,58 @@
 <template>
-  <div v-if="etape.etape_number">
-    <header>
-      <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
-      <h2>{{etape.title}}</h2>
+  <Transition>
+    <div v-if="etape.etape_number">
+      <header>
+        <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
+        <h2>{{etape.title}}</h2>
+        <div>
+          <p>Étape n°{{etape.etape_number}}</p>
+          <p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
+        </div>
+        <img :src="etape.vignette.url" :alt="etape.vignette.alt">
+      </header>
+      <main>
+        <div v-for="partie in etape.parties">
+          <h3 v-html="partie.title"></h3>
+          <p v-html="partie.text"></p>
+        </div>
+      </main>
+  
+  
+  
+  
+  <!--     
+      <div v-if="loading">Loading...</div>
+      <div v-if="error">{{ error }}</div>
+   -->
+  
+      <div><pre>{{href}}</pre></div>
+  
+      
+      <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
+      <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
+      <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
+      <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
+      <div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
+  
+  
       <div>
-        <p>Étape n°{{etape.etape_number}}</p>
-        <p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
       </div>
-      <img :src="etape.vignette.url" :alt="etape.vignette.alt">
-    </header>
-    <main>
-      <div v-for="partie in etape.parties">
-        <h3 v-html="partie.title"></h3>
-        <p v-html="partie.text"></p>
-      </div>
-    </main>
-
-
-
-
-<!--     
-    <div v-if="loading">Loading...</div>
-    <div v-if="error">{{ error }}</div>
- -->
-
-    <div><pre>{{etape.href}}</pre></div>
-
-    
-    <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
-    <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
-    <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
-    <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
-    <div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
-
-
-    <div>
     </div>
-  </div>
-  <div v-if="page.title">
-    <header>
-      <h1>{{ page.title }}</h1>
-    </header>
-    <main>
-      <div v-html="page.text"></div>
-    </main>
-  </div>
+  </Transition>
+  <Transition>
+    <div v-if="page.title">
+      <header>
+        <h1>{{ page.title }}</h1>
+      </header>
+      <main>
+        <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);
-</script>
+
+  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;
+        }
       }
     }
   }