beremiz

SVGHMI: also use order-preserving detach re-attach for hiding and showing active and inactive state.

2022-06-20, Edouard Tisserant
43b2bff95289
Parents c663d1f9f03b
Children b27e50143083
SVGHMI: also use order-preserving detach re-attach for hiding and showing active and inactive state.
1 files changed, 38 insertions(+), 8 deletions(-)
  • +38 -8
    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");
    }
    +