Page MenuHomeSealhub
Files F10352566

show-first-row.tsx
No OneTemporary
Actions

show-first-row.tsx
View Options

import { TempstreamJSX } from "tempstream";
import type { FlatTemplatable } from "tempstream";
const showFirstRowIds = (function* () {
let i = 0;
while (true) {
yield i++;
if (i == 999999999) {
i = 0;
}
}
})();
function min_container_width(columns: number, column_width: number, gap: number) {
return columns * column_width + (columns - 1) * gap;
}
export async function showFirstRow({
items,
min_column_width_px = 250,
column_gap_px = 10,
row_gap_px = column_gap_px,
make_show_more_button = () => (
<span class="show-first-row__default-button">Show more</span>
),
make_show_less_button = () => (
<span class="show-first-row__default-button">Show less</span>
),
add_button_to_content = (content, show_more_button, show_less_button) => (
<>
{content}
{show_more_button}
{show_less_button}
</>
),
classes = [],
how_many_rows = () => 1,
}: {
items: FlatTemplatable[];
min_column_width_px?: number;
make_show_more_button?: () => JSX.Element;
make_show_less_button?: () => JSX.Element;
column_gap_px?: number;
row_gap_px?: number;
add_button_to_content?: (
content: JSX.Element,
show_more_button: JSX.Element,
show_less_button: JSX.Element
) => JSX.Element;
classes?: classNames.ArgumentArray;
how_many_rows?: (columns_count: number) => number;
}): Promise<string> {
const id = showFirstRowIds.next().value;
const checkbox_id = "show-first-row__checkbox--" + id;
return (
<div
class={[
"show-first-row",
`show-first-row--id-${id}`,
`show-first-row--items-count-${items.length}`,
...classes,
]}
style={`--min-column-width: ${min_column_width_px}px; --items-count: ${items.length}; --column-gap: ${column_gap_px}px`}
>
{[1, 2, 3, 4, 5, 6, 7, 8, 9]
.reverse()
.map((columns) => {
const rows = how_many_rows(columns);
return /* HTML */ `<style>
@container (min-width: ${min_container_width(
columns,
min_column_width_px,
column_gap_px
) + 1}px) and (max-width: ${min_container_width(
columns + 1,
min_column_width_px,
column_gap_px
)}px) {
.show-first-row--id-${id} {
&:not(
:has(
.show-first-row__items
> *:nth-child(${columns * rows + 1})
)
) {
.show-first-row__button {
display: none;
}
}
.show-first-row__checkbox:not(:checked)
+ .show-first-row__items {
grid-template-rows: ${"auto ".repeat(rows)} repeat(
calc(var(--items-count) - ${rows}),
0px
);
& > * {
margin-bottom: ${row_gap_px}px !important;
&:nth-child(n + ${columns * rows + 1}) {
opacity: 0;
pointer-events: none;
}
}
margin-bottom: -${row_gap_px}px !important;
}
}
}
</style>`;
})
.join("\n")}
<input
class="show-first-row__checkbox"
autocomplete="off"
type="checkbox"
id={checkbox_id}
style="display: none"
/>
{add_button_to_content(
<div class={["show-first-row__items"]}>{items}</div>,
<label
for={checkbox_id}
class={["show-first-row__button", "show-first-row__show-more-button"]}
>
{make_show_more_button()}
</label>,
<label
for={checkbox_id}
class={["show-first-row__button", "show-first-row__show-less-button"]}
>
{make_show_less_button()}
</label>
)}
</div>
);
}

File Metadata

Mime Type
text/html
Expires
Sun, Nov 2, 16:54 (8 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1030443
Default Alt Text
show-first-row.tsx (3 KB)

Event Timeline