// widget_tooglebutton.ysl2


template "widget[@type='ToggleButton']", mode="widget_class"{
    ||
    class ToggleButtonWidget extends Widget{
        frequency = 5;
        state = 0;
        active_style = undefined;
        inactive_style = undefined;

        dispatch(value) {
            this.state = value;
            //redraw toggle button
            this.request_animate();
        }

        on_click(evt) {
            //toggle state and apply
            this.state = this.state ? false : true;
            this.apply_hmi_value(0, this.state);

            //redraw toggle button
            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;
        }

        animate(){
            // redraw toggle button on screen refresh
            this.activate(this.state);
        }

        init() {
            this.activate(false);
            this.element.onclick = (evt) => this.on_click(evt);
        }
    }
    ||
}

template "widget[@type='ToggleButton']", mode="widget_defs" {
    param "hmi_element";
    optional_labels("active inactive");
}