webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Lexical: Started table menu options

Browse Source 
Updated UI elements to handle new scenarios needed in more complex table
menu
This commit is contained in:
Dan Brown
2024-08-02 11:16:54 +01:00
parent 13f8f39dd5
commit 6b06d490c5
9 changed files with 101 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts
View File

@@ -3,22 +3,34 @@ import {handleDropdown} from "../helpers/dropdowns";
import {EditorContainerUiElement, EditorUiElement} from "../core";
import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
export type EditorDropdownButtonOptions = {
showOnHover?: boolean;
direction?: 'vertical'|'horizontal';
button: EditorBasicButtonDefinition|EditorButton;
};
const defaultOptions: EditorDropdownButtonOptions = {
showOnHover: false,
direction: 'horizontal',
button: {label: 'Menu'},
}
export class EditorDropdownButton extends EditorContainerUiElement {
protected button: EditorButton;
protected childItems: EditorUiElement[];
protected open: boolean = false;
protected showOnHover: boolean = false;
protected options: EditorDropdownButtonOptions;
constructor(button: EditorBasicButtonDefinition|EditorButton, showOnHover: boolean, children: EditorUiElement[]) {
constructor(options: EditorDropdownButtonOptions, children: EditorUiElement[]) {
super(children);
this.childItems = children;
this.showOnHover = showOnHover;
this.options = Object.assign(defaultOptions, options);
if (button instanceof EditorButton) {
this.button = button;
if (options.button instanceof EditorButton) {
this.button = options.button;
} else {
this.button = new EditorButton({
...button,
...options.button,
action() {
return false;
},
@@ -41,7 +53,7 @@ export class EditorDropdownButton extends EditorContainerUiElement {
const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
const menu = el('div', {
class: 'editor-dropdown-menu',
class: `editor-dropdown-menu editor-dropdown-menu-${this.options.direction}`,
hidden: 'true',
}, childElements);
@@ -50,7 +62,7 @@ export class EditorDropdownButton extends EditorContainerUiElement {
}, [button, menu]);
handleDropdown({toggle : button, menu : menu,
showOnHover: this.showOnHover,
showOnHover: this.options.showOnHover,
onOpen : () => {
this.open = true;
this.getContext().manager.triggerStateUpdateForElement(this.button);