1

// widget_dropdown.ysl2

     2

     4

||

     5

        dispatch(value) {

     6

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

     7

        }

     8

        init() {

     9

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

    10

            // Save original size of rectangle

    11

            this.box_bbox = this.box_elt.getBBox()

    12

            this.highlight_bbox = this.highlight_elt.getBBox()

    13

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

    14

    15

            // Compute margins

    16

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

    17

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

    18

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

    19

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

    20

    21

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

    22

            this.menu_offset = 0;

    23

    24

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

    25

            this.lift = 0;

    26

    27

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

    28

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

    29

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

    30

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

    31

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

    32

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

    33

            this.opened = false;

    34

            this.clickables = [];

    35

        }

    36

        on_button_click() {

    37

            this.open();

    38

        }

    39

        // Called when a menu entry is clicked

    40

        on_selection_click(selection) {

    41

            this.close();

    42

            this.apply_hmi_value(0, selection);

    43

        }

    44

        on_backward_click(){

    45

            this.scroll(false);

    46

        }

    47

        on_forward_click(){

    48

            this.scroll(true);

    49

        }

    50

        set_selection(value) {

    51

            let display_str;

    52

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

    53

                // if valid selection resolve content

    54

                display_str = this.content[value];

    55

                this.last_selection = value;

    56

            } else {

    57

                // otherwise show problem

    58

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

    59

            }

    60

            // It is assumed that first span always stays,

    61

            // and contains selection when menu is closed

    62

            this.text_elt.firstElementChild.textContent = display_str;

    63

        }

    64

        grow_text(up_to) {

    65

            let count = 1;

    66

            let txt = this.text_elt;

    67

            let first = txt.firstElementChild;

    68

            // Real world (pixels) boundaries of current page

    69

            let bounds = svg_root.getBoundingClientRect();

    70

            this.lift = 0;

    71

            while(count < up_to) {

    72

                let next = first.cloneNode();

    73

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

    74

                next.removeAttribute("y");

    75

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

    76

                // default content to allow computing text element bbox

    77

                next.textContent = "...";

    78

                // append new span to text element

    79

                txt.appendChild(next);

    80

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

    81

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

    82

                let rect = txt.getBoundingClientRect();

    83

                if(rect.bottom > bounds.bottom){

    84

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

    85

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

    86

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

    87

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

    88

                    rect = txt.getBoundingClientRect();

    89

                    if(rect.top > bounds.top){

    90

                        this.lift += 1;

    91

                    } else {

    92

                        // if it goes over the top, then backtrack

    93

                        // restore dy attribute on first span

    94

                        if(backup)

    95

                            first.setAttribute("dy", backup);

    96

                        else

    97

                            first.removeAttribute("dy");

    98

                        // remove unwanted child

    99

                        txt.removeChild(next);

   100

                        return count;

   101

                    }

   102

                }

   103

                count++;

   104

            }

   105

            return count;

   106

        }

   107

        close_on_click_elsewhere(e) {

   108

            // inhibit events not targetting spans (menu items)

   109

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

   110

                e.stopPropagation();

   111

                // close menu in case click is outside box

   112

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

   113

                    this.close();

   114

            }

   115

        }

   116

        close(){

   117

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

   124

            this.reset_box();

   125

            this.reset_highlight();

   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

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

   134

        make_clickable(span, func) {

   135

            let txt = this.text_elt;

   136

            let original_text_y = this.text_bbox.y;

   137

            let highlight = this.highlight_elt;

   138

            let original_h_y = this.highlight_bbox.y;

   139

            let clickable = highlight.cloneNode();

   140

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

   141

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

   142

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

   143

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

   144

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

   145

            clickable.onclick = func;

   146

            this.element.appendChild(clickable);

   147

            this.clickables.push(clickable)

   148

        }

   149

        reset_clickables() {

   150

            while(this.clickables.length){

   151

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

   152

            }

   153

        }

   154

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

   155

        set_complete_text(){

   156

            let spans = this.text_elt.children;

   157

            let c = 0;

   158

            for(let item of this.content){

   159

                let span=spans[c];

   160

                span.textContent = item;

   161

                let sel = c;

   162

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

   163

                c++;

   164

            }

   165

        }

   166

        // Move partial view :

   167

        // false : upward, lower value

   168

        // true  : downward, higher value

   169

        scroll(forward){

   170

            let contentlength = this.content.length;

   171

            let spans = this.text_elt.children;

   172

            let spanslength = spans.length;

   173

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

   174

            // since we scroll there is necessarly one button

   175

            spanslength--;

   176

            if(forward){

   177

                // reduce accounted menu size because of back button

   178

                // in current view

   179

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

   180

                this.menu_offset = Math.min(

   181

                    contentlength - spans.length + 1,

   182

                    this.menu_offset + spanslength);

   183

            }else{

   184

                // reduce accounted menu size because of back button

   185

                // in view once scrolled

   186

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

   187

                this.menu_offset = Math.max(

   188

                    0,

   189

                    this.menu_offset - spanslength);

   190

            }

   191

            if(this.menu_offset == 1)

   192

                this.menu_offset = 0;

   193

   194

            this.reset_highlight();

   195

   196

            this.reset_clickables();

   197

            this.set_partial_text();

   198

   199

            this.highlight_selection();

   200

        }

   201

        // Setup partial view text content

   202

        // with jumps at first and last entry when appropriate

   203

        set_partial_text(){

   204

            let spans = this.text_elt.children;

   205

            let contentlength = this.content.length;

   206

            let spanslength = spans.length;

   207

            let i = this.menu_offset, c = 0;

   208

            let m = this.box_bbox;

   209

            while(c < spanslength){

   210

                let span=spans[c];

   211

                let onclickfunc;

   212

                // backward jump only present if not exactly at start

   213

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

   214

                    span.textContent = "▲";

   215

                    onclickfunc = this.bound_on_backward_click;

   216

                    let o = span.getBBox();

   217

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

   218

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

   219

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

   220

                    span.textContent = "▼";

   221

                    onclickfunc = this.bound_on_forward_click;

   222

                    let o = span.getBBox();

   223

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

   224

                // otherwise normal content

   225

                }else{

   226

                    span.textContent = this.content[i];

   227

                    let sel = i;

   228

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

   229

                    span.removeAttribute("dx");

   230

                    i++;

   231

                }

   232

                this.make_clickable(span, onclickfunc);

   233

                c++;

   234

            }

   235

        }

   239

        open(){

   240

            let length = this.content.length;

   241

            // systematically reset text, to strip eventual whitespace spans

   242

            this.reset_text();

   243

            // grow as much as needed or possible

   244

            let slots = this.grow_text(length);

   245

            // Depending on final size

   246

            if(slots == length) {

   247

                // show all at once

   248

                this.set_complete_text();

   249

            } else {

   250

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

   251

                let offset = this.last_selection - this.lift;

   252

                if(offset > 0)

   253

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

   254

                else

   255

                    this.menu_offset = 0;

   256

                // show surrounding values

   257

                this.set_partial_text();

   258

            }

   259

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

   260

            this.adjust_box_to_text();

   261

            // Take button out until menu closed

   262

            this.element.removeChild(this.button_elt);

   263

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

   264

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

   265

            // disable interaction with background

   268

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

   269

            this.highlight_selection();

   270

   271

            // mark as open

   272

            this.opened = true;

   273

        }

   274

        // Put text element in normalized state

   275

        reset_text(){

   276

            let txt = this.text_elt;

   277

            let first = txt.firstElementChild;

   278

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

   279

            first.onclick = null;

   280

            first.removeAttribute("dy");

   281

            first.removeAttribute("dx");

   282

            // keep only the first line of text

   283

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

   284

                txt.removeChild(span)

   285

            }

   286

        }

   287

        // Put rectangle element in saved original state

   288

        reset_box(){

   289

            let m = this.box_bbox;

   290

            let b = this.box_elt;

   291

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

   292

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

   293

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

   294

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

   295

        }

   296

        highlight_selection(){

   297

            if(this.last_selection == undefined) return;

   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

   335

    param "hmi_element";

   336

    labels("text box button highlight");

   337

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

   338

    >   content:

   339

    choose{

   340

        // special case when used for language selection

   341

        when "count(arg) = 1 and arg[1]/@value = '#langs'" {

   342

            > langs

   343

        }

   344

        otherwise {

   345

            > [\n

   346

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

   347

            >   ]

   348

        }

   349

    }

   350

    > ,\n

   351

}