diff -r fe945f1f48b7 -r f037e901a17c svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt	Tue May 18 09:22:17 2021 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Tue May 18 09:28:44 2021 +0200
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" 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:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
-  <xsl:output cdata-section-elements="xhtml:script" method="xml"/>
+<xsl:stylesheet xmlns:ns="beremiz" xmlns:definitions="definitions" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:func="http://exslt.org/functions" xmlns:epilogue="epilogue" xmlns:preamble="preamble" 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:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:str="http://exslt.org/strings" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:exsl="http://exslt.org/common" xmlns:declarations="declarations" xmlns:debug="debug" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions" extension-element-prefixes="ns func exsl regexp str dyn" version="1.0">
+  <xsl:output method="xml" cdata-section-elements="xhtml:script"/>
   <xsl:variable name="svg" select="/svg:svg"/>
   <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
   <xsl:variable name="hmitree" select="ns:GetHMITree()"/>
@@ -1743,7 +1743,7 @@
 </xsl:text>
   </xsl:template>
   <xsl:variable name="excluded_types" select="str:split('Page VarInit VarInitPersistent')"/>
-  <xsl:key name="TypesKey" match="widget" use="@type"/>
+  <xsl:key use="@type" name="TypesKey" match="widget"/>
   <declarations:hmi-classes/>
   <xsl:template match="declarations:hmi-classes">
     <xsl:text>
@@ -5463,21 +5463,21 @@
 </xsl:text>
     <xsl:text>                 /* show active */ 
 </xsl:text>
-    <xsl:text>                 this.active_elt.setAttribute("style", this.active_elt_style);
+    <xsl:text>                 this.active_elt.style.display = "";
 </xsl:text>
     <xsl:text>                 /* hide inactive */ 
 </xsl:text>
-    <xsl:text>                 this.inactive_elt.setAttribute("style", "display:none");
+    <xsl:text>                 this.inactive_elt.style.display = "none";
 </xsl:text>
     <xsl:text>            } else {
 </xsl:text>
     <xsl:text>                 /* show inactive */ 
 </xsl:text>
-    <xsl:text>                 this.inactive_elt.setAttribute("style", this.inactive_elt_style);
+    <xsl:text>                 this.inactive_elt.style.display = "";
 </xsl:text>
     <xsl:text>                 /* hide active */ 
 </xsl:text>
-    <xsl:text>                 this.active_elt.setAttribute("style", "display:none");
+    <xsl:text>                 this.active_elt.style.display = "none";
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
@@ -5485,6 +5485,36 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
+    <xsl:text>        update_disability() {
+</xsl:text>
+    <xsl:text>            if(this.disabled) {
+</xsl:text>
+    <xsl:text>                /* show disabled */ 
+</xsl:text>
+    <xsl:text>                this.disabled_elt.style.display = "";
+</xsl:text>
+    <xsl:text>                /* hide inactive */ 
+</xsl:text>
+    <xsl:text>                this.inactive_elt.style.display = "none";
+</xsl:text>
+    <xsl:text>                /* hide active */ 
+</xsl:text>
+    <xsl:text>                this.active_elt.style.display = "none";
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                /* hide disabled */ 
+</xsl:text>
+    <xsl:text>                this.disabled_elt.style.display = "none";
+</xsl:text>
+    <xsl:text>                this.update_activity();
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
     <xsl:text>        make_on_click() {
 </xsl:text>
     <xsl:text>            let that = this;
@@ -5493,13 +5523,21 @@
 </xsl:text>
     <xsl:text>            return function(evt){
 </xsl:text>
-    <xsl:text>                /* TODO: suport path pointing to local variable whom value 
-</xsl:text>
-    <xsl:text>                   would be an HMI_TREE index to jump to a relative page */
-</xsl:text>
-    <xsl:text>                const index = that.indexes.length &gt; 0 ? that.indexes[0] + that.offset : undefined;
-</xsl:text>
-    <xsl:text>                switch_page(name, index);
+    <xsl:text>                /* TODO: in order to allow jumps to page selected through for exemple a dropdown,
+</xsl:text>
+    <xsl:text>                   support path pointing to local variable whom value 
+</xsl:text>
+    <xsl:text>                   would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if(!that.disabled) {
+</xsl:text>
+    <xsl:text>                    const index = that.indexes.length &gt; 0 ? that.indexes[0] + that.offset : undefined;
+</xsl:text>
+    <xsl:text>                    switch_page(name, index);
+</xsl:text>
+    <xsl:text>                }
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
@@ -5517,7 +5555,7 @@
 </xsl:text>
     <xsl:text>                this.active = ((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index);
 </xsl:text>
-    <xsl:text>                this.update_activity();
+    <xsl:text>                this.update_state();
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
@@ -5529,29 +5567,7 @@
 </xsl:text>
     <xsl:text>            this.disabled = !Number(value);
 </xsl:text>
-    <xsl:text>            if(this.disabled) {
-</xsl:text>
-    <xsl:text>              /* show disabled */ 
-</xsl:text>
-    <xsl:text>              this.disabled_elt.setAttribute("style", this.disabled_elt_style);
-</xsl:text>
-    <xsl:text>              /* hide inactive */ 
-</xsl:text>
-    <xsl:text>              this.inactive_elt.setAttribute("style", "display:none");
-</xsl:text>
-    <xsl:text>              /* hide active */ 
-</xsl:text>
-    <xsl:text>              this.active_elt.setAttribute("style", "display:none");
-</xsl:text>
-    <xsl:text>            } else {
-</xsl:text>
-    <xsl:text>              /* hide disabled */ 
-</xsl:text>
-    <xsl:text>              this.disabled_elt.setAttribute("style", "display:none");
-</xsl:text>
-    <xsl:text>              this.update_activity();
-</xsl:text>
-    <xsl:text>            }
+    <xsl:text>            this.update_state();
 </xsl:text>
     <xsl:text>        }
 </xsl:text>
@@ -5587,23 +5603,27 @@
     <xsl:text>        this.element.onclick = this.make_on_click();
 </xsl:text>
     <xsl:if test="$have_activity">
-      <xsl:text>        this.active_elt_style = this.active_elt.getAttribute("style");
-</xsl:text>
-      <xsl:text>        this.inactive_elt_style = this.inactive_elt.getAttribute("style");
-</xsl:text>
       <xsl:text>        this.activable = true;
 </xsl:text>
     </xsl:if>
+    <xsl:if test="not($have_disability)">
+      <xsl:text>        this.unsubscribable = true;
+</xsl:text>
+    </xsl:if>
+    <xsl:text>        this.update_state = </xsl:text>
     <xsl:choose>
       <xsl:when test="$have_disability">
-        <xsl:text>        this.disabled_elt_style = this.disabled_elt.getAttribute("style");
-</xsl:text>
+        <xsl:text>this.update_disability</xsl:text>
+      </xsl:when>
+      <xsl:when test="$have_activity">
+        <xsl:text>this.update_activity</xsl:text>
       </xsl:when>
       <xsl:otherwise>
-        <xsl:text>        this.unsubscribable = true;
-</xsl:text>
+        <xsl:text>null</xsl:text>
       </xsl:otherwise>
     </xsl:choose>
+    <xsl:text>;
+</xsl:text>
     <xsl:text>    },
 </xsl:text>
   </xsl:template>
@@ -7426,9 +7446,9 @@
     <xsl:comment>
       <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
     </xsl: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">
+    <html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml">
       <head>
-        <style type="text/css" media="screen">
+        <style media="screen" type="text/css">
           <xsl:value-of select="ns:GetFonts()"/>
         </style>
       </head>