1

// widget_dropdown.ysl2

     2

     3

template "widget[@type='DropDown']", mode="widget_defs" {

     4

    param "hmi_element";

     5

    labels("text box button");

     6

||

     7

    dispatch: function(value) {

     8

        if(!this.opened) this.set_selection(value);

     9

    },

    10

    init: function() {

    11

        this.button_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_button_click()");

    12

        // Save original size of rectangle

    13

        this.box_bbox = this.box_elt.getBBox()

    14

    15

        // Compute margins

    16

        text_bbox = this.text_elt.getBBox()

    17

        lmargin = text_bbox.x - this.box_bbox.x;

    18

        tmargin = text_bbox.y - this.box_bbox.y;

    19

        this.margins = [lmargin, tmargin].map(x => Math.max(x,0));

    20

    21

        // It is assumed that list content conforms to Array interface.

    22

        this.content = [

    23

        ``foreach "arg" | "«@value»",

    24

        ];

    25

    26

        // Index of first visible element in the menu, when opened

    27

        this.menu_offset = 0;

    28

    29

        // How mutch to lift the menu vertically so that it does not cross bottom border

    30

        this.lift = 0;

    31

    32

        // Event handlers cannot be object method ('this' is unknown)

    33

        // as a workaround, handler given to addEventListener is bound in advance.

    34

        this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);

    35

    36

        this.opened = false;

    37

    },

    38

    // Called when a menu entry is clicked

    39

    on_selection_click: function(selection) {

    40

        this.close();

    41

        let orig = this.indexes[0];

    42

        let idx = this.offset ? orig - this.offset : orig;

    43

        apply_hmi_value(idx, selection);

    44

    },

    45

    on_button_click: function() {

    46

        this.open();

    47

    },

    48

    on_backward_click: function(){

    49

        this.scroll(false);

    50

    },

    51

    on_forward_click:function(){

    52

        this.scroll(true);

    53

    },

    54

    set_selection: function(value) {

    55

        let display_str;

    56

        if(value >= 0 && value < this.content.length){

    57

            // if valid selection resolve content

    58

            display_str = this.content[value];

    59

            this.last_selection = value;

    60

        } else {

    61

            // otherwise show problem

    62

            display_str = "?"+String(value)+"?";

    63

        }

    64

        // It is assumed that first span always stays,

    65

        // and contains selection when menu is closed

    66

        this.text_elt.firstElementChild.textContent = display_str;

    67

    },

    68

    grow_text: function(up_to) {

    69

        let count = 1;

    70

        let txt = this.text_elt; 

    71

        let first = txt.firstElementChild;

    72

        // Real world (pixels) boundaries of current page

    73

        let bounds = svg_root.getBoundingClientRect(); 

    74

        this.lift = 0;

    75

        while(count < up_to) {

    76

            let next = first.cloneNode();

    77

            // relative line by line text flow instead of absolute y coordinate

    78

            next.removeAttribute("y");

    79

            next.setAttribute("dy", "1.1em");

    80

            // default content to allow computing text element bbox

    81

            next.textContent = "...";

    82

            // append new span to text element

    83

            txt.appendChild(next);

    84

            // now check if text extended by one row fits to page

    85

            // FIXME : exclude margins to be more accurate on box size

    86

            let rect = txt.getBoundingClientRect();

    87

            if(rect.bottom > bounds.bottom){

    88

                // in case of overflow at the bottom, lift up one row

    89

                let backup = first.getAttribute("dy");

    90

                // apply lift asr a dy added too first span (y attrib stays)

    91

                first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");

    92

                rect = txt.getBoundingClientRect();

    93

                if(rect.top > bounds.top){

    94

                    this.lift += 1;

    95

                } else {

    96

                    // if it goes over the top, then backtrack

    97

                    // restore dy attribute on first span

    98

                    if(backup)

    99

                        first.setAttribute("dy", backup);

   100

                    else

   101

                        first.removeAttribute("dy");

   102

                    // remove unwanted child

   103

                    txt.removeChild(next);

   104

                    return count;

   105

                }

   106

            }

   107

            count++;

   108

        }

   109

        return count;

   110

    },

   111

    close_on_click_elsewhere: function(e) {

   112

        // inhibit events not targetting spans (menu items)

   113

        if(e.target.parentNode !== this.text_elt){

   114

            e.stopPropagation();

   115

            // close menu in case click is outside box

   116

            if(e.target !== this.box_elt)

   117

                this.close();

   118

        }

   119

    },

   120

    close: function(){

   121

        // Stop hogging all click events

   122

        svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);

   123

        // Restore position and sixe of widget elements

   124

        this.reset_text();

   125

        this.reset_box();

   126

        // Put the button back in place

   127

        this.element.appendChild(this.button_elt);

   128

        // Mark as closed (to allow dispatch)

   129

        this.opened = false;

   130

        // Dispatch last cached value

   131

        this.apply_cache();

   132

    },

   133

    // Set text content when content is smaller than menu (no scrolling)

   134

    set_complete_text: function(){

   135

        let spans = this.text_elt.children; 

   136

        let c = 0;

   137

        for(let item of this.content){

   138

            let span=spans[c];

   139

            span.textContent = item;

   140

            span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+c+")");

   141

            c++;

   142

        }

   143

    },

   144

    // Move partial view :

   145

    // false : upward, lower value

   146

    // true  : downward, higher value

   147

    scroll: function(forward){

   148

        let contentlength = this.content.length;

   149

        let spans = this.text_elt.children; 

   150

        let spanslength = spans.length;

   151

        // reduce accounted menu size according to jumps

   152

        if(this.menu_offset != 0) spanslength--;

   153

        if(this.menu_offset < contentlength - 1) spanslength--;

   154

        if(forward){

   155

            this.menu_offset = Math.min(

   156

                contentlength - spans.length + 1, 

   157

                this.menu_offset + spanslength);

   158

        }else{

   159

            this.menu_offset = Math.max(

   160

                0, 

   161

                this.menu_offset - spanslength);

   162

        }

   163

        console.log(this.menu_offset);

   164

        this.set_partial_text();

   165

    },

   166

    // Setup partial view text content

   167

    // with jumps at first and last entry when appropriate

   168

    set_partial_text: function(){

   169

        let spans = this.text_elt.children; 

   170

        let contentlength = this.content.length;

   171

        let spanslength = spans.length;

   172

        let i = this.menu_offset, c = 0;

   173

        while(c < spanslength){

   174

            let span=spans[c];

   175

            // backward jump only present if not exactly at start

   176

            if(c == 0 && i != 0){

   177

                span.textContent = "↑  ↑  ↑";

   178

                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_backward_click()");

   179

            // presence of forward jump when not right at the end

   180

            }else if(c == spanslength-1 && i < contentlength - 1){

   181

                span.textContent = "↓  ↓  ↓";

   182

                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_forward_click()");

   183

            // otherwise normal content

   184

            }else{

   185

                span.textContent = this.content[i];

   186

                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");

   187

                i++;

   188

            }

   189

            c++;

   190

        }

   191

    },

   192

    open: function(){

   193

        let length = this.content.length;

   194

        // systematically reset text, to strip eventual whitespace spans

   195

        this.reset_text();

   196

        // grow as much as needed or possible

   197

        let slots = this.grow_text(length);

   198

        // Depending on final size

   199

        if(slots == length) {

   200

            // show all at once

   201

            this.set_complete_text();

   202

        } else {

   203

            // eventualy align menu to current selection, compensating for lift

   204

            let offset = this.last_selection - this.lift;

   205

            if(offset > 0)

   206

                this.menu_offset = Math.min(offset + 1, length - slots + 1);

   207

            else

   208

                this.menu_offset = 0;

   209

            // show surrounding values

   210

            this.set_partial_text();

   211

        }

   212

        // Now that text size is known, we can set the box around it

   213

        this.adjust_box_to_text();

   214

        // Take button out until menu closed

   215

        this.element.removeChild(this.button_elt);

   216

        // Rise widget to top by moving it to last position among siblings

   217

        this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));

   218

        // disable interaction with background

   219

        svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);

   220

        // mark as open

   221

        this.opened = true;

   222

    },

   223

    // Put text element in normalized state

   224

    reset_text: function(){

   225

        let txt = this.text_elt; 

   226

        let first = txt.firstElementChild;

   227

        // remove attribute eventually added to first text line while opening

   228

        first.removeAttribute("onclick");

   229

        first.removeAttribute("dy");

   230

        // keep only the first line of text

   231

        for(let span of Array.from(txt.children).slice(1)){

   232

            txt.removeChild(span)

   233

        }

   234

    },

   235

    // Put rectangle element in saved original state

   236

    reset_box: function(){

   237

        let m = this.box_bbox;

   238

        let b = this.box_elt;

   239

        b.x.baseVal.value = m.x;

   240

        b.y.baseVal.value = m.y;

   241

        b.width.baseVal.value = m.width;

   242

        b.height.baseVal.value = m.height;

   243

    },

   244

    // Use margin and text size to compute box size

   245

    adjust_box_to_text: function(){

   246

        let [lmargin, tmargin] = this.margins;

   247

        let m = this.text_elt.getBBox();

   248

        let b = this.box_elt;

   249

        b.x.baseVal.value = m.x - lmargin;

   250

        b.y.baseVal.value = m.y - tmargin;

   251

        b.width.baseVal.value = 2 * lmargin + m.width;

   252

        b.height.baseVal.value = 2 * tmargin + m.height;

   253

    },

   254

||

   255

}