// widget_input.ysl2

widget_desc("Input") {
    longdesc
    || 
    Input widget takes one variable path, and displays current value in
    optional "value" labeled sub-element. 

    Click on optional "edit" labeled element opens keypad to edit value.
    
    Operation on current value is performed when click on sub-elements with
    label starting with '=', '+' or '-' sign. Value after sign is used as
    operand.
    ||

    shortdesc > Input field with predefined operation buttons

    arg name="format" accepts="string" > optional printf-like format 

    path name="edit" accepts="HMI_INT, HMI_REAL, HMI_STRING" > single variable to edit
    
}

widget_class("Input")
||
     on_op_click(opstr) {
         this.change_hmi_value(0, opstr);
     }
     edit_callback(new_val) {
         this.apply_hmi_value(0, new_val);
     }

     is_inhibited = false;
     alert(msg){
         this.is_inhibited = true;
         this.display = msg;
         setTimeout(() => this.stopalert(), 1000);
         this.request_animate();
     }

     stopalert(){
         this.is_inhibited = false;
         this.display = this.last_value;
         this.request_animate();
     }

     overshot(new_val, max) {
         this.alert("max");
     }

     undershot(new_val, min) {
         this.alert("min");
     }

     display = "";
||

widget_defs("Input") {

    const "value_elt" optional_labels("value");
    const "have_value","string-length($value_elt)>0";
    value "$value_elt";

    const "edit_elt" optional_labels("edit");
    const "have_edit","string-length($edit_elt)>0";
    value "$edit_elt";

    const "action_elements", "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]";

    if "$have_value"
    |     frequency: 5,
    |     dispatch: function(value) {


    if "$have_value or $have_edit" {
        choose{
            when "count(arg) = 1" {
    |         this.last_value = vsprintf("«arg[1]/@value»", [value]);
            }
            otherwise {
    |         this.last_value = value;
            }
        }
    |         if(!this.is_inhibited){
    |             this.display = this.last_value;
    if "$have_value" {
    |             this.request_animate();
    }
    |         }
    }
    |     },

    if "$have_value" {
    |     animate: function(){
    |         this.value_elt.textContent = String(this.display);
    |     },
    }

    foreach "$action_elements" {
    |     action_elt_«position()»: id("«@id»"),
    }
    |     init: function() {

    if "$have_edit" {
    |         this.edit_elt.onclick = () => edit_value("«path/@value»", "«path/@type»", this, this.last_value);
        if "$have_value" {
    |         this.value_elt.style.pointerEvents = "none";
        }
    |         this.animate();
    }

    foreach "$action_elements" {
    |         this.action_elt_«position()».onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
    }

    if "$have_value" {
    |         this.value_elt.textContent = "";
    }
    |     },
}