Page MenuHomeSealhub
Files F10361405

fullscreen-menu.tsx
No OneTemporary
Actions

fullscreen-menu.tsx
View Options

/* eslint-disable @typescript-eslint/consistent-type-assertions */
import type { FlatTemplatable } from "tempstream";
import { TempstreamJSX } from "tempstream";
type Styles = {
menu_open: string;
body_when_open: string;
panel_open: string;
};
const default_styles: Styles = {
menu_open: `opacity: 1; visibility: visible; pointer-events: all; transform: scale(1); transition: opacity 200ms, transform 200ms, visibility 0ms 0ms;`,
body_when_open: "overflow: hidden;",
panel_open:
"opacity: 1; transform: translateX(0); visibility: visible; pointer-events: all; transition: opacity 200ms, transform 200ms, visibility 0ms 0ms;",
};
export function fullscreenMenu({
id: menu_id,
panels,
default_panel,
styles = {},
inner_wrapper = (menu_id, content) => (
<div style="width: 100%;">
<div>
<label for={`${menu_id}--visible`}>Close with checkbox label</label>
</div>
<div>{content}</div>
</div>
),
outer_wrapper = (_menu_id: string, content: FlatTemplatable) => content,
}: {
id: string;
panels: Record<string, FlatTemplatable>;
default_panel: string;
styles?: Partial<Styles>;
outer_wrapper?: (menu_id: string, inner: FlatTemplatable) => FlatTemplatable;
inner_wrapper?: (menu_id: string, inner: FlatTemplatable) => FlatTemplatable;
}) {
const full_styles = { ...default_styles, ...styles };
return outer_wrapper(
menu_id,
<div class={`fullscreen-menu fullscreen-menu--${menu_id}`} id={menu_id}>
<input
type="checkbox"
id={`${menu_id}--visible`}
autocomplete="off"
style="display: none"
/>
{
/* HTML */ `<style>
body:has(#${menu_id}--visible:checked) .fullscreen-menu--${menu_id},
.fullscreen-menu--${menu_id}[open]{
${full_styles.menu_open}
}
body:has(#${menu_id}--visible:checked),
body:has(.fullscreen-menu--${menu_id}[open]) {
${full_styles.body_when_open}
}
</style>`
}
<div>
{Object.keys(panels).map((panel_id) => (
<span>
<input
type="radio"
name={`${menu_id}__active_panel`}
value={panel_id}
checked={panel_id == default_panel}
id={`${menu_id}__activate--${panel_id}`}
autocomplete="off"
style="display: none"
/>
{`<style>
body:has(#${menu_id}--visible:checked) .fullscreen-menu:has(input[value="${panel_id}"]:checked) .fullscreen-menu__panel--${panel_id},
body:has(.fullscreen-menu--${menu_id}[open]) .fullscreen-menu:has(input[value="${panel_id}"]:checked) .fullscreen-menu__panel--${panel_id} {
${full_styles.panel_open}
}
</style>`}
</span>
))}
</div>
<div class="fullscreen-menu__content">
{inner_wrapper(
menu_id,
<div class="fullscreen-menu__panel-container">
{Object.entries(panels).map(([panel_id, panel_content]) => (
<div
class={`fullscreen-menu__panel fullscreen-menu__panel--${panel_id}`}
>
{panel_content}
</div>
))}
</div>
)}
</div>
</div>
);
}

File Metadata

Mime Type
text/html
Expires
Sat, Nov 8, 13:25 (13 h, 21 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034623
Default Alt Text
fullscreen-menu.tsx (2 KB)

Event Timeline