From 15fd82da3435cb6f654aa2dab7bb3bb454c6fc18 Mon Sep 17 00:00:00 2001 From: Matthew Gordon Date: Tue, 10 Jun 2025 09:38:32 -0300 Subject: [PATCH] Separate JS and CSS out of HTML document and into their own files --- web/index.html | 54 ++---------------------------------------- web/pteropus-frame.css | 5 ++++ web/pteropus-frame.js | 44 ++++++++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 52 deletions(-) create mode 100644 web/pteropus-frame.css create mode 100644 web/pteropus-frame.js diff --git a/web/index.html b/web/index.html index 4ed02ac..6d9b9bf 100644 --- a/web/index.html +++ b/web/index.html @@ -2,61 +2,11 @@ Pteropus - - + diff --git a/web/pteropus-frame.css b/web/pteropus-frame.css new file mode 100644 index 0000000..01867e4 --- /dev/null +++ b/web/pteropus-frame.css @@ -0,0 +1,5 @@ +#pteropus-canvas { + height: 100%; + width: 100%; + display: block; +} diff --git a/web/pteropus-frame.js b/web/pteropus-frame.js new file mode 100644 index 0000000..bd5f593 --- /dev/null +++ b/web/pteropus-frame.js @@ -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();