79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
<link rel="stylesheet" href="/static/libs/rustpad-player/player.css">
|
|
<script>window.__RUSTPAD_CONFIG__={assetVersion:"test"};</script>
|
|
<script type="importmap">
|
|
{"imports":{
|
|
"@rustpad/i18n":"/static/js/i18n.js",
|
|
"@rustpad/toast":"/static/js/toast.js",
|
|
"@rustpad/vendor-libs":"/static/js/vendor-libs.js",
|
|
"@rustpad/markdown":"/static/js/markdown.js",
|
|
"@rustpad/emoji-data":"/static/js/emoji-data.js",
|
|
"@rustpad/image-alias":"/static/js/image-alias.js"
|
|
}}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="toast"></div>
|
|
<button id="pdf">PDF</button>
|
|
<dialog id="dlg">
|
|
<form id="form" method="dialog">
|
|
<select id="pdf-page-format"><option value="screen-16-9" selected>screen</option></select>
|
|
<select id="pdf-page-margin"><option value="12" selected>12</option></select>
|
|
<input id="pdf-include-title" type="checkbox">
|
|
<input id="pdf-preserve-colors" type="checkbox">
|
|
<button data-pdf-cancel type="button">cancel</button>
|
|
<button type="submit">go</button>
|
|
</form>
|
|
</dialog>
|
|
<div id="preview" class="preview markdown-body"></div>
|
|
<script type="module">
|
|
import { renderMarkdown } from "@rustpad/markdown";
|
|
import { bindPdfExport } from "/static/js/pdf-export.js";
|
|
|
|
const source = await (await fetch('/TEST_NOTE_FEATURES.txt')).text();
|
|
const preview = document.querySelector('#preview');
|
|
preview.innerHTML = renderMarkdown(source);
|
|
|
|
// Replace raw Mermaid source blocks with representative SVGs so pagination
|
|
// exercises the same tall/wide atomic visuals as the real rendered preview.
|
|
[...preview.querySelectorAll('.mermaid')].forEach((node, index) => {
|
|
const tall = index === 2 || index === 3 || index === 4;
|
|
const height = tall ? 1500 : 520;
|
|
node.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 ${height}" width="900" height="${height}"><rect width="900" height="${height}" fill="#efeae2"/><rect x="90" y="60" width="720" height="180" rx="16" fill="#202323"/><text x="450" y="160" text-anchor="middle" font-size="56" fill="white">Mermaid ${index + 1}</text><line x1="450" y1="240" x2="450" y2="${height - 100}" stroke="#777" stroke-width="6"/></svg>`;
|
|
});
|
|
|
|
let popupFrame = null;
|
|
window.open = () => {
|
|
popupFrame = document.createElement('iframe');
|
|
popupFrame.id = 'print-frame';
|
|
popupFrame.style.cssText = 'position:absolute;left:-10000px;top:0;width:1400px;height:900px;border:0';
|
|
document.body.appendChild(popupFrame);
|
|
const win = popupFrame.contentWindow;
|
|
win.focus = () => {};
|
|
win.print = async () => {
|
|
const html = win.document.documentElement.outerHTML;
|
|
await fetch('/capture', { method: 'POST', headers: {'Content-Type':'text/html'}, body: html });
|
|
document.documentElement.dataset.captureDone = '1';
|
|
};
|
|
return win;
|
|
};
|
|
|
|
const dialog = document.querySelector('#dlg');
|
|
bindPdfExport({
|
|
button: document.querySelector('#pdf'),
|
|
dialog,
|
|
form: document.querySelector('#form'),
|
|
preview,
|
|
title: () => 'TEST_NOTE_FEATURES',
|
|
});
|
|
|
|
dialog.showModal();
|
|
document.querySelector('#form').dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
|
|
</script>
|
|
</body>
|
|
</html>
|