slideshow : prev() step-by-step avec auto-chaînage inverse
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s

Chaque appel à prev() retire un slide à la fois dans l'ordre inverse.
currentGroup stocke { slide, auto } pour savoir si le slide révélé
était une étape automatique — si oui, prev() s'enchaîne avec un délai
aléatoire (250-500ms) jusqu'à la base manuelle du groupe.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-06-11 15:28:27 +02:00
parent 02cdd82d87
commit 07db943d58

View file

@ -36,7 +36,7 @@ export class CreditsSlideshow {
this.nextImageIndex = 1;
this.insertsShownInGroup = 0;
this.portraitPairDone = false;
this.currentGroup = [slides.images[0]];
this.currentGroup = [{ slide: slides.images[0], auto: false }];
this.groupHistory = [];
this.zIndex = 0;
slides.images[0].node.style.zIndex = 0;
@ -88,19 +88,19 @@ export class CreditsSlideshow {
this.currentSlide = slide;
if (slide.type === "image") {
if (auto) {
this.currentGroup.push(slide);
this.currentGroup.push({ slide, auto });
} else {
this.groupHistory.push(this.currentGroup);
this.currentGroup = [slide];
this.currentGroup = [{ slide, auto }];
}
this.nextImageIndex = this.slides.images.indexOf(slide) + 1;
this.insertsShownInGroup = 0;
this.portraitPairDone = auto;
} else if (slide.type === "insert") {
this.currentGroup.push(slide);
this.currentGroup.push({ slide, auto });
this.insertsShownInGroup++;
} else {
this.currentGroup.push(slide);
this.currentGroup.push({ slide, auto });
}
}
@ -135,25 +135,45 @@ export class CreditsSlideshow {
}
prev() {
if (this.currentGroup.length > 1) {
const leaving = this.currentGroup.pop();
leaving.slide.node.classList.replace("active", "next");
const arriving = this.currentGroup[this.currentGroup.length - 1];
arriving.slide.node.style.zIndex = ++this.zIndex;
arriving.slide.node.classList.replace("previous", "active");
this.currentSlide = arriving.slide;
if (leaving.slide.type === "insert") {
this.insertsShownInGroup--;
} else if (leaving.slide.type === "image") {
this.nextImageIndex = this.slides.images.indexOf(arriving.slide) + 1;
this.portraitPairDone = false;
}
if (arriving.auto) {
setTimeout(() => this.prev(), 250 + Math.random() * 250);
}
return;
}
if (!this.groupHistory.length) return;
this.currentGroup.forEach((slide) => {
slide.node.classList.remove("active", "previous");
slide.node.classList.add("next");
});
const leaving = this.currentGroup[0];
leaving.slide.node.classList.replace("active", "next");
const prevGroup = this.groupHistory.pop();
if (!prevGroup.length) return;
this.currentGroup = prevGroup;
const lastSlide = prevGroup[prevGroup.length - 1];
lastSlide.node.style.zIndex = ++this.zIndex;
lastSlide.node.classList.replace("previous", "active");
this.currentSlide = lastSlide;
const arriving = prevGroup[prevGroup.length - 1];
arriving.slide.node.style.zIndex = ++this.zIndex;
arriving.slide.node.classList.replace("previous", "active");
this.currentSlide = arriving.slide;
const prevImages = prevGroup.filter((s) => s.type === "image");
this.nextImageIndex = this.slides.images.indexOf(prevImages[prevImages.length - 1]) + 1;
this.insertsShownInGroup = prevGroup.filter((s) => s.type === "insert").length;
const prevImages = prevGroup.filter((s) => s.slide.type === "image");
this.nextImageIndex = this.slides.images.indexOf(prevImages[prevImages.length - 1].slide) + 1;
this.insertsShownInGroup = prevGroup.filter((s) => s.slide.type === "insert").length;
this.portraitPairDone = prevImages.length > 1;
}
}