Page MenuHomeSealhub
Files F9583646

No OneTemporary
Actions

View Options

diff --git a/src/components/components.ts b/src/components/components.ts
index 811d3d4..51cbc13 100644
--- a/src/components/components.ts
+++ b/src/components/components.ts
@@ -1 +1,2 @@
export * from "./tabs";
+export * from "./toggle-modal";
diff --git a/src/components/toggle-modal.ts b/src/components/toggle-modal.ts
new file mode 100644
index 0000000..c38c329
--- /dev/null
+++ b/src/components/toggle-modal.ts
@@ -0,0 +1,52 @@
+import { FlatTemplatable, tempstream } from "tempstream";
+import { makeSlug } from "../utils/utils";
+
+export function toggleModal(options: {
+ name: string;
+ contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
+ contentUnwrapped: (
+ id: string
+ ) => FlatTemplatable | Promise<FlatTemplatable>;
+}) {
+ const { contentWrapped, contentUnwrapped, name } = options;
+ const id = makeSlug(name);
+ return tempstream/* HTML */ `<style>
+ .toggle-modal__wrapped {
+ display: none;
+ }
+
+ @media (max-width: 960px) {
+ .toggle-modal__wrapped {
+ display: block;
+ }
+ .toggle-modal__unwrapped {
+ display: none;
+ }
+
+ #${id} {
+ display: none;
+ }
+
+ #${id}:checked ~ .toggle-modal__wrapped {
+ display: none;
+ }
+
+ #${id}:checked ~ .toggle-modal__unwrapped {
+ display: block;
+ position: fixed;
+ height: 100vh;
+ width: 100vw;
+ top: 0;
+ left: 0;
+ background-color: white;
+ z-index: 99;
+ overflow-y: scroll;
+ }
+ }
+ </style>
+ <div class="toggle-modal toggle-modal--${id}">
+ <input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
+ <div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
+ <div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
+ </div>`;
+}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 11, 10:20 (1 d, 9 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
984204
Default Alt Text
(1 KB)

Event Timeline