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];

  const firstPictureFirstProject = firstProject.querySelector(
    ".project-slideshow picture:first-of-type",
  );
  const firstPictureLastProject = lastProject.querySelector(
    ".project-slideshow picture:first-of-type",
  );
  const lastPictureLastProject = lastProject.querySelector(
    ".project-slideshow picture:last-of-type",
  );

  // 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 activePicture = document.querySelector(
      ".project.selected .project-slideshow > picture.active",
    );
    const lastPicture = document.querySelector(
      ".project.selected .project-slideshow > picture:last-of-type",
    );
    const selectedProject = document.querySelector(".project.selected");
    const nextProject = selectedProject.nextElementSibling;
    const firstPictureNextProject = nextProject?.querySelector(
      ".project-slideshow picture:first-of-type",
    );

    if (activePicture !== lastPicture) {
      activePicture.classList.remove("active");
      activePicture.nextElementSibling.classList.add("active");
    } else {
      selectedProject.classList.remove("selected");
      activePicture.classList.remove("active");
      if (selectedProject !== lastProject) {
        nextProject.classList.add("selected");
        firstPictureNextProject.classList.add("active");
      } else {
        firstProject.classList.add("selected");
        firstPictureFirstProject.classList.add("active");
      }
    }
  }

  function goToPrevPicture() {
    const activePicture = document.querySelector(
      ".project.selected .project-slideshow > picture.active",
    );
    const firstPicture = document.querySelector(
      ".project.selected .project-slideshow > picture:first-of-type",
    );
    const selectedProject = document.querySelector(".project.selected");
    const prevProject = selectedProject.previousElementSibling;
    const lastPicturePrevProject = prevProject?.querySelector(
      ".project-slideshow picture:last-of-type",
    );

    if (activePicture !== firstPicture) {
      activePicture.classList.remove("active");
      activePicture.previousElementSibling.classList.add("active");
    } else {
      selectedProject.classList.remove("selected");
      activePicture.classList.remove("active");
      if (selectedProject !== firstProject) {
        prevProject.classList.add("selected");
        lastPicturePrevProject.classList.add("active");
      } else {
        lastProject.classList.add("selected");
        lastPictureLastProject.classList.add("active");
      }
    }
  }

  function goToPrevProject() {
    const activePicture = document.querySelector(
      ".project.selected .project-slideshow > picture.active",
    );
    const selectedProject = document.querySelector(".project.selected");
    const prevProject = selectedProject.previousElementSibling;
    const firstPicturePrevProject = prevProject?.querySelector(
      ".project-slideshow picture:first-of-type",
    );

    activePicture.classList.remove("active");
    selectedProject.classList.remove("selected");
    if (selectedProject !== firstProject) {
      prevProject.classList.add("selected");
      firstPicturePrevProject.classList.add("active");
    } else {
      lastProject.classList.add("selected");
      firstPictureLastProject.classList.add("active");
    }
  }

  function goToNextProject() {
    const activePicture = document.querySelector(
      ".project.selected .project-slideshow > picture.active",
    );
    const selectedProject = document.querySelector(".project.selected");
    const nextProject = selectedProject.nextElementSibling;
    const firstPictureNextProject = nextProject?.querySelector(
      ".project-slideshow picture:first-of-type",
    );

    activePicture.classList.remove("active");
    selectedProject.classList.remove("selected");
    if (selectedProject !== lastProject) {
      nextProject.classList.add("selected");
      firstPictureNextProject.classList.add("active");
    } else {
      firstProject.classList.add("selected");
      firstPictureFirstProject.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();
  });
});