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(buttonDefinition: EditorBasicButtonDefinition, children: EditorUiElement[]) {
  12         super(children);
  13         this.childItems = children
  14
  15         this.button = new EditorButton({
  16             ...buttonDefinition,
  17             action() {
  18                 return false;
  19             },
  20             isActive: () => {
  21                 return this.open;
  22             }
  23         });
  24
  25         this.children.push(this.button);
  26     }
  27
  28     protected buildDOM(): HTMLElement {
  29         const button = this.button.getDOMElement();
  30
  31         const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
  32         const menu = el('div', {
  33             class: 'editor-dropdown-menu',
  34             hidden: 'true',
  35         }, childElements);
  36
  37         const wrapper = el('div', {
  38             class: 'editor-dropdown-menu-container',
  39         }, [button, menu]);
  40
  41         handleDropdown(button, menu, () => {
  42             this.open = true;
  43             this.getContext().manager.triggerStateUpdate(this.button);
  44         }, () => {
  45             this.open = false;
  46             this.getContext().manager.triggerStateUpdate(this.button);
  47         });
  48
  49         return wrapper;
  50     }
  51 }