86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import type { FlatTemplatable } from "tempstream";
|
|
import { TempstreamJSX } from "tempstream";
|
|
import type {
|
|
ComponentToHTMLArgs,
|
|
ExtractStructuredComponentArgumentsParsed,
|
|
JDDContext,
|
|
} from "@sealcode/jdd";
|
|
import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
|
|
import { horizontalScroller } from "../../routes/common/horizontal-scroller/horizontal-scroller.js";
|
|
|
|
const component_arguments = {
|
|
title: new ComponentArguments.ShortText(),
|
|
images: new ComponentArguments.List(
|
|
new ComponentArguments.Structured({
|
|
image: new ComponentArguments.Image(),
|
|
alt: new ComponentArguments.ShortText(),
|
|
})
|
|
),
|
|
bleed: new ComponentArguments.Boolean(),
|
|
} as const;
|
|
|
|
export class HorizontalGallery extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
getTitle(
|
|
_: JDDContext,
|
|
args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
|
|
) {
|
|
return args.title || null;
|
|
}
|
|
|
|
toHTML({
|
|
args: { title, images, bleed },
|
|
classes,
|
|
jdd_context: { render_image },
|
|
index,
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
|
|
return (
|
|
<div
|
|
class={["horizontal-gallery", ...classes]}
|
|
data-bleed={bleed ? "true" : "false"}
|
|
style={`--jdd-index: ${index}`}
|
|
>
|
|
{horizontalScroller({
|
|
elements: (images || []).map((image) =>
|
|
render_image(image.image, {
|
|
sizesAttr: "100vw",
|
|
container: { width: 800, height: 500, objectFit: "contain" },
|
|
alt: image.alt,
|
|
})
|
|
),
|
|
render: async ({ scroller, markers }) => (
|
|
<div>
|
|
<div class="horizontal-gallery__top-bar">
|
|
<h2>{insert_nbsp(title)}</h2>
|
|
<div class="horizontal-gallery__buttons">
|
|
<button
|
|
class="prev-button"
|
|
data-action="horizontal-scroller#scrollLeft"
|
|
type="button"
|
|
>
|
|
<span style="transform: rotate(180deg); margin-right: 16px;">
|
|
←
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="next-button"
|
|
data-action="horizontal-scroller#scrollRight"
|
|
type="button"
|
|
>
|
|
<span>→</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{scroller}
|
|
{markers}
|
|
</div>
|
|
),
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
}
|