BookStack/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts

60 lines
1.8 KiB
TypeScript
Raw Normal View History

2024-06-13 02:51:42 +08:00
import {el} from "../../../helpers";
import {handleDropdown} from "../helpers/dropdowns";
import {EditorContainerUiElement, EditorUiElement} from "../core";
import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
export class EditorDropdownButton extends EditorContainerUiElement {
protected button: EditorButton;
protected childItems: EditorUiElement[];
protected open: boolean = false;
constructor(button: EditorBasicButtonDefinition|EditorButton, children: EditorUiElement[]) {
2024-06-13 02:51:42 +08:00
super(children);
this.childItems = children
if (button instanceof EditorButton) {
this.button = button;
} else {
this.button = new EditorButton({
...button,
action() {
return false;
},
isActive: () => {
return this.open;
}
});
}
2024-06-13 02:51:42 +08:00
2024-06-27 23:28:06 +08:00
this.addChildren(this.button);
}
insertItems(...items: EditorUiElement[]) {
this.addChildren(...items);
this.childItems.push(...items);
2024-06-13 02:51:42 +08:00
}
protected buildDOM(): HTMLElement {
const button = this.button.getDOMElement();
const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
const menu = el('div', {
class: 'editor-dropdown-menu',
hidden: 'true',
}, childElements);
const wrapper = el('div', {
class: 'editor-dropdown-menu-container',
}, [button, menu]);
handleDropdown(button, menu, () => {
this.open = true;
this.getContext().manager.triggerStateUpdate(this.button);
}, () => {
this.open = false;
this.getContext().manager.triggerStateUpdate(this.button);
});
return wrapper;
}
}