toggle-modal.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

toggle-modal.ts
View Options

	import { FlatTemplatable, tempstream } from "tempstream";
	import { makeSlug } from "../utils/utils.js";

	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>`;
	}