bachir
/
drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation toggle in etape list on mobile, correction display etape list

This commit is contained in:
Valentin 2024-11-25 23:19:34 +01:00
parent e346f103e1
commit 03840a20ba
5 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -58,8 +58,6 @@ export const useContentStore = defineStore('content', {
} }
} }
} else { } else {
console.log("partenaires");
// pour les pages partenaires // pour les pages partenaires
rawContent = await REST.get('/rest/partenaires/'); rawContent = await REST.get('/rest/partenaires/');
contentType = type; contentType = type;
@ -228,7 +226,6 @@ export const useContentStore = defineStore('content', {
// est peut-être plus lisible que fetchFromRelationships // est peut-être plus lisible que fetchFromRelationships
} else if (this.contentType === 'partenaires') { } else if (this.contentType === 'partenaires') {
console.log(rawContent);
this.content.contentTitle = "Partenaires"; this.content.contentTitle = "Partenaires";
const partenairesArray = []; const partenairesArray = [];
for (let partenaire of rawContent.data) { 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'); const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
if (orderedEtapesList) { if (orderedEtapesList) {
for (let li of orderedEtapesList) { for (let li of orderedEtapesList) {

14
web/themes/custom/caravane/assets/js/stores/layout.js
View File

@ -15,8 +15,9 @@ export const useLayoutStore = defineStore('layout', {
}) })
this.isEtapeListRetracted = this.isDesktop ? false : true; this.isEtapeListRetracted = this.isDesktop ? false : true;
}, },
collapseEtapeListe(listeEtape) { collapseEtapeListe(listeEtape, animationToggle) {
listeEtape.classList.add('retracted'); listeEtape.classList.add('retracted');
animationToggle.classList.add('hidden');
setTimeout(() => { setTimeout(() => {
listeEtape.closest('.layout__region').classList.add('retracted'); listeEtape.closest('.layout__region').classList.add('retracted');
listeEtape.nextElementSibling.classList.add('retracted'); listeEtape.nextElementSibling.classList.add('retracted');
@ -24,10 +25,11 @@ export const useLayoutStore = defineStore('layout', {
}, 300); }, 300);
this.isEtapeListRetracted = true; this.isEtapeListRetracted = true;
}, },
expandEtapeListe(listeEtape) { expandEtapeListe(listeEtape, animationToggle) {
listeEtape.closest('.layout__region').classList.remove('retracted'); listeEtape.closest('.layout__region').classList.remove('retracted');
listeEtape.nextElementSibling.classList.remove('retracted'); listeEtape.nextElementSibling.classList.remove('retracted');
listeEtape.classList.remove('disapeared'); listeEtape.classList.remove('disapeared');
animationToggle.classList.remove('hidden');
setTimeout(() => { setTimeout(() => {
listeEtape.classList.remove('retracted'); listeEtape.classList.remove('retracted');
}, 300); }, 300);
@ -37,6 +39,8 @@ export const useLayoutStore = defineStore('layout', {
const menuTitle = document.querySelector('#menu-title'); const menuTitle = document.querySelector('#menu-title');
const menuH2 = document.querySelector('#menu > h2'); const menuH2 = document.querySelector('#menu > h2');
menuContainer.style.display = 'none';
menuBurger.addEventListener('click', (e) => { menuBurger.addEventListener('click', (e) => {
this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2); this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2);
}); });
@ -61,21 +65,19 @@ export const useLayoutStore = defineStore('layout', {
toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) { toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) {
setTimeout(() => { setTimeout(() => {
if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
setTimeout(() => {
menuContainer.classList.toggle('open'); menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open'); menuTitle.classList.toggle('open');
menuBurger.classList.toggle('open'); menuBurger.classList.toggle('open');
menuH2.classList.toggle('open'); menuH2.classList.toggle('open');
// console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
console.log(this.isHamburgerMenuOpen);
if (this.isHamburgerMenuOpen) { if (this.isHamburgerMenuOpen) {
setTimeout(() => { setTimeout(() => {
menuContainer.style.display = 'none'; menuContainer.style.display = 'none';
}, 300); }, 300);
} }
console.log('TOGGLE', this.isHamburgerMenuOpen);
console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen; this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
}, 50); }, 50);
}, 50);
} }
}, },
}) })

12
web/themes/custom/caravane/assets/js/utils/layout-setup.js
View File

@ -9,22 +9,24 @@ export function handleReactiveness() {
const listeEtape = document.querySelector('#etapes-liste'); 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', () => { window.addEventListener('resize', () => {
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) { if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
layoutStore.expandEtapeListe(listeEtape, layoutStore); layoutStore.expandEtapeListe(listeEtape, animationToggle);
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) { } 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.isDesktop) {
if (!layoutStore.isEtapeListRetracted) { if (!layoutStore.isEtapeListRetracted) {
layoutStore.collapseEtapeListe(listeEtape, layoutStore); layoutStore.collapseEtapeListe(listeEtape, animationToggle);
} else { } else {
layoutStore.expandEtapeListe(listeEtape, layoutStore); layoutStore.expandEtapeListe(listeEtape, animationToggle);
} }
} }
}); });

7
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -1239,6 +1239,10 @@ body{
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
z-index: 5; z-index: 5;
} }
transition: opacity 0.3s ease-out;
&.hidden {
opacity: 0;
}
> div { > div {
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
@ -1247,11 +1251,10 @@ body{
z-index: 999; z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.4rem 1.2rem; padding: 0.1rem 1.2rem;
border-radius: 10rem; border-radius: 10rem;
background-color: white; background-color: white;
transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;
> div { > div {
margin-right: 1rem; margin-right: 1rem;
> p { > p {

5
web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig
View File

@ -29,7 +29,12 @@
{% else %} {% else %}
{% set split_output = output|split('>') %} {% set split_output = output|split('>') %}
<p> <p>
{% if split_output|length == 7 %}
{{- output -}}
{% else %}
{{- split_output[0]|raw -}}> {{- split_output[0]|raw -}}>
{# non breaking hyphen #}
{{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}> {{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}>
{% endif %}
</p> </p>
{% endif %} {% endif %}