BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts

   1 import {EditorContainerUiElement, EditorUiElement} from "../core";
   2 import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
   3 import {el} from "../../../utils/dom";
   4 import {EditorMenuButton} from "./menu-button";
   5
   6 export type EditorDropdownButtonOptions = {
   7     showOnHover?: boolean;
   8     direction?: 'vertical'|'horizontal';
   9     showAside?: boolean;
  10     hideOnAction?: boolean;
  11     button: EditorBasicButtonDefinition|EditorButton;
  12 };
  13
  14 const defaultOptions: EditorDropdownButtonOptions = {
  15     showOnHover: false,
  16     direction: 'horizontal',
  17     showAside: undefined,
  18     hideOnAction: true,
  19     button: {label: 'Menu'},
  20 }
  21
  22 export class EditorDropdownButton extends EditorContainerUiElement {
  23     protected button: EditorButton;
  24     protected childItems: EditorUiElement[];
  25     protected open: boolean = false;
  26     protected options: EditorDropdownButtonOptions;
  27
  28     constructor(options: EditorDropdownButtonOptions, children: EditorUiElement[]) {
  29         super(children);
  30         this.childItems = children;
  31         this.options = Object.assign({}, defaultOptions, options);
  32
  33         if (options.button instanceof EditorButton) {
  34             this.button = options.button;
  35         } else {
  36             const type = options.button.format === 'long' ? EditorMenuButton : EditorButton;
  37             this.button = new type({
  38                 ...options.button,
  39                 action() {
  40                     return false;
  41                 },
  42                 isActive: () => {
  43                     return this.open;
  44                 },
  45             });
  46         }
  47
  48         this.addChildren(this.button);
  49     }
  50
  51     insertItems(...items: EditorUiElement[]) {
  52         this.addChildren(...items);
  53         this.childItems.push(...items);
  54     }
  55
  56     protected buildDOM(): HTMLElement {
  57         const button = this.button.getDOMElement();
  58
  59         const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
  60         const menu = el('div', {
  61             class: `editor-dropdown-menu editor-dropdown-menu-${this.options.direction}`,
  62             hidden: 'true',
  63         }, childElements);
  64
  65         const wrapper = el('div', {
  66             class: 'editor-dropdown-menu-container',
  67         }, [button, menu]);
  68
  69         this.getContext().manager.dropdowns.handle({toggle: button, menu : menu,
  70             showOnHover: this.options.showOnHover,
  71             showAside: typeof this.options.showAside === 'boolean' ? this.options.showAside : (this.options.direction === 'vertical'),
  72             onOpen : () => {
  73             this.open = true;
  74             this.getContext().manager.triggerStateUpdateForElement(this.button);
  75         }, onClose : () => {
  76             this.open = false;
  77             this.getContext().manager.triggerStateUpdateForElement(this.button);
  78         }});
  79
  80         if (this.options.hideOnAction) {
  81             this.onEvent('button-action', () => {
  82                 this.getContext().manager.dropdowns.closeAll();
  83             }, wrapper);
  84         }
  85
  86         return wrapper;
  87     }
  88 }