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

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