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 {
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) {

34
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;
},
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);
}
},

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');
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', () => {
if (!layoutStore.isDesktop) {
if (!layoutStore.isEtapeListRetracted) {
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
layoutStore.collapseEtapeListe(listeEtape, animationToggle);
} 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) {
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 {

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

@ -29,7 +29,12 @@
{% else %}
{% set split_output = output|split('>') %}
<p>
{{- 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 %}
</p>
{% endif %}