SVGHMI: HMI:DropDown now temporarily takes content from widget's arguments, until HMI:List is implemented.
// widget_dropdown.ysl2
template "widget[@type='DropDown']", mode="widget_defs" {
param "hmi_element";
labels("text box button");
||
dispatch: function(value) {
if(!this.opened) this.set_selection(value);
},
init: function() {
this.button_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_button_click()");
this.text_bbox = this.text_elt.getBBox()
this.box_bbox = this.box_elt.getBBox()
lmargin = this.text_bbox.x - this.box_bbox.x;
tmargin = this.text_bbox.y - this.box_bbox.y;
this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
//this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
// "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
this.content = [
``foreach "arg" | "«@value»",
];
this.menu_offset = 0;
this.lift = 0;
this.opened = false;
this.bound_inhibit_click_elsewhere = this.inhibit_click_elsewhere.bind(this);
},
on_selection_click: function(selection) {
console.log("selected "+selection);
this.close();
let orig = this.indexes[0];
let idx = this.offset ? orig - this.offset : orig;
apply_hmi_value(idx, selection);
},
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++;
}
return count;
},
inhibit_click_elsewhere: function(e) {
console.log("inhibit", e);
console.log(e.target.parentNode, this.text_elt);
if(e.target.parentNode !== this.text_elt)
e.stopPropagation();
},
close: function(){
this.reset_text();
this.reset_box();
this.element.appendChild(this.button_elt);
this.apply_cache();
document.removeEventListener("click", this.bound_inhibit_click_elsewhere, true);
this.opened = false;
},
set_complete_text: function(){
let spans = this.text_elt.children;
let c = 0;
for(let item of this.content){
let span=spans[c];
span.textContent = item;
span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+c+")");
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 contentlength = this.content.length;
let spanslength = spans.length;
let i = this.menu_offset, c = 0;
while(c < spanslength){
let span=spans[c];
if(c == 0 && i != 0){
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];
span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");
i++;
}
c++;
}
},
open: function(){
let length = this.content.length;
this.reset_text();
let slots = this.grow_text(length);
if(slots == length) {
this.set_complete_text();
} else {
this.set_partial_text();
}
this.adjust_box_to_text();
this.element.removeChild(this.button_elt);
this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
// disable interaction with background
document.addEventListener("click", this.bound_inhibit_click_elsewhere, true);
this.opened = true;
},
reset_text: function(){
let txt = this.text_elt;
let first = txt.firstElementChild;
first.removeAttribute("onclick");
first.removeAttribute("dy");
for(let span of Array.from(txt.children).slice(1)){
txt.removeChild(span)
}
},
reset_box: function(){
let m = this.box_bbox;
let b = this.box_elt;
b.x.baseVal.value = m.x;
b.y.baseVal.value = m.y;
b.width.baseVal.value = m.width;
b.height.baseVal.value = m.height;
},
adjust_box_to_text: function(){
let [lmargin, tmargin] = this.margins;
let m = this.text_elt.getBBox();
let b = this.box_elt;
b.x.baseVal.value = m.x - lmargin;
b.y.baseVal.value = m.y - tmargin;
b.width.baseVal.value = 2 * lmargin + m.width;
b.height.baseVal.value = 2 * tmargin + m.height;
},
||
}
// | let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
// | let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());
// | let new_corner = k.transformPoint(p);
// | new_corner.y = 0;
// | let nc = k.inverse().transformPoint(new_corner);
// | this.box_elt.x.baseVal.value = nc.x;
// | this.box_elt.y.baseVal.value = nc.y;