# HG changeset patch
# User Edouard Tisserant <edouard.tisserant@gmail.com>
# Date 1586854605 -7200
# Node ID 220172cbdcffd92cd5089b048fa231c276f696ae
# Parent  69bb58eb0eac1ce2caa33a5f7f19b32d71dfd4a2
SVGHMI: HMI:DropDown now scrolls forward and backward

diff -r 69bb58eb0eac -r 220172cbdcff svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt	Mon Apr 13 18:28:22 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Tue Apr 14 10:56:45 2020 +0200
@@ -851,7 +851,9 @@
 </xsl:text>
     <xsl:text>        this.margins = [lmargin, tmargin, rmargin, bmargin].map(x =&gt; Math.max(x,0));
 </xsl:text>
-    <xsl:text>        this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
+    <xsl:text>        this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
+</xsl:text>
+    <xsl:text>                        "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
 </xsl:text>
     <xsl:text>        //this.content = ["one", "two", "three", "four", "5", "6"];
 </xsl:text>
@@ -873,7 +875,7 @@
 </xsl:text>
     <xsl:text>        if(this.opened){
 </xsl:text>
-    <xsl:text>            this.close();
+    <xsl:text>            //this.close();
 </xsl:text>
     <xsl:text>        }else{
 </xsl:text>
@@ -883,6 +885,18 @@
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
+    <xsl:text>    on_backward_click:function(){
+</xsl:text>
+    <xsl:text>        this.move(false);
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    on_forward_click:function(){
+</xsl:text>
+    <xsl:text>        this.move(true);
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
     <xsl:text>    set_selection: function(value) {
 </xsl:text>
     <xsl:text>        this.text_elt.firstElementChild.textContent = 
@@ -989,36 +1003,76 @@
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
+    <xsl:text>    move: function(forward){
+</xsl:text>
+    <xsl:text>        let contentlength = this.content.length;
+</xsl:text>
+    <xsl:text>        let spans = this.text_elt.children; 
+</xsl:text>
+    <xsl:text>        let spanslength = spans.length;
+</xsl:text>
+    <xsl:text>        if(this.menu_offset != 0) spanslength--;
+</xsl:text>
+    <xsl:text>        if(this.menu_offset &lt; contentlength - 1) spanslength--;
+</xsl:text>
+    <xsl:text>        if(forward){
+</xsl:text>
+    <xsl:text>            this.menu_offset = Math.min(
+</xsl:text>
+    <xsl:text>                contentlength - spans.length + 1, 
+</xsl:text>
+    <xsl:text>                this.menu_offset + spanslength);
+</xsl:text>
+    <xsl:text>        }else{
+</xsl:text>
+    <xsl:text>            this.menu_offset = Math.max(
+</xsl:text>
+    <xsl:text>                0, 
+</xsl:text>
+    <xsl:text>                this.menu_offset - spanslength);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        console.log(this.menu_offset);
+</xsl:text>
+    <xsl:text>        this.set_partial_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>        let contentlength = this.content.length;
+</xsl:text>
+    <xsl:text>        let spanslength = spans.length;
 </xsl:text>
     <xsl:text>        let i = this.menu_offset, c = 0;
 </xsl:text>
-    <xsl:text>        while(c &lt; spans.length){
+    <xsl:text>        while(c &lt; spanslength){
+</xsl:text>
+    <xsl:text>            let span=spans[c];
 </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>                span.textContent = "&#x2191;  &#x2191;  &#x2191;";
+</xsl:text>
+    <xsl:text>                span.setAttribute("onclick", "hmi_widgets['</xsl:text>
+    <xsl:value-of select="$hmi_element/@id"/>
+    <xsl:text>'].on_backward_click()");
+</xsl:text>
+    <xsl:text>            }else if(c == spanslength-1 &amp;&amp; i &lt; contentlength - 1){
+</xsl:text>
+    <xsl:text>                span.textContent = "&#x2193;  &#x2193;  &#x2193;";
+</xsl:text>
+    <xsl:text>                span.setAttribute("onclick", "hmi_widgets['</xsl:text>
+    <xsl:value-of select="$hmi_element/@id"/>
+    <xsl:text>'].on_forward_click()");
+</xsl:text>
+    <xsl:text>            }else{
 </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+")");
diff -r 69bb58eb0eac -r 220172cbdcff svghmi/widget_dropdown.ysl2
--- a/svghmi/widget_dropdown.ysl2	Mon Apr 13 18:28:22 2020 +0200
+++ b/svghmi/widget_dropdown.ysl2	Tue Apr 14 10:56:45 2020 +0200
@@ -16,7 +16,8 @@
         rmargin = this.box_bbox.width - this.text_bbox.width - lmargin;
         bmargin = this.box_bbox.height - this.text_bbox.height - tmargin;
         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", "five", "six", "seven", "eight", "nine", "ten",
+                        "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
         //this.content = ["one", "two", "three", "four", "5", "6"];
         this.menu_offset = 0;
         this.lift = 0;
@@ -27,11 +28,17 @@
     },
     on_click: function() {
         if(this.opened){
-            this.close();
+            //this.close();
         }else{
             this.open();
         }
     },
+    on_backward_click:function(){
+        this.move(false);
+    },
+    on_forward_click:function(){
+        this.move(true);
+    },
     set_selection: function(value) {
         this.text_elt.firstElementChild.textContent = 
           (value >= 0 && value < this.content.length) ?
@@ -84,21 +91,39 @@
             c++;
         }
     },
+    move: function(forward){
+        let contentlength = this.content.length;
+        let spans = this.text_elt.children; 
+        let spanslength = spans.length;
+        if(this.menu_offset != 0) spanslength--;
+        if(this.menu_offset < contentlength - 1) spanslength--;
+        if(forward){
+            this.menu_offset = Math.min(
+                contentlength - spans.length + 1, 
+                this.menu_offset + spanslength);
+        }else{
+            this.menu_offset = Math.max(
+                0, 
+                this.menu_offset - spanslength);
+        }
+        console.log(this.menu_offset);
+        this.set_partial_text();
+    },
     set_partial_text: function(){
         let spans = this.text_elt.children; 
-        let length = this.content.length;
+        let contentlength = this.content.length;
+        let spanslength = spans.length;
         let i = this.menu_offset, c = 0;
-        while(c < spans.length){
+        while(c < spanslength){
+            let span=spans[c];
             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 = "↑  ↑  ↑";
+                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_backward_click()");
+            }else if(c == spanslength-1 && i < contentlength - 1){
+                span.textContent = "↓  ↓  ↓";
+                span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_forward_click()");
+            }else{
                 span.textContent = this.content[i];
-                /* TODO: set onclick */
                 span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");
                 i++;
             }