1

// widget_dropdown.ysl2

     2

     3

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

     4

    param "hmi_element";

     5

    labels("text box button");

     6

||    

     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));

    17

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

    18

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

    19

        this.content = [

    20

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

    21

        ];

    22

        this.menu_offset = 0;

    23

        this.lift = 0;

    24

        this.opened = false;

    25

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

    26

    },

    27

    on_selection_click: function(selection) {

    28

        console.log("selected "+selection);

    29

        this.close();

    30

        let orig = this.indexes[0];

    31

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

    32

        apply_hmi_value(idx, selection);

    33

    },

    34

    on_button_click: function() {

    35

        this.open();

    36

    },

    37

    on_backward_click:function(){

    38

        this.move(false);

    39

    },

    40

    on_forward_click:function(){

    41

        this.move(true);

    42

    },

    43

    set_selection: function(value) {

    52

    },

    53

    grow_text: function(up_to) {

    54

        let count = 1;

    55

        let txt = this.text_elt; 

    56

        let first = txt.firstElementChild;

    57

        let bounds = svg_root.getBoundingClientRect(); 

    58

        this.lift = 0;

    59

        while(count < up_to) {

    60

            let next = first.cloneNode();

    61

            next.removeAttribute("y");

    62

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

    63

            next.textContent = "...";

    64

            txt.appendChild(next);

    65

            let rect = txt.getBoundingClientRect();

    66

            if(rect.bottom > bounds.bottom){

    67

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

    68

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

    69

                rect = txt.getBoundingClientRect();

    70

                if(rect.top > bounds.top){

    71

                    this.lift += 1;

    72

                } else {

    73

                    if(backup)

    74

                        first.setAttribute("dy", backup);

    75

                    else

    76

                        first.removeAttribute("dy");

    77

                    txt.removeChild(next);

    78

                    return count;

    79

                }

    80

            }

    81

            count++;

    82

        }

    83

        return count;

    84

    },

    85

    close_on_click_elsewhere: function(e) {

    86

        console.log("inhibit", e);

    87

        console.log(e.target.parentNode, this.text_elt);

    88

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

    89

            e.stopPropagation();

    90

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

    91

                this.close();

    92

        }

    93

    },

    94

    close: function(){

    95

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

    96

        this.reset_text();

    97

        this.reset_box();

    98

        this.element.appendChild(this.button_elt);

    99

        this.opened = false;

   100

        this.apply_cache();

   101

    },

   102

    set_complete_text: function(){

   103

        let spans = this.text_elt.children; 

   104

        let c = 0;

   105

        for(let item of this.content){

   106

            let span=spans[c];

   107

            span.textContent = item;

   108

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

   109

            c++;

   110

        }

   111

    },

   112

    move: function(forward){

   113

        let contentlength = this.content.length;

   114

        let spans = this.text_elt.children; 

   115

        let spanslength = spans.length;

   116

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

   117

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

   118

        if(forward){

   119

            this.menu_offset = Math.min(

   120

                contentlength - spans.length + 1, 

   121

                this.menu_offset + spanslength);

   122

        }else{

   123

            this.menu_offset = Math.max(

   124

                0, 

   125

                this.menu_offset - spanslength);

   126

        }

   127

        console.log(this.menu_offset);

   128

        this.set_partial_text();

   129

    },

   130

    set_partial_text: function(){

   131

        let spans = this.text_elt.children; 

   132

        let contentlength = this.content.length;

   133

        let spanslength = spans.length;

   134

        let i = this.menu_offset, c = 0;

   135

        while(c < spanslength){

   136

            let span=spans[c];

   137

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

   138

                span.textContent = "↑  ↑  ↑";

   139

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

   140

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

   141

                span.textContent = "↓  ↓  ↓";

   142

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

   143

            }else{

   144

                span.textContent = this.content[i];

   145

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

   146

                i++;

   147

            }

   148

            c++;

   149

        }

   150

    },

   151

    open: function(){

   152

        let length = this.content.length;

   153

        this.reset_text();

   154

        let slots = this.grow_text(length);

   155

        if(slots == length) {

   156

            this.set_complete_text();

   157

        } else {

   164

            this.set_partial_text();

   165

        }

   166

        this.adjust_box_to_text();

   167

        this.element.removeChild(this.button_elt);

   168

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

   169

        // disable interaction with background

   170

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

   171

        this.opened = true;

   172

    },

   173

    reset_text: function(){

   174

        let txt = this.text_elt; 

   175

        let first = txt.firstElementChild;

   176

        first.removeAttribute("onclick");

   177

        first.removeAttribute("dy");

   178

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

   179

            txt.removeChild(span)

   180

        }

   181

    },

   182

    reset_box: function(){

   183

        let m = this.box_bbox;

   184

        let b = this.box_elt;

   185

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

   186

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

   187

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

   188

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

   189

    },

   190

    adjust_box_to_text: function(){

   191

        let [lmargin, tmargin] = this.margins;

   192

        let m = this.text_elt.getBBox();

   193

        let b = this.box_elt;

   194

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

   195

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

   196

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

   197

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

   198

    },

   199

||

   200

}

   201

   202

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

   203

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

   204

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

   205

    // |         new_corner.y = 0;

   206

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

   207

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

   208

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