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

document.addEventListener("DOMContentLoaded", () => {
  // Éléments statiques : calculés une seule fois au chargement
  const prevButtons = document.querySelectorAll("button.prev");
  const nextButtons = document.querySelectorAll("button.next");

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

  // Première / dernière slide d'un projet (image OU vidéo).
  // On cible la classe « .slide » au lieu de la balise « picture »
  // pour que les vidéos comptent comme des slides normales.
  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);

  // Fonctions de navigation : les éléments « courants » sont re-requêtés
  // à chaque appel pour refléter l'état actuel du DOM.

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

    if (activeSlide !== lastSlideSelected) {
      activeSlide.classList.remove("active");
      activeSlide.nextElementSibling.classList.add("active");
    } else {
      selectedProject.classList.remove("selected");
      activeSlide.classList.remove("active");
      if (selectedProject !== lastProject) {
        nextProject.classList.add("selected");
        firstSlide(nextProject).classList.add("active");
      } else {
        firstProject.classList.add("selected");
        firstSlideFirstProject.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;

    if (activeSlide !== firstSlideSelected) {
      activeSlide.classList.remove("active");
      activeSlide.previousElementSibling.classList.add("active");
    } else {
      selectedProject.classList.remove("selected");
      activeSlide.classList.remove("active");
      if (selectedProject !== firstProject) {
        prevProject.classList.add("selected");
        lastSlide(prevProject).classList.add("active");
      } else {
        lastProject.classList.add("selected");
        lastSlideLastProject.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);
  });

  prevButtons.forEach((prevButton) => {
    prevButton.addEventListener("click", goToPrevPicture);
  });

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