5 longdesc |
5 longdesc |
6 || |
6 || |
7 DropDown widget let user select an entry in a list of texts, given as |
7 DropDown widget let user select an entry in a list of texts, given as |
8 arguments. Single variable path is index of selection. |
8 arguments. Single variable path is index of selection. |
9 |
9 |
10 It needs "text" (svg:text), "box" (svg:rect), "button" (svg:*), |
10 It needs "text" (svg:text or svg:use referring to svg:text), |
11 and "highlight" (svg:rect) labeled elements. |
11 "box" (svg:rect), "button" (svg:*), and "highlight" (svg:rect) |
|
12 labeled elements. |
12 |
13 |
13 When user clicks on "button", "text" is duplicated to display enties in the |
14 When user clicks on "button", "text" is duplicated to display enties in the |
14 limit of available space in page, and "box" is extended to contain all |
15 limit of available space in page, and "box" is extended to contain all |
15 texts. "highlight" is moved over pre-selected entry. |
16 texts. "highlight" is moved over pre-selected entry. |
16 |
17 |
17 When only one argument is given, and argment contains "#langs" then list of |
18 When only one argument is given and argment contains "#langs" then list of |
18 texts is automatically set to the list of human-readable languages supported |
19 texts is automatically set to the human-readable list of supported |
19 by this HMI. |
20 languages by this HMI. |
|
21 |
|
22 If "text" labeled element is of type svg:use and refers to a svg:text |
|
23 element part of a TextList widget, no argument is expected. In that case |
|
24 list of texts is set to TextList content. |
20 || |
25 || |
21 |
26 |
22 shortdesc > Let user select text entry in a drop-down menu |
27 shortdesc > Let user select text entry in a drop-down menu |
23 |
28 |
24 arg name="entries" count="many" accepts="string" > drop-down menu entries |
29 arg name="entries" count="many" accepts="string" > drop-down menu entries |
32 || |
37 || |
33 dispatch(value) { |
38 dispatch(value) { |
34 if(!this.opened) this.set_selection(value); |
39 if(!this.opened) this.set_selection(value); |
35 } |
40 } |
36 init() { |
41 init() { |
|
42 this.init_specific(); |
37 this.button_elt.onclick = this.on_button_click.bind(this); |
43 this.button_elt.onclick = this.on_button_click.bind(this); |
38 // Save original size of rectangle |
44 // Save original size of rectangle |
39 this.box_bbox = this.box_elt.getBBox() |
45 this.box_bbox = this.box_elt.getBBox() |
40 this.highlight_bbox = this.highlight_elt.getBBox() |
46 this.highlight_bbox = this.highlight_elt.getBBox() |
41 this.highlight_elt.style.visibility = "hidden"; |
47 this.highlight_elt.style.visibility = "hidden"; |
77 } |
83 } |
78 set_selection(value) { |
84 set_selection(value) { |
79 let display_str; |
85 let display_str; |
80 if(value >= 0 && value < this.content.length){ |
86 if(value >= 0 && value < this.content.length){ |
81 // if valid selection resolve content |
87 // if valid selection resolve content |
82 display_str = this.content[value]; |
88 display_str = gettext(this.content[value]); |
83 this.last_selection = value; |
89 this.last_selection = value; |
84 } else { |
90 } else { |
85 // otherwise show problem |
91 // otherwise show problem |
86 display_str = "?"+String(value)+"?"; |
92 display_str = "?"+String(value)+"?"; |
87 } |
93 } |
249 onclickfunc = this.bound_on_forward_click; |
255 onclickfunc = this.bound_on_forward_click; |
250 let o = span.getBBox(); |
256 let o = span.getBBox(); |
251 span.setAttribute("dx", (m.width - o.width)/2); |
257 span.setAttribute("dx", (m.width - o.width)/2); |
252 // otherwise normal content |
258 // otherwise normal content |
253 }else{ |
259 }else{ |
254 span.textContent = this.content[i]; |
260 span.textContent = gettext(this.content[i]); |
255 let sel = i; |
261 let sel = i; |
256 onclickfunc = (evt) => this.bound_on_selection_click(sel); |
262 onclickfunc = (evt) => this.bound_on_selection_click(sel); |
257 span.removeAttribute("dx"); |
263 span.removeAttribute("dx"); |
258 i++; |
264 i++; |
259 } |
265 } |
358 } |
364 } |
359 || |
365 || |
360 } |
366 } |
361 |
367 |
362 widget_defs("DropDown") { |
368 widget_defs("DropDown") { |
363 labels("text box button highlight"); |
369 labels("box button highlight"); |
364 // It is assumed that list content conforms to Array interface. |
370 // It is assumed that list content conforms to Array interface. |
365 > content: |
371 const "text_elt","$hmi_element//*[@inkscape:label='text'][1]"; |
|
372 | init_specific: function() { |
366 choose{ |
373 choose{ |
367 // special case when used for language selection |
374 // special case when used for language selection |
368 when "count(arg) = 1 and arg[1]/@value = '#langs'" { |
375 when "count(arg) = 1 and arg[1]/@value = '#langs'" { |
369 > langs |
376 | this.text_elt = id("«$text_elt/@id»"); |
|
377 | this.content = langs; |
|
378 } |
|
379 when "count(arg) = 0"{ |
|
380 if "not($text_elt[self::svg:use])" |
|
381 error > No argrument for HMI:DropDown widget id="«$hmi_element/@id»" and "text" labeled element is not a svg:use element |
|
382 const "real_text_elt","$result_widgets[@id = $hmi_element/@id]//*[@original=$text_elt/@id]/svg:text"; |
|
383 | this.text_elt = id("«$real_text_elt/@id»"); |
|
384 const "from_list_id", "substring-after($text_elt/@xlink:href,'#')"; |
|
385 const "from_list", "$hmi_textlists[(@id | */@id) = $from_list_id]"; |
|
386 if "count($from_list) = 0" |
|
387 error > HMI:DropDown widget id="«$hmi_element/@id»" "text" labeled element does not point to a svg:text owned by a HMI:List widget |
|
388 | this.content = hmi_widgets["«$from_list/@id»"].texts; |
370 } |
389 } |
371 otherwise { |
390 otherwise { |
372 > [\n |
391 | this.text_elt = id("«$text_elt/@id»"); |
|
392 | this.content = [ |
373 foreach "arg" | "«@value»", |
393 foreach "arg" | "«@value»", |
374 > ] |
394 | ]; |
375 } |
395 } |
376 } |
396 } |
377 > ,\n |
397 | } |
378 } |
398 } |
|
399 |
|
400 emit "declarations:DropDown" |
|
401 || |
|
402 function gettext(o) { |
|
403 if(typeof(o) == "string"){ |
|
404 return o; |
|
405 } |
|
406 return svg_text_to_multiline(o); |
|
407 }; |
|
408 || |