# HG changeset patch
# User Edouard Tisserant
# Date 1664442485 -7200
# Node ID dfcd1368336271e3ce09938efec99df00a07ddb2
# Parent  bb1eff4091ab2804fa4d777dce63075698eb1381
SVGHMI: add visible feedback to Jump widget when clicked/touched

diff -r bb1eff4091ab -r dfcd13683362 svghmi/widget_jump.ysl2
--- a/svghmi/widget_jump.ysl2	Wed Sep 28 09:19:07 2022 +0200
+++ b/svghmi/widget_jump.ysl2	Thu Sep 29 11:08:05 2022 +0200
@@ -52,23 +52,28 @@
 ||
         activable = false;
         frequency = 2;
+        target_page_is_current_page = false;
+        button_beeing_pressed = false;
 
-        make_on_click() {
-            let that = this;
-            const name = this.args[0];
-            return function(evt){
-                /* TODO: in order to allow jumps to page selected through
-                   for exemple a dropdown, support path pointing to local
-                   variable whom value would be an HMI_TREE index and then
-                   jump to a relative page not hard-coded in advance
-                */
-                if(that.enable_state) {
-                    const index =
-                        (that.is_relative && that.indexes.length > 0) ?
-                        that.indexes[0] + that.offset : undefined;
-                    fading_page_switch(name, index);
-                    that.notify();
-                }
+        onmouseup(evt) {
+            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+            if(this.enable_state) {
+                const index =
+                    (this.is_relative && this.indexes.length > 0) ?
+                    this.indexes[0] + this.offset : undefined;
+                this.button_beeing_pressed = false;
+                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
+                fading_page_switch(this.args[0], index);
+                this.notify();
+            }
+        }
+
+        onmousedown(){
+            if(this.enable_state) {
+                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+                this.button_beeing_pressed = true;
+                this.activity_state = true;
+                this.request_animate();
             }
         }
 
@@ -77,7 +82,8 @@
             if(this.activable) {
                 const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
                 const ref_name = this.args[0];
-                this.activity_state = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
+                this.target_page_is_current_page = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
+                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
                 // Since called from animate, update activity directly
                 if(this.enable_displayed_state && this.has_activity) {
                     this.animate_activity();
@@ -98,7 +104,8 @@
     const "jump_disability","$has_activity and $has_disability";
 
     |     init: function() {
-    |         this.element.onclick = this.make_on_click();
+    |         this.bound_onmouseup = this.onmouseup.bind(this);
+    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
     if "$has_activity" {
     |         this.activable = true;
     }