1

// widget_dropdown.ysl2

     2

     3

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

     4

    param "hmi_element";

     5

    labels("text box button");

     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

        this.text_bbox = this.text_elt.getBBox()

    13

        this.box_bbox = this.box_elt.getBBox()

    14

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

    15

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

    16

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

    19

        this.content = [

    20

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

    21

        ];

    24

        this.menu_offset = 0;

    27

        this.lift = 0;

    33

        this.opened = false;

    36

    on_selection_click: function(selection) {

    37

        this.close();

    38

        let orig = this.indexes[0];

    39

        let idx = this.offset ? orig - this.offset : orig;

    40

        apply_hmi_value(idx, selection);

    41

    },

    42

    on_button_click: function() {

    43

        this.open();

    44

    },

    47

    },

    48

    on_forward_click:function(){

    50

    },

    51

    set_selection: function(value) {

    52

        let display_str;

    53

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

    55

            display_str = this.content[value];

    56

            this.last_selection = value;

    57

        } else {

    59

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

    60

        }

    63

        this.text_elt.firstElementChild.textContent = display_str;

    64

    },

    65

    grow_text: function(up_to) {

    66

        let count = 1;

    67

        let txt = this.text_elt; 

    68

        let first = txt.firstElementChild;

    70

        let bounds = svg_root.getBoundingClientRect(); 

    71

        this.lift = 0;

    72

        while(count < up_to) {

    73

            let next = first.cloneNode();

    75

            next.removeAttribute("y");

    76

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

    78

            next.textContent = "...";

    80

            txt.appendChild(next);

    83

            let rect = txt.getBoundingClientRect();

    84

            if(rect.bottom > bounds.bottom){

    86

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

    88

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

    89

                rect = txt.getBoundingClientRect();

    90

                if(rect.top > bounds.top){

    91

                    this.lift += 1;

    92

                } else {

    95

                    if(backup)

    96

                        first.setAttribute("dy", backup);

    97

                    else

    98

                        first.removeAttribute("dy");

   100

                    txt.removeChild(next);

   101

                    return count;

   102

                }

   103

            }

   104

            count++;

   105

        }

   106

        return count;

   107

    },

   108

    close_on_click_elsewhere: function(e) {

   110

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

   111

            e.stopPropagation();

   113

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

   114

                this.close();

   115

        }

   116

    },

   117

    close: function(){

   121

        this.reset_text();

   122

        this.reset_box();

   124

        this.element.appendChild(this.button_elt);

   126

        this.opened = false;

   128

        this.apply_cache();

   129

    },

   131

    set_complete_text: function(){

   132

        let spans = this.text_elt.children; 

   133

        let c = 0;

   134

        for(let item of this.content){

   135

            let span=spans[c];

   136

            span.textContent = item;

   137

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

   138

            c++;

   139

        }

   140

    },

   145

        let contentlength = this.content.length;

   146

        let spans = this.text_elt.children; 

   147

        let spanslength = spans.length;

   148

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

   149

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

   150

        if(forward){

   151

            this.menu_offset = Math.min(

   152

                contentlength - spans.length + 1, 

   153

                this.menu_offset + spanslength);

   154

        }else{

   155

            this.menu_offset = Math.max(

   156

                0, 

   157

                this.menu_offset - spanslength);

   158

        }

   159

        console.log(this.menu_offset);

   160

        this.set_partial_text();

   161

    },

   164

    set_partial_text: function(){

   165

        let spans = this.text_elt.children; 

   166

        let contentlength = this.content.length;

   167

        let spanslength = spans.length;

   168

        let i = this.menu_offset, c = 0;

   169

        while(c < spanslength){

   170

            let span=spans[c];

   171

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

   172

                span.textContent = "↑  ↑  ↑";

   173

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

   174

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

   175

                span.textContent = "↓  ↓  ↓";

   176

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

   177

            }else{

   178

                span.textContent = this.content[i];

   179

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

   180

                i++;

   181

            }

   182

            c++;

   183

        }

   184

    },

   185

    open: function(){

   186

        let length = this.content.length;

   188

        this.reset_text();

   190

        let slots = this.grow_text(length);

   192

        if(slots == length) {

   194

            this.set_complete_text();

   195

        } else {

   197

            let offset = this.last_selection - this.lift;

   198

            if(offset > 0)

   199

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

   200

            else

   201

                this.menu_offset = 0;

   203

            this.set_partial_text();

   204

        }

   206

        this.adjust_box_to_text();

   208

        this.element.removeChild(this.button_elt);

   210

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

   211

        // disable interaction with background

   213

        this.opened = true;

   214

    },

   215

    reset_text: function(){

   216

        let txt = this.text_elt; 

   217

        let first = txt.firstElementChild;

   218

        first.removeAttribute("onclick");

   219

        first.removeAttribute("dy");

   220

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

   221

            txt.removeChild(span)

   222

        }

   223

    },

   224

    reset_box: function(){

   225

        let m = this.box_bbox;

   226

        let b = this.box_elt;

   227

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

   228

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

   229

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

   230

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

   231

    },

   232

    adjust_box_to_text: function(){

   233

        let [lmargin, tmargin] = this.margins;

   234

        let m = this.text_elt.getBBox();

   235

        let b = this.box_elt;

   236

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

   237

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

   238

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

   239

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

   240

    },

   241

||

   242

}