1 // widget_jump.ysl2 |
1 // widget_jump.ysl2 |
2 |
2 |
3 function "jump_widget_activity" { |
3 template "widget[@type='Jump']", mode="widget_class"{ |
4 param "hmi_element"; |
4 || |
5 optional_labels("active inactive"); |
5 class JumpWidget extends Widget{ |
6 } |
|
7 |
6 |
8 function "jump_widget_disability" { |
7 activable = false; |
9 param "hmi_element"; |
8 active = false; |
10 optional_labels("disabled"); |
9 disabled = false; |
|
10 frequency = 2; |
|
11 |
|
12 update_activity() { |
|
13 if(this.active) { |
|
14 /* show active */ |
|
15 this.active_elt.setAttribute("style", this.active_elt_style); |
|
16 /* hide inactive */ |
|
17 this.inactive_elt.setAttribute("style", "display:none"); |
|
18 } else { |
|
19 /* show inactive */ |
|
20 this.inactive_elt.setAttribute("style", this.inactive_elt_style); |
|
21 /* hide active */ |
|
22 this.active_elt.setAttribute("style", "display:none"); |
|
23 } |
|
24 } |
|
25 |
|
26 make_on_click() { |
|
27 let that = this; |
|
28 const name = this.args[0]; |
|
29 return function(evt){ |
|
30 /* TODO: suport path pointing to local variable whom value |
|
31 would be an HMI_TREE index to jump to a relative page */ |
|
32 const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined; |
|
33 switch_page(name, index); |
|
34 } |
|
35 } |
|
36 |
|
37 notify_page_change(page_name, index) { |
|
38 if(this.activable) { |
|
39 const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined; |
|
40 const ref_name = this.args[0]; |
|
41 this.active = ((ref_name == undefined || ref_name == page_name) && index == ref_index); |
|
42 this.update_activity(); |
|
43 } |
|
44 } |
|
45 |
|
46 dispatch(value) { |
|
47 this.disabled = !Number(value); |
|
48 if(this.disabled) { |
|
49 /* show disabled */ |
|
50 this.disabled_elt.setAttribute("style", this.disabled_elt_style); |
|
51 /* hide inactive */ |
|
52 this.inactive_elt.setAttribute("style", "display:none"); |
|
53 /* hide active */ |
|
54 this.active_elt.setAttribute("style", "display:none"); |
|
55 } else { |
|
56 /* hide disabled */ |
|
57 this.disabled_elt.setAttribute("style", "display:none"); |
|
58 this.update_activity(); |
|
59 } |
|
60 } |
|
61 } |
|
62 || |
11 } |
63 } |
12 |
64 |
13 template "widget[@type='Jump']", mode="widget_defs" { |
65 template "widget[@type='Jump']", mode="widget_defs" { |
14 param "hmi_element"; |
66 param "hmi_element"; |
15 const "activity" call "jump_widget_activity" with "hmi_element", "$hmi_element"; |
67 const "activity" optional_labels("active inactive"); |
16 const "have_activity","string-length($activity)>0"; |
68 const "have_activity","string-length($activity)>0"; |
17 value "$activity"; |
69 value "$activity"; |
18 const "disability" call "jump_widget_disability" with "hmi_element", "$hmi_element"; |
70 |
|
71 const "disability" optional_labels("disabled"); |
19 const "have_disability","$have_activity and string-length($disability)>0"; |
72 const "have_disability","$have_activity and string-length($disability)>0"; |
20 value "$disability"; |
73 value "$disability"; |
21 if "$have_activity" { |
74 |
22 | active: false, |
|
23 if "$have_disability" { |
|
24 | disabled: false, |
|
25 | frequency: 2, |
|
26 | dispatch: function(value) { |
|
27 | this.disabled = !Number(value); |
|
28 | this.update(); |
|
29 | }, |
|
30 } |
|
31 | update: function(){ |
|
32 if "$have_disability" { |
|
33 | if(this.disabled) { |
|
34 | /* show disabled */ |
|
35 | this.disabled_elt.setAttribute("style", this.active_elt_style); |
|
36 | /* hide inactive */ |
|
37 | this.inactive_elt.setAttribute("style", "display:none"); |
|
38 | /* hide active */ |
|
39 | this.active_elt.setAttribute("style", "display:none"); |
|
40 | } else { |
|
41 | /* hide disabled */ |
|
42 | this.disabled_elt.setAttribute("style", "display:none"); |
|
43 } |
|
44 | if(this.active) { |
|
45 | /* show active */ |
|
46 | this.active_elt.setAttribute("style", this.active_elt_style); |
|
47 | /* hide inactive */ |
|
48 | this.inactive_elt.setAttribute("style", "display:none"); |
|
49 | } else { |
|
50 | /* show inactive */ |
|
51 | this.inactive_elt.setAttribute("style", this.inactive_elt_style); |
|
52 | /* hide active */ |
|
53 | this.active_elt.setAttribute("style", "display:none"); |
|
54 | } |
|
55 if "$have_disability" { |
|
56 | } |
|
57 } |
|
58 | }, |
|
59 } |
|
60 if "$have_activity" { |
|
61 | notify_page_change: function(page_name, index){ |
|
62 | const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined; |
|
63 | const ref_name = this.args[0]; |
|
64 | this.active =((ref_name == undefined || ref_name == page_name) && index == ref_index); |
|
65 | this.update(); |
|
66 | }, |
|
67 } |
|
68 | make_on_click(){ |
|
69 | let that = this; |
|
70 | const name = this.args[0]; |
|
71 | return function(evt){ |
|
72 | const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined; |
|
73 | switch_page(name, index); |
|
74 | } |
|
75 | }, |
|
76 | init: function() { |
75 | init: function() { |
77 /* registering event this way does not "click" through svg:use |
|
78 | this.element.onclick = evt => switch_page(this.args[0]); |
|
79 event must be registered by adding attribute to element instead |
|
80 TODO : generalize mouse event handling by global event capture + getElementsAtPoint() |
|
81 */ |
|
82 | this.element.onclick = this.make_on_click(); |
76 | this.element.onclick = this.make_on_click(); |
83 if "$have_activity" { |
77 if "$have_activity" { |
84 | this.active_elt_style = this.active_elt.getAttribute("style"); |
78 | this.active_elt_style = this.active_elt.getAttribute("style"); |
85 | this.inactive_elt_style = this.inactive_elt.getAttribute("style"); |
79 | this.inactive_elt_style = this.inactive_elt.getAttribute("style"); |
|
80 | this.activable = true; |
86 } |
81 } |
87 choose { |
82 choose { |
88 when "$have_disability" { |
83 when "$have_disability" { |
89 | this.disabled_elt_style = this.disabled_elt.getAttribute("style"); |
84 | this.disabled_elt_style = this.disabled_elt.getAttribute("style"); |
90 } |
85 } |