hic-et-nunc/assets/js/project-slideshow.js

document.addEventListener("DOMContentLoaded", () => {

  const nextButtons = document.querySelectorAll("button.next");
  const nextProjectButtons = document.querySelectorAll("button.next-project");

  const projects = document.querySelectorAll(".projects-index .project");
  const firstProject = projects[0];
  const lastProject = projects[projects.length - 1];

  const firstSlide = (project) =>
    project.querySelector(".project-slideshow > .slide");
  const lastSlide = (project) => {
    const slides = project.querySelectorAll(".project-slideshow > .slide");
    return slides[slides.length - 1];
  };

  const firstSlideFirstProject = firstSlide(firstProject);
  const firstSlideLastProject = firstSlide(lastProject);
  const lastSlideLastProject = lastSlide(lastProject);

  // Affiche le numéro de la slide courante dans .slide-number > .current-image
  // (le total est déjà géré en PHP via $slides->count()).
  const updateSlideNumber = (project) => {
    const slides = project.querySelectorAll(".project-slideshow > .slide");
    const activeSlide = project.querySelector(
      ".project-slideshow > .slide.active",
    );
    const currentImage = project.querySelector(".slide-number .current-image");
    if (!currentImage || !activeSlide) return;
    currentImage.textContent = [...slides].indexOf(activeSlide) + 1;
  };

  // On observe la classe .active de chaque slide : ainsi le numéro se met à
  // jour quelle que soit la source du changement (navigation image/projet
  // ici, ou ouverture d'un projet dans project-toggle.js).
  projects.forEach((project) => {
    updateSlideNumber(project); // état initial
    project
      .querySelectorAll(".project-slideshow > .slide")
      .forEach((slide) =>
        new MutationObserver(() => updateSlideNumber(project)).observe(slide, {
          attributes: true,
          attributeFilter: ["class"],
        }),
      );
  });

  function goToNextPicture() {
    const selectedProject = document.querySelector(".project.selected");
    const activeSlide = selectedProject.querySelector(
      ".project-slideshow > .slide.active",
    );
    const lastSlideSelected = lastSlide(selectedProject);
    const nextProject = selectedProject.nextElementSibling;

    activeSlide.classList.remove("active");
    if (activeSlide !== lastSlideSelected) {
      activeSlide.nextElementSibling.classList.add("active");
    } else {
      firstSlide(selectedProject).classList.add("active");
    }
  }

  function goToPrevPicture() {
    const selectedProject = document.querySelector(".project.selected");
    const activeSlide = selectedProject.querySelector(
      ".project-slideshow > .slide.active",
    );
    const firstSlideSelected = firstSlide(selectedProject);
    const prevProject = selectedProject.previousElementSibling;

    activeSlide.classList.remove("active");
    if (activeSlide !== firstSlideSelected) {
      activeSlide.previousElementSibling.classList.add("active");
    } else {
      lastSlide(selectedProject).classList.add("active");
    }
  }

  function goToPrevProject() {
    const selectedProject = document.querySelector(".project.selected");
    const activeSlide = selectedProject.querySelector(
      ".project-slideshow > .slide.active",
    );
    const prevProject = selectedProject.previousElementSibling;

    activeSlide.classList.remove("active");
    selectedProject.classList.remove("selected");
    if (selectedProject !== firstProject) {
      prevProject.classList.add("selected");
      firstSlide(prevProject).classList.add("active");
    } else {
      lastProject.classList.add("selected");
      firstSlideLastProject.classList.add("active");
    }
  }

  function goToNextProject() {
    const selectedProject = document.querySelector(".project.selected");
    const activeSlide = selectedProject.querySelector(
      ".project-slideshow > .slide.active",
    );
    const nextProject = selectedProject.nextElementSibling;

    activeSlide.classList.remove("active");
    selectedProject.classList.remove("selected");
    if (selectedProject !== lastProject) {
      nextProject.classList.add("selected");
      firstSlide(nextProject).classList.add("active");
    } else {
      firstProject.classList.add("selected");
      firstSlideFirstProject.classList.add("active");
    }
  }

  nextButtons.forEach((nextButton) => {
    nextButton.addEventListener("click", goToNextPicture);
  });

  nextProjectButtons.forEach((nextProjectButton) => {
    nextProjectButton.addEventListener("click", goToNextProject);
  });

  document.addEventListener("keyup", (event) => {
    if (event.key === "ArrowRight") goToNextPicture();
    if (event.key === "ArrowLeft") goToPrevPicture();
    if (event.key === "ArrowUp") goToPrevProject();
    if (event.key === "ArrowDown") goToNextProject();
  });
});