Horizontal scroller - enable hiding dots when all elements are visible

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();
 	}
 

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>
 		);
 	}