--- a/svghmi/widget_button.ysl2	Mon Jun 20 09:30:11 2022 +0200
+++ b/svghmi/widget_button.ysl2	Wed Jun 22 11:48:40 2022 +0200
@@ -183,19 +183,13 @@
     apply "$fsm", mode="actions";
 
     |     animate(){
-    |         if (this.active_elt && this.inactive_elt) {
-    foreach "str:split('active inactive')" {
-    |             if(this.display == "«.»")
-    |                 this.«.»_elt.style.display = "";
-    |             else
-    |                 this.«.»_elt.style.display = "none";
-    }
-    |         }
+    |         this.set_activation_state(this.display == "active");
     |     }
 
     |     init() {
     |         this.bound_onmouseup = this.onmouseup.bind(this);
     |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
+    |         this.set_activation_state(undefined);
     |     }
 }
 
@@ -207,7 +201,7 @@
 }
 
 widget_defs("Button") {
-    optional_labels("active inactive");
+    activable();
 }
 
 widget_class("PushButton"){
@@ -217,6 +211,6 @@
 }
 
 widget_defs("PushButton") {
-    optional_labels("active inactive");
-}
-
+    activable();
+}
+

--- a/svghmi/widget_keypad.ysl2	Mon Jun 20 09:30:11 2022 +0200
+++ b/svghmi/widget_keypad.ysl2	Wed Jun 22 11:48:40 2022 +0200
@@ -118,11 +118,11 @@
              }
              if(this.Shift_sub && this.shift != this._shift){
                  this._shift = this.shift;
-                 (this.shift?this.activate_activable:this.inactivate_activable)(this.Shift_sub);
+                 set_activation_state(this.Shift_sub, this.shift);
              }
              if(this.CapsLock_sub && this.caps != this._caps){
                  this._caps = this.caps;
-                 (this.caps?this.activate_activable:this.inactivate_activable)(this.CapsLock_sub);
+                 set_activation_state(this.CapsLock_sub, this.caps);
              }
          }
     ||

--- a/svghmi/widget_tooglebutton.ysl2	Mon Jun 20 09:30:11 2022 +0200
+++ b/svghmi/widget_tooglebutton.ysl2	Wed Jun 22 11:48:40 2022 +0200
@@ -37,56 +37,19 @@
             this.request_animate();
         }
 
-        set_state(active) {
-            if (this.active_elt){
-                if(active==undefined || !active){
-                    if(this.active_elt_parent == undefined){
-                        this.active_elt_parent = this.active_elt.parentElement;
-                        this.active_elt_parent.removeChild(this.active_elt);
-                    }
-                }else{
-                    if(this.active_elt_parent != undefined){
-                        this.active_elt_parent.insertBefore(this.active_elt, this.active_elt_sibling);
-                        this.active_elt_parent = undefined;
-                    }
-                }
-            }
-            if (this.inactive_elt){
-                if(active==undefined || active){
-                    if(this.inactive_elt_parent == undefined){
-                        this.inactive_elt_parent = this.inactive_elt.parentElement;
-                        this.inactive_elt_parent.removeChild(this.inactive_elt);
-                    }
-                }else{
-                    if(this.inactive_elt_parent != undefined){
-                        this.inactive_elt_parent.insertBefore(this.inactive_elt, this.inactive_elt_sibling);
-                        this.inactive_elt_parent = undefined;
-                    }
-                }
-            }
-        }
-
         animate(){
             // redraw toggle button on screen refresh
-            this.set_state(this.state);
+            this.set_activation_state(this.state);
         }
 
         init() {
             this.element.onclick = (evt) => this.on_click(evt);
-            this.active_elt_parent = undefined;
-            this.active_elt_sibling = this.active_elt.nextSibling;
-            this.inactive_elt_parent = undefined;
-            this.inactive_elt_sibling = this.inactive_elt.nextSibling;
-            if(this.inactive_elt_sibling == this.active_elt)
-                this.inactive_elt_sibling = this.inactive_elt_sibling.nextSibling;
-            if(this.active_elt_sibling == this.inactive_elt)
-                this.active_elt_sibling = this.active_elt_sibling.nextSibling;
-            this.set_state(undefined);
+            this.set_activation_state(undefined);
         }
     ||
 }
 
 widget_defs("ToggleButton") {
-    optional_labels("active inactive");
+    activable();
 }
 

--- a/svghmi/widgets_common.ysl2	Mon Jun 20 09:30:11 2022 +0200
+++ b/svghmi/widgets_common.ysl2	Wed Jun 22 11:48:40 2022 +0200
@@ -14,6 +14,13 @@
     }
 };
 
+decl activable() alias - {
+    |     activable_sub:{
+    labels("/active /inactive") {
+        content;
+    }
+    |     }
+};
 decl activable_labels(*ptr) alias - {
     optional_labels(*ptr) {
         with "subelements","'active inactive'";
@@ -165,6 +172,33 @@
     ||
     var pending_widget_animates = [];
 
+    function _hide(elt, placeholder){
+        if(elt.parentNode != null)
+            placeholder.parentNode.removeChild(elt);
+    }
+    function _show(elt, placeholder){
+        placeholder.parentNode.insertBefore(elt, placeholder);
+    }
+
+    function set_activation_state(eltsub, state){
+        if(eltsub.active_elt_placeholder == undefined){
+            eltsub.active_elt_placeholder = document.createComment("");
+            eltsub.active_elt.parentNode.insertBefore(eltsub.active_elt_placeholder, eltsub.active_elt);
+            eltsub.inactive_elt_placeholder = document.createComment("");
+            eltsub.inactive_elt.parentNode.insertBefore(eltsub.inactive_elt_placeholder, eltsub.inactive_elt);
+        }
+        (state?_show:_hide)(eltsub.active_elt, eltsub.active_elt_placeholder);
+        ((state || state==undefined)?_hide:_show)(eltsub.inactive_elt, eltsub.inactive_elt_placeholder);
+    }
+
+    function activate_activable(eltsub) {
+        set_activation_state(eltsub, true);
+    }
+
+    function inactivate_activable(eltsub) {
+        set_activation_state(eltsub, false);
+    }
+
     class Widget {
         offset = 0;
         frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
@@ -411,17 +445,10 @@
                 this.pending_animate = true;
                 requestHMIAnimation();
             }
-
-        }
-
-        activate_activable(eltsub) {
-            eltsub.inactive.style.display = "none";
-            eltsub.active.style.display = "";
-        }
-
-        inactivate_activable(eltsub) {
-            eltsub.active.style.display = "none";
-            eltsub.inactive.style.display = "";
+        }
+
+        set_activation_state(state){
+            set_activation_state(this.activable_sub, state);
         }
     }
     ||
@@ -489,7 +516,7 @@
                 |         /* missing «$name»/«$subname» element */
                             }
                             otherwise {
-                |         "«$subname»": id("«$subelt/@id»")`if "position()!=last()" > ,`
+                |         "«$subname»_elt": id("«$subelt/@id»")`if "position()!=last()" > ,`
                             }
                         }
                     }