svghmi/widget_dropdown.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Fri, 05 Apr 2024 14:55:58 +0200
changeset 3929 1a0bed0b4f1c
parent 3487 efa45e7cb04b
permissions -rw-r--r--
Doc: start converting Standard Library documentation from old MC8 manual.
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
3352
3a138ccdfafa 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),
3a138ccdfafa 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)
3a138ccdfafa 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
3352
3a138ccdfafa 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
3a138ccdfafa 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
3a138ccdfafa 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. 
3a138ccdfafa 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
3a138ccdfafa 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 
3a138ccdfafa 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
3a138ccdfafa 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() {
3352
3a138ccdfafa 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
3352
3a138ccdfafa 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];
3352
3a138ccdfafa 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{
3352
3a138ccdfafa 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") {
3352
3a138ccdfafa 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.
3352
3a138ccdfafa 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]";
3a138ccdfafa 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'" {
3352
3a138ccdfafa 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»");
3487
efa45e7cb04b SVGHMI: fix dropdown widget in case it is used as language selection widget
Edouard Tisserant
parents: 3352
diff changeset
   377
            |   this.content = langs.map(([lname,lcode]) => lname);
3352
3a138ccdfafa 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
        }
3a138ccdfafa 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"{ 
3a138ccdfafa 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])"
3a138ccdfafa 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
3a138ccdfafa 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";
3a138ccdfafa 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»");
3a138ccdfafa 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,'#')";
3a138ccdfafa 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]";
3a138ccdfafa 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"
3a138ccdfafa 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
3a138ccdfafa 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 {
3352
3a138ccdfafa 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»");
3a138ccdfafa 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»",
3352
3a138ccdfafa 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
    }
3352
3a138ccdfafa 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
}
3352
3a138ccdfafa 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
3a138ccdfafa 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"
3a138ccdfafa 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
||
3a138ccdfafa 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) {
3a138ccdfafa 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"){
3a138ccdfafa 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;
3a138ccdfafa 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
    }
3a138ccdfafa 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);
3a138ccdfafa 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
};
3a138ccdfafa 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
||