home > slideshow : skip desktop-only slides on mobile (< 1000px)

Closes #8

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/js/home-slideshow.js

@@ -1,18 +1,38 @@
-const slideshow = document.getElementById('home-slideshow');
+const slideshow = document.getElementById("home-slideshow");
 
 if (slideshow) {
-  const items = [...slideshow.querySelectorAll('.slide')];
+  const items = [...slideshow.querySelectorAll(".slide")];
-  const prev  = slideshow.querySelector('.prev');
+  const prev = slideshow.querySelector(".prev");
-  const next  = slideshow.querySelector('.next');
+  const next = slideshow.querySelector(".next");
   let current = 0;
 
-  function goTo(index) {
+  function isDesktopOnly(index) {
-    items[current].classList.remove('active');
+    return (
-    current = (index + items.length) % items.length;
+      window.innerWidth < 1000 &&
-    items[current].classList.add('active');
+      items[index].classList.contains("desktop-only")
+    );
   }
 
-  items[0]?.classList.add('active');
+  function findNext(from, direction) {
-  prev?.addEventListener('click', () => goTo(current - 1));
+    let index = (from + direction + items.length) % items.length;
-  next?.addEventListener('click', () => goTo(current + 1));
+    let steps = 0;
+    while (isDesktopOnly(index) && steps < items.length) {
+      index = (index + direction + items.length) % items.length;
+      steps++;
+    }
+    return index;
+  }
+
+  function goTo(index) {
+    items[current].classList.remove("active");
+    current = index;
+    items[current].classList.add("active");
+  }
+
+  const firstVisible = findNext(-1, 1);
+  items[firstVisible]?.classList.add("active");
+  current = firstVisible;
+
+  prev?.addEventListener("click", () => goTo(findNext(current, -1)));
+  next?.addEventListener("click", () => goTo(findNext(current, 1)));
 }

site/blueprints/files/slideshow-files.yml

@@ -1,3 +1,9 @@
 title: Slideshow files
 accept:
   extension: jpg, png, webp, svg, gif, avif,        mp4, mov, avi, wmv, flv, 3gp, webm
+
+fields:
+  isHiddenOnMobile:
+    label: Masquer sur mobile
+    type: toggle
+    width: 1/6

site/controllers/home.php

@@ -18,7 +18,7 @@ return function($site) {
             $units[] = ['pair' => true, 'a' => $file, 'b' => $nextFile];
             $i += 2;
         } else {
-            $units[] = ['pair' => false, 'file' => $file];
+            $units[] = ['pair' => false, 'file' => $file, 'isHiddenOnMobile' => (bool) $file->isHiddenOnMobile()->isTrue()];
             $i++;
         }
     }

site/templates/home.php

@@ -15,7 +15,7 @@
         </video>
     </div>
     <?php else: ?>
-    <div class="slide">
+    <div class="slide<?= e($slide['isHiddenOnMobile'], ' desktop-only') ?>">
         <?php snippet('picture', ['file' => $slide['file'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
     </div>
     <?php endif ?>