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

   1 import {el} from "../../../helpers";
   2 import {handleDropdown} from "../helpers/dropdowns";
   3 import {EditorContainerUiElement, EditorUiElement} from "../core";
   4 import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
   5
   6 export class EditorDropdownButton extends EditorContainerUiElement {
   7     protected button: EditorButton;
   8     protected childItems: EditorUiElement[];
   9     protected open: boolean = false;
  10
  11     constructor(button: EditorBasicButtonDefinition|EditorButton, children: EditorUiElement[]) {
  12         super(children);
  13         this.childItems = children
  14
  15         if (button instanceof EditorButton) {
  16             this.button = button;
  17         } else {
  18             this.button = new EditorButton({
  19                 ...button,
  20                 action() {
  21                     return false;
  22                 },
  23                 isActive: () => {
  24                     return this.open;
  25                 }
  26             });
  27         }
  28
  29         this.children.push(this.button);
  30     }
  31
  32     protected buildDOM(): HTMLElement {
  33         const button = this.button.getDOMElement();
  34
  35         const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
  36         const menu = el('div', {
  37             class: 'editor-dropdown-menu',
  38             hidden: 'true',
  39         }, childElements);
  40
  41         const wrapper = el('div', {
  42             class: 'editor-dropdown-menu-container',
  43         }, [button, menu]);
  44
  45         handleDropdown(button, menu, () => {
  46             this.open = true;
  47             this.getContext().manager.triggerStateUpdate(this.button);
  48         }, () => {
  49             this.open = false;
  50             this.getContext().manager.triggerStateUpdate(this.button);
  51         });
  52
  53         return wrapper;
  54     }
  55 }