diff --git a/assets/js/home-slideshow.js b/assets/js/home-slideshow.js index 42428a3..67309b4 100644 --- a/assets/js/home-slideshow.js +++ b/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 prev = slideshow.querySelector('.prev'); - const next = slideshow.querySelector('.next'); + const items = [...slideshow.querySelectorAll(".slide")]; + const prev = slideshow.querySelector(".prev"); + const next = slideshow.querySelector(".next"); let current = 0; - function goTo(index) { - items[current].classList.remove('active'); - current = (index + items.length) % items.length; - items[current].classList.add('active'); + function isDesktopOnly(index) { + return ( + window.innerWidth < 1000 && + items[index].classList.contains("desktop-only") + ); } - items[0]?.classList.add('active'); - prev?.addEventListener('click', () => goTo(current - 1)); - next?.addEventListener('click', () => goTo(current + 1)); + function findNext(from, direction) { + let index = (from + direction + items.length) % items.length; + 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))); } diff --git a/site/blueprints/files/slideshow-files.yml b/site/blueprints/files/slideshow-files.yml index 35c7e3d..990b28a 100644 --- a/site/blueprints/files/slideshow-files.yml +++ b/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 diff --git a/site/controllers/home.php b/site/controllers/home.php index 9ea40d6..a4b2d2d 100644 --- a/site/controllers/home.php +++ b/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++; } } diff --git a/site/templates/home.php b/site/templates/home.php index f72425a..4fef0f3 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -15,7 +15,7 @@ -