Page MenuHomeSealhub
Files F1262460

autoscrolling-images.jdd.tsx
No OneTemporary
Actions

autoscrolling-images.jdd.tsx
View Options

import type { FlatTemplatable } from "tempstream";
import { TempstreamJSX } from "tempstream";
import type {
ExtractStructuredComponentArgumentsValues,
JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import arrow from "./autoscrolling-images-arrow.svg";
const component_arguments = {
title: new ComponentArguments.ShortText(),
interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]),
images: new ComponentArguments.List(
new ComponentArguments.Structured({
image: new ComponentArguments.Image(),
alt: new ComponentArguments.ShortText(),
})
),
} as const;
export class AutoscrollingImages extends Component<typeof component_arguments> {
getArguments() {
return component_arguments;
}
toHTML(
{
title,
interval,
imagesPerPage,
images,
}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
{ render_image }: JDDContext
): FlatTemplatable {
const imageNumberPerPage = parseInt(imagesPerPage);
const parsedImagesArray = [];
for (let i = 0; i < images.length; i += imageNumberPerPage) {
parsedImagesArray.push(images.slice(i, i + imageNumberPerPage));
}
const radioButtonIdPrefix = "r" + Math.floor(100 + Math.random() * 900);
const numberOfImages = images.length * 5;
const titleUpperCase = title.toUpperCase();
return (
<div
class="autoscrolling-images"
data-controller="autoscrolling-images"
data-autoscrolling-images-interval={interval}
>
<style>
{parsedImagesArray
.map(
(_, pageIndex) =>
`#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
transform: translateX(calc(${pageIndex} * (-100%)));
}
#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__arrow-carousel-container
> .autoscrolling-images__arrow-carousel {
transform: translateX(calc(${pageIndex} * (-100%)));
}
#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__dots-container
> label:nth-child(${pageIndex + 1}) {
background-color: #0d4d69;
}`
)
.join("\n")}
</style>
<div
class="autoscrolling-images-wrapper"
data-carousel-id-prefix={radioButtonIdPrefix}
>
<div class="autoscrolling-images__title-wrapper">
<h2 class="autoscrolling-images__title">{titleUpperCase}</h2>
</div>
<div class="autoscrolling-images__carousel-container">
{parsedImagesArray.map((_, pageIndex) => (
<input
class="autoscrolling-images__radio"
type="radio"
name="autoscrolling-images__radio"
value={pageIndex}
id={`${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`}
checked={pageIndex === 0}
data-action="autoscrolling-images#handleRadiochange"
/>
))}
<div class="autoscrolling-images__arrow-carousel-container">
<div class="autoscrolling-images__arrow-carousel">
{parsedImagesArray.map((_, pageIndex) => (
<div class="autoscrolling-images__arrow-container">
<label
for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${
pageIndex == 0
? parsedImagesArray.length - 1
: pageIndex - 1
}`}
class="autoscrolling-images__arrow"
>
<img
class="autoscrolling-images__img-arrow-left"
src={arrow.url}
/>
</label>
<label
for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${
pageIndex == parsedImagesArray.length - 1
? 0
: pageIndex + 1
}`}
class="autoscrolling-images__arrow"
>
<img src={arrow.url} />
</label>
</div>
))}
</div>
</div>
<div class="autoscrolling-images__imgs-carousel">
<div
class="autoscrolling-images__carousel"
style={`--animation-length: ${numberOfImages}s`}
>
{parsedImagesArray.map((page) => (
<div class="autoscrolling-images__carousel-page">
{page.map((image) => (
<div class="autoscrolling-images__img-wrapper">
{render_image(image.image, {
container: {
width: 288,
height: 150,
objectFit: "contain",
},
alt: image.alt,
})}
</div>
))}
</div>
))}
</div>
</div>
<div class="autoscrolling-images__dots-container">
{parsedImagesArray.map((_, pageIndex) => (
<label
for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`}
class="autoscrolling-images__dots"
></label>
))}
</div>
</div>
</div>
</div>
);
}
}

File Metadata

Mime Type
text/html
Expires
Fri, Jan 24, 08:24 (1 d, 14 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
600206
Default Alt Text
autoscrolling-images.jdd.tsx (5 KB)

Event Timeline