svghmi/widget_dropdown.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Tue, 20 Oct 2020 00:23:52 +0200
branchsvghmi
changeset 3063 466c3df67835
parent 3035 d1fc8c55c1d3
child 3090 9e172e4e50c7
permissions -rw-r--r--
PY_EXT: OnChange is now a coma separated list of callables. Updated tests/python accordingly.
2922
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     1
// widget_dropdown.ysl2
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     2
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     3
template "widget[@type='DropDown']", mode="widget_defs" {
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     4
    param "hmi_element";
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
     5
    labels("text box button");
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
     6
||
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
     7
    dispatch: function(value) {
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
     8
        if(!this.opened) this.set_selection(value);
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
     9
    },
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    10
    init: function() {
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
    11
        this.button_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_button_click()");
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
    12
        // Save original size of rectangle
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    13
        this.box_bbox = this.box_elt.getBBox()
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
    14
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
    15
        // Compute margins
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
    16
        text_bbox = this.text_elt.getBBox()
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
    17
        lmargin = text_bbox.x - this.box_bbox.x;
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
    18
        tmargin = text_bbox.y - this.box_bbox.y;
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
    19
        this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    20
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    21
        // It is assumed that list content conforms to Array interface.
2931
f51c0e2e0bcb SVGHMI: HMI:DropDown now temporarily takes content from widget's arguments, until HMI:List is implemented.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2930
diff changeset
    22
        this.content = [
f51c0e2e0bcb SVGHMI: HMI:DropDown now temporarily takes content from widget's arguments, until HMI:List is implemented.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2930
diff changeset
    23
        ``foreach "arg" | "«@value»",
f51c0e2e0bcb SVGHMI: HMI:DropDown now temporarily takes content from widget's arguments, until HMI:List is implemented.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2930
diff changeset
    24
        ];
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    25
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    26
        // Index of first visible element in the menu, when opened
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    27
        this.menu_offset = 0;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    28
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    29
        // How mutch to lift the menu vertically so that it does not cross bottom border
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    30
        this.lift = 0;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    31
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    32
        // Event handlers cannot be object method ('this' is unknown)
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    33
        // as a workaround, handler given to addEventListener is bound in advance.
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    34
        this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    35
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    36
        this.opened = false;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    37
    },
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    38
    // Called when a menu entry is clicked
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    39
    on_selection_click: function(selection) {
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
    40
        this.close();
3004
705e34c6fe93 SVGHMI: More JS code refactoring : change_hmi_value and apply_hmi_value now methods of widget class.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3001
diff changeset
    41
        this.apply_hmi_value(0, selection);
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    42
    },
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
    43
    on_button_click: function() {
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
    44
        this.open();
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    45
    },
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    46
    on_backward_click: function(){
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    47
        this.scroll(false);
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
    48
    },
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
    49
    on_forward_click:function(){
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    50
        this.scroll(true);
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
    51
    },
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    52
    set_selection: function(value) {
2934
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    53
        let display_str;
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    54
        if(value >= 0 && value < this.content.length){
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    55
            // if valid selection resolve content
2934
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    56
            display_str = this.content[value];
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    57
            this.last_selection = value;
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    58
        } else {
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    59
            // otherwise show problem
2934
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    60
            display_str = "?"+String(value)+"?";
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    61
        }
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    62
        // It is assumed that first span always stays,
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    63
        // and contains selection when menu is closed
2934
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
    64
        this.text_elt.firstElementChild.textContent = display_str;
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    65
    },
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    66
    grow_text: function(up_to) {
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    67
        let count = 1;
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    68
        let txt = this.text_elt; 
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    69
        let first = txt.firstElementChild;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    70
        // Real world (pixels) boundaries of current page
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
    71
        let bounds = svg_root.getBoundingClientRect(); 
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    72
        this.lift = 0;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    73
        while(count < up_to) {
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    74
            let next = first.cloneNode();
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    75
            // relative line by line text flow instead of absolute y coordinate
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    76
            next.removeAttribute("y");
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    77
            next.setAttribute("dy", "1.1em");
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    78
            // default content to allow computing text element bbox
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    79
            next.textContent = "...";
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    80
            // append new span to text element
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    81
            txt.appendChild(next);
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    82
            // now check if text extended by one row fits to page
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    83
            // FIXME : exclude margins to be more accurate on box size
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    84
            let rect = txt.getBoundingClientRect();
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    85
            if(rect.bottom > bounds.bottom){
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    86
                // in case of overflow at the bottom, lift up one row
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    87
                let backup = first.getAttribute("dy");
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    88
                // apply lift asr a dy added too first span (y attrib stays)
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    89
                first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    90
                rect = txt.getBoundingClientRect();
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    91
                if(rect.top > bounds.top){
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    92
                    this.lift += 1;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    93
                } else {
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    94
                    // if it goes over the top, then backtrack
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
    95
                    // restore dy attribute on first span
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    96
                    if(backup)
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    97
                        first.setAttribute("dy", backup);
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    98
                    else
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
    99
                        first.removeAttribute("dy");
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   100
                    // remove unwanted child
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   101
                    txt.removeChild(next);
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   102
                    return count;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   103
                }
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   104
            }
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   105
            count++;
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   106
        }
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   107
        return count;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   108
    },
2933
ed3f712a8eef SVGHMI: When clicking outside of opened HMI:DropDown box, close it.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2932
diff changeset
   109
    close_on_click_elsewhere: function(e) {
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   110
        // inhibit events not targetting spans (menu items)
2933
ed3f712a8eef SVGHMI: When clicking outside of opened HMI:DropDown box, close it.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2932
diff changeset
   111
        if(e.target.parentNode !== this.text_elt){
2927
23c35f3ba111 SVGHMI: HMI:DropDown now catches all clicks when open
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2926
diff changeset
   112
            e.stopPropagation();
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   113
            // close menu in case click is outside box
2933
ed3f712a8eef SVGHMI: When clicking outside of opened HMI:DropDown box, close it.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2932
diff changeset
   114
            if(e.target !== this.box_elt)
ed3f712a8eef SVGHMI: When clicking outside of opened HMI:DropDown box, close it.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2932
diff changeset
   115
                this.close();
ed3f712a8eef SVGHMI: When clicking outside of opened HMI:DropDown box, close it.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2932
diff changeset
   116
        }
2927
23c35f3ba111 SVGHMI: HMI:DropDown now catches all clicks when open
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2926
diff changeset
   117
    },
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   118
    close: function(){
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   119
        // Stop hogging all click events
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   120
        svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   121
        // Restore position and sixe of widget elements
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   122
        this.reset_text();
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   123
        this.reset_box();
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   124
        // Put the button back in place
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
   125
        this.element.appendChild(this.button_elt);
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   126
        // Mark as closed (to allow dispatch)
2932
abb995a30088 SVGHMI: Fix HMI:DropDown flicker on close.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2931
diff changeset
   127
        this.opened = false;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   128
        // Dispatch last cached value
2930
41edcb8e0a01 SVGHMI: Connect HMI:DropDown to value in HMI Tree, in svghmi test as well.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2928
diff changeset
   129
        this.apply_cache();
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   130
    },
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   131
    // Set text content when content is smaller than menu (no scrolling)
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   132
    set_complete_text: function(){
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   133
        let spans = this.text_elt.children; 
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   134
        let c = 0;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   135
        for(let item of this.content){
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   136
            let span=spans[c];
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   137
            span.textContent = item;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   138
            span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+c+")");
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   139
            c++;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   140
        }
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   141
    },
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   142
    // Move partial view :
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   143
    // false : upward, lower value
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   144
    // true  : downward, higher value
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   145
    scroll: function(forward){
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   146
        let contentlength = this.content.length;
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   147
        let spans = this.text_elt.children; 
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   148
        let spanslength = spans.length;
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   149
        // reduce accounted menu size according to jumps
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   150
        if(this.menu_offset != 0) spanslength--;
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   151
        if(this.menu_offset < contentlength - 1) spanslength--;
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   152
        if(forward){
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   153
            this.menu_offset = Math.min(
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   154
                contentlength - spans.length + 1, 
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   155
                this.menu_offset + spanslength);
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   156
        }else{
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   157
            this.menu_offset = Math.max(
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   158
                0, 
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   159
                this.menu_offset - spanslength);
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   160
        }
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   161
        this.set_partial_text();
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   162
    },
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   163
    // Setup partial view text content
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   164
    // with jumps at first and last entry when appropriate
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   165
    set_partial_text: function(){
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   166
        let spans = this.text_elt.children; 
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   167
        let contentlength = this.content.length;
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   168
        let spanslength = spans.length;
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   169
        let i = this.menu_offset, c = 0;
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   170
        while(c < spanslength){
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   171
            let span=spans[c];
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   172
            // backward jump only present if not exactly at start
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   173
            if(c == 0 && i != 0){
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   174
                span.textContent = "↑  ↑  ↑";
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   175
                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_backward_click()");
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   176
            // presence of forward jump when not right at the end
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   177
            }else if(c == spanslength-1 && i < contentlength - 1){
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   178
                span.textContent = "↓  ↓  ↓";
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   179
                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_forward_click()");
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   180
            // otherwise normal content
2925
220172cbdcff SVGHMI: HMI:DropDown now scrolls forward and backward
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2924
diff changeset
   181
            }else{
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   182
                span.textContent = this.content[i];
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   183
                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   184
                i++;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   185
            }
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   186
            c++;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   187
        }
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   188
    },
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   189
    open: function(){
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   190
        let length = this.content.length;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   191
        // systematically reset text, to strip eventual whitespace spans
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   192
        this.reset_text();
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   193
        // grow as much as needed or possible
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   194
        let slots = this.grow_text(length);
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   195
        // Depending on final size
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   196
        if(slots == length) {
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   197
            // show all at once
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   198
            this.set_complete_text();
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   199
        } else {
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   200
            // eventualy align menu to current selection, compensating for lift
2934
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
   201
            let offset = this.last_selection - this.lift;
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
   202
            if(offset > 0)
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
   203
                this.menu_offset = Math.min(offset + 1, length - slots + 1);
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
   204
            else
ee483e8346f5 SVGHMI: HMI:DropDown menu aligns to selected when opening
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2933
diff changeset
   205
                this.menu_offset = 0;
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   206
            // show surrounding values
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   207
            this.set_partial_text();
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   208
        }
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   209
        // Now that text size is known, we can set the box around it
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   210
        this.adjust_box_to_text();
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   211
        // Take button out until menu closed
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
   212
        this.element.removeChild(this.button_elt);
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   213
        // Rise widget to top by moving it to last position among siblings
2928
c73d0b042ca8 SVGHMI: HMI:DropDown element is brought in front when opened, so that it isn't occulted by other widgets at the same level.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2927
diff changeset
   214
        this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
2927
23c35f3ba111 SVGHMI: HMI:DropDown now catches all clicks when open
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2926
diff changeset
   215
        // disable interaction with background
2935
83d83aa0f085 SVGHMI: Comments in HMI:DropDown source code
Edouard Tisserant
parents: 2934
diff changeset
   216
        svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   217
        // mark as open
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   218
        this.opened = true;
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   219
    },
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   220
    // Put text element in normalized state
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   221
    reset_text: function(){
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   222
        let txt = this.text_elt; 
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   223
        let first = txt.firstElementChild;
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   224
        // remove attribute eventually added to first text line while opening
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   225
        first.removeAttribute("onclick");
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   226
        first.removeAttribute("dy");
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   227
        // keep only the first line of text
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   228
        for(let span of Array.from(txt.children).slice(1)){
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   229
            txt.removeChild(span)
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   230
        }
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   231
    },
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   232
    // Put rectangle element in saved original state
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   233
    reset_box: function(){
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   234
        let m = this.box_bbox;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   235
        let b = this.box_elt;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   236
        b.x.baseVal.value = m.x;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   237
        b.y.baseVal.value = m.y;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   238
        b.width.baseVal.value = m.width;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   239
        b.height.baseVal.value = m.height;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   240
    },
2936
53fb11263ff1 SVGHMI: HMI:DropDown: more documentation.
Edouard Tisserant
parents: 2935
diff changeset
   241
    // Use margin and text size to compute box size
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   242
    adjust_box_to_text: function(){
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
   243
        let [lmargin, tmargin] = this.margins;
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   244
        let m = this.text_elt.getBBox();
2924
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   245
        let b = this.box_elt;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   246
        b.x.baseVal.value = m.x - lmargin;
69bb58eb0eac SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2923
diff changeset
   247
        b.y.baseVal.value = m.y - tmargin;
2926
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
   248
        b.width.baseVal.value = 2 * lmargin + m.width;
90f9d9782632 SVGHMI: Add button element to HMI:DropDown, also fix problem with computed box margins.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2925
diff changeset
   249
        b.height.baseVal.value = 2 * tmargin + m.height;
2923
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   250
    },
5ec1c07ce582 SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2922
diff changeset
   251
||
2922
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
   252
}