1

// widget_dropdown.ysl2

     2

     3

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

     4

||

     5

    function numb_event(e) {

     6

        e.stopPropagation();

     7

    }

     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

            this.highlight_bbox = this.highlight_elt.getBBox()

    17

            this.highlight_elt.style.visibility = "hidden";

    18

    19

            // Compute margins

    20

            this.text_bbox = this.text_elt.getBBox();

    21

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

    22

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

    23

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

    24

    25

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

    26

            this.menu_offset = 0;

    27

    28

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

    29

            this.lift = 0;

    30

    31

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

    32

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

    33

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

    34

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

    35

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

    36

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

    37

            this.opened = false;

    38

            this.clickables = [];

    39

        }

    40

        on_button_click() {

    41

            this.open();

    42

        }

    43

        // Called when a menu entry is clicked

    44

        on_selection_click(selection) {

    45

            this.close();

    46

            this.apply_hmi_value(0, selection);

    47

        }

    48

        on_backward_click(){

    49

            this.scroll(false);

    50

        }

    51

        on_forward_click(){

    52

            this.scroll(true);

    53

        }

    54

        set_selection(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(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 as 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(e) {

   112

            // inhibit events not targetting spans (menu items)

   113

            if([this.text_elt, this.element].indexOf(e.target.parentNode) == -1){

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

   121

            // Stop hogging all click events

   122

            svg_root.removeEventListener("pointerdown", numb_event, true);

   123

            svg_root.removeEventListener("pointerup", numb_event, true);

   124

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

   125

            // Restore position and sixe of widget elements

   126

            this.reset_text();

   127

            this.reset_clickables();

   128

            this.reset_box();

   129

            this.reset_highlight();

   130

            // Put the button back in place

   131

            this.element.appendChild(this.button_elt);

   132

            // Mark as closed (to allow dispatch)

   133

            this.opened = false;

   134

            // Dispatch last cached value

   135

            this.apply_cache();

   136

        }

   137

        // Make item (text span) clickable by overlaying a rectangle on top of it

   138

        make_clickable(span, func) {

   139

            let txt = this.text_elt;

   140

            let original_text_y = this.text_bbox.y;

   141

            let highlight = this.highlight_elt;

   142

            let original_h_y = this.highlight_bbox.y;

   143

            let clickable = highlight.cloneNode();

   144

            let yoffset = span.getBBox().y - original_text_y;

   145

            clickable.y.baseVal.value = original_h_y + yoffset;

   146

            clickable.style.pointerEvents = "bounding-box";

   147

            //clickable.style.visibility = "hidden";

   148

            //clickable.onclick = () => alert("love JS");

   149

            clickable.onclick = func;

   150

            this.element.appendChild(clickable);

   151

            this.clickables.push(clickable)

   152

        }

   153

        reset_clickables() {

   154

            while(this.clickables.length){

   155

                this.element.removeChild(this.clickables.pop());

   156

            }

   157

        }

   158

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

   159

        set_complete_text(){

   160

            let spans = this.text_elt.children;

   161

            let c = 0;

   162

            for(let item of this.content){

   163

                let span=spans[c];

   164

                span.textContent = item;

   165

                let sel = c;

   166

                this.make_clickable(span, (evt) => this.bound_on_selection_click(sel));

   167

                c++;

   168

            }

   169

        }

   170

        // Move partial view :

   171

        // false : upward, lower value

   172

        // true  : downward, higher value

   173

        scroll(forward){

   174

            let contentlength = this.content.length;

   175

            let spans = this.text_elt.children;

   176

            let spanslength = spans.length;

   177

            // reduce accounted menu size according to prsence of scroll buttons

   178

            // since we scroll there is necessarly one button

   179

            spanslength--;

   180

            if(forward){

   181

                // reduce accounted menu size because of back button

   182

                // in current view

   183

                if(this.menu_offset > 0) spanslength--;

   184

                this.menu_offset = Math.min(

   185

                    contentlength - spans.length + 1,

   186

                    this.menu_offset + spanslength);

   187

            }else{

   188

                // reduce accounted menu size because of back button

   189

                // in view once scrolled

   190

                if(this.menu_offset - spanslength > 0) spanslength--;

   191

                this.menu_offset = Math.max(

   192

                    0,

   193

                    this.menu_offset - spanslength);

   194

            }

   195

            if(this.menu_offset == 1)

   196

                this.menu_offset = 0;

   197

   198

            this.reset_highlight();

   199

   200

            this.reset_clickables();

   201

            this.set_partial_text();

   202

   203

            this.highlight_selection();

   204

        }

   205

        // Setup partial view text content

   206

        // with jumps at first and last entry when appropriate

   207

        set_partial_text(){

   208

            let spans = this.text_elt.children;

   209

            let contentlength = this.content.length;

   210

            let spanslength = spans.length;

   211

            let i = this.menu_offset, c = 0;

   212

            let m = this.box_bbox;

   213

            while(c < spanslength){

   214

                let span=spans[c];

   215

                let onclickfunc;

   216

                // backward jump only present if not exactly at start

   217

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

   218

                    span.textContent = "▲";

   219

                    onclickfunc = this.bound_on_backward_click;

   220

                    let o = span.getBBox();

   221

                    span.setAttribute("dx", (m.width - o.width)/2);

   222

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

   223

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

   224

                    span.textContent = "▼";

   225

                    onclickfunc = this.bound_on_forward_click;

   226

                    let o = span.getBBox();

   227

                    span.setAttribute("dx", (m.width - o.width)/2);

   228

                // otherwise normal content

   229

                }else{

   230

                    span.textContent = this.content[i];

   231

                    let sel = i;

   232

                    onclickfunc = (evt) => this.bound_on_selection_click(sel);

   233

                    span.removeAttribute("dx");

   234

                    i++;

   235

                }

   236

                this.make_clickable(span, onclickfunc);

   237

                c++;

   238

            }

   239

        }

   240

        open(){

   241

            let length = this.content.length;

   242

            // systematically reset text, to strip eventual whitespace spans

   243

            this.reset_text();

   244

            // grow as much as needed or possible

   245

            let slots = this.grow_text(length);

   246

            // Depending on final size

   247

            if(slots == length) {

   248

                // show all at once

   249

                this.set_complete_text();

   250

            } else {

   251

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

   252

                let offset = this.last_selection - this.lift;

   253

                if(offset > 0)

   254

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

   255

                else

   256

                    this.menu_offset = 0;

   257

                // show surrounding values

   258

                this.set_partial_text();

   259

            }

   260

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

   261

            this.adjust_box_to_text();

   262

            // Take button out until menu closed

   263

            this.element.removeChild(this.button_elt);

   264

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

   265

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

   266

            // disable interaction with background

   267

            svg_root.addEventListener("pointerdown", numb_event, true);

   268

            svg_root.addEventListener("pointerup", numb_event, true);

   269

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

   270

            this.highlight_selection();

   271

   272

            // mark as open

   273

            this.opened = true;

   274

        }

   275

        // Put text element in normalized state

   276

        reset_text(){

   277

            let txt = this.text_elt;

   278

            let first = txt.firstElementChild;

   279

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

   280

            first.onclick = null;

   281

            first.removeAttribute("dy");

   282

            first.removeAttribute("dx");

   283

            // keep only the first line of text

   284

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

   285

                txt.removeChild(span)

   286

            }

   287

        }

   288

        // Put rectangle element in saved original state

   289

        reset_box(){

   290

            let m = this.box_bbox;

   291

            let b = this.box_elt;

   292

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

   293

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

   294

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

   295

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

   296

        }

   297

        highlight_selection(){

   298

            let highlighted_row = this.last_selection - this.menu_offset;

   299

            if(highlighted_row < 0) return;

   300

            let spans = this.text_elt.children;

   301

            let spanslength = spans.length;

   302

            let contentlength = this.content.length;

   303

            if(this.menu_offset != 0) {

   304

                spanslength--;

   305

                highlighted_row++;

   306

            }

   307

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

   308

            if(highlighted_row > spanslength) return;

   309

            let original_text_y = this.text_bbox.y;

   310

            let highlight = this.highlight_elt;

   311

            let span = spans[highlighted_row];

   312

            let yoffset = span.getBBox().y - original_text_y;

   313

            highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;

   314

            highlight.style.visibility = "visible";

   315

        }

   316

        reset_highlight(){

   317

            let highlight = this.highlight_elt;

   318

            highlight.y.baseVal.value = this.highlight_bbox.y;

   319

            highlight.style.visibility = "hidden";

   320

        }

   321

        // Use margin and text size to compute box size

   322

        adjust_box_to_text(){

   323

            let [lmargin, tmargin] = this.margins;

   324

            let m = this.text_elt.getBBox();

   325

            let b = this.box_elt;

   326

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

   327

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

   328

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

   329

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

   330

        }

   331

    }

   332

||

   333

}

   334

   335

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

   336

    param "hmi_element";

   337

    labels("text box button highlight");

   339

||

   340

    content: [

   342

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

   343

    ],

   344

   345

||

   346

}