From c927144adbe723dfa4eaebf12c2547d57a4fa4a5 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Tue, 6 Aug 2024 18:41:51 +0200
Subject: [PATCH] Horizontal scroller - enable hiding dots when all elements
 are visible

---
 .../horizontal-scroller.stimulus.ts           |  5 +++
 .../routes/horizontal-scroller-demo.page.tsx  | 38 +++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
index 59f6270..863e088 100644
--- a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
+++ b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
@@ -49,6 +49,11 @@ export default class HorizontalScroller extends Controller {
 			);
 			this.visibility[element_index] = event.intersectionRatio;
 		});
+		if (this.visibility.every((dot) => dot == 1)) {
+			this.element.classList.add("horizontal-scroller--all-visible");
+		} else {
+			this.element.classList.remove("horizontal-scroller--all-visible");
+		}
 		this.refreshMarkers();
 	}
 
diff --git a/src/back/routes/horizontal-scroller-demo.page.tsx b/src/back/routes/horizontal-scroller-demo.page.tsx
index cb85b6e..c66618d 100644
--- a/src/back/routes/horizontal-scroller-demo.page.tsx
+++ b/src/back/routes/horizontal-scroller-demo.page.tsx
@@ -17,6 +17,7 @@ export default new (class HorizontalScrollerDemoPage extends Page {
 			ctx,
 			"HorizontalScrollerDemo",
 			<div>
+				<h2>Always scrolls + has buttons</h2>
 				{horizontalScroller({
 					elements: [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13].map((n) => (
 						<div class="bignum">{n}</div>
@@ -46,6 +47,43 @@ export default new (class HorizontalScrollerDemoPage extends Page {
 						</div>
 					),
 				})}
+				<h2>Sometimes doesn't scroll, then dots are hidden</h2>
+				{
+					/* HTML */ `<style>
+						.horizontal-scroller--all-visible {
+							.horizontal-scroller__markers {
+								display: none;
+							}
+						}
+					</style>`
+				}
+				{horizontalScroller({
+					elements: [1, 2, 3, 4].map((n) => <div class="bignum">{n}</div>),
+					render: async ({ scroller, markers }) => (
+						<div>
+							<div>
+								<button
+									class="prev-button"
+									type="button"
+									data-action="horizontal-scroller#scrollLeft"
+								>
+									{" "}
+									←{" "}
+								</button>
+								<button
+									class="next-button"
+									type="button"
+									data-action="horizontal-scroller#scrollRight"
+								>
+									{" "}
+									→{" "}
+								</button>
+							</div>
+							{scroller}
+							{markers}
+						</div>
+					),
+				})}
 			</div>
 		);
 	}