1

// widget_dropdown.ysl2

     2

     3

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

     4

    param "hmi_element";

     6

||    

     7

    dispatch: function(value) {

     8

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

     9

    },

    10

    init: function() {

    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;

    17

        this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",

    18

                        "eleven", "twelve", "thirteen", "fourteen", "fifteen"];

    19

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

    20

        this.menu_offset = 0;

    21

        this.lift = 0;

    22

        this.opened = false;

    23

    },

    24

    on_selection_click: function(selection) {

    27

        this.set_selection(selection);

    28

    },

    31

    },

    32

    on_backward_click:function(){

    33

        this.move(false);

    34

    },

    35

    on_forward_click:function(){

    36

        this.move(true);

    37

    },

    38

    set_selection: function(value) {

    39

        this.text_elt.firstElementChild.textContent = 

    40

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

    41

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

    42

    },

    43

    grow_text: function(up_to) {

    44

        let count = 1;

    45

        let txt = this.text_elt; 

    46

        let first = txt.firstElementChild;

    47

        let bounds = svg_root.getBoundingClientRect(); 

    48

        this.lift = 0;

    49

        while(count < up_to) {

    50

            let next = first.cloneNode();

    51

            next.removeAttribute("y");

    52

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

    53

            next.textContent = "...";

    54

            txt.appendChild(next);

    55

            let rect = txt.getBoundingClientRect();

    56

            if(rect.bottom > bounds.bottom){

    57

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

    58

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

    59

                rect = txt.getBoundingClientRect();

    60

                if(rect.top > bounds.top){

    61

                    this.lift += 1;

    62

                } else {

    63

                    if(backup)

    64

                        first.setAttribute("dy", backup);

    65

                    else

    66

                        first.removeAttribute("dy");

    67

                    txt.removeChild(next);

    68

                    return count;

    69

                }

    70

            }

    71

            count++;

    72

        }

    73

        return count;

    74

    },

    75

    close: function(){

    76

        this.reset_text();

    77

        this.reset_box();

    79

        this.opened = false;

    80

    },

    81

    set_complete_text: function(){

    82

        let spans = this.text_elt.children; 

    83

        let c = 0;

    84

        for(let item of this.content){

    85

            let span=spans[c];

    86

            span.textContent = item;

    87

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

    88

            c++;

    89

        }

    90

    },

    91

    move: function(forward){

    92

        let contentlength = this.content.length;

    93

        let spans = this.text_elt.children; 

    94

        let spanslength = spans.length;

    95

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

    96

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

    97

        if(forward){

    98

            this.menu_offset = Math.min(

    99

                contentlength - spans.length + 1, 

   100

                this.menu_offset + spanslength);

   101

        }else{

   102

            this.menu_offset = Math.max(

   103

                0, 

   104

                this.menu_offset - spanslength);

   105

        }

   106

        console.log(this.menu_offset);

   107

        this.set_partial_text();

   108

    },

   109

    set_partial_text: function(){

   110

        let spans = this.text_elt.children; 

   111

        let contentlength = this.content.length;

   112

        let spanslength = spans.length;

   113

        let i = this.menu_offset, c = 0;

   114

        while(c < spanslength){

   115

            let span=spans[c];

   116

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

   117

                span.textContent = "↑  ↑  ↑";

   118

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

   119

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

   120

                span.textContent = "↓  ↓  ↓";

   121

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

   122

            }else{

   123

                span.textContent = this.content[i];

   124

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

   125

                i++;

   126

            }

   127

            c++;

   128

        }

   129

    },

   130

    open: function(){

   131

        let length = this.content.length;

   132

        this.reset_text();

   133

        let slots = this.grow_text(length);

   134

        if(slots == length) {

   135

            this.set_complete_text();

   136

        } else {

   137

            this.set_partial_text();

   138

        }

   139

        this.adjust_box_to_text();

   141

        /* TODO disable interaction with background */

   142

        this.opened = true;

   143

    },

   144

    reset_text: function(){

   145

        let txt = this.text_elt; 

   146

        let first = txt.firstElementChild;

   147

        first.removeAttribute("onclick");

   148

        first.removeAttribute("dy");

   149

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

   150

            txt.removeChild(span)

   151

        }

   152

    },

   153

    reset_box: function(){

   154

        let m = this.box_bbox;

   155

        let b = this.box_elt;

   156

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

   157

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

   158

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

   159

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

   160

    },

   161

    adjust_box_to_text: function(){

   163

        let m = this.text_elt.getBBox();

   164

        let b = this.box_elt;

   165

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

   166

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

   169

    },

   170

||

   171

}

   172

   173

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

   174

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

   175

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

   176

    // |         new_corner.y = 0;

   177

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

   178

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

   179

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