mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-08 15:21:56 +03:00
Now toolbars stay open on mouse-out, and close on other toolbar open, outside click or an accepted action. To support: - Added new system to track and manage open dropdowns. - Added way for buttons to optionally emit events upon actions. - Added way to listen for events. - Used the above to control when dropdowns should hide on action, since some dont (like overflow containers and split dropdown buttons).
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import {EditorUiStateUpdate, EditorContainerUiElement} from "../core";
|
|
import {EditorButton} from "../buttons";
|
|
import {el} from "../../../utils/dom";
|
|
|
|
export class EditorFormatMenu extends EditorContainerUiElement {
|
|
buildDOM(): HTMLElement {
|
|
const childElements: HTMLElement[] = this.getChildren().map(child => child.getDOMElement());
|
|
const menu = el('div', {
|
|
class: 'editor-format-menu-dropdown editor-dropdown-menu editor-dropdown-menu-vertical',
|
|
hidden: 'true',
|
|
}, childElements);
|
|
|
|
const toggle = el('button', {
|
|
class: 'editor-format-menu-toggle editor-button',
|
|
type: 'button',
|
|
}, [this.trans('Formats')]);
|
|
|
|
const wrapper = el('div', {
|
|
class: 'editor-format-menu editor-dropdown-menu-container',
|
|
}, [toggle, menu]);
|
|
|
|
this.getContext().manager.dropdowns.handle({toggle : toggle, menu : menu});
|
|
|
|
this.onEvent('button-action', () => {
|
|
this.getContext().manager.dropdowns.closeAll();
|
|
}, wrapper);
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
updateState(state: EditorUiStateUpdate) {
|
|
super.updateState(state);
|
|
|
|
for (const child of this.children) {
|
|
if (child instanceof EditorButton && child.isActive()) {
|
|
this.updateToggleLabel(child.getLabel());
|
|
return;
|
|
}
|
|
|
|
if (child instanceof EditorContainerUiElement) {
|
|
for (const grandchild of child.getChildren()) {
|
|
if (grandchild instanceof EditorButton && grandchild.isActive()) {
|
|
this.updateToggleLabel(grandchild.getLabel());
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.updateToggleLabel(this.trans('Formats'));
|
|
}
|
|
|
|
protected updateToggleLabel(text: string): void {
|
|
const button = this.getDOMElement().querySelector('button');
|
|
if (button) {
|
|
button.innerText = text;
|
|
}
|
|
}
|
|
} |