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

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

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

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

  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);
  });

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