// widget_dropdown.ysl2
template "widget[@type='DropDown']", mode="widget_class"{
||
function numb_event(e) {
e.stopPropagation();
}
class DropDownWidget extends Widget{
dispatch(value) {
if(!this.opened) this.set_selection(value);
}
init() {
this.button_elt.onclick = this.on_button_click.bind(this);
// Save original size of rectangle
this.box_bbox = this.box_elt.getBBox()
this.highlight_bbox = this.highlight_elt.getBBox()
this.highlight_elt.style.visibility = "hidden";
// Compute margins
this.text_bbox = this.text_elt.getBBox();
let lmargin = this.text_bbox.x - this.box_bbox.x;
let tmargin = this.text_bbox.y - this.box_bbox.y;
this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
// Index of first visible element in the menu, when opened
this.menu_offset = 0;
// How mutch to lift the menu vertically so that it does not cross bottom border
this.lift = 0;
// Event handlers cannot be object method ('this' is unknown)
// as a workaround, handler given to addEventListener is bound in advance.
this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
this.bound_on_selection_click = this.on_selection_click.bind(this);
this.bound_on_backward_click = this.on_backward_click.bind(this);
this.bound_on_forward_click = this.on_forward_click.bind(this);
this.opened = false;
this.clickables = [];
}
on_button_click() {
this.open();
}
// Called when a menu entry is clicked
on_selection_click(selection) {
this.close();
this.apply_hmi_value(0, selection);
}
on_backward_click(){
this.scroll(false);
}
on_forward_click(){
this.scroll(true);
}
set_selection(value) {
let display_str;
if(value >= 0 && value < this.content.length){
// if valid selection resolve content
display_str = this.content[value];
this.last_selection = value;
} else {
// otherwise show problem
display_str = "?"+String(value)+"?";
}
// It is assumed that first span always stays,
// and contains selection when menu is closed
this.text_elt.firstElementChild.textContent = display_str;
}
grow_text(up_to) {
let count = 1;
let txt = this.text_elt;
let first = txt.firstElementChild;
// Real world (pixels) boundaries of current page
let bounds = svg_root.getBoundingClientRect();
this.lift = 0;
while(count < up_to) {
let next = first.cloneNode();
// relative line by line text flow instead of absolute y coordinate
next.removeAttribute("y");
next.setAttribute("dy", "1.1em");
// default content to allow computing text element bbox
next.textContent = "...";
// append new span to text element
txt.appendChild(next);
// now check if text extended by one row fits to page
// FIXME : exclude margins to be more accurate on box size
let rect = txt.getBoundingClientRect();
if(rect.bottom > bounds.bottom){
// in case of overflow at the bottom, lift up one row
let backup = first.getAttribute("dy");
// apply lift as a dy added too first span (y attrib stays)
first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
rect = txt.getBoundingClientRect();
if(rect.top > bounds.top){
this.lift += 1;
} else {
// if it goes over the top, then backtrack
// restore dy attribute on first span
if(backup)
first.setAttribute("dy", backup);
else
first.removeAttribute("dy");
// remove unwanted child
txt.removeChild(next);
return count;
}
}
count++;
}
return count;
}
close_on_click_elsewhere(e) {
// inhibit events not targetting spans (menu items)
if([this.text_elt, this.element].indexOf(e.target.parentNode) == -1){
e.stopPropagation();
// close menu in case click is outside box
if(e.target !== this.box_elt)
this.close();
}
}
close(){
// Stop hogging all click events
svg_root.removeEventListener("pointerdown", numb_event, true);
svg_root.removeEventListener("pointerup", numb_event, true);
svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
// Restore position and sixe of widget elements
this.reset_text();
this.reset_clickables();
this.reset_box();
this.reset_highlight();
// Put the button back in place
this.element.appendChild(this.button_elt);
// Mark as closed (to allow dispatch)
this.opened = false;
// Dispatch last cached value
this.apply_cache();
}
// Make item (text span) clickable by overlaying a rectangle on top of it
make_clickable(span, func) {
let txt = this.text_elt;
let original_text_y = this.text_bbox.y;
let highlight = this.highlight_elt;
let original_h_y = this.highlight_bbox.y;
let clickable = highlight.cloneNode();
let yoffset = span.getBBox().y - original_text_y;
clickable.y.baseVal.value = original_h_y + yoffset;
clickable.style.pointerEvents = "bounding-box";
//clickable.style.visibility = "hidden";
//clickable.onclick = () => alert("love JS");
clickable.onclick = func;
this.element.appendChild(clickable);
this.clickables.push(clickable)
}
reset_clickables() {
while(this.clickables.length){
this.element.removeChild(this.clickables.pop());
}
}
// Set text content when content is smaller than menu (no scrolling)
set_complete_text(){
let spans = this.text_elt.children;
let c = 0;
for(let item of this.content){
let span=spans[c];
span.textContent = item;
let sel = c;
this.make_clickable(span, (evt) => this.bound_on_selection_click(sel));
c++;
}
}
// Move partial view :
// false : upward, lower value
// true : downward, higher value
scroll(forward){
let contentlength = this.content.length;
let spans = this.text_elt.children;
let spanslength = spans.length;
// reduce accounted menu size according to prsence of scroll buttons
// since we scroll there is necessarly one button
spanslength--;
if(forward){
// reduce accounted menu size because of back button
// in current view
if(this.menu_offset > 0) spanslength--;
this.menu_offset = Math.min(
contentlength - spans.length + 1,
this.menu_offset + spanslength);
}else{
// reduce accounted menu size because of back button
// in view once scrolled
if(this.menu_offset - spanslength > 0) spanslength--;
this.menu_offset = Math.max(
0,
this.menu_offset - spanslength);
}
if(this.menu_offset == 1)
this.menu_offset = 0;
this.reset_highlight();
this.reset_clickables();
this.set_partial_text();
this.highlight_selection();
}
// Setup partial view text content
// with jumps at first and last entry when appropriate
set_partial_text(){
let spans = this.text_elt.children;
let contentlength = this.content.length;
let spanslength = spans.length;
let i = this.menu_offset, c = 0;
let m = this.box_bbox;
while(c < spanslength){
let span=spans[c];
let onclickfunc;
// backward jump only present if not exactly at start
if(c == 0 && i != 0){
span.textContent = "▲";
onclickfunc = this.bound_on_backward_click;
let o = span.getBBox();
span.setAttribute("dx", (m.width - o.width)/2);
// presence of forward jump when not right at the end
}else if(c == spanslength-1 && i < contentlength - 1){
span.textContent = "▼";
onclickfunc = this.bound_on_forward_click;
let o = span.getBBox();
span.setAttribute("dx", (m.width - o.width)/2);
// otherwise normal content
}else{
span.textContent = this.content[i];
let sel = i;
onclickfunc = (evt) => this.bound_on_selection_click(sel);
span.removeAttribute("dx");
i++;
}
this.make_clickable(span, onclickfunc);
c++;
}
}
open(){
let length = this.content.length;
// systematically reset text, to strip eventual whitespace spans
this.reset_text();
// grow as much as needed or possible
let slots = this.grow_text(length);
// Depending on final size
if(slots == length) {
// show all at once
this.set_complete_text();
} else {
// eventualy align menu to current selection, compensating for lift
let offset = this.last_selection - this.lift;
if(offset > 0)
this.menu_offset = Math.min(offset + 1, length - slots + 1);
else
this.menu_offset = 0;
// show surrounding values
this.set_partial_text();
}
// Now that text size is known, we can set the box around it
this.adjust_box_to_text();
// Take button out until menu closed
this.element.removeChild(this.button_elt);
// Rise widget to top by moving it to last position among siblings
this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
// disable interaction with background
svg_root.addEventListener("pointerdown", numb_event, true);
svg_root.addEventListener("pointerup", numb_event, true);
svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
this.highlight_selection();
// mark as open
this.opened = true;
}
// Put text element in normalized state
reset_text(){
let txt = this.text_elt;
let first = txt.firstElementChild;
// remove attribute eventually added to first text line while opening
first.onclick = null;
first.removeAttribute("dy");
first.removeAttribute("dx");
// keep only the first line of text
for(let span of Array.from(txt.children).slice(1)){
txt.removeChild(span)
}
}
// Put rectangle element in saved original state
reset_box(){
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;
}
highlight_selection(){
if(this.last_selection == undefined) return;
let highlighted_row = this.last_selection - this.menu_offset;
if(highlighted_row < 0) return;
let spans = this.text_elt.children;
let spanslength = spans.length;
let contentlength = this.content.length;
if(this.menu_offset != 0) {
spanslength--;
highlighted_row++;
}
if(this.menu_offset + spanslength < contentlength - 1) spanslength--;
if(highlighted_row > spanslength) return;
let original_text_y = this.text_bbox.y;
let highlight = this.highlight_elt;
let span = spans[highlighted_row];
let yoffset = span.getBBox().y - original_text_y;
highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;
highlight.style.visibility = "visible";
}
reset_highlight(){
let highlight = this.highlight_elt;
highlight.y.baseVal.value = this.highlight_bbox.y;
highlight.style.visibility = "hidden";
}
// Use margin and text size to compute box size
adjust_box_to_text(){
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;
}
}
||
}
template "widget[@type='DropDown']", mode="widget_defs" {
param "hmi_element";
labels("text box button highlight");
// It is assumed that list content conforms to Array interface.
> content:
choose{
// special case when used for language selection
when "count(arg) = 1 and arg[1]/@value = '#langs'" {
> langs
}
otherwise {
> [\n
foreach "arg" | "«@value»",
> ]
}
}
> ,\n
}