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     protected showOnHover: boolean = false;
  11
  12     constructor(button: EditorBasicButtonDefinition|EditorButton, showOnHover: boolean, children: EditorUiElement[]) {
  13         super(children);
  14         this.childItems = children;
  15         this.showOnHover = showOnHover;
  16
  17         if (button instanceof EditorButton) {
  18             this.button = button;
  19         } else {
  20             this.button = new EditorButton({
  21                 ...button,
  22                 action() {
  23                     return false;
  24                 },
  25                 isActive: () => {
  26                     return this.open;
  27                 }
  28             });
  29         }
  30
  31         this.addChildren(this.button);
  32     }
  33
  34     insertItems(...items: EditorUiElement[]) {
  35         this.addChildren(...items);
  36         this.childItems.push(...items);
  37     }
  38
  39     protected buildDOM(): HTMLElement {
  40         const button = this.button.getDOMElement();
  41
  42         const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
  43         const menu = el('div', {
  44             class: 'editor-dropdown-menu',
  45             hidden: 'true',
  46         }, childElements);
  47
  48         const wrapper = el('div', {
  49             class: 'editor-dropdown-menu-container',
  50         }, [button, menu]);
  51
  52         handleDropdown({toggle : button, menu : menu,
  53             showOnHover: this.showOnHover,
  54             onOpen : () => {
  55             this.open = true;
  56             this.getContext().manager.triggerStateUpdateForElement(this.button);
  57         }, onClose : () => {
  58             this.open = false;
  59             this.getContext().manager.triggerStateUpdateForElement(this.button);
  60         }});
  61
  62         return wrapper;
  63     }
  64 }