# HG changeset patch
# User Edouard Tisserant
# Date 1655710211 -7200
# Node ID 43b2bff9528973f0f58681e93c6f8bf6830ccb56
# Parent  c663d1f9f03bc7c8c0f07b6881333a020c38a7a2
SVGHMI: also use order-preserving detach re-attach for hiding and showing active and inactive state.

diff -r c663d1f9f03b -r 43b2bff95289 svghmi/widget_tooglebutton.ysl2
--- a/svghmi/widget_tooglebutton.ysl2	Mon Jun 20 09:19:56 2022 +0200
+++ b/svghmi/widget_tooglebutton.ysl2	Mon Jun 20 09:30:11 2022 +0200
@@ -37,22 +37,51 @@
             this.request_animate();
         }
 
-        activate(val) {
-            let [active, inactive] = val ? ["","none"] : ["none", ""];
-            if (this.active_elt)
-                this.active_elt.style.display = active;
-            if (this.inactive_elt)
-                this.inactive_elt.style.display = inactive;
+        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.activate(this.state);
+            this.set_state(this.state);
         }
 
         init() {
-            this.activate(false);
             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);
         }
     ||
 }
@@ -60,3 +89,4 @@
 widget_defs("ToggleButton") {
     optional_labels("active inactive");
 }
+