1

// widget_dropdown.ysl2

     2

     3

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

     4

    param "hmi_element";

     5

    labels("text box");

     6

||    

     7

    dispatch: function(value) {

     8

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

     9

    },

    10

    init: function() {

    11

        this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_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

        rmargin = this.box_bbox.width - this.text_bbox.width - lmargin;

    17

        bmargin = this.box_bbox.height - this.text_bbox.height - tmargin;

    18

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

    21

        //this.content = ["one", "two", "three", "four", "5", "6"];

    22

        this.menu_offset = 0;

    23

        this.lift = 0;

    24

        this.opened = false;

    25

    },

    26

    on_selection_click: function(selection) {

    27

        this.set_selection(selection);

    28

    },

    29

    on_click: function() {

    30

        if(this.opened){

    32

        }else{

    33

            this.open();

    34

        }

    35

    },

    42

    set_selection: function(value) {

    43

        this.text_elt.firstElementChild.textContent = 

    44

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

    45

            this.content[value] : "?"+String(value)+"?";

    46

    },

    47

    grow_text: function(up_to) {

    48

        let count = 1;

    49

        let txt = this.text_elt; 

    50

        let first = txt.firstElementChild;

    51

        let bounds = svg_root.getBoundingClientRect(); 

    52

        this.lift = 0;

    53

        while(count < up_to) {

    54

            let next = first.cloneNode();

    55

            next.removeAttribute("y");

    56

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

    57

            next.textContent = "...";

    58

            txt.appendChild(next);

    59

            let rect = txt.getBoundingClientRect();

    60

            if(rect.bottom > bounds.bottom){

    61

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

    62

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

    63

                rect = txt.getBoundingClientRect();

    64

                if(rect.top > bounds.top){

    65

                    this.lift += 1;

    66

                } else {

    67

                    if(backup)

    68

                        first.setAttribute("dy", backup);

    69

                    else

    70

                        first.removeAttribute("dy");

    71

                    txt.removeChild(next);

    72

                    return count;

    73

                }

    74

            }

    75

            count++;

    76

        }

    77

        return count;

    78

    },

    79

    close: function(){

    80

        this.reset_text();

    81

        this.reset_box();

    82

        this.opened = false;

    83

    },

    84

    set_complete_text: function(){

    85

        let spans = this.text_elt.children; 

    86

        let c = 0;

    87

        for(let item of this.content){

    88

            let span=spans[c];

    89

            span.textContent = item;

    90

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

    91

            c++;

    92

        }

    93

    },

   112

    set_partial_text: function(){

   113

        let spans = this.text_elt.children; 

   116

        let i = this.menu_offset, c = 0;

   119

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

   126

                span.textContent = this.content[i];

   127

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

   128

                i++;

   129

            }

   130

            c++;

   131

        }

   132

    },

   133

    open: function(){

   134

        let length = this.content.length;

   135

        this.reset_text();

   136

        let slots = this.grow_text(length);

   137

        if(slots == length) {

   138

            this.set_complete_text();

   139

        } else {

   140

            this.set_partial_text();

   141

        }

   142

        this.adjust_box_to_text();

   143

        /* TODO disable interaction with background */

   144

        this.opened = true;

   145

    },

   146

    reset_text: function(){

   147

        let txt = this.text_elt; 

   148

        let first = txt.firstElementChild;

   149

        first.removeAttribute("onclick");

   150

        first.removeAttribute("dy");

   151

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

   152

            txt.removeChild(span)

   153

        }

   154

    },

   155

    reset_box: function(){

   156

        let m = this.box_bbox;

   157

        let b = this.box_elt;

   158

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

   159

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

   160

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

   161

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

   162

    },

   163

    adjust_box_to_text: function(){

   164

        let [lmargin, tmargin, rmargin, bmargin] = this.margins;

   165

        let m = this.text_elt.getBBox();

   166

        let b = this.box_elt;

   167

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

   168

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

   169

        b.width.baseVal.value = lmargin + m.width + rmargin;

   170

        b.height.baseVal.value = tmargin + m.height + bmargin;

   171

    },

   172

||

   173

}

   174

   175

    // |         let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);

   176

    // |         let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());

   177

    // |         let new_corner = k.transformPoint(p);

   178

    // |         new_corner.y = 0;

   179

    // |         let nc = k.inverse().transformPoint(new_corner);

   180

    // |         this.box_elt.x.baseVal.value = nc.x;

   181

    // |         this.box_elt.y.baseVal.value = nc.y;