From 5e901567fe3dcd2b339ca7a79e8fd8978e7a5530 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Tue, 4 Mar 2025 13:31:00 +0100
Subject: [PATCH] Add white square option to autoscrolling images

---
 .../autoscrolling-images.css                  | 19 ++++++++++++++++---
 .../autoscrolling-images.jdd.tsx              |  9 +++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
index 482f739..f387269 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
@@ -2,6 +2,7 @@
 	display: flex;
 	justify-content: center;
 	margin: 2rem 0;
+	--gap-between-horizontal-images: 14px;
 }
 
 .autoscrolling-images-wrapper {
@@ -9,6 +10,18 @@
 	gap: 24px;
 }
 
+.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
+	background-color: white;
+}
+
+.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper {
+	background-color: white;
+	height: unset;
+	width: 160px;
+	min-width: 0px;
+	aspect-ratio: 1/1;
+}
+
 .autoscrolling-images__title-wrapper {
 	max-width: 940px;
 	display: flex;
@@ -92,7 +105,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-evenly;
-	column-gap: 1rem;
+	gap: var(--gap-between-horizontal-images);
 
 	max-width: 940px;
 }
@@ -104,7 +117,7 @@
 
 .autoscrolling-images__carousel-page--looping-tail {
 	position: absolute;
-	left: 100%;
+	left: calc(100% + var(--gap-between-horizontal-images));
 }
 
 .autoscrolling-images__carousel-page--looping-head {
@@ -149,7 +162,7 @@
 		transform: translateX(0%);
 	}
 	100% {
-		transform: translateX(calc(-100%));
+		transform: translateX(calc(-100% - var(--gap-between-horizontal-images)));
 	}
 }
 
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 4904e29..779784e 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
@@ -25,6 +25,7 @@ images.getExampleCount = () => {
 const component_arguments = {
 	title: new ComponentArguments.ShortText(),
 	imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]),
+	mode: new ComponentArguments.Enum(["transparent", "white", "white-square"]),
 	speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
 	desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
 	images,
@@ -112,7 +113,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { title, imagesPerPage, images, speed, desktop_interval },
+		args: { title, imagesPerPage, images, speed, desktop_interval, mode },
 		jdd_context: { render_image },
 		classes,
 		index,
@@ -129,7 +130,11 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 
 		return (
 			<div
-				class={["autoscrolling-images", ...classes]}
+				class={[
+					"autoscrolling-images",
+					`autoscrolling-images--mode-${mode}`,
+					...classes,
+				]}
 				style={`--jdd-index: ${index}`}
 				data-controller="autoscrolling-images"
 				data-autoscrolling-images-interval={desktop_interval}