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

src/back/jdd-components/autoscrolling-images/autoscrolling-images.css

@@ -175,6 +175,63 @@
 	}
 }
 
+.autoscrolling-images.endless {
+	.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;
+	}
+
+	@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;
@@ -221,3 +278,4 @@
 			display: flex;
 		}
 	}
+}

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}`}