107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
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 };
|