Merge pull request #5725 from BookStackApp/md_plaintext

[bookstack] / resources / js / wysiwyg / ui / framework / blocks / dropdown-button.ts

diff --git a/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts b/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts
index 199c7728d8ac13f20cc79cb0f3db71c657fd54de..45cb74dd4ae57af234e070b138cf7c5a591a9148 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts
+++ b/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts
@@ -1,28 +1,56 @@
-import {el} from "../../../helpers";
-import {handleDropdown} from "../helpers/dropdowns";
 import {EditorContainerUiElement, EditorUiElement} from "../core";
 import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
+import {el} from "../../../utils/dom";
+import {EditorMenuButton} from "./menu-button";
+
+export type EditorDropdownButtonOptions = {
+    showOnHover?: boolean;
+    direction?: 'vertical'|'horizontal';
+    showAside?: boolean;
+    hideOnAction?: boolean;
+    button: EditorBasicButtonDefinition|EditorButton;
+};
+
+const defaultOptions: EditorDropdownButtonOptions = {
+    showOnHover: false,
+    direction: 'horizontal',
+    showAside: undefined,
+    hideOnAction: true,
+    button: {label: 'Menu'},
+}
 
 export class EditorDropdownButton extends EditorContainerUiElement {
     protected button: EditorButton;
     protected childItems: EditorUiElement[];
     protected open: boolean = false;
+    protected options: EditorDropdownButtonOptions;
 
-    constructor(buttonDefinition: EditorBasicButtonDefinition, children: EditorUiElement[]) {
+    constructor(options: EditorDropdownButtonOptions, children: EditorUiElement[]) {
         super(children);
-        this.childItems = children
-
-        this.button = new EditorButton({
-            ...buttonDefinition,
-            action() {
-                return false;
-            },
-            isActive: () => {
-                return this.open;
-            }
-        });
-
-        this.children.push(this.button);
+        this.childItems = children;
+        this.options = Object.assign({}, defaultOptions, options);
+
+        if (options.button instanceof EditorButton) {
+            this.button = options.button;
+        } else {
+            const type = options.button.format === 'long' ? EditorMenuButton : EditorButton;
+            this.button = new type({
+                ...options.button,
+                action() {
+                    return false;
+                },
+                isActive: () => {
+                    return this.open;
+                },
+            });
+        }
+
+        this.addChildren(this.button);
+    }
+
+    insertItems(...items: EditorUiElement[]) {
+        this.addChildren(...items);
+        this.childItems.push(...items);
     }
 
     protected buildDOM(): HTMLElement {
@@ -30,7 +58,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);
 
@@ -38,13 +66,22 @@ export class EditorDropdownButton extends EditorContainerUiElement {
             class: 'editor-dropdown-menu-container',
         }, [button, menu]);
 
-        handleDropdown(button, menu, () => {
+        this.getContext().manager.dropdowns.handle({toggle: button, menu : menu,
+            showOnHover: this.options.showOnHover,
+            showAside: typeof this.options.showAside === 'boolean' ? this.options.showAside : (this.options.direction === 'vertical'),
+            onOpen : () => {
             this.open = true;
-            this.getContext().manager.triggerStateUpdate(this.button);
-        }, () => {
+            this.getContext().manager.triggerStateUpdateForElement(this.button);
+        }, onClose : () => {
             this.open = false;
-            this.getContext().manager.triggerStateUpdate(this.button);
-        });
+            this.getContext().manager.triggerStateUpdateForElement(this.button);
+        }});
+
+        if (this.options.hideOnAction) {
+            this.onEvent('button-action', () => {
+                this.getContext().manager.dropdowns.closeAll();
+            }, wrapper);
+        }
 
         return wrapper;
     }