3

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

     4

||

     5

    class DropDownWidget extends Widget{

     6

        dispatch(value) {

     7

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

     8

        }

     9

        init() {

    10

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

    11

            // Save original size of rectangle

    12

            this.box_bbox = this.box_elt.getBBox()

    13

    14

            // Compute margins

    15

            let text_bbox = this.text_elt.getBBox();

    16

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

    17

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

    18

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

    19

    20

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

    21

            this.menu_offset = 0;

    22

    23

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

    24

            this.lift = 0;

    25

    26

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

    27

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

    28

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

    29

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

    30

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

    31

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

    32

            this.opened = false;

    33

        }

    34

        on_button_click() {

    35

            this.open();

    36

        }

    37

        // Called when a menu entry is clicked

    38

        on_selection_click(selection) {

    39

            this.close();

    40

            this.apply_hmi_value(0, selection);

    41

        }

    42

        on_backward_click(){

    43

            this.scroll(false);

    44

        }

    45

        on_forward_click(){

    46

            this.scroll(true);

    47

        }

    48

        set_selection(value) {

    49

            let display_str;

    50

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

    51

                // if valid selection resolve content

    52

                display_str = this.content[value];

    53

                this.last_selection = value;

    54

            } else {

    55

                // otherwise show problem

    56

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

    57

            }

    58

            // It is assumed that first span always stays,

    59

            // and contains selection when menu is closed

    60

            this.text_elt.firstElementChild.textContent = display_str;

    61

        }

    62

        grow_text(up_to) {

    63

            let count = 1;

    64

            let txt = this.text_elt; 

    65

            let first = txt.firstElementChild;

    66

            // Real world (pixels) boundaries of current page

    67

            let bounds = svg_root.getBoundingClientRect(); 

    68

            this.lift = 0;

    69

            while(count < up_to) {

    70

                let next = first.cloneNode();

    71

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

    72

                next.removeAttribute("y");

    73

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

    74

                // default content to allow computing text element bbox

    75

                next.textContent = "...";

    76

                // append new span to text element

    77

                txt.appendChild(next);

    78

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

    79

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

    80

                let rect = txt.getBoundingClientRect();

    81

                if(rect.bottom > bounds.bottom){

    82

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

    83

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

    84

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

    85

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

    86

                    rect = txt.getBoundingClientRect();

    87

                    if(rect.top > bounds.top){

    88

                        this.lift += 1;

    89

                    } else {

    90

                        // if it goes over the top, then backtrack

    91

                        // restore dy attribute on first span

    92

                        if(backup)

    93

                            first.setAttribute("dy", backup);

    94

                        else

    95

                            first.removeAttribute("dy");

    96

                        // remove unwanted child

    97

                        txt.removeChild(next);

    98

                        return count;

    99

                    }

   100

                }

   101

                count++;

   102

            }

   103

            return count;

   104

        }

   105

        close_on_click_elsewhere(e) {

   106

            // inhibit events not targetting spans (menu items)

   107

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

   108

                e.stopPropagation();

   109

                // close menu in case click is outside box

   110

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

   111

                    this.close();

   112

            }

   113

        }

   114

        close(){

   115

            // Stop hogging all click events

   116

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

   117

            // Restore position and sixe of widget elements

   118

            this.reset_text();

   119

            this.reset_box();

   120

            // Put the button back in place

   121

            this.element.appendChild(this.button_elt);

   122

            // Mark as closed (to allow dispatch)

   123

            this.opened = false;

   124

            // Dispatch last cached value

   125

            this.apply_cache();

   126

        }

   127

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

   128

        set_complete_text(){

   129

            let spans = this.text_elt.children; 

   130

            let c = 0;

   131

            for(let item of this.content){

   132

                let span=spans[c];

   133

                span.textContent = item;

   134

                let sel = c;

   135

                span.onclick = (evt) => this.bound_on_selection_click(sel);

   136

                c++;

   137

            }

   138

        }

   139

        // Move partial view :

   140

        // false : upward, lower value

   141

        // true  : downward, higher value

   142

        scroll(forward){

   143

            let contentlength = this.content.length;

   144

            let spans = this.text_elt.children; 

   145

            let spanslength = spans.length;

   146

            // reduce accounted menu size according to jumps

   147

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

   148

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

   149

            if(forward){

   150

                this.menu_offset = Math.min(

   151

                    contentlength - spans.length + 1, 

   152

                    this.menu_offset + spanslength);

   153

            }else{

   154

                this.menu_offset = Math.max(

   155

                    0, 

   156

                    this.menu_offset - spanslength);

   157

            }

   158

            this.set_partial_text();

   159

        }

   160

        // Setup partial view text content

   161

        // with jumps at first and last entry when appropriate

   162

        set_partial_text(){

   163

            let spans = this.text_elt.children; 

   164

            let contentlength = this.content.length;

   165

            let spanslength = spans.length;

   166

            let i = this.menu_offset, c = 0;

   167

            while(c < spanslength){

   168

                let span=spans[c];

   169

                // backward jump only present if not exactly at start

   170

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

   171

                    span.textContent = "↑  ↑  ↑";

   172

                    span.onclick = this.bound_on_backward_click;

   173

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

   174

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

   175

                    span.textContent = "↓  ↓  ↓";

   176

                    span.onclick = this.bound_on_forward_click;

   177

                // otherwise normal content

   178

                }else{

   179

                    span.textContent = this.content[i];

   180

                    let sel = i;

   181

                    span.onclick = (evt) => this.bound_on_selection_click(sel);

   182

                    i++;

   183

                }

   184

                c++;

   185

            }

   186

        }

   187

        open(){

   188

            let length = this.content.length;

   189

            // systematically reset text, to strip eventual whitespace spans

   190

            this.reset_text();

   191

            // grow as much as needed or possible

   192

            let slots = this.grow_text(length);

   193

            // Depending on final size

   194

            if(slots == length) {

   195

                // show all at once

   196

                this.set_complete_text();

   197

            } else {

   198

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

   199

                let offset = this.last_selection - this.lift;

   200

                if(offset > 0)

   201

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

   202

                else

   203

                    this.menu_offset = 0;

   204

                // show surrounding values

   205

                this.set_partial_text();

   206

            }

   207

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

   208

            this.adjust_box_to_text();

   209

            // Take button out until menu closed

   210

            this.element.removeChild(this.button_elt);

   211

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

   212

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

   213

            // disable interaction with background

   214

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

   215

            // mark as open

   216

            this.opened = true;

   217

        }

   218

        // Put text element in normalized state

   219

        reset_text(){

   220

            let txt = this.text_elt; 

   221

            let first = txt.firstElementChild;

   222

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

   223

            first.removeAttribute("onclick");

   224

            first.removeAttribute("dy");

   225

            // keep only the first line of text

   226

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

   227

                txt.removeChild(span)

   228

            }

   229

        }

   230

        // Put rectangle element in saved original state

   231

        reset_box(){

   232

            let m = this.box_bbox;

   233

            let b = this.box_elt;

   234

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

   235

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

   236

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

   237

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

   238

        }

   239

        // Use margin and text size to compute box size

   240

        adjust_box_to_text(){

   241

            let [lmargin, tmargin] = this.margins;

   242

            let m = this.text_elt.getBBox();

   243

            let b = this.box_elt;

   244

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

   245

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

   246

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

   247

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

   248

        }

   249

    }

   250

||

   251

}

   256

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

   257

    content: [

   258

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

   259

    ],

   260