Add fullscreen-menu helpers
This commit is contained in:
parent
cd1260e390
commit
4491f53f32
57
src/back/routes/common/fullscreen-menu/fullscreen-menu.css
Normal file
57
src/back/routes/common/fullscreen-menu/fullscreen-menu.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
.fullscreen-menu {
|
||||||
|
--fullscreen-menu-padding: 1rem;
|
||||||
|
--fullscreen-menu-height: 100vh;
|
||||||
|
--fulscreen-menu-inner-height: calc(
|
||||||
|
var(--fullscreen-menu-height) - 2 * var(--fullscreen-menu-padding)
|
||||||
|
);
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
padding: var(--fullscreen-menu-padding);
|
||||||
|
padding-right: 0; /* for scrollbar to be close to the screen edge */
|
||||||
|
height: var(--fullscreen-menu-height);
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100vw;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: minmax(var(--fulscreen-menu-inner-height), 1fr);
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
/* These need to be overwritten upon activating the dialog */
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: scale(0.9);
|
||||||
|
|
||||||
|
transition: opacity 200ms, transform 200ms, visibility 0ms 200ms;
|
||||||
|
box-shadow: 1px 1px 11px #0000006e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-menu__content {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/2;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-menu__panel-container {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-menu__panel {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: translateX(50vw);
|
||||||
|
transition: opacity 200ms, transform 200ms, visibility 0ms 200ms;
|
||||||
|
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/2;
|
||||||
|
|
||||||
|
max-height: calc(var(--fulscreen-menu-inner-height) - 3rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
padding-right: var(--fullscreen-menu-padding);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
107
src/back/routes/common/fullscreen-menu/fullscreen-menu.tsx
Normal file
107
src/back/routes/common/fullscreen-menu/fullscreen-menu.tsx
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/consistent-type-assertions */
|
||||||
|
import type { FlatTemplatable } from "tempstream";
|
||||||
|
import { TempstreamJSX } from "tempstream";
|
||||||
|
|
||||||
|
type Styles = {
|
||||||
|
menu_open: string;
|
||||||
|
menu_closed: string;
|
||||||
|
body_when_open: string;
|
||||||
|
body_when_closed: string;
|
||||||
|
panel_open: string;
|
||||||
|
panel_closed: 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;`,
|
||||||
|
menu_closed: "",
|
||||||
|
body_when_open: "overflow: hidden;",
|
||||||
|
body_when_closed: "",
|
||||||
|
panel_open:
|
||||||
|
"opacity: 1; transform: translateX(0); visibility: visible; pointer-events: all; transition: opacity 200ms, transform 200ms, visibility 0ms 0ms;",
|
||||||
|
panel_closed: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
88
src/back/routes/fullscreen-menu-demo.page.tsx
Normal file
88
src/back/routes/fullscreen-menu-demo.page.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})();
|
||||||
40
src/back/routes/fullscreen-menu-demo.test.ts
Normal file
40
src/back/routes/fullscreen-menu-demo.test.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { withProdApp } from "../test_utils/with-prod-app.js";
|
||||||
|
import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "../test_utils/webhint.js";
|
||||||
|
import { FullscreenMenuDemoURL } from "./urls.js";
|
||||||
|
import { getBrowser } from "../test_utils/browser-creator.js";
|
||||||
|
import type { Browser, BrowserContext, Page } from "@playwright/test";
|
||||||
|
|
||||||
|
describe("FullscreenMenuDemo webhint", () => {
|
||||||
|
it("doesn't crash", async function () {
|
||||||
|
return withProdApp(async ({ base_url, rest_api }) => {
|
||||||
|
await rest_api.get(FullscreenMenuDemoURL);
|
||||||
|
await webhintURL(base_url + FullscreenMenuDemoURL);
|
||||||
|
// alternatively you can use webhintHTML for faster but less precise scans
|
||||||
|
// or for scanning responses of requests that use some form of authorization:
|
||||||
|
// const response = await rest_api.get(FullscreenMenuDemoURL);
|
||||||
|
// await webhintHTML(response);
|
||||||
|
});
|
||||||
|
}).timeout(VERY_LONG_TEST_TIMEOUT);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("FullscreenMenuDemo", () => {
|
||||||
|
let page: Page;
|
||||||
|
let browser: Browser;
|
||||||
|
let context: BrowserContext;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
browser = await getBrowser();
|
||||||
|
context = await browser.newContext();
|
||||||
|
page = await context.newPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(async () => {
|
||||||
|
await context.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("works as expected", async function () {
|
||||||
|
return withProdApp(async ({ base_url }) => {
|
||||||
|
await page.goto(base_url + FullscreenMenuDemoURL);
|
||||||
|
});
|
||||||
|
}).timeout(VERY_LONG_TEST_TIMEOUT);
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user