72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
import { useLayoutStore } from '../stores/layout';
|
|
|
|
export function handleReactiveness() {
|
|
const layoutStore = useLayoutStore();
|
|
layoutStore.setupResizeListenner();
|
|
|
|
// toggle collapse and scroll for etape liste
|
|
(function setEtapeListe() {
|
|
const listeEtape = document.querySelector('#etapes-liste');
|
|
const listeToggleButton = document.querySelector('#retractable-message');
|
|
const column = document.querySelector('.layout__region--third');
|
|
const header = document.querySelector('.layout-container > header');
|
|
|
|
const animationToggle = document.querySelector('#animation-toggle');
|
|
|
|
const EtapeListeScrollElements = {
|
|
listeEtape,
|
|
column,
|
|
listeEtapeContent: listeEtape.querySelector('.item-list'),
|
|
header,
|
|
animationToggle: animationToggle.querySelector('.animation-toggle-container')
|
|
}
|
|
|
|
layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
|
|
|
|
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle);
|
|
|
|
window.addEventListener('resize', () => {
|
|
layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
|
|
|
|
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
|
|
layoutStore.expandEtapeListe(listeEtape, animationToggle);
|
|
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
|
|
layoutStore.collapseEtapeListe(listeEtape, animationToggle);
|
|
}
|
|
});
|
|
|
|
listeToggleButton.addEventListener('click', () => {
|
|
if (!layoutStore.isDesktop) {
|
|
if (!layoutStore.isEtapeListRetracted) {
|
|
layoutStore.collapseEtapeListe(listeEtape, animationToggle);
|
|
} else {
|
|
layoutStore.expandEtapeListe(listeEtape, animationToggle);
|
|
layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
}
|
|
|
|
export function setMenuToggle() {
|
|
const layoutStore = useLayoutStore();
|
|
const menuBurger = document.querySelector('#hamburger');
|
|
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
|
|
|
|
layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
|
|
}
|
|
|
|
export function setHamburgerWhenLogged(drupalSettings) {
|
|
if (drupalSettings.user.uid != 0) {
|
|
const menuBurger = document.querySelector('#hamburger');
|
|
const menuTitle = document.querySelector('#menu-title');
|
|
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
|
|
const header = document.querySelector('.dialog-off-canvas-main-canvas');
|
|
const headerTop = header.getBoundingClientRect().top;
|
|
|
|
menuTitle.style.top = `${headerTop}px`;
|
|
menuBurger.style.top = `${headerTop}px`;
|
|
menuContainer.style.paddingTop = `${headerTop}px`;
|
|
}
|
|
}
|