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

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

@@ -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`;
}
}
}