svghmi/widget_dropdown.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Sat, 05 Mar 2022 11:14:00 +0100
branchwxPython4
changeset 3437 ce366d67a5b7
parent 3320 9fe5b4a04acc
child 3487 efa45e7cb04b
permissions -rw-r--r--
Tests: Enhance robustness of stdout driven waiting state in Sikuli based tests.

Some tests were randomly passing, because from time to time waiting for idle was skiped. It was combination of multiple problems :
- buffering on stdout (now use readline + flush for each write to log)
- it is sometime required to wait for activity before waiting for timeout added "WaitForChangeAndIdle" to "stdoutIdleObserver"
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
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    10
    It needs "text" (svg:text or svg:use referring to svg:text),
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    11
    "box" (svg:rect), "button" (svg:*), and "highlight" (svg:rect)
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    12
    labeled elements.
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
    13
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
    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
    15
    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
    16
    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
    17
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    18
    When only one argument is given and argment contains "#langs" then list of
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    19
    texts is automatically set to the human-readable list of supported
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    20
    languages by this HMI. 
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    21
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    22
    If "text" labeled element is of type svg:use and refers to a svg:text 
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    23
    element part of a TextList widget, no argument is expected. In that case
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    24
    list of texts is set to TextList content.
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
    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
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
    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
    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
    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
    30
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
    31
    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
    32
}
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
    33
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
    34
// 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
    35
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
    36
widget_class("DropDown") {
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    37
||
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    38
        dispatch(value) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    39
            if(!this.opened) this.set_selection(value);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    40
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    41
        init() {
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    42
            this.init_specific();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    43
            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
    44
            // Save original size of rectangle
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    45
            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
    46
            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
    47
            this.highlight_elt.style.visibility = "hidden";
3090
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
            // 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
    50
            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
    51
            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
    52
            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
    53
            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
    54
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    55
            // 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
    56
            this.menu_offset = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    57
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    58
            // 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
    59
            this.lift = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    60
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    61
            // 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
    62
            // 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
    63
            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
    64
            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
    65
            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
    66
            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
    67
            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
    68
            this.clickables = [];
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    69
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    70
        on_button_click() {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    71
            this.open();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    72
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    73
        // Called when a menu entry is clicked
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    74
        on_selection_click(selection) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    75
            this.close();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    76
            this.apply_hmi_value(0, selection);
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
        on_backward_click(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    79
            this.scroll(false);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    80
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    81
        on_forward_click(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    82
            this.scroll(true);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    83
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    84
        set_selection(value) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    85
            let display_str;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    86
            if(value >= 0 && value < this.content.length){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    87
                // if valid selection resolve content
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
    88
                display_str = gettext(this.content[value]);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    89
                this.last_selection = value;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    90
            } else {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    91
                // otherwise show problem
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    92
                display_str = "?"+String(value)+"?";
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    93
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    94
            // It is assumed that first span always stays,
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    95
            // and contains selection when menu is closed
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    96
            this.text_elt.firstElementChild.textContent = display_str;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    97
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    98
        grow_text(up_to) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
    99
            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
   100
            let txt = this.text_elt;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   101
            let first = txt.firstElementChild;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   102
            // 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
   103
            let bounds = svg_root.getBoundingClientRect();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   104
            this.lift = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   105
            while(count < up_to) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   106
                let next = first.cloneNode();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   107
                // 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
   108
                next.removeAttribute("y");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   109
                next.setAttribute("dy", "1.1em");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   110
                // default content to allow computing text element bbox
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   111
                next.textContent = "...";
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   112
                // append new span to text element
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   113
                txt.appendChild(next);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   114
                // 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
   115
                // 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
   116
                let rect = txt.getBoundingClientRect();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   117
                if(rect.bottom > bounds.bottom){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   118
                    // 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
   119
                    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
   120
                    // 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
   121
                    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
   122
                    rect = txt.getBoundingClientRect();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   123
                    if(rect.top > bounds.top){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   124
                        this.lift += 1;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   125
                    } else {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   126
                        // if it goes over the top, then backtrack
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   127
                        // restore dy attribute on first span
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   128
                        if(backup)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   129
                            first.setAttribute("dy", backup);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   130
                        else
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   131
                            first.removeAttribute("dy");
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   132
                        // remove unwanted child
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   133
                        txt.removeChild(next);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   134
                        return count;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   135
                    }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   136
                }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   137
                count++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   138
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   139
            return count;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   140
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   141
        close_on_click_elsewhere(e) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   142
            // 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
   143
            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
   144
                e.stopPropagation();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   145
                // close menu in case click is outside box
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   146
                if(e.target !== this.box_elt)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   147
                    this.close();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   148
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   149
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   150
        close(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   151
            // 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
   152
            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
   153
            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
   154
            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
   155
            // Restore position and sixe of widget elements
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   156
            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
   157
            this.reset_clickables();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   158
            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
   159
            this.reset_highlight();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   160
            // Put the button back in place
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   161
            this.element.appendChild(this.button_elt);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   162
            // Mark as closed (to allow dispatch)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   163
            this.opened = false;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   164
            // Dispatch last cached value
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   165
            this.apply_cache();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   166
        }
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
        // 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
   168
        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
   169
            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
   170
            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
   171
            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
   172
            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
   173
            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
   174
            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
   175
            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
   176
            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
   177
            //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
   178
            //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
   179
            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
   180
            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
   181
            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
   182
        }
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
   183
        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
   184
            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
   185
                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
   186
            }
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
   187
        }
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   188
        // 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
   189
        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
   190
            let spans = this.text_elt.children;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   191
            let c = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   192
            for(let item of this.content){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   193
                let span=spans[c];
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   194
                span.textContent = gettext(item);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   195
                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
   196
                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
   197
                c++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   198
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   199
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   200
        // Move partial view :
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   201
        // false : upward, lower value
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   202
        // true  : downward, higher value
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   203
        scroll(forward){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   204
            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
   205
            let spans = this.text_elt.children;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   206
            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
   207
            // 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
   208
            // 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
   209
            spanslength--;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   210
            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
   211
                // 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
   212
                // 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
   213
                if(this.menu_offset > 0) spanslength--;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   214
                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
   215
                    contentlength - spans.length + 1,
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   216
                    this.menu_offset + spanslength);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   217
            }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
   218
                // 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
   219
                // 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
   220
                if(this.menu_offset - spanslength > 0) spanslength--;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   221
                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
   222
                    0,
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   223
                    this.menu_offset - spanslength);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   224
            }
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
   225
            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
   226
                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
   227
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
   228
            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
   229
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
   230
            this.reset_clickables();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   231
            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
   232
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
   233
            this.highlight_selection();
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   234
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   235
        // Setup partial view text content
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   236
        // 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
   237
        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
   238
            let spans = this.text_elt.children;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   239
            let contentlength = this.content.length;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   240
            let spanslength = spans.length;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   241
            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
   242
            let m = this.box_bbox;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   243
            while(c < spanslength){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   244
                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
   245
                let onclickfunc;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   246
                // 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
   247
                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
   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_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
   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
                // 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
   253
                }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
   254
                    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
   255
                    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
   256
                    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
   257
                    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
   258
                // otherwise normal content
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   259
                }else{
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   260
                    span.textContent = gettext(this.content[i]);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   261
                    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
   262
                    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
   263
                    span.removeAttribute("dx");
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   264
                    i++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   265
                }
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
   266
                this.make_clickable(span, onclickfunc);
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   267
                c++;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   268
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   269
        }
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
   270
        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
   271
             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
   272
        }
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   273
        open(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   274
            let length = this.content.length;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   275
            // systematically reset text, to strip eventual whitespace spans
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   276
            this.reset_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   277
            // grow as much as needed or possible
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   278
            let slots = this.grow_text(length);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   279
            // Depending on final size
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   280
            if(slots == length) {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   281
                // show all at once
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   282
                this.set_complete_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   283
            } else {
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   284
                // 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
   285
                let offset = this.last_selection - this.lift;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   286
                if(offset > 0)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   287
                    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
   288
                else
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   289
                    this.menu_offset = 0;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   290
                // show surrounding values
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   291
                this.set_partial_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   292
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   293
            // 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
   294
            this.adjust_box_to_text();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   295
            // Take button out until menu closed
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   296
            this.element.removeChild(this.button_elt);
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   297
            // 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
   298
            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
   299
            // 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
   300
            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
   301
            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
   302
            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
   303
            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
   304
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   305
            // mark as open
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   306
            this.opened = true;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   307
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   308
        // Put text element in normalized state
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   309
        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
   310
            let txt = this.text_elt;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   311
            let first = txt.firstElementChild;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   312
            // 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
   313
            first.onclick = null;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   314
            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
   315
            first.removeAttribute("dx");
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   316
            // keep only the first line of text
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   317
            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
   318
                txt.removeChild(span)
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   319
            }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   320
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   321
        // Put rectangle element in saved original state
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   322
        reset_box(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   323
            let m = this.box_bbox;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   324
            let b = this.box_elt;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   325
            b.x.baseVal.value = m.x;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   326
            b.y.baseVal.value = m.y;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   327
            b.width.baseVal.value = m.width;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   328
            b.height.baseVal.value = m.height;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   329
        }
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
   330
        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
   331
            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
   332
            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
   333
            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
   334
            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
   335
            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
   336
            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
   337
            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
   338
                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
   339
                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
            }
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
            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
   342
            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
   343
            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
   344
            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
   345
            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
   346
            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
   347
            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
   348
            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
   349
        }
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
   350
        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
   351
            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
   352
            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
   353
            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
   354
        }
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   355
        // 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
   356
        adjust_box_to_text(){
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   357
            let [lmargin, tmargin] = this.margins;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   358
            let m = this.text_elt.getBBox();
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   359
            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
   360
            // b.x.baseVal.value = m.x - lmargin;
3090
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   361
            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
   362
            // 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
   363
            b.height.baseVal.value = 2 * tmargin + m.height;
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   364
        }
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   365
||
9e172e4e50c7 SVGHMI: DropDown widget now using new class based style
Edouard Tisserant
parents: 3035
diff changeset
   366
}
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
   367
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
   368
widget_defs("DropDown") {
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   369
    labels("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
   370
    // It is assumed that list content conforms to Array interface.
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   371
    const "text_elt","$hmi_element//*[@inkscape:label='text'][1]";
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   372
    | init_specific: function() {
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
   373
    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
   374
        // 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
   375
        when "count(arg) = 1 and arg[1]/@value = '#langs'" {
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   376
            |   this.text_elt = id("«$text_elt/@id»");
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   377
            |   this.content = langs;
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   378
        }
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   379
        when "count(arg) = 0"{ 
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   380
            if "not($text_elt[self::svg:use])"
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   381
                error > No argrument for HMI:DropDown widget id="«$hmi_element/@id»" and "text" labeled element is not a svg:use element
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   382
            const "real_text_elt","$result_widgets[@id = $hmi_element/@id]//*[@original=$text_elt/@id]/svg:text";
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   383
            |   this.text_elt = id("«$real_text_elt/@id»");
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   384
            const "from_list_id", "substring-after($text_elt/@xlink:href,'#')";
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   385
            const "from_list", "$hmi_textlists[(@id | */@id) = $from_list_id]";
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   386
            if "count($from_list) = 0"
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   387
                error > HMI:DropDown widget id="«$hmi_element/@id»" "text" labeled element does not point to a svg:text owned by a HMI:List widget
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   388
            |   this.content = hmi_widgets["«$from_list/@id»"].texts;
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
   389
        }
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
   390
        otherwise {
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   391
            |   this.text_elt = id("«$text_elt/@id»");
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   392
            |   this.content = [
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
   393
            foreach "arg" | "«@value»",
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   394
            |   ];
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
   395
        }
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
   396
    }
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   397
    | }
2922
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
   398
}
3320
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   399
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   400
emit "declarations:DropDown"
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   401
||
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   402
function gettext(o) {
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   403
    if(typeof(o) == "string"){
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   404
        return o;
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   405
    }
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   406
    return svg_text_to_multiline(o);
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   407
};
9fe5b4a04acc SVGHMI: Add TextList widget, add support for TextList in DropDown widget, move List, TextStyleList and TextList widget code in dedicated file with documentation.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3241
diff changeset
   408
||