Mercurial Mercurial > beremiz / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
svghmi/widget_dropdown.ysl2
branchsvghmi
changeset 2926 90f9d9782632
parent 2925 220172cbdcff
child 2927 23c35f3ba111
equal deleted inserted replaced
2925:220172cbdcff 2926:90f9d9782632 
     1 // widget_dropdown.ysl2
 
     1 // widget_dropdown.ysl2
 
     2 
     2 
     3 template "widget[@type='DropDown']", mode="widget_defs" {
 
     3 template "widget[@type='DropDown']", mode="widget_defs" {
 
     4     param "hmi_element";
 
     4     param "hmi_element";
 
     5     labels("text box");
 
     5     labels("text box button");
 
     6 ||    
     6 ||    
     7     dispatch: function(value) {
 
     7     dispatch: function(value) {
 
     8         if(!this.opened) this.set_selection(value);
 
     8         if(!this.opened) this.set_selection(value);
 
     9     },
 
     9     },
 
    10     init: function() {
 
    10     init: function() {
 
    11         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");
 
    11         this.button_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_button_click()");
 
    12         this.text_bbox = this.text_elt.getBBox()
 
    12         this.text_bbox = this.text_elt.getBBox()
 
    13         this.box_bbox = this.box_elt.getBBox()
 
    13         this.box_bbox = this.box_elt.getBBox()
 
    14         lmargin = this.text_bbox.x - this.box_bbox.x;
 
    14         lmargin = this.text_bbox.x - this.box_bbox.x;
 
    15         tmargin = this.text_bbox.y - this.box_bbox.y;
 
    15         tmargin = this.text_bbox.y - this.box_bbox.y;
 
    16         rmargin = this.box_bbox.width - this.text_bbox.width - lmargin;
 
    16         this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
 
    17         bmargin = this.box_bbox.height - this.text_bbox.height - tmargin;
 
       
    18         this.margins = [lmargin, tmargin, rmargin, bmargin].map(x => Math.max(x,0));
 
       
    19         this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
 
    17         this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
 
    20                         "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
 
    18                         "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
 
    21         //this.content = ["one", "two", "three", "four", "5", "6"];
 
    19         //this.content = ["one", "two", "three", "four", "5", "6"];
 
    22         this.menu_offset = 0;
 
    20         this.menu_offset = 0;
 
    23         this.lift = 0;
 
    21         this.lift = 0;
 
    24         this.opened = false;
 
    22         this.opened = false;
 
    25     },
 
    23     },
 
    26     on_selection_click: function(selection) {
 
    24     on_selection_click: function(selection) {
 
       
    25         console.log("selected "+selection);
 
       
    26         this.close();
 
    27         this.set_selection(selection);
 
    27         this.set_selection(selection);
 
    28     },
 
    28     },
 
    29     on_click: function() {
 
    29     on_button_click: function() {
 
    30         if(this.opened){
 
    30         this.open();
 
    31             //this.close();
 
       
    32         }else{
 
       
    33             this.open();
 
       
    34         }
 
       
    35     },
 
    31     },
 
    36     on_backward_click:function(){
 
    32     on_backward_click:function(){
 
    37         this.move(false);
 
    33         this.move(false);
 
    38     },
 
    34     },
 
    39     on_forward_click:function(){
 
    35     on_forward_click:function(){
 
    77         return count;
 
    73         return count;
 
    78     },
 
    74     },
 
    79     close: function(){
 
    75     close: function(){
 
    80         this.reset_text();
 
    76         this.reset_text();
 
    81         this.reset_box();
 
    77         this.reset_box();
 
       
    78         this.element.appendChild(this.button_elt);
 
    82         this.opened = false;
 
    79         this.opened = false;
 
    83     },
 
    80     },
 
    84     set_complete_text: function(){
 
    81     set_complete_text: function(){
 
    85         let spans = this.text_elt.children; 
    82         let spans = this.text_elt.children; 
    86         let c = 0;
 
    83         let c = 0;
 
   138             this.set_complete_text();
 
   135             this.set_complete_text();
 
   139         } else {
 
   136         } else {
 
   140             this.set_partial_text();
 
   137             this.set_partial_text();
 
   141         }
 
   138         }
 
   142         this.adjust_box_to_text();
 
   139         this.adjust_box_to_text();
 
       
   140         this.element.removeChild(this.button_elt);
 
   143         /* TODO disable interaction with background */
 
   141         /* TODO disable interaction with background */
 
   144         this.opened = true;
 
   142         this.opened = true;
 
   145     },
 
   143     },
 
   146     reset_text: function(){
 
   144     reset_text: function(){
 
   147         let txt = this.text_elt; 
   145         let txt = this.text_elt; 
   159         b.y.baseVal.value = m.y;
 
   157         b.y.baseVal.value = m.y;
 
   160         b.width.baseVal.value = m.width;
 
   158         b.width.baseVal.value = m.width;
 
   161         b.height.baseVal.value = m.height;
 
   159         b.height.baseVal.value = m.height;
 
   162     },
 
   160     },
 
   163     adjust_box_to_text: function(){
 
   161     adjust_box_to_text: function(){
 
   164         let [lmargin, tmargin, rmargin, bmargin] = this.margins;
 
   162         let [lmargin, tmargin] = this.margins;
 
   165         let m = this.text_elt.getBBox();
 
   163         let m = this.text_elt.getBBox();
 
   166         let b = this.box_elt;
 
   164         let b = this.box_elt;
 
   167         b.x.baseVal.value = m.x - lmargin;
 
   165         b.x.baseVal.value = m.x - lmargin;
 
   168         b.y.baseVal.value = m.y - tmargin;
 
   166         b.y.baseVal.value = m.y - tmargin;
 
   169         b.width.baseVal.value = lmargin + m.width + rmargin;
 
   167         b.width.baseVal.value = 2 * lmargin + m.width;
 
   170         b.height.baseVal.value = tmargin + m.height + bmargin;
 
   168         b.height.baseVal.value = 2 * tmargin + m.height;
 
   171     },
 
   169     },
 
   172 ||
 
   170 ||
 
   173 }
 
   171 }
 
   174 
   172 
   175     // |         let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
 
   173     // |         let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
beremiz