include yslt_noindent.yml2

// overrides yslt's output function to set CDATA
decl output(method, cdata-section-elements="xhtml:script");

istylesheet
            /* From Inkscape */
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:cc="http://creativecommons.org/ns#"
            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
            xmlns:xhtml="http://www.w3.org/1999/xhtml"
            xmlns:reflect="reflect"

            /* Our namespace to invoke python code */
            xmlns:ns="beremiz"
            extension-element-prefixes="ns func exsl regexp str dyn"
            exclude-result-prefixes="ns str regexp exsl func dyn reflect" {


    const "hmi_elements", "//svg:*[starts-with(@inkscape:label, 'HMI:')]";

    include hmi_tree.ysl2

    include geometry.ysl2

    include detachable_pages.ysl2

    include inline_svg.ysl2

    include widgets_common.ysl2

    include widget_*.ysl2

    template "*[namespace-uri()='reflect']", mode="debug_as_comment" {
        comment {
            | «local-name()» :
            apply ".", mode="debug";
        }
    }

    template "/" {
        comment > Made with SVGHMI. https://beremiz.org

        // all debug output from included definitions, as comments
        // apply "document('')/*/reflect:*", mode="debug_as_comment";

        html xmlns="http://www.w3.org/1999/xhtml"
             xmlns:svg="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink" {
            head;
            body style="margin:0;overflow:hidden;" {
                // Inline SVG
                copy "$result_svg";
                script{
                    call "scripts";
                }
            }
        }
    }

    function "scripts"
    {
        |
        | id = idstr => document.getElementById(idstr);
        |
        | var hmi_hash = [«$hmitree/@hash»]; 

        | var hmi_widgets = {
        apply "$hmi_elements", mode="hmi_elements";
        | }
        |
        | var heartbeat_index = «$indexed_hmitree/*[@hmipath = '/HEARTBEAT']/@index»;
        |
        | var hmitree_types = [

        foreach "$indexed_hmitree/*" {
        |     /* «@index»  «@hmipath» */ "«substring(local-name(), 5)»"`if "position()!=last()" > ,`
        }

        | ]
        |

        | var detachable_elements = {
        foreach "$detachable_elements"{
        |     "«@id»":[id("«@id»"), id("«../@id»")]`if "position()!=last()" > ,`
        }
        | }

        |
        | var page_desc = {
        apply "$hmi_pages", mode="page_desc";
        | }

        | var keypads = {
        foreach "$keypads_descs"{
            const "keypad_id","@id";
            foreach "arg"{
                const "g", "$geometry[@Id = $keypad_id]"; 
        |     "«@value»":["«$keypad_id»", «$g/@x», «$g/@y»],
            }
        }
        | }


        |
        | var default_page = "«$default_page»";
        | var svg_root = id("«/svg:svg/@id»");
        include text svghmi.js
    }
}