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.addChildren(this.button);
  30     }
  31
  32     insertItems(...items: EditorUiElement[]) {
  33         this.addChildren(...items);
  34         this.childItems.push(...items);
  35     }
  36
  37     protected buildDOM(): HTMLElement {
  38         const button = this.button.getDOMElement();
  39
  40         const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
  41         const menu = el('div', {
  42             class: 'editor-dropdown-menu',
  43             hidden: 'true',
  44         }, childElements);
  45
  46         const wrapper = el('div', {
  47             class: 'editor-dropdown-menu-container',
  48         }, [button, menu]);
  49
  50         handleDropdown(button, menu, () => {
  51             this.open = true;
  52             this.getContext().manager.triggerStateUpdateForElement(this.button);
  53         }, () => {
  54             this.open = false;
  55             this.getContext().manager.triggerStateUpdateForElement(this.button);
  56         });
  57
  58         return wrapper;
  59     }
  60 }