From 03840a20ba840c94f3c749afe8e76309f551761b Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 25 Nov 2024 23:19:34 +0100 Subject: [PATCH] animation toggle in etape list on mobile, correction display etape list --- .../caravane/assets/js/stores/content.js | 7 ++-- .../caravane/assets/js/stores/layout.js | 34 ++++++++++--------- .../caravane/assets/js/utils/layout-setup.js | 24 +++++++------ .../custom/caravane/assets/scss/main.scss | 7 ++-- ...-view-field--block-1--etape-list.html.twig | 9 +++-- 5 files changed, 46 insertions(+), 35 deletions(-) diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js index 72154d1..12a8c9e 100644 --- a/web/themes/custom/caravane/assets/js/stores/content.js +++ b/web/themes/custom/caravane/assets/js/stores/content.js @@ -58,8 +58,6 @@ export const useContentStore = defineStore('content', { } } } else { - console.log("partenaires"); - // pour les pages partenaires rawContent = await REST.get('/rest/partenaires/'); contentType = type; @@ -228,7 +226,6 @@ export const useContentStore = defineStore('content', { // est peut-être plus lisible que fetchFromRelationships } else if (this.contentType === 'partenaires') { - console.log(rawContent); this.content.contentTitle = "Partenaires"; const partenairesArray = []; for (let partenaire of rawContent.data) { @@ -285,7 +282,9 @@ export const useContentStore = defineStore('content', { } } } - + // TODO : + // get the ordered view from here + // /jsonapi/views/etapes/block_1?views-argument%5B0%5D=all&views-argument%5B1%5D=all const orderedEtapesList = document.querySelectorAll('#etapes-liste li'); if (orderedEtapesList) { for (let li of orderedEtapesList) { diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index 3a00302..4d1f397 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/web/themes/custom/caravane/assets/js/stores/layout.js @@ -15,8 +15,9 @@ export const useLayoutStore = defineStore('layout', { }) this.isEtapeListRetracted = this.isDesktop ? false : true; }, - collapseEtapeListe(listeEtape) { + collapseEtapeListe(listeEtape, animationToggle) { listeEtape.classList.add('retracted'); + animationToggle.classList.add('hidden'); setTimeout(() => { listeEtape.closest('.layout__region').classList.add('retracted'); listeEtape.nextElementSibling.classList.add('retracted'); @@ -24,10 +25,11 @@ export const useLayoutStore = defineStore('layout', { }, 300); this.isEtapeListRetracted = true; }, - expandEtapeListe(listeEtape) { + expandEtapeListe(listeEtape, animationToggle) { listeEtape.closest('.layout__region').classList.remove('retracted'); listeEtape.nextElementSibling.classList.remove('retracted'); listeEtape.classList.remove('disapeared'); + animationToggle.classList.remove('hidden'); setTimeout(() => { listeEtape.classList.remove('retracted'); }, 300); @@ -37,6 +39,8 @@ export const useLayoutStore = defineStore('layout', { const menuTitle = document.querySelector('#menu-title'); const menuH2 = document.querySelector('#menu > h2'); + menuContainer.style.display = 'none'; + menuBurger.addEventListener('click', (e) => { this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2); }); @@ -61,20 +65,18 @@ export const useLayoutStore = defineStore('layout', { toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) { setTimeout(() => { if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; - menuContainer.classList.toggle('open'); - menuTitle.classList.toggle('open'); - menuBurger.classList.toggle('open'); - menuH2.classList.toggle('open'); - // console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen); - console.log(this.isHamburgerMenuOpen); - if (this.isHamburgerMenuOpen) { - setTimeout(() => { - menuContainer.style.display = 'none'; - }, 300); - } - console.log('TOGGLE', this.isHamburgerMenuOpen); - console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen); - this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen; + setTimeout(() => { + menuContainer.classList.toggle('open'); + menuTitle.classList.toggle('open'); + menuBurger.classList.toggle('open'); + menuH2.classList.toggle('open'); + if (this.isHamburgerMenuOpen) { + setTimeout(() => { + menuContainer.style.display = 'none'; + }, 300); + } + this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen; + }, 50); }, 50); } }, diff --git a/web/themes/custom/caravane/assets/js/utils/layout-setup.js b/web/themes/custom/caravane/assets/js/utils/layout-setup.js index dcceffd..47558aa 100644 --- a/web/themes/custom/caravane/assets/js/utils/layout-setup.js +++ b/web/themes/custom/caravane/assets/js/utils/layout-setup.js @@ -9,34 +9,36 @@ export function handleReactiveness() { const listeEtape = document.querySelector('#etapes-liste'); - if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore); + const animationToggle = document.querySelector('#animation-toggle'); + + if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle); window.addEventListener('resize', () => { if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) { - layoutStore.expandEtapeListe(listeEtape, layoutStore); + layoutStore.expandEtapeListe(listeEtape, animationToggle); } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) { - layoutStore.collapseEtapeListe(listeEtape, layoutStore); + layoutStore.collapseEtapeListe(listeEtape, animationToggle); } }); - listeToggleButton.addEventListener('click', () => { + listeToggleButton.addEventListener('click', () => { if (!layoutStore.isDesktop) { if (!layoutStore.isEtapeListRetracted) { - layoutStore.collapseEtapeListe(listeEtape, layoutStore); + layoutStore.collapseEtapeListe(listeEtape, animationToggle); } else { - layoutStore.expandEtapeListe(listeEtape, layoutStore); + layoutStore.expandEtapeListe(listeEtape, animationToggle); } - } + } }); })(); - + } export function setMenuToggle() { const layoutStore = useLayoutStore(); const menuBurger = document.querySelector('#hamburger'); const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul'); - + layoutStore.setUpHamburgerToggle(menuBurger, menuContainer); } @@ -48,8 +50,8 @@ export function setHamburgerWhenLogged(drupalSettings) { const header = document.querySelector('.dialog-off-canvas-main-canvas'); const headerTop = header.getBoundingClientRect().top; - menuTitle.style.top = `${headerTop}px`; + menuTitle.style.top = `${headerTop}px`; menuBurger.style.top = `${headerTop}px`; menuContainer.style.paddingTop = `${headerTop}px`; } -} \ 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 aa287f4..790827a 100644 --- a/web/themes/custom/caravane/assets/scss/main.scss +++ b/web/themes/custom/caravane/assets/scss/main.scss @@ -1239,6 +1239,10 @@ body{ @media screen and (min-width: $desktop-min-width) { z-index: 5; } + transition: opacity 0.3s ease-out; + &.hidden { + opacity: 0; + } > div { cursor: pointer; position: fixed; @@ -1247,11 +1251,10 @@ body{ z-index: 999; display: flex; align-items: center; - padding: 0.4rem 1.2rem; + padding: 0.1rem 1.2rem; border-radius: 10rem; background-color: white; transition: background-color 0.3s ease-out; - > div { margin-right: 1rem; > p { diff --git a/web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig b/web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig index cd9d67f..7cbc8ad 100644 --- a/web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig +++ b/web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig @@ -29,7 +29,12 @@ {% else %} {% set split_output = output|split('>') %}

- {{- split_output[0]|raw -}}> - {{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}> + {% if split_output|length == 7 %} + {{- output -}} + {% else %} + {{- split_output[0]|raw -}}> + {# non breaking hyphen #} + {{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}> + {% endif %}

{% endif %}