Improve placement of live preview

As the commented out code suggested, place the preview canvas as a floating element
into the code box, along with a label.
This commit is contained in:
Simon Hausmann 2020-09-04 08:50:35 +02:00 committed by Simon Hausmann
parent 7690ab6b6d
commit a539dab848

View file

@ -4,7 +4,11 @@
function render_or_error(source, div) { function render_or_error(source, div) {
let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9); let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9);
div.innerHTML = `<canvas id='${canvas_id}' width=100 height=100></canvas>`; let canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
canvas.id = canvas_id;
div.appendChild(canvas);
try { try {
sixtyfps.instantiate_from_string(source, canvas_id); sixtyfps.instantiate_from_string(source, canvas_id);
} catch (e) { } catch (e) {
@ -28,10 +32,9 @@
for (var i = 0; i < elements.length; ++i) { for (var i = 0; i < elements.length; ++i) {
let source = elements[i].innerText; let source = elements[i].innerText;
let div = document.createElement("div"); let div = document.createElement("div");
//div.style="float: right; width: 50%; padding:0"; div.style = "float: right; padding:0; margin:0;";
//elements[i].parentElement.insertBefore(div, elements[i]) div.innerHTML = "<p>Preview:</p>";
div.style = "padding:0; margin:0;"; elements[i].parentElement.insertBefore(div, elements[i])
elements[i].parentElement.appendChild(div);
setTimeout(function () { render_or_error(source, div); }, 1); setTimeout(function () { render_or_error(source, div); }, 1);
} }
} }