beremiz

SVGHMI: re-indent generated JS
svghmi
2020-03-03, Edouard Tisserant
8d15c6238e62
Parents e38654ec6281
Children f7349ca820c9
SVGHMI: re-indent generated JS
2 files changed, 83 insertions(+), 80 deletions(-)
  • +40 -40
    svghmi/gen_index_xhtml.xslt
  • +43 -40
    svghmi/gen_index_xhtml.ysl2
    • --- a/svghmi/gen_index_xhtml.xslt Mon Mar 02 16:30:29 2020 +0100
    +++ b/svghmi/gen_index_xhtml.xslt Tue Mar 03 10:58:00 2020 +0100
    @@ -1265,45 +1265,45 @@
    </xsl:variable>
    <xsl:value-of select="$value_elt"/>
    <xsl:if test="$value_elt">
    - <xsl:text>frequency: 5,
    + <xsl:text> frequency: 5,
    </xsl:text>
    </xsl:if>
    - <xsl:text>dispatch: function(value) {
    + <xsl:text> dispatch: function(value) {
    </xsl:text>
    <xsl:if test="$value_elt">
    - <xsl:text> this.value_elt.textContent = String(value);
    + <xsl:text> this.value_elt.textContent = String(value);
    </xsl:text>
    </xsl:if>
    - <xsl:text>},
    + <xsl:text> },
    </xsl:text>
    <xsl:variable name="edit_elt_id" select="$hmi_element/*[@inkscape:label='edit'][1]/@id"/>
    - <xsl:text>init: function() {
    + <xsl:text> init: function() {
    </xsl:text>
    <xsl:if test="$edit_elt_id">
    - <xsl:text> id("</xsl:text>
    + <xsl:text> id("</xsl:text>
    <xsl:value-of select="$edit_elt_id"/>
    <xsl:text>").addEventListener(
    </xsl:text>
    - <xsl:text> "click",
    + <xsl:text> "click",
    </xsl:text>
    - <xsl:text> evt =&gt; alert('XXX TODO : Edit value'));
    + <xsl:text> evt =&gt; alert('XXX TODO : Edit value'));
    </xsl:text>
    </xsl:if>
    <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
    - <xsl:text> id("</xsl:text>
    + <xsl:text> id("</xsl:text>
    <xsl:value-of select="@id"/>
    <xsl:text>").addEventListener(
    </xsl:text>
    - <xsl:text> "click",
    + <xsl:text> "click",
    </xsl:text>
    - <xsl:text> evt =&gt; {let new_val = change_hmi_value(this.indexes[0], "</xsl:text>
    + <xsl:text> evt =&gt; {let new_val = change_hmi_value(this.indexes[0], "</xsl:text>
    <xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
    <xsl:text>");
    </xsl:text>
    - <xsl:text> this.value_elt.textContent = String(new_val);});
    + <xsl:text> this.value_elt.textContent = String(new_val);});
    </xsl:text>
    </xsl:for-each>
    - <xsl:text>},
    + <xsl:text> },
    </xsl:text>
    </xsl:template>
    <xsl:template mode="widget_defs" match="widget[@type='Button']"/>
    @@ -1313,78 +1313,78 @@
    </xsl:template>
    <xsl:template mode="widget_defs" match="widget[@type='Switch']">
    <xsl:param name="hmi_element"/>
    - <xsl:text>frequency: 5,
    + <xsl:text> frequency: 5,
    +</xsl:text>
    + <xsl:text> dispatch: function(value) {
    </xsl:text>
    - <xsl:text>dispatch: function(value) {
    + <xsl:text> for(let choice of this.choices){
    </xsl:text>
    - <xsl:text> for(let choice of this.choices){
    + <xsl:text> if(value != choice.value){
    </xsl:text>
    - <xsl:text> if(value != choice.value){
    + <xsl:text> choice.elt.setAttribute("style", "display:none");
    </xsl:text>
    - <xsl:text> choice.elt.setAttribute("style", "display:none");
    + <xsl:text> } else {
    </xsl:text>
    - <xsl:text> } else {
    + <xsl:text> choice.elt.setAttribute("style", choice.style);
    </xsl:text>
    - <xsl:text> choice.elt.setAttribute("style", choice.style);
    + <xsl:text> }
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    - <xsl:text> }
    + <xsl:text> },
    </xsl:text>
    - <xsl:text>},
    -</xsl:text>
    - <xsl:text>init: function() {
    + <xsl:text> init: function() {
    </xsl:text>
    - <xsl:text> // Hello Switch
    + <xsl:text> // Hello Switch
    </xsl:text>
    - <xsl:text>},
    + <xsl:text> },
    </xsl:text>
    - <xsl:text>choices: [
    + <xsl:text> choices: [
    </xsl:text>
    <xsl:variable name="regex" select="'^(&quot;[^&quot;].*&quot;|\-?[0-9]+)(#.*)?$'"/>
    <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,$regex)]">
    <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/>
    - <xsl:text> {
    + <xsl:text> {
    </xsl:text>
    - <xsl:text> elt:id("</xsl:text>
    + <xsl:text> elt:id("</xsl:text>
    <xsl:value-of select="@id"/>
    <xsl:text>"),
    </xsl:text>
    - <xsl:text> style:"</xsl:text>
    + <xsl:text> style:"</xsl:text>
    <xsl:value-of select="@style"/>
    <xsl:text>",
    </xsl:text>
    - <xsl:text> value:</xsl:text>
    + <xsl:text> value:</xsl:text>
    <xsl:value-of select="$literal"/>
    <xsl:text>
    </xsl:text>
    - <xsl:text> }</xsl:text>
    + <xsl:text> }</xsl:text>
    <xsl:if test="position()!=last()">
    <xsl:text>,</xsl:text>
    </xsl:if>
    <xsl:text>
    </xsl:text>
    </xsl:for-each>
    - <xsl:text>],
    + <xsl:text> ],
    </xsl:text>
    </xsl:template>
    <xsl:template mode="widget_defs" match="widget[@type='Jump']">
    <xsl:param name="hmi_element"/>
    - <xsl:text>on_click: function(evt) {
    + <xsl:text> on_click: function(evt) {
    </xsl:text>
    - <xsl:text> console.log(evt);
    + <xsl:text> console.log(evt);
    </xsl:text>
    - <xsl:text> switch_page(this.args[0]);
    + <xsl:text> switch_page(this.args[0]);
    </xsl:text>
    - <xsl:text>},
    + <xsl:text> },
    </xsl:text>
    - <xsl:text>init: function() {
    + <xsl:text> init: function() {
    </xsl:text>
    - <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text>
    + <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text>
    <xsl:value-of select="$hmi_element/@id"/>
    <xsl:text>'].on_click(evt)");
    </xsl:text>
    - <xsl:text>},
    + <xsl:text> },
    </xsl:text>
    </xsl:template>
    </xsl:stylesheet>
    --- a/svghmi/gen_index_xhtml.ysl2 Mon Mar 02 16:30:29 2020 +0100
    +++ b/svghmi/gen_index_xhtml.ysl2 Tue Mar 03 10:58:00 2020 +0100
    @@ -694,26 +694,29 @@
    }
    value "$value_elt";
    if "$value_elt"
    - | frequency: 5,
    - | dispatch: function(value) {
    + | frequency: 5,
    +
    + | dispatch: function(value) {
    +
    if "$value_elt"
    - | this.value_elt.textContent = String(value);
    - | },
    + | this.value_elt.textContent = String(value);
    +
    + | },
    const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";
    - | init: function() {
    + | init: function() {
    if "$edit_elt_id" {
    - | id("«$edit_elt_id»").addEventListener(
    - | "click",
    - | evt => alert('XXX TODO : Edit value'));
    + | id("«$edit_elt_id»").addEventListener(
    + | "click",
    + | evt => alert('XXX TODO : Edit value'));
    }
    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
    - | id("«@id»").addEventListener(
    - | "click",
    - | evt => {let new_val = change_hmi_value(this.indexes[0], "«func:escape_quotes(@inkscape:label)»");
    - | this.value_elt.textContent = String(new_val);});
    - /* could gray out value until refreshed */
    + | id("«@id»").addEventListener(
    + | "click",
    + | evt => {let new_val = change_hmi_value(this.indexes[0], "«func:escape_quotes(@inkscape:label)»");
    + | this.value_elt.textContent = String(new_val);});
    + /* TODO gray out value until refreshed */
    }
    - | },
    + | },
    }
    template "widget[@type='Button']", mode="widget_defs" {
    }
    @@ -722,44 +725,44 @@
    }
    template "widget[@type='Switch']", mode="widget_defs" {
    param "hmi_element";
    - | frequency: 5,
    - | dispatch: function(value) {
    - | for(let choice of this.choices){
    - | if(value != choice.value){
    - | choice.elt.setAttribute("style", "display:none");
    - | } else {
    - | choice.elt.setAttribute("style", choice.style);
    + | frequency: 5,
    + | dispatch: function(value) {
    + | for(let choice of this.choices){
    + | if(value != choice.value){
    + | choice.elt.setAttribute("style", "display:none");
    + | } else {
    + | choice.elt.setAttribute("style", choice.style);
    + | }
    | }
    - | }
    - | },
    - | init: function() {
    - | // Hello Switch
    - | },
    - | choices: [
    + | },
    + | init: function() {
    + | // Hello Switch
    + | },
    + | choices: [
    const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+)(#.*)?$'"!;
    foreach "$hmi_element/*[regexp:test(@inkscape:label,$regex)]" {
    const "literal", "regexp:match(@inkscape:label,$regex)[2]";
    - | {
    - | elt:id("«@id»"),
    - | style:"«@style»",
    - | value:«$literal»
    - | }`if "position()!=last()" > ,`
    + | {
    + | elt:id("«@id»"),
    + | style:"«@style»",
    + | value:«$literal»
    + | }`if "position()!=last()" > ,`
    }
    - | ],
    + | ],
    }
    template "widget[@type='Jump']", mode="widget_defs" {
    param "hmi_element";
    - | on_click: function(evt) {
    - | console.log(evt);
    - | switch_page(this.args[0]);
    - | },
    - | init: function() {
    + | on_click: function(evt) {
    + | console.log(evt);
    + | switch_page(this.args[0]);
    + | },
    + | init: function() {
    /* registering event this way doies not "click" through svg:use
    | this.element.onclick = evt => switch_page(this.args[0]);
    event must be registered by adding attribute to element instead
    TODO : generalize mouse event handling by global event capture + getElementsAtPoint()
    */
    - | this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click(evt)");
    - | },
    + | this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click(evt)");
    + | },
    }
    }