From a05f81c2d91fd1188176c7a0fe09edb281ea321e Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 31 Jul 2024 02:13:40 +0200 Subject: [PATCH] =?UTF-8?q?transition=20modale=20et=20d=C3=A9but=20history?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/themes/custom/caravane/assets/js/main.js | 31 +++-- .../caravane/assets/js/stores/content.js | 12 +- .../caravane/assets/js/vuejs/Modale.vue | 118 +++++++++++------- .../custom/caravane/assets/scss/main.scss | 6 +- 4 files changed, 109 insertions(+), 58 deletions(-) diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js index beb63cd..62f07cc 100644 --- a/web/themes/custom/caravane/assets/js/main.js +++ b/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'); + } }) } diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js index de7e5cd..32d1ce9 100644 --- a/web/themes/custom/caravane/assets/js/stores/content.js +++ b/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) { diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue index 6dab920..a7d3ed7 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue @@ -1,53 +1,58 @@ \ No newline at end of file + + watch(() => href.value, (newHref) => { + if (newHref) { + history.pushState(null, '', newHref); + } + }); + + + \ No newline at end of file diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss index 7554bf1..78c04e0 100644 --- a/web/themes/custom/caravane/assets/scss/main.scss +++ b/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; + } } } }