// @ts-check
const HEIGHTS = [64, 280, 440, 1400];
/** @param {{ args: string[], accept: string[] }} context */
export default function resize({ args, accept }) {
if (args.includes("--help")) return "Test embedded HTML resizing.\n\nUsage: run.js\n";
for (const type of accept) {
if (type === "text/html") {
return new Response(renderHtml(), {
headers: { "content-type": "text/html; charset=utf-8" },
});
}
if (type === "application/json") return { heights: HEIGHTS };
if (type === "text/plain") return `Resize demo heights: ${HEIGHTS.join(", ")}px\n`;
}
}
function renderHtml() {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Resize demo</title>
<style>
:root { color: #191919; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { overflow-x: hidden; }
.canvas {
position: relative;
height: ${HEIGHTS[0]}px;
min-height: 1px;
transition: height 180ms ease;
}
.marker {
position: absolute;
right: 12px;
bottom: 8px;
color: #686868;
font-size: 11px;
}
button {
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 42px;
padding: 0 18px;
border: 0;
border-radius: 4px;
color: #fff;
background: #191919;
font: inherit;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
button:hover { background: #353535; }
button:focus-visible { outline: 2px solid #191919; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .canvas { transition: none; } }
</style>
</head>
<body>
<main class="canvas" id="canvas">
<span class="marker" id="marker">${HEIGHTS[0]}px content</span>
</main>
<button id="resize" type="button">Make taller</button>
<script>
const heights = ${JSON.stringify(HEIGHTS)};
const canvas = document.getElementById("canvas");
const marker = document.getElementById("marker");
const button = document.getElementById("resize");
let stage = 0;
button.addEventListener("click", () => {
stage = (stage + 1) % heights.length;
const height = heights[stage];
canvas.style.height = height + "px";
marker.textContent = height + "px content";
button.textContent = stage === heights.length - 1 ? "Reset height" : "Make taller";
if (stage === 0) scrollTo(0, 0);
});
</script>
</body>
</html>`;
}