# HG changeset patch
# User Edouard Tisserant <edouard.tisserant@gmail.com>
# Date 1586795302 -7200
# Node ID 69bb58eb0eac1ce2caa33a5f7f19b32d71dfd4a2
# Parent  5ec1c07ce582f6b4d8df36e4bb294025d3f59c1e
SVGHMI: progress on HMI:DropDown - now selects some value on click, and close

diff -r 5ec1c07ce582 -r 69bb58eb0eac svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt	Sun Apr 12 21:43:42 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Mon Apr 13 18:28:22 2020 +0200
@@ -827,11 +827,7 @@
     </xsl:call-template>
     <xsl:text>    dispatch: function(value) {
 </xsl:text>
-    <xsl:text>        let span = this.text_elt.firstElementChild;
-</xsl:text>
-    <xsl:text>        span.textContent = (value &gt;= 0 &amp;&amp; value &lt; this.content.length) ?
-</xsl:text>
-    <xsl:text>          this.content[value] : String(value);
+    <xsl:text>        if(!this.opened) this.set_selection(value);
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
@@ -859,19 +855,47 @@
 </xsl:text>
     <xsl:text>        //this.content = ["one", "two", "three", "four", "5", "6"];
 </xsl:text>
-    <xsl:text>        this.offset = 0;
+    <xsl:text>        this.menu_offset = 0;
 </xsl:text>
     <xsl:text>        this.lift = 0;
 </xsl:text>
+    <xsl:text>        this.opened = false;
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    on_selection_click: function(selection) {
+</xsl:text>
+    <xsl:text>        this.set_selection(selection);
+</xsl:text>
     <xsl:text>    },
 </xsl:text>
     <xsl:text>    on_click: function() {
 </xsl:text>
-    <xsl:text>        this.open();
-</xsl:text>
-    <xsl:text>    },
-</xsl:text>
-    <xsl:text>    try_grow_one: function() {
+    <xsl:text>        if(this.opened){
+</xsl:text>
+    <xsl:text>            this.close();
+</xsl:text>
+    <xsl:text>        }else{
+</xsl:text>
+    <xsl:text>            this.open();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    set_selection: function(value) {
+</xsl:text>
+    <xsl:text>        this.text_elt.firstElementChild.textContent = 
+</xsl:text>
+    <xsl:text>          (value &gt;= 0 &amp;&amp; value &lt; this.content.length) ?
+</xsl:text>
+    <xsl:text>            this.content[value] : "?"+String(value)+"?";
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    grow_text: function(up_to) {
+</xsl:text>
+    <xsl:text>        let count = 1;
 </xsl:text>
     <xsl:text>        let txt = this.text_elt; 
 </xsl:text>
@@ -879,134 +903,172 @@
 </xsl:text>
     <xsl:text>        let bounds = svg_root.getBoundingClientRect(); 
 </xsl:text>
-    <xsl:text>        let next = first.cloneNode();
-</xsl:text>
-    <xsl:text>        //next.removeAttribute("x");
-</xsl:text>
-    <xsl:text>        next.removeAttribute("y");
-</xsl:text>
-    <xsl:text>        next.setAttribute("dy", "1.1em");
-</xsl:text>
-    <xsl:text>        next.textContent = "...";
-</xsl:text>
-    <xsl:text>        txt.appendChild(next);
-</xsl:text>
-    <xsl:text>        let rect = txt.getBoundingClientRect();
-</xsl:text>
-    <xsl:text>        console.log("bounds", bounds);
-</xsl:text>
-    <xsl:text>        console.log("rect", rect);
-</xsl:text>
-    <xsl:text>        if(rect.bottom &gt; bounds.bottom){
-</xsl:text>
-    <xsl:text>            let backup = first.getAttribute("dy");
-</xsl:text>
-    <xsl:text>            first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
-</xsl:text>
-    <xsl:text>            rect = txt.getBoundingClientRect();
-</xsl:text>
-    <xsl:text>            if(rect.top &gt; bounds.top){
-</xsl:text>
-    <xsl:text>                console.log("rect2ok", rect);
-</xsl:text>
-    <xsl:text>                this.lift += 1;
-</xsl:text>
-    <xsl:text>            } else {
-</xsl:text>
-    <xsl:text>                console.log("rect2Nok", rect);
-</xsl:text>
-    <xsl:text>                if(backup)
-</xsl:text>
-    <xsl:text>                    first.setAttribute("dy", backup);
-</xsl:text>
-    <xsl:text>                else
-</xsl:text>
-    <xsl:text>                    first.removeAttribute("dy");
-</xsl:text>
-    <xsl:text>                txt.removeChild(next);
-</xsl:text>
-    <xsl:text>                return false;
+    <xsl:text>        this.lift = 0;
+</xsl:text>
+    <xsl:text>        while(count &lt; up_to) {
+</xsl:text>
+    <xsl:text>            let next = first.cloneNode();
+</xsl:text>
+    <xsl:text>            next.removeAttribute("y");
+</xsl:text>
+    <xsl:text>            next.setAttribute("dy", "1.1em");
+</xsl:text>
+    <xsl:text>            next.textContent = "...";
+</xsl:text>
+    <xsl:text>            txt.appendChild(next);
+</xsl:text>
+    <xsl:text>            let rect = txt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>            if(rect.bottom &gt; bounds.bottom){
+</xsl:text>
+    <xsl:text>                let backup = first.getAttribute("dy");
+</xsl:text>
+    <xsl:text>                first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
+</xsl:text>
+    <xsl:text>                rect = txt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>                if(rect.top &gt; bounds.top){
+</xsl:text>
+    <xsl:text>                    this.lift += 1;
+</xsl:text>
+    <xsl:text>                } else {
+</xsl:text>
+    <xsl:text>                    if(backup)
+</xsl:text>
+    <xsl:text>                        first.setAttribute("dy", backup);
+</xsl:text>
+    <xsl:text>                    else
+</xsl:text>
+    <xsl:text>                        first.removeAttribute("dy");
+</xsl:text>
+    <xsl:text>                    txt.removeChild(next);
+</xsl:text>
+    <xsl:text>                    return count;
+</xsl:text>
+    <xsl:text>                }
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
+    <xsl:text>            count++;
+</xsl:text>
     <xsl:text>        }
 </xsl:text>
-    <xsl:text>        return true;
+    <xsl:text>        return count;
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    close: function(){
+</xsl:text>
+    <xsl:text>        this.reset_text();
+</xsl:text>
+    <xsl:text>        this.reset_box();
+</xsl:text>
+    <xsl:text>        this.opened = false;
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    set_complete_text: function(){
+</xsl:text>
+    <xsl:text>        let spans = this.text_elt.children; 
+</xsl:text>
+    <xsl:text>        let c = 0;
+</xsl:text>
+    <xsl:text>        for(let item of this.content){
+</xsl:text>
+    <xsl:text>            let span=spans[c];
+</xsl:text>
+    <xsl:text>            span.textContent = item;
+</xsl:text>
+    <xsl:text>            span.setAttribute("onclick", "hmi_widgets['</xsl:text>
+    <xsl:value-of select="$hmi_element/@id"/>
+    <xsl:text>'].on_selection_click("+c+")");
+</xsl:text>
+    <xsl:text>            c++;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    set_partial_text: function(){
+</xsl:text>
+    <xsl:text>        let spans = this.text_elt.children; 
+</xsl:text>
+    <xsl:text>        let length = this.content.length;
+</xsl:text>
+    <xsl:text>        let i = this.menu_offset, c = 0;
+</xsl:text>
+    <xsl:text>        while(c &lt; spans.length){
+</xsl:text>
+    <xsl:text>            if(c == 0 &amp;&amp; i != 0){
+</xsl:text>
+    <xsl:text>                spans[c].textContent = "...";
+</xsl:text>
+    <xsl:text>                /* TODO: set onclick */
+</xsl:text>
+    <xsl:text>            }else if(c == spans.length-1 &amp;&amp; i &lt; length - 1)
+</xsl:text>
+    <xsl:text>                spans[c].textContent = "...";
+</xsl:text>
+    <xsl:text>                /* TODO: set onclick */
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                let span=spans[c];
+</xsl:text>
+    <xsl:text>                span.textContent = this.content[i];
+</xsl:text>
+    <xsl:text>                /* TODO: set onclick */
+</xsl:text>
+    <xsl:text>                span.setAttribute("onclick", "hmi_widgets['</xsl:text>
+    <xsl:value-of select="$hmi_element/@id"/>
+    <xsl:text>'].on_selection_click("+i+")");
+</xsl:text>
+    <xsl:text>                i++;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            c++;
+</xsl:text>
+    <xsl:text>        }
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
     <xsl:text>    open: function(){
 </xsl:text>
-    <xsl:text>        let l = this.content.length;
-</xsl:text>
-    <xsl:text>        let c = 1;
-</xsl:text>
-    <xsl:text>        this.lift = 0;
-</xsl:text>
-    <xsl:text>        this.purge();
-</xsl:text>
-    <xsl:text>        while(c &lt; l &amp;&amp; this.try_grow_one()) c++;
-</xsl:text>
-    <xsl:text>        let spans = Array.from(this.text_elt.children); 
-</xsl:text>
-    <xsl:text>        if(c == l) {
-</xsl:text>
-    <xsl:text>            c = 0;
-</xsl:text>
-    <xsl:text>            while(c &lt; l){
-</xsl:text>
-    <xsl:text>                spans[c].textContent = this.content[c];
-</xsl:text>
-    <xsl:text>                c++;
-</xsl:text>
-    <xsl:text>            }
+    <xsl:text>        let length = this.content.length;
+</xsl:text>
+    <xsl:text>        this.reset_text();
+</xsl:text>
+    <xsl:text>        let slots = this.grow_text(length);
+</xsl:text>
+    <xsl:text>        if(slots == length) {
+</xsl:text>
+    <xsl:text>            this.set_complete_text();
 </xsl:text>
     <xsl:text>        } else {
 </xsl:text>
-    <xsl:text>            let slots = c;
-</xsl:text>
-    <xsl:text>            let elipses = [];
-</xsl:text>
-    <xsl:text>            if(this.offset != 0) 
-</xsl:text>
-    <xsl:text>                elipses.push(0);
-</xsl:text>
-    <xsl:text>            if(this.offset + slots - elipses.length &lt; l)
-</xsl:text>
-    <xsl:text>                elipses.push(spans.length-1);
-</xsl:text>
-    <xsl:text>            let i = 0;
-</xsl:text>
-    <xsl:text>            c = 0;
-</xsl:text>
-    <xsl:text>            while(c &lt; spans.length){
-</xsl:text>
-    <xsl:text>                if(elipses.indexOf(c) != -1)
-</xsl:text>
-    <xsl:text>                    spans[c].textContent = "...";
-</xsl:text>
-    <xsl:text>                else{
-</xsl:text>
-    <xsl:text>                    spans[c].textContent = this.content[this.offset + i];
-</xsl:text>
-    <xsl:text>                    i++;
-</xsl:text>
-    <xsl:text>                }
-</xsl:text>
-    <xsl:text>                c++;
-</xsl:text>
-    <xsl:text>            }
+    <xsl:text>            this.set_partial_text();
 </xsl:text>
     <xsl:text>        }
 </xsl:text>
-    <xsl:text>        this.adjust_to_text();
-</xsl:text>
-    <xsl:text>    },
-</xsl:text>
-    <xsl:text>    purge: function(){
+    <xsl:text>        this.adjust_box_to_text();
+</xsl:text>
+    <xsl:text>        /* TODO disable interaction with background */
+</xsl:text>
+    <xsl:text>        this.opened = true;
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    reset_text: function(){
 </xsl:text>
     <xsl:text>        let txt = this.text_elt; 
 </xsl:text>
+    <xsl:text>        let first = txt.firstElementChild;
+</xsl:text>
+    <xsl:text>        first.removeAttribute("onclick");
+</xsl:text>
+    <xsl:text>        first.removeAttribute("dy");
+</xsl:text>
     <xsl:text>        for(let span of Array.from(txt.children).slice(1)){
 </xsl:text>
     <xsl:text>            txt.removeChild(span)
@@ -1015,19 +1077,37 @@
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
-    <xsl:text>    adjust_to_text: function(){
+    <xsl:text>    reset_box: function(){
+</xsl:text>
+    <xsl:text>        let m = this.box_bbox;
+</xsl:text>
+    <xsl:text>        let b = this.box_elt;
+</xsl:text>
+    <xsl:text>        b.x.baseVal.value = m.x;
+</xsl:text>
+    <xsl:text>        b.y.baseVal.value = m.y;
+</xsl:text>
+    <xsl:text>        b.width.baseVal.value = m.width;
+</xsl:text>
+    <xsl:text>        b.height.baseVal.value = m.height;
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    adjust_box_to_text: function(){
 </xsl:text>
     <xsl:text>        let [lmargin, tmargin, rmargin, bmargin] = this.margins;
 </xsl:text>
     <xsl:text>        let m = this.text_elt.getBBox();
 </xsl:text>
-    <xsl:text>        this.box_elt.x.baseVal.value = m.x - lmargin;
-</xsl:text>
-    <xsl:text>        this.box_elt.y.baseVal.value = m.y - tmargin;
-</xsl:text>
-    <xsl:text>        this.box_elt.width.baseVal.value = lmargin + m.width + rmargin;
-</xsl:text>
-    <xsl:text>        this.box_elt.height.baseVal.value = tmargin + m.height + bmargin;
+    <xsl:text>        let b = this.box_elt;
+</xsl:text>
+    <xsl:text>        b.x.baseVal.value = m.x - lmargin;
+</xsl:text>
+    <xsl:text>        b.y.baseVal.value = m.y - tmargin;
+</xsl:text>
+    <xsl:text>        b.width.baseVal.value = lmargin + m.width + rmargin;
+</xsl:text>
+    <xsl:text>        b.height.baseVal.value = tmargin + m.height + bmargin;
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
diff -r 5ec1c07ce582 -r 69bb58eb0eac svghmi/widget_dropdown.ysl2
--- a/svghmi/widget_dropdown.ysl2	Sun Apr 12 21:43:42 2020 +0200
+++ b/svghmi/widget_dropdown.ysl2	Mon Apr 13 18:28:22 2020 +0200
@@ -5,9 +5,7 @@
     labels("text box");
 ||    
     dispatch: function(value) {
-        let span = this.text_elt.firstElementChild;
-        span.textContent = (value >= 0 && value < this.content.length) ?
-          this.content[value] : String(value);
+        if(!this.opened) this.set_selection(value);
     },
     init: function() {
         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");
@@ -20,91 +18,131 @@
         this.margins = [lmargin, tmargin, rmargin, bmargin].map(x => Math.max(x,0));
         this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
         //this.content = ["one", "two", "three", "four", "5", "6"];
-        this.offset = 0;
+        this.menu_offset = 0;
         this.lift = 0;
+        this.opened = false;
+    },
+    on_selection_click: function(selection) {
+        this.set_selection(selection);
     },
     on_click: function() {
-        this.open();
+        if(this.opened){
+            this.close();
+        }else{
+            this.open();
+        }
     },
-    try_grow_one: function() {
+    set_selection: function(value) {
+        this.text_elt.firstElementChild.textContent = 
+          (value >= 0 && value < this.content.length) ?
+            this.content[value] : "?"+String(value)+"?";
+    },
+    grow_text: function(up_to) {
+        let count = 1;
         let txt = this.text_elt; 
         let first = txt.firstElementChild;
         let bounds = svg_root.getBoundingClientRect(); 
-        let next = first.cloneNode();
-        //next.removeAttribute("x");
-        next.removeAttribute("y");
-        next.setAttribute("dy", "1.1em");
-        next.textContent = "...";
-        txt.appendChild(next);
-        let rect = txt.getBoundingClientRect();
-        console.log("bounds", bounds);
-        console.log("rect", rect);
-        if(rect.bottom > bounds.bottom){
-            let backup = first.getAttribute("dy");
-            first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
-            rect = txt.getBoundingClientRect();
-            if(rect.top > bounds.top){
-                console.log("rect2ok", rect);
-                this.lift += 1;
-            } else {
-                console.log("rect2Nok", rect);
-                if(backup)
-                    first.setAttribute("dy", backup);
-                else
-                    first.removeAttribute("dy");
-                txt.removeChild(next);
-                return false;
+        this.lift = 0;
+        while(count < up_to) {
+            let next = first.cloneNode();
+            next.removeAttribute("y");
+            next.setAttribute("dy", "1.1em");
+            next.textContent = "...";
+            txt.appendChild(next);
+            let rect = txt.getBoundingClientRect();
+            if(rect.bottom > bounds.bottom){
+                let backup = first.getAttribute("dy");
+                first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
+                rect = txt.getBoundingClientRect();
+                if(rect.top > bounds.top){
+                    this.lift += 1;
+                } else {
+                    if(backup)
+                        first.setAttribute("dy", backup);
+                    else
+                        first.removeAttribute("dy");
+                    txt.removeChild(next);
+                    return count;
+                }
             }
+            count++;
         }
-        return true;
+        return count;
+    },
+    close: function(){
+        this.reset_text();
+        this.reset_box();
+        this.opened = false;
+    },
+    set_complete_text: function(){
+        let spans = this.text_elt.children; 
+        let c = 0;
+        for(let item of this.content){
+            let span=spans[c];
+            span.textContent = item;
+            span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+c+")");
+            c++;
+        }
+    },
+    set_partial_text: function(){
+        let spans = this.text_elt.children; 
+        let length = this.content.length;
+        let i = this.menu_offset, c = 0;
+        while(c < spans.length){
+            if(c == 0 && i != 0){
+                spans[c].textContent = "...";
+                /* TODO: set onclick */
+            }else if(c == spans.length-1 && i < length - 1)
+                spans[c].textContent = "...";
+                /* TODO: set onclick */
+            else{
+                let span=spans[c];
+                span.textContent = this.content[i];
+                /* TODO: set onclick */
+                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");
+                i++;
+            }
+            c++;
+        }
     },
     open: function(){
-        let l = this.content.length;
-        let c = 1;
-        this.lift = 0;
-        this.purge();
-        while(c < l && this.try_grow_one()) c++;
-        let spans = Array.from(this.text_elt.children); 
-        if(c == l) {
-            c = 0;
-            while(c < l){
-                spans[c].textContent = this.content[c];
-                c++;
-            }
+        let length = this.content.length;
+        this.reset_text();
+        let slots = this.grow_text(length);
+        if(slots == length) {
+            this.set_complete_text();
         } else {
-            let slots = c;
-            let elipses = [];
-            if(this.offset != 0) 
-                elipses.push(0);
-            if(this.offset + slots - elipses.length < l)
-                elipses.push(spans.length-1);
-            let i = 0;
-            c = 0;
-            while(c < spans.length){
-                if(elipses.indexOf(c) != -1)
-                    spans[c].textContent = "...";
-                else{
-                    spans[c].textContent = this.content[this.offset + i];
-                    i++;
-                }
-                c++;
-            }
+            this.set_partial_text();
         }
-        this.adjust_to_text();
+        this.adjust_box_to_text();
+        /* TODO disable interaction with background */
+        this.opened = true;
     },
-    purge: function(){
+    reset_text: function(){
         let txt = this.text_elt; 
+        let first = txt.firstElementChild;
+        first.removeAttribute("onclick");
+        first.removeAttribute("dy");
         for(let span of Array.from(txt.children).slice(1)){
             txt.removeChild(span)
         }
     },
-    adjust_to_text: function(){
+    reset_box: function(){
+        let m = this.box_bbox;
+        let b = this.box_elt;
+        b.x.baseVal.value = m.x;
+        b.y.baseVal.value = m.y;
+        b.width.baseVal.value = m.width;
+        b.height.baseVal.value = m.height;
+    },
+    adjust_box_to_text: function(){
         let [lmargin, tmargin, rmargin, bmargin] = this.margins;
         let m = this.text_elt.getBBox();
-        this.box_elt.x.baseVal.value = m.x - lmargin;
-        this.box_elt.y.baseVal.value = m.y - tmargin;
-        this.box_elt.width.baseVal.value = lmargin + m.width + rmargin;
-        this.box_elt.height.baseVal.value = tmargin + m.height + bmargin;
+        let b = this.box_elt;
+        b.x.baseVal.value = m.x - lmargin;
+        b.y.baseVal.value = m.y - tmargin;
+        b.width.baseVal.value = lmargin + m.width + rmargin;
+        b.height.baseVal.value = tmargin + m.height + bmargin;
     },
 ||
 }