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 or svg:use referring to svg:text),

    11

    "box" (svg:rect), "button" (svg:*), and "highlight" (svg:rect)

    12

    labeled elements.

    13

    14

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

    15

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

    16

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

    17

    18

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

    19

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

    20

    languages by this HMI. 

    21

    22

    If "text" labeled element is of type svg:use and refers to a svg:text 

    23

    element part of a TextList widget, no argument is expected. In that case

    24

    list of texts is set to TextList content.

    25

    ||

    26

    27

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

    28

    29

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

    30

    31

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

    32

}

    33

    34

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

    35

    36

widget_class("DropDown") {

    37

||

    38

        dispatch(value) {

    39

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

    40

        }

    41

        init() {

    42

            this.init_specific();

    43

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

    44

            // Save original size of rectangle

    45

            this.box_bbox = this.box_elt.getBBox()

    46

            this.highlight_bbox = this.highlight_elt.getBBox()

    47

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

    48

    49

            // Compute margins

    50

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

    51

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

    52

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

    53

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

    54

    55

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

    56

            this.menu_offset = 0;

    57

    58

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

    59

            this.lift = 0;

    60

    61

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

    62

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

    63

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

    64

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

    65

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

    66

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

    67

            this.opened = false;

    68

            this.clickables = [];

    69

        }

    70

        on_button_click() {

    71

            this.open();

    72

        }

    73

        // Called when a menu entry is clicked

    74

        on_selection_click(selection) {

    75

            this.close();

    76

            this.apply_hmi_value(0, selection);

    77

        }

    78

        on_backward_click(){

    79

            this.scroll(false);

    80

        }

    81

        on_forward_click(){

    82

            this.scroll(true);

    83

        }

    84

        set_selection(value) {

    85

            let display_str;

    86

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

    87

                // if valid selection resolve content

    88

                display_str = gettext(this.content[value]);

    89

                this.last_selection = value;

    90

            } else {

    91

                // otherwise show problem

    92

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

    93

            }

    94

            // It is assumed that first span always stays,

    95

            // and contains selection when menu is closed

    96

            this.text_elt.firstElementChild.textContent = display_str;

    97

        }

    98

        grow_text(up_to) {

    99

            let count = 1;

   100

            let txt = this.text_elt;

   101

            let first = txt.firstElementChild;

   102

            // Real world (pixels) boundaries of current page

   103

            let bounds = svg_root.getBoundingClientRect();

   104

            this.lift = 0;

   105

            while(count < up_to) {

   106

                let next = first.cloneNode();

   107

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

   108

                next.removeAttribute("y");

   109

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

   110

                // default content to allow computing text element bbox

   111

                next.textContent = "...";

   112

                // append new span to text element

   113

                txt.appendChild(next);

   114

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

   115

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

   116

                let rect = txt.getBoundingClientRect();

   117

                if(rect.bottom > bounds.bottom){

   118

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

   119

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

   120

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

   121

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

   122

                    rect = txt.getBoundingClientRect();

   123

                    if(rect.top > bounds.top){

   124

                        this.lift += 1;

   125

                    } else {

   126

                        // if it goes over the top, then backtrack

   127

                        // restore dy attribute on first span

   128

                        if(backup)

   129

                            first.setAttribute("dy", backup);

   130

                        else

   131

                            first.removeAttribute("dy");

   132

                        // remove unwanted child

   133

                        txt.removeChild(next);

   134

                        return count;

   135

                    }

   136

                }

   137

                count++;

   138

            }

   139

            return count;

   140

        }

   141

        close_on_click_elsewhere(e) {

   142

            // inhibit events not targetting spans (menu items)

   143

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

   144

                e.stopPropagation();

   145

                // close menu in case click is outside box

   146

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

   147

                    this.close();

   148

            }

   149

        }

   150

        close(){

   151

            // Stop hogging all click events

   152

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

   153

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

   154

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

   155

            // Restore position and sixe of widget elements

   156

            this.reset_text();

   157

            this.reset_clickables();

   158

            this.reset_box();

   159

            this.reset_highlight();

   160

            // Put the button back in place

   161

            this.element.appendChild(this.button_elt);

   162

            // Mark as closed (to allow dispatch)

   163

            this.opened = false;

   164

            // Dispatch last cached value

   165

            this.apply_cache();

   166

        }

   167

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

   168

        make_clickable(span, func) {

   169

            let txt = this.text_elt;

   170

            let original_text_y = this.text_bbox.y;

   171

            let highlight = this.highlight_elt;

   172

            let original_h_y = this.highlight_bbox.y;

   173

            let clickable = highlight.cloneNode();

   174

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

   175

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

   176

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

   177

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

   178

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

   179

            clickable.onclick = func;

   180

            this.element.appendChild(clickable);

   181

            this.clickables.push(clickable)

   182

        }

   183

        reset_clickables() {

   184

            while(this.clickables.length){

   185

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

   186

            }

   187

        }

   188

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

   189

        set_complete_text(){

   190

            let spans = this.text_elt.children;

   191

            let c = 0;

   192

            for(let item of this.content){

   193

                let span=spans[c];

   194

                span.textContent = gettext(item);

   195

                let sel = c;

   196

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

   197

                c++;

   198

            }

   199

        }

   200

        // Move partial view :

   201

        // false : upward, lower value

   202

        // true  : downward, higher value

   203

        scroll(forward){

   204

            let contentlength = this.content.length;

   205

            let spans = this.text_elt.children;

   206

            let spanslength = spans.length;

   207

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

   208

            // since we scroll there is necessarly one button

   209

            spanslength--;

   210

            if(forward){

   211

                // reduce accounted menu size because of back button

   212

                // in current view

   213

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

   214

                this.menu_offset = Math.min(

   215

                    contentlength - spans.length + 1,

   216

                    this.menu_offset + spanslength);

   217

            }else{

   218

                // reduce accounted menu size because of back button

   219

                // in view once scrolled

   220

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

   221

                this.menu_offset = Math.max(

   222

                    0,

   223

                    this.menu_offset - spanslength);

   224

            }

   225

            if(this.menu_offset == 1)

   226

                this.menu_offset = 0;

   227

   228

            this.reset_highlight();

   229

   230

            this.reset_clickables();

   231

            this.set_partial_text();

   232

   233

            this.highlight_selection();

   234

        }

   235

        // Setup partial view text content

   236

        // with jumps at first and last entry when appropriate

   237

        set_partial_text(){

   238

            let spans = this.text_elt.children;

   239

            let contentlength = this.content.length;

   240

            let spanslength = spans.length;

   241

            let i = this.menu_offset, c = 0;

   242

            let m = this.box_bbox;

   243

            while(c < spanslength){

   244

                let span=spans[c];

   245

                let onclickfunc;

   246

                // backward jump only present if not exactly at start

   247

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

   248

                    span.textContent = "▲";

   249

                    onclickfunc = this.bound_on_backward_click;

   250

                    let o = span.getBBox();

   251

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

   252

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

   253

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

   254

                    span.textContent = "▼";

   255

                    onclickfunc = this.bound_on_forward_click;

   256

                    let o = span.getBBox();

   257

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

   258

                // otherwise normal content

   259

                }else{

   260

                    span.textContent = gettext(this.content[i]);

   261

                    let sel = i;

   262

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

   263

                    span.removeAttribute("dx");

   264

                    i++;

   265

                }

   266

                this.make_clickable(span, onclickfunc);

   267

                c++;

   268

            }

   269

        }

   270

        numb_event(e) {

   271

             e.stopPropagation();

   272

        }

   273

        open(){

   274

            let length = this.content.length;

   275

            // systematically reset text, to strip eventual whitespace spans

   276

            this.reset_text();

   277

            // grow as much as needed or possible

   278

            let slots = this.grow_text(length);

   279

            // Depending on final size

   280

            if(slots == length) {

   281

                // show all at once

   282

                this.set_complete_text();

   283

            } else {

   284

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

   285

                let offset = this.last_selection - this.lift;

   286

                if(offset > 0)

   287

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

   288

                else

   289

                    this.menu_offset = 0;

   290

                // show surrounding values

   291

                this.set_partial_text();

   292

            }

   293

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

   294

            this.adjust_box_to_text();

   295

            // Take button out until menu closed

   296

            this.element.removeChild(this.button_elt);

   297

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

   298

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

   299

            // disable interaction with background

   300

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

   301

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

   302

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

   303

            this.highlight_selection();

   304

   305

            // mark as open

   306

            this.opened = true;

   307

        }

   308

        // Put text element in normalized state

   309

        reset_text(){

   310

            let txt = this.text_elt;

   311

            let first = txt.firstElementChild;

   312

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

   313

            first.onclick = null;

   314

            first.removeAttribute("dy");

   315

            first.removeAttribute("dx");

   316

            // keep only the first line of text

   317

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

   318

                txt.removeChild(span)

   319

            }

   320

        }

   321

        // Put rectangle element in saved original state

   322

        reset_box(){

   323

            let m = this.box_bbox;

   324

            let b = this.box_elt;

   325

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

   326

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

   327

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

   328

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

   329

        }

   330

        highlight_selection(){

   331

            if(this.last_selection == undefined) return;

   332

            let highlighted_row = this.last_selection - this.menu_offset;

   333

            if(highlighted_row < 0) return;

   334

            let spans = this.text_elt.children;

   335

            let spanslength = spans.length;

   336

            let contentlength = this.content.length;

   337

            if(this.menu_offset != 0) {

   338

                spanslength--;

   339

                highlighted_row++;

   340

            }

   341

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

   342

            if(highlighted_row > spanslength) return;

   343

            let original_text_y = this.text_bbox.y;

   344

            let highlight = this.highlight_elt;

   345

            let span = spans[highlighted_row];

   346

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

   347

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

   348

            highlight.style.visibility = "visible";

   349

        }

   350

        reset_highlight(){

   351

            let highlight = this.highlight_elt;

   352

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

   353

            highlight.style.visibility = "hidden";

   354

        }

   355

        // Use margin and text size to compute box size

   356

        adjust_box_to_text(){

   357

            let [lmargin, tmargin] = this.margins;

   358

            let m = this.text_elt.getBBox();

   359

            let b = this.box_elt;

   360

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

   361

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

   362

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

   363

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

   364

        }

   365

||

   366

}

   367

   368

widget_defs("DropDown") {

   369

    labels("box button highlight");

   370

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

   371

    const "text_elt","$hmi_element//*[@inkscape:label='text'][1]";

   372

    | init_specific: function() {

   373

    choose{

   374

        // special case when used for language selection

   375

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

   376

            |   this.text_elt = id("«$text_elt/@id»");

   377

            |   this.content = langs.map(([lname,lcode]) => lname);

   378

        }

   379

        when "count(arg) = 0"{ 

   380

            if "not($text_elt[self::svg:use])"

   381

                error > No argrument for HMI:DropDown widget id="«$hmi_element/@id»" and "text" labeled element is not a svg:use element

   382

            const "real_text_elt","$result_widgets[@id = $hmi_element/@id]//*[@original=$text_elt/@id]/svg:text";

   383

            |   this.text_elt = id("«$real_text_elt/@id»");

   384

            const "from_list_id", "substring-after($text_elt/@xlink:href,'#')";

   385

            const "from_list", "$hmi_textlists[(@id | */@id) = $from_list_id]";

   386

            if "count($from_list) = 0"

   387

                error > HMI:DropDown widget id="«$hmi_element/@id»" "text" labeled element does not point to a svg:text owned by a HMI:List widget

   388

            |   this.content = hmi_widgets["«$from_list/@id»"].texts;

   389

        }

   390

        otherwise {

   391

            |   this.text_elt = id("«$text_elt/@id»");

   392

            |   this.content = [

   393

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

   394

            |   ];

   395

        }

   396

    }

   397

    | }

   398

}

   399

   400

emit "declarations:DropDown"

   401

||

   402

function gettext(o) {

   403

    if(typeof(o) == "string"){

   404

        return o;

   405

    }

   406

    return svg_text_to_multiline(o);

   407

};

   408

||