From 869527a721cd2e04e2cd89b55179b3ae19f1ca63 Mon Sep 17 00:00:00 2001
From: Camilledenoray <camille.denoray@gmail.com>
Date: Wed, 8 Jul 2026 18:14:26 +0200
Subject: [PATCH] Index > JS > Add a script for slide number

---
 assets/js/project-slideshow.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/assets/js/project-slideshow.js b/assets/js/project-slideshow.js
index ddcfa74..ae027f6 100644
--- a/assets/js/project-slideshow.js
+++ b/assets/js/project-slideshow.js
@@ -18,6 +18,33 @@ document.addEventListener("DOMContentLoaded", () => {
   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(