89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import type { Context } from "koa";
|
|
import { TempstreamJSX } from "tempstream";
|
|
import { Page } from "@sealcode/sealgen";
|
|
import html from "../html.js";
|
|
import { fullscreenMenu } from "./common/fullscreen-menu/fullscreen-menu.js";
|
|
|
|
export const actionName = "FullscreenMenuDemo";
|
|
|
|
export default new (class FullscreenMenuDemoPage extends Page {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
async canAccess(_: Context) {
|
|
return { canAccess: true, message: "" };
|
|
}
|
|
|
|
async render(ctx: Context) {
|
|
return html(
|
|
ctx,
|
|
"FullscreenMenuDemo",
|
|
<div>
|
|
{
|
|
/* HTML */ `<style>
|
|
.fullscreen-menu__panel--panel_1 {
|
|
transform: translateX(-50vw); /* move that one to the left */
|
|
}
|
|
|
|
.fullscreen-menu label {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fullscreen-menu__panel {
|
|
font-size: 20px;
|
|
display: flex;
|
|
flex-flow: column;
|
|
row-gap: 20px;
|
|
}
|
|
</style>`
|
|
}
|
|
{fullscreenMenu({
|
|
id: "demo",
|
|
panels: {
|
|
panel_1: (
|
|
<div>
|
|
PANEL 1. Click{" "}
|
|
<label for="demo__activate--panel_2">here</label> to go to
|
|
panel 2<div>And here's some description</div>
|
|
Go to{" "}
|
|
<label for="demo__activate--panel_3">
|
|
Very tall panel 3
|
|
</label>
|
|
</div>
|
|
),
|
|
panel_2: (
|
|
<div>
|
|
PANEL 2
|
|
<div>
|
|
<label for="demo__activate--panel_1">←Go back</label>
|
|
</div>
|
|
</div>
|
|
),
|
|
panel_3: (
|
|
<div style="display: flex; flex-flow: column; row-gap: 20px;">
|
|
<label for="demo__activate--panel_1">←Go back</label>
|
|
{[
|
|
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
|
|
17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
|
|
30,
|
|
].map((n) => (
|
|
<div>{n}</div>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
default_panel: "panel_1",
|
|
})}
|
|
<div style="display: flex; flex-flow: column; row-gap: 10px;">
|
|
<label for="demo--visible">Toggle menu via checkbox label</label>
|
|
<button onclick="demo.showModal()" type="button">
|
|
Toggle menu with javascript
|
|
</button>
|
|
</div>
|
|
<div style="height: 150vh">
|
|
This page is taaaaall - for testing reasons
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
})();
|