horizontal-scroller.page.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

horizontal-scroller.page.tsx
View Options

	import type { Context } from "koa";
	import { TempstreamJSX } from "tempstream";
	import { Page } from "@sealcode/sealgen";
	import html from "../../html.js";
	import { horizontalScroller } from "../common/horizontal-scroller/horizontal-scroller.js";

	export const actionName = "HorizontalScrollerDemo";

	export default new (class HorizontalScrollerDemoPage extends Page {
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	async canAccess(_: Context) {
	return { canAccess: true, message: "" };
	}

	async render(ctx: Context) {
	return html({
	ctx,
	title: "HorizontalScrollerDemo",
	description: "",
	body: (
	<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>
	)),
	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>
	),
	})}
	<h2>Sometimes doesn't scroll, then dots are hidden</h2>
	{
	/* HTML */ `<style>
	.horizontal-scroller--all-visible {
	.horizontal-scroller__markers {
	opacity: 0;
	transition: 200ms;
	}
	}
	</style>`
	}
	{horizontalScroller({
	elements: [1, 2, 3, 4].map((n) => <div class="bignum">{n}</div>),
	})}
	</div>
	),
	});
	}
	})();