Move show-first-row to separate component
This commit is contained in:
parent
70247171be
commit
82a7d45c44
@ -41,7 +41,8 @@
|
||||
"sealgen": {
|
||||
"styleDirs": [
|
||||
"node_modules/@sealcode/jdd-editor/assets",
|
||||
"node_modules/@sealcode/sortable/src/stimulus-styles"
|
||||
"node_modules/@sealcode/sortable/src/stimulus-styles",
|
||||
"node_modules/@sealcode/show-first-row/src/styles"
|
||||
],
|
||||
"controllerDirs": [
|
||||
"node_modules/@sealcode/jdd-editor/src/controllers",
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
.show-first-row {
|
||||
container-type: inline-size;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.show-first-row__items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
|
||||
justify-content: center;
|
||||
gap: var(--column-gap);
|
||||
transition: row-gap 200ms, overflow 200ms;
|
||||
overflow: hidden;
|
||||
|
||||
.show-first-row__checkbox:not(:checked) + & {
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
& > * {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.show-first-row__default-button {
|
||||
background: blue;
|
||||
color: white;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.show-first-row__show-less-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:has(input:checked) {
|
||||
.show-first-row__show-less-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.show-first-row__show-more-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
4
src/back/routes/demos/show-first-row.css
Normal file
4
src/back/routes/demos/show-first-row.css
Normal file
@ -0,0 +1,4 @@
|
||||
.show-first-row .show-first-row__default-button {
|
||||
background-color: var(--color-brand-accent);
|
||||
color: var(--color-brand-text-on-accent);
|
||||
}
|
||||
@ -2,14 +2,14 @@ import type { Context } from "koa";
|
||||
import { TempstreamJSX } from "tempstream";
|
||||
import { Page } from "@sealcode/sealgen";
|
||||
import html from "../../html.js";
|
||||
import { showFirstRow } from "../common/show-first-row/show-first-row.js";
|
||||
import { showFirstRow } from "@sealcode/show-first-row";
|
||||
|
||||
export const actionName = "ShowFirstRowDemo";
|
||||
|
||||
function makeBoxStyle() {
|
||||
return `width: 100%; max-width: 200px; height: ${
|
||||
100 + Math.random() * 100
|
||||
}px; background-color: lime; text-align: center; color: #0000009e; font-size: 40px; padding-top: 20px; box-sizing: border-box;`;
|
||||
}px; background-color: var(--color-brand-accent2); text-align: center; color: #0000009e; font-size: 40px; padding-top: 20px; box-sizing: border-box;`;
|
||||
}
|
||||
|
||||
export default new (class ShowFirstRowDemoPage extends Page {
|
||||
|
||||
@ -49,6 +49,9 @@ application.register("submit-on-input", SubmitOnInput);
|
||||
import { default as Toast } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/toast.stimulus.js";
|
||||
application.register("toast", Toast);
|
||||
|
||||
import { default as PasswordGenerateButton } from "./../../node_modules/@sealcode/sealgen/src/controllers/password-generate-button.stimulus.js";
|
||||
application.register("password-generate-button", PasswordGenerateButton);
|
||||
|
||||
import { default as TableAddButton } from "./../../node_modules/@sealcode/sealgen/src/controllers/table-add-button.stimulus.js";
|
||||
application.register("table-add-button", TableAddButton);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user