diff -r 220172cbdcff -r 90f9d9782632 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt Tue Apr 14 10:56:45 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt Tue Apr 14 12:07:08 2020 +0200
@@ -822,7 +822,7 @@
- text box
+ text box button
dispatch: function(value) {
@@ -833,9 +833,9 @@
init: function() {
- this.element.setAttribute("onclick", "hmi_widgets['
+ this.button_elt.setAttribute("onclick", "hmi_widgets['
- '].on_click()");
+ '].on_button_click()");
this.text_bbox = this.text_elt.getBBox()
@@ -845,11 +845,7 @@
tmargin = this.text_bbox.y - this.box_bbox.y;
- 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.margins = [lmargin, tmargin].map(x => Math.max(x,0));
this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
@@ -867,106 +863,102 @@
on_selection_click: function(selection) {
+ console.log("selected "+selection);
+
+ this.close();
+
this.set_selection(selection);
},
- on_click: function() {
-
- if(this.opened){
-
- //this.close();
-
- }else{
-
- this.open();
+ on_button_click: function() {
+
+ 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) ?
+
+ 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();
+
+ 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++;
}
- },
-
- 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) ?
-
- 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();
-
- 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 count;
},
@@ -977,6 +969,8 @@
this.reset_box();
+ this.element.appendChild(this.button_elt);
+
this.opened = false;
},
@@ -1107,6 +1101,8 @@
this.adjust_box_to_text();
+ this.element.removeChild(this.button_elt);
+
/* TODO disable interaction with background */
this.opened = true;
@@ -1149,7 +1145,7 @@
adjust_box_to_text: function(){
- let [lmargin, tmargin, rmargin, bmargin] = this.margins;
+ let [lmargin, tmargin] = this.margins;
let m = this.text_elt.getBBox();
@@ -1159,9 +1155,9 @@
b.y.baseVal.value = m.y - tmargin;
- b.width.baseVal.value = lmargin + m.width + rmargin;
-
- b.height.baseVal.value = tmargin + m.height + bmargin;
+ b.width.baseVal.value = 2 * lmargin + m.width;
+
+ b.height.baseVal.value = 2 * tmargin + m.height;
},