kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move the horizontal scroller demo. Make the dots in the demo disappear without reflow

Browse Source
This commit is contained in:
Kuba Orlik 2024-08-06 18:45:20 +02:00
parent c927144adb
commit b2126eb0ee
3 changed files with 0 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/back/routes/horizontal-scroller-demo.css
View File

@ -1,24 +0,0 @@
.bignum {
font-size: 60px;
background-color: aquamarine;
color: hsl(159.8, 100%, 39.9%);
width: 150px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal-scroller {
.next-button,
.prev-button {
pointer-events: none;
opacity: 0.5;
}
&.has-next .next-button,
&.has-prev .prev-button {
pointer-events: all;
opacity: 1;
}
}

90
src/back/routes/horizontal-scroller-demo.page.tsx
View File

@ -1,90 +0,0 @@
import type { Context } from "koa";
import { TempstreamJSX } from "tempstream";
import { Page } from "@sealcode/sealgen";
import html from "../html.js";
import { horizontalScroller } from "./common/horizontal-scroller/horizontal-scroller.js";
export const actionName = "HorizontalScrollerDemo";
export default new (class HorizontalScrollerDemoPage 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,
"HorizontalScrollerDemo",
<div>
<h2>Always scrolls + has buttons</h2>
{horizontalScroller({
elements: [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13].map((n) => (
<div class="bignum">{n}</div>
)),
render: async ({ scroller, markers }) => (
<div>
<div>
<button
class="prev-button"
type="button"
data-action="horizontal-scroller#scrollLeft"
>
{" "}
←{" "}
</button>
<button
class="next-button"
type="button"
data-action="horizontal-scroller#scrollRight"
>
{" "}
→{" "}
</button>
</div>
{scroller}
{markers}
</div>
),
})}
<h2>Sometimes doesn't scroll, then dots are hidden</h2>
{
/* HTML */ `<style>
.horizontal-scroller--all-visible {
.horizontal-scroller__markers {
display: none;
}
}
</style>`
}
{horizontalScroller({
elements: [1, 2, 3, 4].map((n) => <div class="bignum">{n}</div>),
render: async ({ scroller, markers }) => (
<div>
<div>
<button
class="prev-button"
type="button"
data-action="horizontal-scroller#scrollLeft"
>
{" "}
←{" "}
</button>
<button
class="next-button"
type="button"
data-action="horizontal-scroller#scrollRight"
>
{" "}
→{" "}
</button>
</div>
{scroller}
{markers}
</div>
),
})}
</div>
);
}
})();

16
src/back/routes/horizontal-scroller-demo.test.ts
View File

@ -1,16 +0,0 @@
import { withProdApp } from "../test_utils/with-prod-app.js";
import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "../test_utils/webhint.js";
import { HorizontalScrollerDemoURL } from "./urls.js";
describe("HorizontalScrollerDemo webhint", () => {
it("doesn't crash", async function () {
return withProdApp(async ({ base_url, rest_api }) => {
await rest_api.get(HorizontalScrollerDemoURL);
await webhintURL(base_url + HorizontalScrollerDemoURL);
// 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(HorizontalScrollerDemoURL);
// await webhintHTML(response);
});
}).timeout(VERY_LONG_TEST_TIMEOUT);
});