pvbemu/web/toolkit/MenuBar.js

let register = Toolkit => Toolkit.MenuBar =

// Application menu bar
class MenuBar extends Toolkit.Menu {

    ///////////////////////// Initialization Methods //////////////////////////

    constructor(app, options = {}) {
        super(app, Object.assign({
            class     : "tk menu-bar",
            role      : "menubar",
            visibility: false,
            visible   : true
        }, options, { style: Object.assign({
            display      : "flex",
            flexDirection: "row",
            minWidth     : "0",
            position     : "inline"
        }, options.style || {}) }));

        // Configure event handlers
        this.addEventListener("focusout", e=>this.onBlur (e));
        this.addEventListener("focusin" , e=>this.onFocus(e));
    }



    ///////////////////////////// Event Handlers //////////////////////////////

    // Child blur
    onBlur(e) {
        if (
            this.contains(e.relatedTarget) ||
            !this.children || this.children.length == 0
        ) return;
        this.children.forEach(i=>i.expanded = false);
        this.children[0].element.setAttribute("tabindex", "0");
    }

    // Child focus
    onFocus(e) {
        if (!this.children || this.children.length == 0)
            return;
        this.children[0].element.setAttribute("tabindex", "-1");
    }



    ///////////////////////////// Public Methods //////////////////////////////

    // Add a menu item
    add(item) {
        super.add(item);
        if (item.menu)
            this.element.append(item.menu.element);
        this.children[0].element.setAttribute("tabindex", "0");
    }

    // Move focus into the component
    focus() {
        if (this.children.length != 0)
            this.children[0].focus();
    }

    // Remove a menu item
    remove(item) {

        // Remove the menu item
        if (item.parent == this && item.menu)
            item.menu.remove();
        super.remove(item);

        // Configure focusability
        if (this.children && !this.contains(document.activeElement)) {
            for (let x = 0; x < this.children.length; x++) {
                this.children[x].element
                    .setAttribute("tabindex", x == 0 ? "0" : "-1");
            }
        }

    }



    ///////////////////////////// Package Methods /////////////////////////////

    // Return focus to the application
    blur() {
        if (this.children) {
            for (let item of this.children) {
                item.expanded = false;
                item.element.blur();
            }
        }
        if (!this.parent || !this.parent.restoreFocus())
            this.focus();
    }

    // Update localization strings
    localize() {
        this.localizeLabel(this.element);
    }

}

export { register };