pvbemu/web/toolkit/Menu.js

93 lines
2.3 KiB
JavaScript

let register = Toolkit => Toolkit.Menu =
// Pop-up menu container
class Menu extends Toolkit.Component {
///////////////////////// Initialization Methods //////////////////////////
constructor(app, options = {}) {
super(app, Object.assign({
class : "tk menu",
id : Toolkit.id(),
role : "menu",
visibility: true,
visible : false
}, options, { style: Object.assign({
display : "inline-flex",
flexDirection: "column",
position : "absolute",
zIndex : "1"
}, options.style || {}) }));
// Configure instance fields
this.parent = null;
// Configure event handlers
this.addEventListener("focusout", e=>this.onBlur(e));
}
///////////////////////////// Event Handlers //////////////////////////////
// Child blur
onBlur(e) {
if (this.parent instanceof Toolkit.MenuItem)
this.parent.onBlur(e);
}
///////////////////////////// Public Methods //////////////////////////////
// Add a child menu item
add(item) {
if (!(item instanceof Toolkit.MenuItem) || !super.add(item))
return false;
this.detectIcons();
return true;
}
// Add a sepearator
addSeparator() {
let item = new Toolkit.Component(this.app, { role: "separator" });
super.add(item);
return item;
}
// Remove the menu from its parent menu item or remove a child menu item
remove() {
// Remove child
if (arguments.length != 0) {
if (!super.remove.apply(this, arguments))
return false;
this.detectIcons();
return true;
}
// Remove from parent
this.parent = null;
this.element.remove();
this.element.removeAttribute("aria-labelledby");
this.setVisible(false);
return null;
}
///////////////////////////// Package Methods /////////////////////////////
// Show or hide the icons column
detectIcons() {
this.element.classList[
this.children && this.children.find(i=>
i.visible && i.type == "checkbox") ?
"add" : "remove"
]("icons");
}
};
export { register };