2024-06-13 02:51:42 +08:00
|
|
|
import {handleDropdown} from "../helpers/dropdowns";
|
|
|
|
import {EditorContainerUiElement, EditorUiElement} from "../core";
|
|
|
|
import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
|
2024-08-04 01:14:01 +08:00
|
|
|
import {el} from "../../../utils/dom";
|
2024-06-13 02:51:42 +08:00
|
|
|
|
2024-08-02 18:16:54 +08:00
|
|
|
export type EditorDropdownButtonOptions = {
|
|
|
|
showOnHover?: boolean;
|
|
|
|
direction?: 'vertical'|'horizontal';
|
|
|
|
button: EditorBasicButtonDefinition|EditorButton;
|
|
|
|
};
|
|
|
|
|
|
|
|
const defaultOptions: EditorDropdownButtonOptions = {
|
|
|
|
showOnHover: false,
|
|
|
|
direction: 'horizontal',
|
|
|
|
button: {label: 'Menu'},
|
|
|
|
}
|
|
|
|
|
2024-06-13 02:51:42 +08:00
|
|
|
export class EditorDropdownButton extends EditorContainerUiElement {
|
|
|
|
protected button: EditorButton;
|
|
|
|
protected childItems: EditorUiElement[];
|
|
|
|
protected open: boolean = false;
|
2024-08-02 18:16:54 +08:00
|
|
|
protected options: EditorDropdownButtonOptions;
|
2024-06-13 02:51:42 +08:00
|
|
|
|
2024-08-02 18:16:54 +08:00
|
|
|
constructor(options: EditorDropdownButtonOptions, children: EditorUiElement[]) {
|
2024-06-13 02:51:42 +08:00
|
|
|
super(children);
|
2024-07-04 23:16:16 +08:00
|
|
|
this.childItems = children;
|
2024-08-04 01:01:54 +08:00
|
|
|
this.options = Object.assign({}, defaultOptions, options);
|
2024-06-13 02:51:42 +08:00
|
|
|
|
2024-08-02 18:16:54 +08:00
|
|
|
if (options.button instanceof EditorButton) {
|
|
|
|
this.button = options.button;
|
2024-06-23 22:50:41 +08:00
|
|
|
} else {
|
|
|
|
this.button = new EditorButton({
|
2024-08-02 18:16:54 +08:00
|
|
|
...options.button,
|
2024-06-23 22:50:41 +08:00
|
|
|
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', {
|
2024-08-02 18:16:54 +08:00
|
|
|
class: `editor-dropdown-menu editor-dropdown-menu-${this.options.direction}`,
|
2024-06-13 02:51:42 +08:00
|
|
|
hidden: 'true',
|
|
|
|
}, childElements);
|
|
|
|
|
|
|
|
const wrapper = el('div', {
|
|
|
|
class: 'editor-dropdown-menu-container',
|
|
|
|
}, [button, menu]);
|
|
|
|
|
2024-08-04 01:01:54 +08:00
|
|
|
handleDropdown({toggle: button, menu : menu,
|
2024-08-02 18:16:54 +08:00
|
|
|
showOnHover: this.options.showOnHover,
|
2024-07-04 23:16:16 +08:00
|
|
|
onOpen : () => {
|
2024-06-13 02:51:42 +08:00
|
|
|
this.open = true;
|
2024-06-30 17:31:39 +08:00
|
|
|
this.getContext().manager.triggerStateUpdateForElement(this.button);
|
2024-07-04 23:16:16 +08:00
|
|
|
}, onClose : () => {
|
2024-06-13 02:51:42 +08:00
|
|
|
this.open = false;
|
2024-06-30 17:31:39 +08:00
|
|
|
this.getContext().manager.triggerStateUpdateForElement(this.button);
|
2024-07-04 23:16:16 +08:00
|
|
|
}});
|
2024-06-13 02:51:42 +08:00
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
}
|
|
|
|
}
|