slint/docs/resources/slint-docs-preview.html

<!--
    This file is used to add preview of the `.slint` snippets in the generated rustdoc documentation.
    It can be injected via the `--html-in-header slint-docs-preview.html` option of rustdoc.
-->
<script type="module">
    "use strict";
    //import * as slint from 'https://slint-ui.com/releases/0.x.0/wasm-interpreter/slint_wasm_interpreter.js';
    //const editor_url = "https://slint-ui.com/releases/0.x.0/editor/";
    import * as slint from 'https://slint-ui.com/snapshots/master/wasm-interpreter/slint_wasm_interpreter.js';
    const editor_url = "https://slint-ui.com/snapshots/master/editor/";
    // keep them alive
    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) {
        // The `no-auto-preview` doesn't map directly to a dedicated class but it is mangled differently
        // between rustdoc and sphinx, so match fuzzy on the entire class list:
        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();

    // Included markdown files may have links to other markdown files, which may not have been
    // resolved by rustdoc. This helper locates such links and resolves them, assuming that each
    // .md file gets its own sub-directory with an index.html.
    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()

    // Select C++ blocks in rustdoc generated code and hide them, while opening the <details> of Rust snippets
    // Similarly, in Sphinx generated HTML, hide Rust blocks and open C++.
    function select_code_snippet_variants(options) {
        // When the CSS has pseudo class becomes available, we can probably use that directly
        // in a stylesheet instead of JS here.

        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>