1

// widget_dropdown.ysl2

     2

     3

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

     4

||

     8

    class DropDownWidget extends Widget{

     9

        dispatch(value) {

    10

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

    11

        }

    12

        init() {

    13

            this.button_elt.onclick = this.on_button_click.bind(this);

    14

            // Save original size of rectangle

    15

            this.box_bbox = this.box_elt.getBBox()

    16

    17

            // Compute margins

    21

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

    22

    23

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

    24

            this.menu_offset = 0;

    25

    26

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

    27

            this.lift = 0;

    28

    29

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

    30

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

    31

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

    32

            this.bound_on_selection_click = this.on_selection_click.bind(this);

    33

            this.bound_on_backward_click = this.on_backward_click.bind(this);

    34

            this.bound_on_forward_click = this.on_forward_click.bind(this);

    35

            this.opened = false;

    37

        }

    38

        on_button_click() {

    39

            this.open();

    40

        }

    41

        // Called when a menu entry is clicked

    42

        on_selection_click(selection) {

    43

            this.close();

    44

            this.apply_hmi_value(0, selection);

    45

        }

    46

        on_backward_click(){

    47

            this.scroll(false);

    48

        }

    49

        on_forward_click(){

    50

            this.scroll(true);

    51

        }

    52

        set_selection(value) {

    53

            let display_str;

    54

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

    55

                // if valid selection resolve content

    56

                display_str = this.content[value];

    57

                this.last_selection = value;

    58

            } else {

    59

                // otherwise show problem

    60

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

    61

            }

    62

            // It is assumed that first span always stays,

    63

            // and contains selection when menu is closed

    64

            this.text_elt.firstElementChild.textContent = display_str;

    65

        }

    66

        grow_text(up_to) {

    67

            let count = 1;

    69

            let first = txt.firstElementChild;

    70

            // Real world (pixels) boundaries of current page

    72

            this.lift = 0;

    73

            while(count < up_to) {

    74

                let next = first.cloneNode();

    75

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

    76

                next.removeAttribute("y");

    77

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

    78

                // default content to allow computing text element bbox

    79

                next.textContent = "...";

    80

                // append new span to text element

    81

                txt.appendChild(next);

    82

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

    83

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

    84

                let rect = txt.getBoundingClientRect();

    85

                if(rect.bottom > bounds.bottom){

    86

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

    87

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

    88

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

    89

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

    90

                    rect = txt.getBoundingClientRect();

    91

                    if(rect.top > bounds.top){

    92

                        this.lift += 1;

    93

                    } else {

    94

                        // if it goes over the top, then backtrack

    95

                        // restore dy attribute on first span

    96

                        if(backup)

    97

                            first.setAttribute("dy", backup);

    98

                        else

    99

                            first.removeAttribute("dy");

   100

                        // remove unwanted child

   101

                        txt.removeChild(next);

   102

                        return count;

   103

                    }

   104

                }

   105

                count++;

   106

            }

   107

            return count;

   108

        }

   109

        close_on_click_elsewhere(e) {

   110

            // inhibit events not targetting spans (menu items)

   112

                e.stopPropagation();

   113

                // close menu in case click is outside box

   114

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

   115

                    this.close();

   116

            }

   117

        }

   118

        close(){

   119

            // 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();

   126

            this.reset_box();

   127

            // Put the button back in place

   128

            this.element.appendChild(this.button_elt);

   129

            // Mark as closed (to allow dispatch)

   130

            this.opened = false;

   131

            // Dispatch last cached value

   132

            this.apply_cache();

   133

        }

   156

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

   157

        set_complete_text(){

   159

            let c = 0;

   160

            for(let item of this.content){

   161

                let span=spans[c];

   162

                span.textContent = item;

   163

                let sel = c;

   165

                c++;

   166

            }

   167

        }

   168

        // Move partial view :

   169

        // false : upward, lower value

   170

        // true  : downward, higher value

   171

        scroll(forward){

   172

            let contentlength = this.content.length;

   174

            let spanslength = spans.length;

   175

            // reduce accounted menu size according to jumps

   176

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

   177

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

   178

            if(forward){

   179

                this.menu_offset = Math.min(

   181

                    this.menu_offset + spanslength);

   182

            }else{

   183

                this.menu_offset = Math.max(

   185

                    this.menu_offset - spanslength);

   186

            }

   188

            this.set_partial_text();

   189

        }

   190

        // Setup partial view text content

   191

        // with jumps at first and last entry when appropriate

   192

        set_partial_text(){

   194

            let contentlength = this.content.length;

   195

            let spanslength = spans.length;

   196

            let i = this.menu_offset, c = 0;

   198

            while(c < spanslength){

   199

                let span=spans[c];

   201

                // backward jump only present if not exactly at start

   202

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

   207

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

   208

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

   213

                // otherwise normal content

   214

                }else{

   215

                    span.textContent = this.content[i];

   216

                    let sel = i;

   219

                    i++;

   220

                }

   222

                c++;

   223

            }

   224

        }

   225

        open(){

   226

            let length = this.content.length;

   227

            // systematically reset text, to strip eventual whitespace spans

   228

            this.reset_text();

   229

            // grow as much as needed or possible

   230

            let slots = this.grow_text(length);

   231

            // Depending on final size

   232

            if(slots == length) {

   233

                // show all at once

   234

                this.set_complete_text();

   235

            } else {

   236

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

   237

                let offset = this.last_selection - this.lift;

   238

                if(offset > 0)

   239

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

   240

                else

   241

                    this.menu_offset = 0;

   242

                // show surrounding values

   243

                this.set_partial_text();

   244

            }

   245

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

   246

            this.adjust_box_to_text();

   247

            // Take button out until menu closed

   248

            this.element.removeChild(this.button_elt);

   249

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

   250

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

   251

            // disable interaction with background

   254

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

   255

            // mark as open

   256

            this.opened = true;

   257

        }

   258

        // Put text element in normalized state

   259

        reset_text(){

   261

            let first = txt.firstElementChild;

   262

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

   264

            first.removeAttribute("dy");

   266

            // keep only the first line of text

   267

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

   268

                txt.removeChild(span)

   269

            }

   270

        }

   271

        // Put rectangle element in saved original state

   272

        reset_box(){

   273

            let m = this.box_bbox;

   274

            let b = this.box_elt;

   275

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

   276

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

   277

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

   278

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

   279

        }

   280

        // Use margin and text size to compute box size

   281

        adjust_box_to_text(){

   282

            let [lmargin, tmargin] = this.margins;

   283

            let m = this.text_elt.getBBox();

   284

            let b = this.box_elt;

   286

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

   288

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

   289

        }

   290

    }

   291

||

   292

}

   294

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

   295

    param "hmi_element";

   297

||

   298

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

   299

    content: [

   300

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

   301

    ],

   302

   303

||

   304

}