80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
import { initCharacterJump } from "./characters/jump.js";
|
|
import { initPupilTracking } from "./characters/pupilTracking.js";
|
|
import { initCharactersResizeOnScroll } from "./characters/resizeOnScroll.js";
|
|
import { initEventFilters } from "./filters.js";
|
|
import { Slideshow } from "./slideshow.js";
|
|
import { initRollOutfit } from "./characters/roll.js";
|
|
import { initMorphMouth } from "./characters/morphMouth.js";
|
|
import { initMorphEyes } from "./characters/morphEyes.js";
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const header = document.querySelector(".main-header");
|
|
const charactersWrapper = document.querySelector(".characters");
|
|
const svg = charactersWrapper?.querySelector("svg");
|
|
|
|
let menuOpen = false;
|
|
let menuTransitioning = false;
|
|
|
|
const toggleBtn = document.querySelector(".toggle-nav");
|
|
|
|
if (toggleBtn) {
|
|
function openMenu() {
|
|
menuOpen = true;
|
|
header.classList.add("menu-transitioning", "big");
|
|
header.classList.add("open");
|
|
toggleBtn.textContent = "fermer";
|
|
document.body.style.overflow = "hidden";
|
|
}
|
|
|
|
function closeMenu() {
|
|
menuOpen = false;
|
|
menuTransitioning = true;
|
|
header.classList.remove("big");
|
|
header.classList.remove("open");
|
|
toggleBtn.textContent = "menu";
|
|
document.body.style.overflow = "";
|
|
setTimeout(() => {
|
|
header.classList.remove("menu-transitioning");
|
|
menuTransitioning = false;
|
|
}, 500);
|
|
}
|
|
|
|
toggleBtn.addEventListener("click", () => {
|
|
header.classList.contains("open") ? closeMenu() : openMenu();
|
|
});
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && menuOpen) closeMenu();
|
|
});
|
|
|
|
document.addEventListener("click", (event) => {
|
|
if (!menuOpen) return;
|
|
if (event.target.closest(".toggle-nav")) return;
|
|
if (!event.target.closest(".main-header")) closeMenu();
|
|
});
|
|
}
|
|
|
|
initCharacterJump();
|
|
if (svg) initPupilTracking(svg);
|
|
if (document.body.dataset.template !== "event") initCharactersResizeOnScroll();
|
|
initEventFilters();
|
|
if (document.body.dataset.template !== "home") initRollOutfit();
|
|
if (document.body.dataset.template === "home") initMorphMouth();
|
|
if (document.body.dataset.template === "home") initMorphEyes();
|
|
const gallery = new Slideshow(".gallery");
|
|
|
|
document.querySelectorAll("details > summary").forEach((summary) => {
|
|
summary.addEventListener("click", () => {
|
|
requestAnimationFrame(() => summary.scrollIntoView({ behavior: "smooth", block: "start" }));
|
|
});
|
|
});
|
|
});
|
|
|
|
window.addEventListener("scroll", (event) => {
|
|
const mainHeader = document.querySelector(".main-header");
|
|
if (window.scrollY > 130 && !mainHeader.classList.contains("small")) {
|
|
mainHeader.classList.add("small");
|
|
} else if (window.scrollY < 90) {
|
|
mainHeader.classList.remove("small");
|
|
}
|
|
});
|