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

    42

    },

    43

    on_button_click: function() {

    44

        this.open();

    45

    },

    46

    on_backward_click: function(){

    47

        this.scroll(false);

    48

    },

    49

    on_forward_click:function(){

    50

        this.scroll(true);

    51

    },

    52

    set_selection: function(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: function(up_to) {

    67

        let count = 1;

    68

        let txt = this.text_elt; 

    69

        let first = txt.firstElementChild;

    70

        // Real world (pixels) boundaries of current page

    71

        let bounds = svg_root.getBoundingClientRect(); 

    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: function(e) {

   110

        // inhibit events not targetting spans (menu items)

   111

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

   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: function(){

   119

        // Stop hogging all click events

   120

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

   121

        // Restore position and sixe of widget elements

   122

        this.reset_text();

   123

        this.reset_box();

   124

        // Put the button back in place

   125

        this.element.appendChild(this.button_elt);

   126

        // Mark as closed (to allow dispatch)

   127

        this.opened = false;

   128

        // Dispatch last cached value

   129

        this.apply_cache();

   130

    },

   131

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

   132

    set_complete_text: function(){

   133

        let spans = this.text_elt.children; 

   134

        let c = 0;

   135

        for(let item of this.content){

   136

            let span=spans[c];

   137

            span.textContent = item;

   138

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

   139

            c++;

   140

        }

   141

    },

   142

    // Move partial view :

   143

    // false : upward, lower value

   144

    // true  : downward, higher value

   145

    scroll: function(forward){

   146

        let contentlength = this.content.length;

   147

        let spans = this.text_elt.children; 

   148

        let spanslength = spans.length;

   149

        // reduce accounted menu size according to jumps

   150

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

   151

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

   152

        if(forward){

   153

            this.menu_offset = Math.min(

   154

                contentlength - spans.length + 1, 

   155

                this.menu_offset + spanslength);

   156

        }else{

   157

            this.menu_offset = Math.max(

   158

                0, 

   159

                this.menu_offset - spanslength);

   160

        }

   161

        console.log(this.menu_offset);

   162

        this.set_partial_text();

   163

    },

   164

    // Setup partial view text content

   165

    // with jumps at first and last entry when appropriate

   166

    set_partial_text: function(){

   167

        let spans = this.text_elt.children; 

   168

        let contentlength = this.content.length;

   169

        let spanslength = spans.length;

   170

        let i = this.menu_offset, c = 0;

   171

        while(c < spanslength){

   172

            let span=spans[c];

   173

            // backward jump only present if not exactly at start

   174

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

   175

                span.textContent = "↑  ↑  ↑";

   176

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

   177

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

   178

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

   179

                span.textContent = "↓  ↓  ↓";

   180

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

   181

            // otherwise normal content

   182

            }else{

   183

                span.textContent = this.content[i];

   184

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

   185

                i++;

   186

            }

   187

            c++;

   188

        }

   189

    },

   190

    open: function(){

   191

        let length = this.content.length;

   192

        // systematically reset text, to strip eventual whitespace spans

   193

        this.reset_text();

   194

        // grow as much as needed or possible

   195

        let slots = this.grow_text(length);

   196

        // Depending on final size

   197

        if(slots == length) {

   198

            // show all at once

   199

            this.set_complete_text();

   200

        } else {

   201

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

   202

            let offset = this.last_selection - this.lift;

   203

            if(offset > 0)

   204

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

   205

            else

   206

                this.menu_offset = 0;

   207

            // show surrounding values

   208

            this.set_partial_text();

   209

        }

   210

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

   211

        this.adjust_box_to_text();

   212

        // Take button out until menu closed

   213

        this.element.removeChild(this.button_elt);

   214

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

   215

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

   216

        // disable interaction with background

   217

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

   218

        // mark as open

   219

        this.opened = true;

   220

    },

   221

    // Put text element in normalized state

   222

    reset_text: function(){

   223

        let txt = this.text_elt; 

   224

        let first = txt.firstElementChild;

   225

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

   226

        first.removeAttribute("onclick");

   227

        first.removeAttribute("dy");

   228

        // keep only the first line of text

   229

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

   230

            txt.removeChild(span)

   231

        }

   232

    },

   233

    // Put rectangle element in saved original state

   234

    reset_box: function(){

   235

        let m = this.box_bbox;

   236

        let b = this.box_elt;

   237

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

   238

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

   239

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

   240

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

   241

    },

   242

    // Use margin and text size to compute box size

   243

    adjust_box_to_text: function(){

   244

        let [lmargin, tmargin] = this.margins;

   245

        let m = this.text_elt.getBBox();

   246

        let b = this.box_elt;

   247

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

   248

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

   249

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

   250

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

   251

    },

   252

||

   253

}