From 2ac4834b34db7467ad4b7961d722a36a7198aac8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Jarczy=C5=84ski?= <mat.jarcz@gmail.com>
Date: Fri, 12 Dec 2025 14:51:08 +0100
Subject: [PATCH] Add endless scroll to desktop view

Summary: Ref T2954

Reviewers: #testers, kuba-orlik

Reviewed By: #testers, kuba-orlik

Subscribers: kuba-orlik, jenkins-user

Maniphest Tasks: T2954

Differential Revision: https://hub.sealcode.org/D1659
---
 .../autoscrolling-images.css                  | 72 +++++++++++++++++--
 .../autoscrolling-images.jdd.tsx              | 12 +++-
 2 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
index 272c3de..99e266f 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
@@ -175,13 +175,7 @@
 	}
 }
 
-@container (width < 1115px) {
-	.autoscrolling-images__arrow-carousel-container {
-		right: 0;
-	}
-}
-
-@container (width < 800px) {
+.autoscrolling-images.endless {
 	.autoscrolling-images__arrow-carousel-container {
 		display: none;
 	}
@@ -220,4 +214,68 @@
 	.autoscrolling-images__carousel-page--looping-tail {
 		display: flex;
 	}
+
+	@container (width > 800px) {
+		.autoscrolling-images__carousel-page {
+			display: grid !important;
+			grid-template-rows: repeat(2, auto);
+			grid-auto-flow: column;
+			gap: 16px;
+		}
+
+		.autoscrolling-images__img-wrapper:last-child:nth-child(odd) {
+			grid-row: 1 / span 2; /* take both rows */
+			align-self: center;
+			justify-self: center;
+		}
+	}
+}
+
+.autoscrolling-images:not(.endless) {
+	@container (width < 1115px) {
+		.autoscrolling-images__arrow-carousel-container {
+			right: 0;
+		}
+	}
+
+	@container (width < 800px) {
+		.autoscrolling-images__arrow-carousel-container {
+			display: none;
+		}
+
+		.autoscrolling-images__dots-container {
+			display: none;
+		}
+
+		.autoscrolling-images__carousel {
+			max-width: none;
+			width: max-content;
+			animation-name: autoscrolling-images-infinite-scroll;
+			animation-duration: var(--animation-length);
+			animation-iteration-count: infinite;
+			animation-timing-function: linear;
+		}
+
+		.autoscrolling-images__carousel-container {
+			margin: 0;
+			max-width: calc(100cqw - 20px);
+		}
+
+		.autoscrolling-images__carousel-page {
+			display: flex;
+			flex: none !important;
+			margin: 0;
+			flex-wrap: nowrap !important;
+			max-width: none;
+		}
+
+		.autoscrolling-images__img-wrapper {
+			min-width: 288px;
+		}
+
+		.autoscrolling-images__carousel-page--looping-head,
+		.autoscrolling-images__carousel-page--looping-tail {
+			display: flex;
+		}
+	}
 }
diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
index 2030490..9af8a78 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
@@ -32,6 +32,7 @@ const component_arguments = {
 	]),
 	speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
 	desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
+	endless: new ComponentArguments.Enum(["true", "false"]),
 	images,
 } as const;
 
@@ -121,7 +122,15 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { title, imagesPerPage, images, speed, desktop_interval, background_mode },
+		args: {
+			title,
+			imagesPerPage,
+			images,
+			speed,
+			desktop_interval,
+			background_mode,
+			endless,
+		},
 		jdd_context: { render_image },
 		classes,
 		index,
@@ -141,6 +150,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 				class={[
 					"autoscrolling-images",
 					`autoscrolling-images--mode-${background_mode}`,
+					endless == "true" ? "endless" : "",
 					...classes,
 				]}
 				style={`--jdd-index: ${index}`}