svghmi/widget_dropdown.ysl2
author Edouard Tisserant
Tue, 25 May 2021 15:05:38 +0200
branchsvghmi
changeset 3248 ea93c14342d1
parent 3241 fe945f1f48b7
child 3320 9fe5b4a04acc
permissions -rw-r--r--
Runtime: Fix exception "Worker is disabled" when connecting while PLC runtime is starting.

Pyro/wamp/UI delegate jobs to Worker, causing race condition if worker isn't already started.
Added a function to ensure that Worker is already created when pyro or UI starts
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
3241
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     3
widget_desc("DropDown") {
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     4
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     5
    longdesc
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     6
    ||
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     7
    DropDown widget let user select an entry in a list of texts, given as
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     8
    arguments. Single variable path is index of selection.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     9
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    10
    It needs "text" (svg:text), "box" (svg:rect), "button" (svg:*),
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    11
    and "highlight" (svg:rect) labeled elements.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    12
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    13
    When user clicks on "button", "text" is duplicated to display enties in the
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    14
    limit of available space in page, and "box" is extended to contain all
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    15
    texts. "highlight" is moved over pre-selected entry.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    16
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    17
    When only one argument is given, and argment contains "#langs" then list of
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    18
    texts is automatically set to the list of human-readable languages supported
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    19
    by this HMI. 
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    20
    ||
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    21
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    22
    shortdesc > Let user select text entry in a drop-down menu
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    23
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    24
    arg name="entries" count="many" accepts="string" > drop-down menu entries
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    25
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    26
    path name="selection" accepts="HMI_INT" > selection index
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    27
}
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    28
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    29
// TODO: support i18n of menu entries using svg:text elements with labels starting with "_"
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    30
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
    31
widget_class("DropDown") {
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    32
||
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    33
        dispatch(value) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    34
            if(!this.opened) this.set_selection(value);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    35
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    36
        init() {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    37
            this.button_elt.onclick = this.on_button_click.bind(this);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    38
            // Save original size of rectangle
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    39
            this.box_bbox = this.box_elt.getBBox()
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
    40
            this.highlight_bbox = this.highlight_elt.getBBox()
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
    41
            this.highlight_elt.style.visibility = "hidden";
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    42
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    43
            // Compute margins
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
    44
            this.text_bbox = this.text_elt.getBBox();
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
    45
            let lmargin = this.text_bbox.x - this.box_bbox.x;
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
    46
            let tmargin = this.text_bbox.y - this.box_bbox.y;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    47
            this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    48
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    49
            // Index of first visible element in the menu, when opened
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    50
            this.menu_offset = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    51
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    52
            // How mutch to lift the menu vertically so that it does not cross bottom border
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    53
            this.lift = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    54
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    55
            // Event handlers cannot be object method ('this' is unknown)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    56
            // as a workaround, handler given to addEventListener is bound in advance.
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    57
            this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    58
            this.bound_on_selection_click = this.on_selection_click.bind(this);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    59
            this.bound_on_backward_click = this.on_backward_click.bind(this);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    60
            this.bound_on_forward_click = this.on_forward_click.bind(this);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    61
            this.opened = false;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
    62
            this.clickables = [];
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    63
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    64
        on_button_click() {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    65
            this.open();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    66
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    67
        // Called when a menu entry is clicked
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    68
        on_selection_click(selection) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    69
            this.close();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    70
            this.apply_hmi_value(0, selection);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    71
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    72
        on_backward_click(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    73
            this.scroll(false);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    74
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    75
        on_forward_click(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    76
            this.scroll(true);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    77
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    78
        set_selection(value) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    79
            let display_str;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    80
            if(value >= 0 && value < this.content.length){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    81
                // if valid selection resolve content
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    82
                display_str = this.content[value];
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    83
                this.last_selection = value;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    84
            } else {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    85
                // otherwise show problem
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    86
                display_str = "?"+String(value)+"?";
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    87
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    88
            // It is assumed that first span always stays,
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    89
            // and contains selection when menu is closed
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    90
            this.text_elt.firstElementChild.textContent = display_str;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    91
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    92
        grow_text(up_to) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    93
            let count = 1;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
    94
            let txt = this.text_elt;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    95
            let first = txt.firstElementChild;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    96
            // Real world (pixels) boundaries of current page
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
    97
            let bounds = svg_root.getBoundingClientRect();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    98
            this.lift = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    99
            while(count < up_to) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   100
                let next = first.cloneNode();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   101
                // relative line by line text flow instead of absolute y coordinate
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   102
                next.removeAttribute("y");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   103
                next.setAttribute("dy", "1.1em");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   104
                // default content to allow computing text element bbox
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   105
                next.textContent = "...";
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   106
                // append new span to text element
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   107
                txt.appendChild(next);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   108
                // now check if text extended by one row fits to page
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   109
                // FIXME : exclude margins to be more accurate on box size
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   110
                let rect = txt.getBoundingClientRect();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   111
                if(rect.bottom > bounds.bottom){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   112
                    // in case of overflow at the bottom, lift up one row
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   113
                    let backup = first.getAttribute("dy");
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   114
                    // apply lift as a dy added too first span (y attrib stays)
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   115
                    first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   116
                    rect = txt.getBoundingClientRect();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   117
                    if(rect.top > bounds.top){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   118
                        this.lift += 1;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   119
                    } else {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   120
                        // if it goes over the top, then backtrack
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   121
                        // restore dy attribute on first span
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   122
                        if(backup)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   123
                            first.setAttribute("dy", backup);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   124
                        else
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   125
                            first.removeAttribute("dy");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   126
                        // remove unwanted child
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   127
                        txt.removeChild(next);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   128
                        return count;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   129
                    }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   130
                }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   131
                count++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   132
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   133
            return count;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   134
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   135
        close_on_click_elsewhere(e) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   136
            // inhibit events not targetting spans (menu items)
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   137
            if([this.text_elt, this.element].indexOf(e.target.parentNode) == -1){
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   138
                e.stopPropagation();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   139
                // close menu in case click is outside box
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   140
                if(e.target !== this.box_elt)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   141
                    this.close();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   142
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   143
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   144
        close(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   145
            // Stop hogging all click events
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   146
            svg_root.removeEventListener("pointerdown", this.numb_event, true);
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   147
            svg_root.removeEventListener("pointerup", this.numb_event, true);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   148
            svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   149
            // Restore position and sixe of widget elements
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   150
            this.reset_text();
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   151
            this.reset_clickables();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   152
            this.reset_box();
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   153
            this.reset_highlight();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   154
            // Put the button back in place
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   155
            this.element.appendChild(this.button_elt);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   156
            // Mark as closed (to allow dispatch)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   157
            this.opened = false;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   158
            // Dispatch last cached value
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   159
            this.apply_cache();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   160
        }
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   161
        // Make item (text span) clickable by overlaying a rectangle on top of it
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   162
        make_clickable(span, func) {
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   163
            let txt = this.text_elt;
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   164
            let original_text_y = this.text_bbox.y;
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   165
            let highlight = this.highlight_elt;
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   166
            let original_h_y = this.highlight_bbox.y;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   167
            let clickable = highlight.cloneNode();
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   168
            let yoffset = span.getBBox().y - original_text_y;
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   169
            clickable.y.baseVal.value = original_h_y + yoffset;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   170
            clickable.style.pointerEvents = "bounding-box";
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   171
            //clickable.style.visibility = "hidden";
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   172
            //clickable.onclick = () => alert("love JS");
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   173
            clickable.onclick = func;
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   174
            this.element.appendChild(clickable);
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   175
            this.clickables.push(clickable)
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   176
        }
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   177
        reset_clickables() {
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   178
            while(this.clickables.length){
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   179
                this.element.removeChild(this.clickables.pop());
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   180
            }
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   181
        }
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   182
        // Set text content when content is smaller than menu (no scrolling)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   183
        set_complete_text(){
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   184
            let spans = this.text_elt.children;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   185
            let c = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   186
            for(let item of this.content){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   187
                let span=spans[c];
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   188
                span.textContent = item;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   189
                let sel = c;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   190
                this.make_clickable(span, (evt) => this.bound_on_selection_click(sel));
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   191
                c++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   192
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   193
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   194
        // Move partial view :
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   195
        // false : upward, lower value
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   196
        // true  : downward, higher value
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   197
        scroll(forward){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   198
            let contentlength = this.content.length;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   199
            let spans = this.text_elt.children;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   200
            let spanslength = spans.length;
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   201
            // reduce accounted menu size according to prsence of scroll buttons
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   202
            // since we scroll there is necessarly one button
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   203
            spanslength--;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   204
            if(forward){
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   205
                // reduce accounted menu size because of back button
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   206
                // in current view
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   207
                if(this.menu_offset > 0) spanslength--;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   208
                this.menu_offset = Math.min(
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   209
                    contentlength - spans.length + 1,
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   210
                    this.menu_offset + spanslength);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   211
            }else{
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   212
                // reduce accounted menu size because of back button
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   213
                // in view once scrolled
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   214
                if(this.menu_offset - spanslength > 0) spanslength--;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   215
                this.menu_offset = Math.max(
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   216
                    0,
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   217
                    this.menu_offset - spanslength);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   218
            }
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   219
            if(this.menu_offset == 1)
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   220
                this.menu_offset = 0;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   221
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   222
            this.reset_highlight();
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   223
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   224
            this.reset_clickables();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   225
            this.set_partial_text();
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   226
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   227
            this.highlight_selection();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   228
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   229
        // Setup partial view text content
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   230
        // with jumps at first and last entry when appropriate
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   231
        set_partial_text(){
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   232
            let spans = this.text_elt.children;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   233
            let contentlength = this.content.length;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   234
            let spanslength = spans.length;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   235
            let i = this.menu_offset, c = 0;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   236
            let m = this.box_bbox;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   237
            while(c < spanslength){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   238
                let span=spans[c];
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   239
                let onclickfunc;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   240
                // backward jump only present if not exactly at start
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   241
                if(c == 0 && i != 0){
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   242
                    span.textContent = "▲";
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   243
                    onclickfunc = this.bound_on_backward_click;
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   244
                    let o = span.getBBox();
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   245
                    span.setAttribute("dx", (m.width - o.width)/2);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   246
                // presence of forward jump when not right at the end
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   247
                }else if(c == spanslength-1 && i < contentlength - 1){
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   248
                    span.textContent = "▼";
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   249
                    onclickfunc = this.bound_on_forward_click;
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   250
                    let o = span.getBBox();
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   251
                    span.setAttribute("dx", (m.width - o.width)/2);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   252
                // otherwise normal content
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   253
                }else{
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   254
                    span.textContent = this.content[i];
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   255
                    let sel = i;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   256
                    onclickfunc = (evt) => this.bound_on_selection_click(sel);
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   257
                    span.removeAttribute("dx");
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   258
                    i++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   259
                }
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   260
                this.make_clickable(span, onclickfunc);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   261
                c++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   262
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   263
        }
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   264
        numb_event(e) {
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   265
             e.stopPropagation();
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   266
        }
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   267
        open(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   268
            let length = this.content.length;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   269
            // systematically reset text, to strip eventual whitespace spans
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   270
            this.reset_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   271
            // grow as much as needed or possible
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   272
            let slots = this.grow_text(length);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   273
            // Depending on final size
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   274
            if(slots == length) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   275
                // show all at once
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   276
                this.set_complete_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   277
            } else {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   278
                // eventualy align menu to current selection, compensating for lift
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   279
                let offset = this.last_selection - this.lift;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   280
                if(offset > 0)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   281
                    this.menu_offset = Math.min(offset + 1, length - slots + 1);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   282
                else
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   283
                    this.menu_offset = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   284
                // show surrounding values
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   285
                this.set_partial_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   286
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   287
            // Now that text size is known, we can set the box around it
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   288
            this.adjust_box_to_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   289
            // Take button out until menu closed
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   290
            this.element.removeChild(this.button_elt);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   291
            // Rise widget to top by moving it to last position among siblings
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   292
            this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   293
            // disable interaction with background
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   294
            svg_root.addEventListener("pointerdown", this.numb_event, true);
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   295
            svg_root.addEventListener("pointerup", this.numb_event, true);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   296
            svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   297
            this.highlight_selection();
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   298
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   299
            // mark as open
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   300
            this.opened = true;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   301
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   302
        // Put text element in normalized state
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   303
        reset_text(){
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   304
            let txt = this.text_elt;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   305
            let first = txt.firstElementChild;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   306
            // remove attribute eventually added to first text line while opening
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   307
            first.onclick = null;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   308
            first.removeAttribute("dy");
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   309
            first.removeAttribute("dx");
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   310
            // keep only the first line of text
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   311
            for(let span of Array.from(txt.children).slice(1)){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   312
                txt.removeChild(span)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   313
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   314
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   315
        // Put rectangle element in saved original state
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   316
        reset_box(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   317
            let m = this.box_bbox;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   318
            let b = this.box_elt;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   319
            b.x.baseVal.value = m.x;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   320
            b.y.baseVal.value = m.y;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   321
            b.width.baseVal.value = m.width;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   322
            b.height.baseVal.value = m.height;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   323
        }
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   324
        highlight_selection(){
3131
2d750e38a4c6 SVGHMI: Prevent Dropdown widget to mak exception whe value out of range
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3107
diff changeset
   325
            if(this.last_selection == undefined) return;
3092
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   326
            let highlighted_row = this.last_selection - this.menu_offset;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   327
            if(highlighted_row < 0) return;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   328
            let spans = this.text_elt.children;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   329
            let spanslength = spans.length;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   330
            let contentlength = this.content.length;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   331
            if(this.menu_offset != 0) {
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   332
                spanslength--;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   333
                highlighted_row++;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   334
            }
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   335
            if(this.menu_offset + spanslength < contentlength - 1) spanslength--;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   336
            if(highlighted_row > spanslength) return;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   337
            let original_text_y = this.text_bbox.y;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   338
            let highlight = this.highlight_elt;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   339
            let span = spans[highlighted_row];
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   340
            let yoffset = span.getBBox().y - original_text_y;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   341
            highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   342
            highlight.style.visibility = "visible";
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   343
        }
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   344
        reset_highlight(){
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   345
            let highlight = this.highlight_elt;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   346
            highlight.y.baseVal.value = this.highlight_bbox.y;
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   347
            highlight.style.visibility = "hidden";
96ffd8b1b016 SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
Edouard Tisserant
parents: 3091
diff changeset
   348
        }
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   349
        // Use margin and text size to compute box size
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   350
        adjust_box_to_text(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   351
            let [lmargin, tmargin] = this.margins;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   352
            let m = this.text_elt.getBBox();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   353
            let b = this.box_elt;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   354
            // b.x.baseVal.value = m.x - lmargin;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   355
            b.y.baseVal.value = m.y - tmargin;
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   356
            // b.width.baseVal.value = 2 * lmargin + m.width;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   357
            b.height.baseVal.value = 2 * tmargin + m.height;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   358
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   359
||
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   360
}
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   361
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3133
diff changeset
   362
widget_defs("DropDown") {
3091
f475f39713aa SVGHMI: change scroll buttons into single unicode triangle and center them. Use highlight rectangle duplicated and hidden to catch selection clicks so that the whole row is clickable.
Edouard Tisserant
parents: 3090
diff changeset
   363
    labels("text box button highlight");
3107
ee0704cc6dc8 SVGHMI: Jump widget: switch to class based declaraion, and add some TODO comments to prepare for jump to relative page being selected through a DropDown widget.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3092
diff changeset
   364
    // It is assumed that list content conforms to Array interface.
3133
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   365
    >   content:
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   366
    choose{
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   367
        // special case when used for language selection
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   368
        when "count(arg) = 1 and arg[1]/@value = '#langs'" {
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   369
            > langs
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   370
        }
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   371
        otherwise {
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   372
            > [\n
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   373
            foreach "arg" | "«@value»",
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   374
            >   ]
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   375
        }
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   376
    }
450cd01324ad SVGHMI: HMI:DropDown:#langs@lang now automatically shows human readable list of languages. tests/svghmi_i18n updated accordingly.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3131
diff changeset
   377
    > ,\n
2922
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
   378
}