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

   1 import {EditorUiStateUpdate, EditorContainerUiElement} from "../core";
   2 import {EditorButton} from "../buttons";
   3 import {el} from "../../../utils/dom";
   4
   5 export class EditorFormatMenu extends EditorContainerUiElement {
   6     buildDOM(): HTMLElement {
   7         const childElements: HTMLElement[] = this.getChildren().map(child => child.getDOMElement());
   8         const menu = el('div', {
   9             class: 'editor-format-menu-dropdown editor-dropdown-menu editor-dropdown-menu-vertical',
  10             hidden: 'true',
  11         }, childElements);
  12
  13         const toggle = el('button', {
  14             class: 'editor-format-menu-toggle editor-button',
  15             type: 'button',
  16         }, [this.trans('Formats')]);
  17
  18         const wrapper = el('div', {
  19             class: 'editor-format-menu editor-dropdown-menu-container',
  20         }, [toggle, menu]);
  21
  22         this.getContext().manager.dropdowns.handle({toggle : toggle, menu : menu});
  23
  24         this.onEvent('button-action', () => {
  25             this.getContext().manager.dropdowns.closeAll();
  26         }, wrapper);
  27
  28         return wrapper;
  29     }
  30
  31     updateState(state: EditorUiStateUpdate) {
  32         super.updateState(state);
  33
  34         for (const child of this.children) {
  35             if (child instanceof EditorButton && child.isActive()) {
  36                 this.updateToggleLabel(child.getLabel());
  37                 return;
  38             }
  39
  40             if (child instanceof EditorContainerUiElement) {
  41                 for (const grandchild of child.getChildren()) {
  42                     if (grandchild instanceof EditorButton && grandchild.isActive()) {
  43                         this.updateToggleLabel(grandchild.getLabel());
  44                         return;
  45                     }
  46                 }
  47             }
  48         }
  49
  50         this.updateToggleLabel(this.trans('Formats'));
  51     }
  52
  53     protected updateToggleLabel(text: string): void {
  54         const button = this.getDOMElement().querySelector('button');
  55         if (button) {
  56             button.innerText = text;
  57         }
  58     }
  59 }