studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Index > Fix vidéos non prise en charges dans le slider
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-17 12:25:23 +02:00
parent c92e492fbc
commit 9a615bd92d
7 changed files with 97 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

102
assets/js/project-slideshow.js
View file

@ -7,116 +7,104 @@ document.addEventListener("DOMContentLoaded", () => {
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",
);
// 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 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",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const lastSlideSelected = lastSlide(selectedProject);
const nextProject = selectedProject.nextElementSibling;
if (activePicture !== lastPicture) {
activePicture.classList.remove("active");
activePicture.nextElementSibling.classList.add("active");
if (activeSlide !== lastSlideSelected) {
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
selectedProject.classList.remove("selected");
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
if (selectedProject !== lastProject) {
nextProject.classList.add("selected");
firstPictureNextProject.classList.add("active");
firstSlide(nextProject).classList.add("active");
} else {
firstProject.classList.add("selected");
firstPictureFirstProject.classList.add("active");
firstSlideFirstProject.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",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const firstSlideSelected = firstSlide(selectedProject);
const prevProject = selectedProject.previousElementSibling;
if (activePicture !== firstPicture) {
activePicture.classList.remove("active");
activePicture.previousElementSibling.classList.add("active");
if (activeSlide !== firstSlideSelected) {
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
} else {
selectedProject.classList.remove("selected");
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
if (selectedProject !== firstProject) {
prevProject.classList.add("selected");
lastPicturePrevProject.classList.add("active");
lastSlide(prevProject).classList.add("active");
} else {
lastProject.classList.add("selected");
lastPictureLastProject.classList.add("active");
lastSlideLastProject.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",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const prevProject = selectedProject.previousElementSibling;
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
selectedProject.classList.remove("selected");
if (selectedProject !== firstProject) {
prevProject.classList.add("selected");
firstPicturePrevProject.classList.add("active");
firstSlide(prevProject).classList.add("active");
} else {
lastProject.classList.add("selected");
firstPictureLastProject.classList.add("active");
firstSlideLastProject.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",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const nextProject = selectedProject.nextElementSibling;
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
selectedProject.classList.remove("selected");
if (selectedProject !== lastProject) {
nextProject.classList.add("selected");
firstPictureNextProject.classList.add("active");
firstSlide(nextProject).classList.add("active");
} else {
firstProject.classList.add("selected");
firstPictureFirstProject.classList.add("active");
firstSlideFirstProject.classList.add("active");
}
}

8
assets/js/project-toggle.js
View file

@ -22,9 +22,11 @@ allProjects.forEach((currentProject) => {
});
currentProject
.querySelectorAll("picture")
.forEach((picture) => picture.classList.remove("active"));
currentProject.querySelector("picture:first-child").classList.add("active");
.querySelectorAll(".project-slideshow > .slide")
.forEach((slide) => slide.classList.remove("active"));
currentProject
.querySelector(".project-slideshow > .slide")
.classList.add("active");
currentProject.classList.toggle("selected");
Router.setParam("project", currentProject.dataset.slug);