66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import type { FlatTemplatable } from "tempstream";
|
|
import { tempstream, TempstreamJSX } from "tempstream";
|
|
import type { Stringifiable } from "tempstream/@types/stringify.js";
|
|
|
|
const make_id = (function* () {
|
|
let i = 0;
|
|
while (true) {
|
|
yield i++;
|
|
if (i == 999999999) {
|
|
i = 0;
|
|
}
|
|
}
|
|
})();
|
|
|
|
export async function horizontalScroller({
|
|
classes = [],
|
|
elements,
|
|
render = async ({ scroller, markers }) => tempstream`${scroller}${markers}`,
|
|
}: {
|
|
classes?: string[];
|
|
elements: (Stringifiable | Promise<Stringifiable>)[];
|
|
render?: (options: {
|
|
scroller: FlatTemplatable;
|
|
markers: FlatTemplatable;
|
|
}) => Promise<FlatTemplatable>;
|
|
}) {
|
|
const id = make_id.next().value;
|
|
const scroller_id = `horizontal-scroller-${id}`;
|
|
const scroller = (
|
|
<div
|
|
class="horizontal-scroller__element-container"
|
|
data-horizontal-scroller-target="scroller"
|
|
>
|
|
{elements.map((e, index) => (
|
|
<div
|
|
id={scroller_id + "__element--number-" + index}
|
|
class={"horizontal-scroller__element"}
|
|
data-horizontal-scroller-target="element"
|
|
data-index={index}
|
|
>
|
|
<span>{e}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
const markers = (
|
|
<div class="horizontal-scroller__markers">
|
|
{elements.map(() => (
|
|
<div
|
|
class="horizontal-scroller__marker"
|
|
data-horizontal-scroller-target="marker"
|
|
></div>
|
|
))}
|
|
</div>
|
|
);
|
|
return (
|
|
<div
|
|
id={scroller_id}
|
|
class={["horizontal-scroller", ...classes]}
|
|
data-controller="horizontal-scroller"
|
|
>
|
|
{render({ scroller, markers })}
|
|
</div>
|
|
);
|
|
}
|