Edouard@2922: // widget_dropdown.ysl2
Edouard@2922: 
Edouard@2922: template "widget[@type='DropDown']", mode="widget_defs" {
Edouard@2922:     param "hmi_element";
edouard@2926:     labels("text box button");
edouard@2923: ||    
edouard@2923:     dispatch: function(value) {
edouard@2924:         if(!this.opened) this.set_selection(value);
edouard@2923:     },
edouard@2923:     init: function() {
edouard@2926:         this.button_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_button_click()");
edouard@2923:         this.text_bbox = this.text_elt.getBBox()
edouard@2923:         this.box_bbox = this.box_elt.getBBox()
edouard@2923:         lmargin = this.text_bbox.x - this.box_bbox.x;
edouard@2923:         tmargin = this.text_bbox.y - this.box_bbox.y;
edouard@2926:         this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
edouard@2925:         this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
edouard@2925:                         "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
edouard@2923:         //this.content = ["one", "two", "three", "four", "5", "6"];
edouard@2924:         this.menu_offset = 0;
edouard@2923:         this.lift = 0;
edouard@2924:         this.opened = false;
edouard@2927:         this.bound_inhibit_click_elsewhere = this.inhibit_click_elsewhere.bind(this);
edouard@2924:     },
edouard@2924:     on_selection_click: function(selection) {
edouard@2926:         console.log("selected "+selection);
edouard@2926:         this.close();
edouard@2924:         this.set_selection(selection);
edouard@2923:     },
edouard@2926:     on_button_click: function() {
edouard@2926:         this.open();
edouard@2923:     },
edouard@2925:     on_backward_click:function(){
edouard@2925:         this.move(false);
edouard@2925:     },
edouard@2925:     on_forward_click:function(){
edouard@2925:         this.move(true);
edouard@2925:     },
edouard@2924:     set_selection: function(value) {
edouard@2924:         this.text_elt.firstElementChild.textContent = 
edouard@2924:           (value >= 0 && value < this.content.length) ?
edouard@2924:             this.content[value] : "?"+String(value)+"?";
edouard@2924:     },
edouard@2924:     grow_text: function(up_to) {
edouard@2924:         let count = 1;
edouard@2923:         let txt = this.text_elt; 
edouard@2923:         let first = txt.firstElementChild;
edouard@2923:         let bounds = svg_root.getBoundingClientRect(); 
edouard@2924:         this.lift = 0;
edouard@2924:         while(count < up_to) {
edouard@2924:             let next = first.cloneNode();
edouard@2924:             next.removeAttribute("y");
edouard@2924:             next.setAttribute("dy", "1.1em");
edouard@2924:             next.textContent = "...";
edouard@2924:             txt.appendChild(next);
edouard@2924:             let rect = txt.getBoundingClientRect();
edouard@2924:             if(rect.bottom > bounds.bottom){
edouard@2924:                 let backup = first.getAttribute("dy");
edouard@2924:                 first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
edouard@2924:                 rect = txt.getBoundingClientRect();
edouard@2924:                 if(rect.top > bounds.top){
edouard@2924:                     this.lift += 1;
edouard@2924:                 } else {
edouard@2924:                     if(backup)
edouard@2924:                         first.setAttribute("dy", backup);
edouard@2924:                     else
edouard@2924:                         first.removeAttribute("dy");
edouard@2924:                     txt.removeChild(next);
edouard@2924:                     return count;
edouard@2924:                 }
edouard@2923:             }
edouard@2924:             count++;
edouard@2923:         }
edouard@2924:         return count;
edouard@2924:     },
edouard@2927:     inhibit_click_elsewhere: function(e) {
edouard@2927:         console.log("inhibit", e);
edouard@2927:         console.log(e.target.parentNode, this.text_elt);
edouard@2927:         if(e.target.parentNode !== this.text_elt)
edouard@2927:             e.stopPropagation();
edouard@2927:     },
edouard@2924:     close: function(){
edouard@2924:         this.reset_text();
edouard@2924:         this.reset_box();
edouard@2926:         this.element.appendChild(this.button_elt);
edouard@2927:         document.removeEventListener("click", this.bound_inhibit_click_elsewhere, true);
edouard@2924:         this.opened = false;
edouard@2924:     },
edouard@2924:     set_complete_text: function(){
edouard@2924:         let spans = this.text_elt.children; 
edouard@2924:         let c = 0;
edouard@2924:         for(let item of this.content){
edouard@2924:             let span=spans[c];
edouard@2924:             span.textContent = item;
edouard@2924:             span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+c+")");
edouard@2924:             c++;
edouard@2924:         }
edouard@2924:     },
edouard@2925:     move: function(forward){
edouard@2925:         let contentlength = this.content.length;
edouard@2925:         let spans = this.text_elt.children; 
edouard@2925:         let spanslength = spans.length;
edouard@2925:         if(this.menu_offset != 0) spanslength--;
edouard@2925:         if(this.menu_offset < contentlength - 1) spanslength--;
edouard@2925:         if(forward){
edouard@2925:             this.menu_offset = Math.min(
edouard@2925:                 contentlength - spans.length + 1, 
edouard@2925:                 this.menu_offset + spanslength);
edouard@2925:         }else{
edouard@2925:             this.menu_offset = Math.max(
edouard@2925:                 0, 
edouard@2925:                 this.menu_offset - spanslength);
edouard@2925:         }
edouard@2925:         console.log(this.menu_offset);
edouard@2925:         this.set_partial_text();
edouard@2925:     },
edouard@2924:     set_partial_text: function(){
edouard@2924:         let spans = this.text_elt.children; 
edouard@2925:         let contentlength = this.content.length;
edouard@2925:         let spanslength = spans.length;
edouard@2924:         let i = this.menu_offset, c = 0;
edouard@2925:         while(c < spanslength){
edouard@2925:             let span=spans[c];
edouard@2924:             if(c == 0 && i != 0){
edouard@2925:                 span.textContent = "↑  ↑  ↑";
edouard@2925:                 span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_backward_click()");
edouard@2925:             }else if(c == spanslength-1 && i < contentlength - 1){
edouard@2925:                 span.textContent = "↓  ↓  ↓";
edouard@2925:                 span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_forward_click()");
edouard@2925:             }else{
edouard@2924:                 span.textContent = this.content[i];
edouard@2924:                 span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");
edouard@2924:                 i++;
edouard@2924:             }
edouard@2924:             c++;
edouard@2924:         }
edouard@2923:     },
edouard@2923:     open: function(){
edouard@2924:         let length = this.content.length;
edouard@2924:         this.reset_text();
edouard@2924:         let slots = this.grow_text(length);
edouard@2924:         if(slots == length) {
edouard@2924:             this.set_complete_text();
edouard@2923:         } else {
edouard@2924:             this.set_partial_text();
edouard@2923:         }
edouard@2924:         this.adjust_box_to_text();
edouard@2926:         this.element.removeChild(this.button_elt);
edouard@2927:         // disable interaction with background
edouard@2927:         document.addEventListener("click", this.bound_inhibit_click_elsewhere, true);
edouard@2924:         this.opened = true;
edouard@2923:     },
edouard@2924:     reset_text: function(){
edouard@2923:         let txt = this.text_elt; 
edouard@2924:         let first = txt.firstElementChild;
edouard@2924:         first.removeAttribute("onclick");
edouard@2924:         first.removeAttribute("dy");
edouard@2923:         for(let span of Array.from(txt.children).slice(1)){
edouard@2923:             txt.removeChild(span)
edouard@2923:         }
edouard@2923:     },
edouard@2924:     reset_box: function(){
edouard@2924:         let m = this.box_bbox;
edouard@2924:         let b = this.box_elt;
edouard@2924:         b.x.baseVal.value = m.x;
edouard@2924:         b.y.baseVal.value = m.y;
edouard@2924:         b.width.baseVal.value = m.width;
edouard@2924:         b.height.baseVal.value = m.height;
edouard@2924:     },
edouard@2924:     adjust_box_to_text: function(){
edouard@2926:         let [lmargin, tmargin] = this.margins;
edouard@2923:         let m = this.text_elt.getBBox();
edouard@2924:         let b = this.box_elt;
edouard@2924:         b.x.baseVal.value = m.x - lmargin;
edouard@2924:         b.y.baseVal.value = m.y - tmargin;
edouard@2926:         b.width.baseVal.value = 2 * lmargin + m.width;
edouard@2926:         b.height.baseVal.value = 2 * tmargin + m.height;
edouard@2923:     },
edouard@2923: ||
Edouard@2922: }
Edouard@2922: 
edouard@2923:     // |         let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
edouard@2923:     // |         let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());
edouard@2923:     // |         let new_corner = k.transformPoint(p);
edouard@2923:     // |         new_corner.y = 0;
edouard@2923:     // |         let nc = k.inverse().transformPoint(new_corner);
edouard@2923:     // |         this.box_elt.x.baseVal.value = nc.x;
edouard@2923:     // |         this.box_elt.y.baseVal.value = nc.y;