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

   1 import {EditorContainerUiElement, EditorUiElement} from "../core";
   2 import {el} from "../../../utils/dom";
   3 import {EditorButton} from "../buttons";
   4 import {EditorDropdownButton} from "./dropdown-button";
   5 import caretDownIcon from "@icons/caret-down-large.svg";
   6
   7 export class EditorButtonWithMenu extends EditorContainerUiElement {
   8     protected button: EditorButton;
   9     protected dropdownButton: EditorDropdownButton;
  10
  11     constructor(button: EditorButton, menuItems: EditorUiElement[]) {
  12         super([button]);
  13
  14         this.button = button;
  15         this.dropdownButton = new EditorDropdownButton({
  16             button: {label: 'Menu', icon: caretDownIcon},
  17             showOnHover: false,
  18             direction: 'vertical',
  19         }, menuItems);
  20         this.addChildren(this.dropdownButton);
  21     }
  22
  23     buildDOM(): HTMLElement {
  24         return el('div', {
  25             class: 'editor-button-with-menu-container',
  26         }, [
  27             this.button.getDOMElement(),
  28             this.dropdownButton.getDOMElement()
  29         ]);
  30     }
  31 }