// widget_tooglebutton.ysl2


widget_desc("ToggleButton") {
    longdesc
    ||
    Button widget takes one boolean variable path, and reflect current true
    or false value by showing "active" or "inactive" labeled element
    respectively. Clicking or touching button toggles variable.
    ||

    shortdesc > Toggle button reflecting given boolean variable

    path name="value" accepts="HMI_BOOL" > Boolean variable
    
}

widget_class("ToggleButton") {
    ||
        frequency = 5;
        active_style = undefined;
        inactive_style = undefined;

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

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

            //redraw toggle button
            this.request_animate();
        }

        init() {
            this.element.onclick = (evt) => this.on_click(evt);
            this.activity_state = undefined;
        }
    ||
}

widget_defs("ToggleButton") {
    activable();
}