--- a/svghmi/gen_index_xhtml.xslt	Fri Feb 28 22:54:07 2020 +0100
+++ b/svghmi/gen_index_xhtml.xslt	Mon Mar 02 10:29:41 2020 +0100
@@ -324,6 +324,10 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
+    <xsl:text>id = idstr =&gt; document.getElementById(idstr);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
     <xsl:text>var hmi_hash = [</xsl:text>
     <xsl:value-of select="$hmitree/@hash"/>
     <xsl:text>]; 
@@ -380,7 +384,7 @@
       </xsl:for-each>
       <xsl:text>    ],
 </xsl:text>
-      <xsl:text>    element: document.getElementById("</xsl:text>
+      <xsl:text>    element: id("</xsl:text>
       <xsl:value-of select="@id"/>
       <xsl:text>"),
 </xsl:text>
@@ -424,6 +428,26 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
+    <xsl:text>var detachable_elements = {
+</xsl:text>
+    <xsl:for-each select="$detachable_elements">
+      <xsl:text>    "</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>" : {element: id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"), parent:id("</xsl:text>
+      <xsl:value-of select="../@id"/>
+      <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:text>
     <xsl:text>var page_desc = {
 </xsl:text>
     <xsl:for-each select="$hmi_pages">
@@ -432,7 +456,7 @@
       <xsl:variable name="p" select="$geometry[@Id = $page/@id]"/>
       <xsl:variable name="page_all_elements" select="func:all_related_elements($page)"/>
       <xsl:variable name="all_page_ids" select="$page_all_elements[@id = $hmi_elements/@id and @id != $page/@id]/@id"/>
-      <xsl:variable name="shorter_list" select="func:sumarized_elements($page_all_elements)"/>
+      <xsl:variable name="required_detachables" select="func:sumarized_elements($page_all_elements)"/>
       <xsl:text>    "</xsl:text>
       <xsl:value-of select="$desc/arg[1]/@value"/>
       <xsl:text>": {
@@ -465,12 +489,16 @@
       </xsl:for-each>
       <xsl:text>        ],
 </xsl:text>
-      <xsl:text>        required_elements: [
-</xsl:text>
-      <xsl:for-each select="$shorter_list">
-        <xsl:text>            "</xsl:text>
+      <xsl:text>        required_detachables: [
+</xsl:text>
+      <xsl:for-each select="$required_detachables">
+        <xsl:text>            detachable_elements["</xsl:text>
         <xsl:value-of select="@id"/>
-        <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>        ]
@@ -490,7 +518,7 @@
     <xsl:value-of select="$default_page"/>
     <xsl:text>";
 </xsl:text>
-    <xsl:text>var svg_root = document.getElementById("</xsl:text>
+    <xsl:text>var svg_root = id("</xsl:text>
     <xsl:value-of select="$svg_root_id"/>
     <xsl:text>");
 </xsl:text>
@@ -932,27 +960,11 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
-    <xsl:text>// function prepare_svg() {
-</xsl:text>
-    <xsl:text>//     /* set everybody hidden initially for better performance */
-</xsl:text>
-    <xsl:text>//     for(let [elt,elt_parent] in detachable_elements){
-</xsl:text>
-    <xsl:text>//         elt_parent.removeChild(elt)
-</xsl:text>
-    <xsl:text>//     }
-</xsl:text>
-    <xsl:text>// };
-</xsl:text>
-    <xsl:text>
-</xsl:text>
     <xsl:text>function prepare_svg() {
 </xsl:text>
     <xsl:text>    /* set everybody hidden initially for better performance */
 </xsl:text>
-    <xsl:text>    for(let widget_id in hmi_widgets){
-</xsl:text>
-    <xsl:text>        let widget = hmi_widgets[widget_id];
+    <xsl:text>    for(let widget in hmi_widgets){
 </xsl:text>
     <xsl:text>        if(widget.element != undefined)
 </xsl:text>
@@ -960,6 +972,16 @@
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
+    <xsl:text>        /*for(let name in page_desc){
+</xsl:text>
+    <xsl:text>            if(name != new_desc){
+</xsl:text>
+    <xsl:text>                page_desc[name].widget.element.style.display = "none";
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }*/
+</xsl:text>
     <xsl:text>};
 </xsl:text>
     <xsl:text>
@@ -1154,7 +1176,7 @@
         </xsl:when>
         <xsl:otherwise>
           <xsl:value-of select="$name"/>
-          <xsl:text>_elt: document.getElementById("</xsl:text>
+          <xsl:text>_elt: id("</xsl:text>
           <xsl:value-of select="$elt_id"/>
           <xsl:text>"),
 </xsl:text>
@@ -1260,7 +1282,7 @@
     <xsl:text>init: function() {
 </xsl:text>
     <xsl:if test="$edit_elt_id">
-      <xsl:text>    document.getElementById("</xsl:text>
+      <xsl:text>    id("</xsl:text>
       <xsl:value-of select="$edit_elt_id"/>
       <xsl:text>").addEventListener(
 </xsl:text>
@@ -1270,7 +1292,7 @@
 </xsl:text>
     </xsl:if>
     <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
-      <xsl:text>    document.getElementById("</xsl:text>
+      <xsl:text>    id("</xsl:text>
       <xsl:value-of select="@id"/>
       <xsl:text>").addEventListener(
 </xsl:text>
@@ -1326,7 +1348,7 @@
       <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/>
       <xsl:text>    {
 </xsl:text>
-      <xsl:text>        elt:document.getElementById("</xsl:text>
+      <xsl:text>        elt:id("</xsl:text>
       <xsl:value-of select="@id"/>
       <xsl:text>"),
 </xsl:text>

--- a/svghmi/gen_index_xhtml.ysl2	Fri Feb 28 22:54:07 2020 +0100
+++ b/svghmi/gen_index_xhtml.ysl2	Mon Mar 02 10:29:41 2020 +0100
@@ -459,6 +459,8 @@
     {
         | //(function(){
         |
+        | id = idstr => document.getElementById(idstr);
+        |
         | var hmi_hash = [«$hmitree/@hash»]; 
 
         /* TODO re-enable
@@ -502,7 +504,7 @@
                 }
             }
             |     ],
-            |     element: document.getElementById("«@id»"),
+            |     element: id("«@id»"),
             apply "$widget", mode="widget_defs" with "hmi_element",".";
             | }`if "position()!=last()" > ,`
         }
@@ -519,6 +521,13 @@
         | ]
         |
 
+        | var detachable_elements = {
+        foreach "$detachable_elements"{
+        |     "«@id»" : {element: id("«@id»"), parent:id("«../@id»")}`if "position()!=last()" > ,`
+        }
+        | }
+
+        |
         | var page_desc = {
 
         foreach "$hmi_pages" {
@@ -530,7 +539,7 @@
 
             const "all_page_ids","$page_all_elements[@id = $hmi_elements/@id and @id != $page/@id]/@id";
 
-            const "shorter_list", "func:sumarized_elements($page_all_elements)";
+            const "required_detachables", "func:sumarized_elements($page_all_elements)";
 
             |     "«$desc/arg[1]/@value»": {
             |         widget: hmi_widgets["«@id»"],
@@ -540,9 +549,9 @@
             |             hmi_widgets["«.»"]`if "position()!=last()" > ,`
             }
             |         ],
-            |         required_elements: [
-            foreach "$shorter_list" {
-            |             "«@id»",
+            |         required_detachables: [
+            foreach "$required_detachables" {
+            |             detachable_elements["«@id»"]`if "position()!=last()" > ,`
             }
             |         ]
             |     }`if "position()!=last()" > ,`
@@ -551,7 +560,7 @@
 
         |
         | var default_page = "«$default_page»";
-        | var svg_root = document.getElementById("«$svg_root_id»");
+        | var svg_root = id("«$svg_root_id»");
         include text svghmi.js
         | //})();
     }
@@ -620,7 +629,7 @@
                     // otherwise produce nothing 
                 }
                 otherwise {
-                    | «$name»_elt: document.getElementById("«$elt_id»"),
+                    | «$name»_elt: id("«$elt_id»"),
                 }
             }
         }
@@ -693,12 +702,12 @@
         const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";
         | init: function() {
         if "$edit_elt_id" {
-        |     document.getElementById("«$edit_elt_id»").addEventListener(
+        |     id("«$edit_elt_id»").addEventListener(
         |         "click", 
         |         evt => alert('XXX TODO : Edit value'));
         }
         foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
-        |     document.getElementById("«@id»").addEventListener(
+        |     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);});
@@ -731,7 +740,7 @@
         foreach "$hmi_element/*[regexp:test(@inkscape:label,$regex)]" {
             const "literal", "regexp:match(@inkscape:label,$regex)[2]";
         |     {
-        |         elt:document.getElementById("«@id»"),
+        |         elt:id("«@id»"),
         |         style:"«@style»",
         |         value:«$literal»
         |     }`if "position()!=last()" > ,`