<script type="module">
"use strict";
import * as slint from 'https://slint-ui.com/releases/0.3.2/wasm-interpreter/slint_wasm_interpreter.js';
const editor_url = "https://slint-ui.com/releases/0.3.2/editor/";
var all_instances = new Array;
async function render_or_error(source, div) {
let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9);
let canvas = document.createElement("canvas");
canvas.id = canvas_id;
div.appendChild(canvas);
let { component, error_string } = await slint.compile_from_string(source, "");
if (error_string != "") {
var text = document.createTextNode(error_string);
var p = document.createElement('pre');
p.appendChild(text);
div.innerHTML = "<pre style='color: red; background-color:#fee; margin:0'>" + p.innerHTML + "</pre>";
}
if (component !== undefined) {
let instance = component.create(canvas_id);
instance.show();
all_instances.push(instance);
}
}
async function create_preview(element, source_code) {
let div = document.createElement("div");
div.style = "float: right; padding:0; margin:0;";
element.prepend(div);
await render_or_error(source_code, div);
}
function should_show_automatic_preview(element) {
return !element.className.includes("no-auto-preview");
}
async function create_click_to_play_and_edit_buttons(element) {
let source = element.innerText;
let link_section = document.createElement("div");
element.append(link_section);
let button_style = "text-decoration: none;"
let edit_button = document.createElement("a");
edit_button.style = button_style;
edit_button.href = `${editor_url}?snippet=${encodeURIComponent(source)}`;
edit_button.target = "_blank";
edit_button.innerText = "Edit 📝";
link_section.append(edit_button);
if (should_show_automatic_preview(element)) {
create_preview(element, source);
} else {
let play_button = document.createElement("a");
play_button.style = button_style;
play_button.innerText = "Preview ▶️";
play_button.onclick = async () => {
play_button.remove();
create_preview(element, source);
};
link_section.prepend(play_button);
}
}
async function run() {
await slint.default();
let selector = ["code.language-slint", ".rustdoc pre.language-slint", "div.highlight-slint", "div.highlight-slint\\,no-auto-preview"]
.map((sel) => `${sel}:not([class*=slint\\,ignore]):not([class*=slint\\,no-preview])`).join(",");
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; ++i) {
await create_click_to_play_and_edit_buttons(elements[i]);
}
slint.run_event_loop();
}
run();
function fix_markdown_links() {
for (let anchor of document.querySelectorAll('a[href$=".md"], a[href*=".md#"]')) {
let url = new URL(anchor.href);
let dir_separator = Math.max(url.pathname.lastIndexOf("/"), 0);
let base_name = url.pathname.slice(dir_separator + 1, -3);
let base_path = url.pathname.slice(0, dir_separator);
url.pathname = base_path + "/../" + base_name + "/index.html";
anchor.setAttribute("href", url);
}
}
fix_markdown_links()
function select_code_snippet_variants(options) {
let selector_for_language = (language) => {
return `details[data-snippet-language="${language}"]`;
};
for (let details_element_to_hide of document.querySelectorAll(selector_for_language(options.hide))) {
details_element_to_hide.style = "display: none";
}
for (let details_element_to_show of document.querySelectorAll(selector_for_language(options.show))) {
details_element_to_show.open = true;
}
}
const rustDoc = document.querySelector('meta[name="generator"]')?.content == "rustdoc";
if (rustDoc) {
select_code_snippet_variants({ hide: "cpp", show: "rust" })
} else {
select_code_snippet_variants({ hide: "rust", show: "cpp" })
}
</script>