1

// widget_dropdown.ysl2

     2

     3

widget_desc("DropDown") {

     4

     5

    longdesc

     6

    ||

     7

    DropDown widget let user select an entry in a list of texts, given as

     8

    arguments. Single variable path is index of selection.

     9

    10

    It needs "text" (svg:text), "box" (svg:rect), "button" (svg:*),

    11

    and "highlight" (svg:rect) labeled elements.

    12

    13

    When user clicks on "button", "text" is duplicated to display enties in the

    14

    limit of available space in page, and "box" is extended to contain all

    15

    texts. "highlight" is moved over pre-selected entry.

    16

    17

    When only one argument is given, and argment contains "#langs" then list of

    18

    texts is automatically set to the list of human-readable languages supported

    19

    by this HMI. 

    20

    ||

    21

    22

    shortdesc > Let user select text entry in a drop-down menu

    23

    24

    arg name="entries" count="many" accepts="string" > drop-down menu entries

    25

    26

    path name="selection" accepts="HMI_INT" > selection index

    27

}

    28

    29

// TODO: support i18n of menu entries using svg:text elements with labels starting with "_"

    30

    31

widget_class("DropDown") {

    32

||

    33

        dispatch(value) {

    34

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

    35

        }

    36

        init() {

    37

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

    38

            // Save original size of rectangle

    39

            this.box_bbox = this.box_elt.getBBox()

    40

            this.highlight_bbox = this.highlight_elt.getBBox()

    41

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

    42

    43

            // Compute margins

    44

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

    45

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

    46

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

    47

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

    48

    49

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

    50

            this.menu_offset = 0;

    51

    52

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

    53

            this.lift = 0;

    54

    55

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

    56

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

    57

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

    58

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

    59

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

    60

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

    61

            this.opened = false;

    62

            this.clickables = [];

    63

        }

    64

        on_button_click() {

    65

            this.open();

    66

        }

    67

        // Called when a menu entry is clicked

    68

        on_selection_click(selection) {

    69

            this.close();

    70

            this.apply_hmi_value(0, selection);

    71

        }

    72

        on_backward_click(){

    73

            this.scroll(false);

    74

        }

    75

        on_forward_click(){

    76

            this.scroll(true);

    77

        }

    78

        set_selection(value) {

    79

            let display_str;

    80

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

    81

                // if valid selection resolve content

    82

                display_str = this.content[value];

    83

                this.last_selection = value;

    84

            } else {

    85

                // otherwise show problem

    86

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

    87

            }

    88

            // It is assumed that first span always stays,

    89

            // and contains selection when menu is closed

    90

            this.text_elt.firstElementChild.textContent = display_str;

    91

        }

    92

        grow_text(up_to) {

    93

            let count = 1;

    94

            let txt = this.text_elt;

    95

            let first = txt.firstElementChild;

    96

            // Real world (pixels) boundaries of current page

    97

            let bounds = svg_root.getBoundingClientRect();

    98

            this.lift = 0;

    99

            while(count < up_to) {

   100

                let next = first.cloneNode();

   101

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

   102

                next.removeAttribute("y");

   103

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

   104

                // default content to allow computing text element bbox

   105

                next.textContent = "...";

   106

                // append new span to text element

   107

                txt.appendChild(next);

   108

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

   109

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

   110

                let rect = txt.getBoundingClientRect();

   111

                if(rect.bottom > bounds.bottom){

   112

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

   113

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

   114

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

   115

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

   116

                    rect = txt.getBoundingClientRect();

   117

                    if(rect.top > bounds.top){

   118

                        this.lift += 1;

   119

                    } else {

   120

                        // if it goes over the top, then backtrack

   121

                        // restore dy attribute on first span

   122

                        if(backup)

   123

                            first.setAttribute("dy", backup);

   124

                        else

   125

                            first.removeAttribute("dy");

   126

                        // remove unwanted child

   127

                        txt.removeChild(next);

   128

                        return count;

   129

                    }

   130

                }

   131

                count++;

   132

            }

   133

            return count;

   134

        }

   135

        close_on_click_elsewhere(e) {

   136

            // inhibit events not targetting spans (menu items)

   137

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

   138

                e.stopPropagation();

   139

                // close menu in case click is outside box

   140

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

   141

                    this.close();

   142

            }

   143

        }

   144

        close(){

   145

            // Stop hogging all click events

   146

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

   147

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

   148

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

   149

            // Restore position and sixe of widget elements

   150

            this.reset_text();

   151

            this.reset_clickables();

   152

            this.reset_box();

   153

            this.reset_highlight();

   154

            // Put the button back in place

   155

            this.element.appendChild(this.button_elt);

   156

            // Mark as closed (to allow dispatch)

   157

            this.opened = false;

   158

            // Dispatch last cached value

   159

            this.apply_cache();

   160

        }

   161

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

   162

        make_clickable(span, func) {

   163

            let txt = this.text_elt;

   164

            let original_text_y = this.text_bbox.y;

   165

            let highlight = this.highlight_elt;

   166

            let original_h_y = this.highlight_bbox.y;

   167

            let clickable = highlight.cloneNode();

   168

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

   169

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

   170

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

   171

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

   172

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

   173

            clickable.onclick = func;

   174

            this.element.appendChild(clickable);

   175

            this.clickables.push(clickable)

   176

        }

   177

        reset_clickables() {

   178

            while(this.clickables.length){

   179

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

   180

            }

   181

        }

   182

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

   183

        set_complete_text(){

   184

            let spans = this.text_elt.children;

   185

            let c = 0;

   186

            for(let item of this.content){

   187

                let span=spans[c];

   188

                span.textContent = item;

   189

                let sel = c;

   190

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

   191

                c++;

   192

            }

   193

        }

   194

        // Move partial view :

   195

        // false : upward, lower value

   196

        // true  : downward, higher value

   197

        scroll(forward){

   198

            let contentlength = this.content.length;

   199

            let spans = this.text_elt.children;

   200

            let spanslength = spans.length;

   201

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

   202

            // since we scroll there is necessarly one button

   203

            spanslength--;

   204

            if(forward){

   205

                // reduce accounted menu size because of back button

   206

                // in current view

   207

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

   208

                this.menu_offset = Math.min(

   209

                    contentlength - spans.length + 1,

   210

                    this.menu_offset + spanslength);

   211

            }else{

   212

                // reduce accounted menu size because of back button

   213

                // in view once scrolled

   214

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

   215

                this.menu_offset = Math.max(

   216

                    0,

   217

                    this.menu_offset - spanslength);

   218

            }

   219

            if(this.menu_offset == 1)

   220

                this.menu_offset = 0;

   221

   222

            this.reset_highlight();

   223

   224

            this.reset_clickables();

   225

            this.set_partial_text();

   226

   227

            this.highlight_selection();

   228

        }

   229

        // Setup partial view text content

   230

        // with jumps at first and last entry when appropriate

   231

        set_partial_text(){

   232

            let spans = this.text_elt.children;

   233

            let contentlength = this.content.length;

   234

            let spanslength = spans.length;

   235

            let i = this.menu_offset, c = 0;

   236

            let m = this.box_bbox;

   237

            while(c < spanslength){

   238

                let span=spans[c];

   239

                let onclickfunc;

   240

                // backward jump only present if not exactly at start

   241

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

   242

                    span.textContent = "▲";

   243

                    onclickfunc = this.bound_on_backward_click;

   244

                    let o = span.getBBox();

   245

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

   246

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

   247

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

   248

                    span.textContent = "▼";

   249

                    onclickfunc = this.bound_on_forward_click;

   250

                    let o = span.getBBox();

   251

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

   252

                // otherwise normal content

   253

                }else{

   254

                    span.textContent = this.content[i];

   255

                    let sel = i;

   256

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

   257

                    span.removeAttribute("dx");

   258

                    i++;

   259

                }

   260

                this.make_clickable(span, onclickfunc);

   261

                c++;

   262

            }

   263

        }

   264

        numb_event(e) {

   265

             e.stopPropagation();

   266

        }

   267

        open(){

   268

            let length = this.content.length;

   269

            // systematically reset text, to strip eventual whitespace spans

   270

            this.reset_text();

   271

            // grow as much as needed or possible

   272

            let slots = this.grow_text(length);

   273

            // Depending on final size

   274

            if(slots == length) {

   275

                // show all at once

   276

                this.set_complete_text();

   277

            } else {

   278

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

   279

                let offset = this.last_selection - this.lift;

   280

                if(offset > 0)

   281

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

   282

                else

   283

                    this.menu_offset = 0;

   284

                // show surrounding values

   285

                this.set_partial_text();

   286

            }

   287

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

   288

            this.adjust_box_to_text();

   289

            // Take button out until menu closed

   290

            this.element.removeChild(this.button_elt);

   291

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

   292

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

   293

            // disable interaction with background

   294

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

   295

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

   296

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

   297

            this.highlight_selection();

   298

   299

            // mark as open

   300

            this.opened = true;

   301

        }

   302

        // Put text element in normalized state

   303

        reset_text(){

   304

            let txt = this.text_elt;

   305

            let first = txt.firstElementChild;

   306

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

   307

            first.onclick = null;

   308

            first.removeAttribute("dy");

   309

            first.removeAttribute("dx");

   310

            // keep only the first line of text

   311

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

   312

                txt.removeChild(span)

   313

            }

   314

        }

   315

        // Put rectangle element in saved original state

   316

        reset_box(){

   317

            let m = this.box_bbox;

   318

            let b = this.box_elt;

   319

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

   320

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

   321

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

   322

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

   323

        }

   324

        highlight_selection(){

   325

            if(this.last_selection == undefined) return;

   326

            let highlighted_row = this.last_selection - this.menu_offset;

   327

            if(highlighted_row < 0) return;

   328

            let spans = this.text_elt.children;

   329

            let spanslength = spans.length;

   330

            let contentlength = this.content.length;

   331

            if(this.menu_offset != 0) {

   332

                spanslength--;

   333

                highlighted_row++;

   334

            }

   335

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

   336

            if(highlighted_row > spanslength) return;

   337

            let original_text_y = this.text_bbox.y;

   338

            let highlight = this.highlight_elt;

   339

            let span = spans[highlighted_row];

   340

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

   341

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

   342

            highlight.style.visibility = "visible";

   343

        }

   344

        reset_highlight(){

   345

            let highlight = this.highlight_elt;

   346

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

   347

            highlight.style.visibility = "hidden";

   348

        }

   349

        // Use margin and text size to compute box size

   350

        adjust_box_to_text(){

   351

            let [lmargin, tmargin] = this.margins;

   352

            let m = this.text_elt.getBBox();

   353

            let b = this.box_elt;

   354

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

   355

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

   356

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

   357

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

   358

        }

   359

||

   360

}

   361

   362

widget_defs("DropDown") {

   363

    labels("text box button highlight");

   364

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

   365

    >   content:

   366

    choose{

   367

        // special case when used for language selection

   368

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

   369

            > langs

   370

        }

   371

        otherwise {

   372

            > [\n

   373

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

   374

            >   ]

   375

        }

   376

    }

   377

    > ,\n

   378

}