matthew
/
pteropus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separate JS and CSS out of HTML document and into their own files

This commit is contained in:
Matthew Gordon 2025-06-10 09:38:32 -03:00
parent b3deecc02f
commit 15fd82da34
3 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/index.html
View File

@ -2,61 +2,11 @@
<html>
<head>
<title>Pteropus</title>
<style>
#pteropus-canvas {
height: 100%;
width: 100%;
display: block;
}
<link rel="stylesheet" href="pteropus-frame.css">
</style>
</head>
<body>
<canvas id="pteropus-canvas"></canvas>
<script type="module">
import init, {init_pteropus} from '../pkg/pteropus.js';
function fileDragOverHandler(event) {
event.preventDefault();
}
async function run() {
await init();
let pteropus = await init_pteropus();
let test_file_data = null;
let needs_resize = true;
let mainCanvas = document.getElementById("pteropus-canvas");
mainCanvas.addEventListener("drop", async (event) => {
event.preventDefault();
test_file_data = event.dataTransfer.files[0]
});
mainCanvas.addEventListener("dragover", fileDragOverHandler);
const resizeObserver = new ResizeObserver((entries) => {
needs_resize = true;
});
resizeObserver.observe(mainCanvas)
while(true)
{
await pteropus.render();
// TODO: I really want to do this asynchronously, with the drop
// event listener calling pteropus_load_file directly, but I need
// to figure out how to get that to work.
if(test_file_data) {
await pteropus.load_file(test_file_data);
test_file_data = null
}
if(needs_resize) {
await pteropus.on_resize();
needs_resize = false;
}
await new Promise(requestAnimationFrame);
}
}
run();
</script>
<script type="module" src="pteropus-frame.js"></script>
</body>
</html>

5
web/pteropus-frame.css Normal file
View File

@ -0,0 +1,5 @@
#pteropus-canvas {
height: 100%;
width: 100%;
display: block;
}

44
web/pteropus-frame.js Normal file
View File

@ -0,0 +1,44 @@
import init, {init_pteropus} from '../pkg/pteropus.js';
function fileDragOverHandler(event) {
event.preventDefault();
}
async function run() {
await init();
let pteropus = await init_pteropus();
let test_file_data = null;
let needs_resize = true;
let mainCanvas = document.getElementById("pteropus-canvas");
mainCanvas.addEventListener("drop", async (event) => {
event.preventDefault();
test_file_data = event.dataTransfer.files[0]
});
mainCanvas.addEventListener("dragover", fileDragOverHandler);
const resizeObserver = new ResizeObserver((entries) => {
needs_resize = true;
});
resizeObserver.observe(mainCanvas)
while(true)
{
await pteropus.render();
// TODO: I really want to do this asynchronously, with the drop
// event listener calling pteropus_load_file directly, but I need
// to figure out how to get that to work.
if(test_file_data) {
await pteropus.load_file(test_file_data);
test_file_data = null
}
if(needs_resize) {
await pteropus.on_resize();
needs_resize = false;
}
await new Promise(requestAnimationFrame);
}
}
run();