mirror of
https://bjh21.me.uk/bedstead/.git
synced 2026-07-09 13:33:06 -04:00
e6c1e44db0
Apparently Chromium can't cope with "defer" scripts (which modules are by default) in XHTML documents. But "async" scripts work properly, so now we use one of those and then wait for DOMContentLoaded as necessary.
174 lines
5.6 KiB
HTML
174 lines
5.6 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
|
|
<head>
|
|
<!-- SPDX-License-Identifier: CC0-1.0 -->
|
|
<link rel="stylesheet" href="bedstead.css" type="text/css" />
|
|
<title>Bedstead editor test</title>
|
|
<style>
|
|
:root {
|
|
--pix: 7vmin;
|
|
}
|
|
body {
|
|
max-width: none;
|
|
}
|
|
#inout {
|
|
display: flex;
|
|
}
|
|
#inpane, #outpane {
|
|
padding-left: var(--pix);
|
|
padding-top: var(--pix);
|
|
width: calc(5 * var(--pix));
|
|
height: calc(9 * var(--pix));
|
|
}
|
|
#pixels {
|
|
border-spacing: 0;
|
|
}
|
|
#pixels td {
|
|
padding: 0;
|
|
line-height: 0;
|
|
}
|
|
#pixels input {
|
|
appearance: none;
|
|
color: inherit;
|
|
margin: 0;
|
|
width: var(--pix);
|
|
height: var(--pix);
|
|
border: 1px solid;
|
|
}
|
|
#pixels input:checked {
|
|
background: currentColor;
|
|
}
|
|
</style>
|
|
<!-- Script is async rather than deferred because Chromium can't
|
|
handle deferred scripts in XHTML.
|
|
https://issues.chromium.org/issues/40518469 -->
|
|
<script type="module" async="async"><![CDATA[
|
|
import Bedstead from './bedstead.js';
|
|
function update_glyph() {
|
|
var args = [];
|
|
var cstr = "";
|
|
for (var row of document.getElementById("pixels").rows) {
|
|
var arg = 0;
|
|
for (var pixel of row.getElementsByTagName('input')) {
|
|
arg *= 2;
|
|
if (pixel.checked) {
|
|
arg += 1
|
|
}
|
|
}
|
|
args.push(arg.toString());
|
|
cstr += "\\" + arg.toString(8).padStart(2, "0");
|
|
}
|
|
document.getElementById("c").textContent =
|
|
` {"${cstr}", U() },`;
|
|
Bedstead({
|
|
arguments: args,
|
|
print: function(charstring) {
|
|
document.getElementById("charstring").textContent = charstring;
|
|
document.getElementById("rendered")
|
|
.setAttribute("d", charstring
|
|
.replaceAll(/<!--(?:[^-]|-[^-])*-->/g, "")
|
|
.replace(/^.* [hv]stem /, "")
|
|
.replace(/^cntrmask [01]* /, "")
|
|
.replaceAll(/(\S+ +\S+ +)rmoveto/g, "m$1")
|
|
.replaceAll(/ rlineto/g, "")
|
|
.replace(/ endchar/, ""));
|
|
}
|
|
});
|
|
}
|
|
function init() {
|
|
for (var e of document.getElementsByTagName('input')) {
|
|
e.onchange = update_glyph;
|
|
}
|
|
update_glyph();
|
|
}
|
|
// This script is loaded asynchronously, so make sure the DOM is
|
|
// loaded before touching it.
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
} else {
|
|
init();
|
|
}
|
|
]]>
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="inout">
|
|
<form id="inpane">
|
|
<table id="pixels">
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
<td><input type="checkbox"/></td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
<div id="outpane">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 1000">
|
|
<g transform="scale(1,-1) translate(0,-800)">
|
|
<path id="rendered" fill="currentColor"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p><pre id="c"></pre></p>
|
|
<p><code id="charstring"></code></p>
|
|
</body>
|
|
</html>
|