mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-02 14:51:15 +00:00

By specifying the CORS-friendly github raw url as base url for the interpreter, we can load images using relative paths. According to the inspector the image is loaded successfully, so what seems to be left to fix is an event loop related issue.
45 lines
No EOL
1.7 KiB
HTML
45 lines
No EOL
1.7 KiB
HTML
<script type="module">
|
|
"use strict";
|
|
import * as sixtyfps from 'https://www.sixtyfps.io/wasm-interpreter/sixtyfps_wasm_interpreter.js';
|
|
|
|
function render_or_error(source, div) {
|
|
let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9);
|
|
let canvas = document.createElement("canvas");
|
|
canvas.width = 100;
|
|
canvas.height = 100;
|
|
canvas.id = canvas_id;
|
|
div.appendChild(canvas);
|
|
try {
|
|
// Use the git repo as the base url, so that we can resolve image urls.
|
|
sixtyfps.instantiate_from_string(source, "https://raw.githubusercontent.com/sixtyfpsui/sixtyfps/master/README.md", canvas_id);
|
|
} catch (e) {
|
|
if (e.message === "Using exceptions for control flow, don't mind me. This isn't actually an error!") {
|
|
throw e;
|
|
}
|
|
var text = document.createTextNode(e.message);
|
|
var p = document.createElement('pre');
|
|
p.appendChild(text);
|
|
div.innerHTML = "<pre style='color: red; background-color:#fee; margin:0'>" + p.innerHTML + "</pre>";
|
|
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
async function run() {
|
|
|
|
await sixtyfps.default();
|
|
|
|
var elements = document.querySelectorAll("code.language-60, div.highlight-60 div");
|
|
for (var i = 0; i < elements.length; ++i) {
|
|
let source = elements[i].innerText;
|
|
let div = document.createElement("div");
|
|
div.style = "float: right; padding:0; margin:0;";
|
|
div.innerHTML = "<p>Preview:</p>";
|
|
elements[i].parentElement.insertBefore(div, elements[i])
|
|
setTimeout(function () { render_or_error(source, div); }, 1);
|
|
}
|
|
}
|
|
run();
|
|
|
|
|
|
</script> |