// widget_dropdown.ysl2

widget_desc("DropDown") {

    longdesc
    ||
    DropDown widget let user select an entry in a list of texts, given as
    arguments. Single variable path is index of selection.

    It needs "text" (svg:text), "box" (svg:rect), "button" (svg:*),
    and "highlight" (svg:rect) labeled elements.

    When user clicks on "button", "text" is duplicated to display enties in the
    limit of available space in page, and "box" is extended to contain all
    texts. "highlight" is moved over pre-selected entry.

    When only one argument is given, and argment contains "#langs" then list of
    texts is automatically set to the list of human-readable languages supported
    by this HMI. 
    ||

    shortdesc > Let user select text entry in a drop-down menu

    arg name="entries" count="many" accepts="string" > drop-down menu entries

    path name="selection" accepts="HMI_INT" > selection index
}

// TODO: support i18n of menu entries using svg:text elements with labels starting with "_"

widget_class("DropDown") {
||
        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", this.numb_event, true);
            svg_root.removeEventListener("pointerup", this.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++;
            }
        }
        numb_event(e) {
             e.stopPropagation();
        }
        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", this.numb_event, true);
            svg_root.addEventListener("pointerup", this.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;
        }
||
}

widget_defs("DropDown") {
    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
}