BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/toolbars.ts

   1 import {EditorContainerUiElement, EditorUiElement} from "./core";
   2 import {el} from "../../helpers";
   3
   4 export type EditorContextToolbarDefinition = {
   5     selector: string;
   6     content: EditorUiElement[],
   7     displayTargetLocator?: (originalTarget: HTMLElement) => HTMLElement;
   8 };
   9
  10 export class EditorContextToolbar extends EditorContainerUiElement {
  11
  12     protected buildDOM(): HTMLElement {
  13         return el('div', {
  14             class: 'editor-context-toolbar',
  15         }, this.getChildren().map(child => child.getDOMElement()));
  16     }
  17
  18     attachTo(target: HTMLElement) {
  19         const targetBounds = target.getBoundingClientRect();
  20         const dom = this.getDOMElement();
  21         const domBounds = dom.getBoundingClientRect();
  22
  23         const targetMid = targetBounds.left + (targetBounds.width / 2);
  24         const targetLeft = targetMid - (domBounds.width / 2);
  25         dom.style.top = (targetBounds.bottom + 6) + 'px';
  26         dom.style.left = targetLeft + 'px';
  27     }
  28
  29     insert(children: EditorUiElement[]) {
  30         this.addChildren(...children);
  31         const dom = this.getDOMElement();
  32         dom.append(...children.map(child => child.getDOMElement()));
  33     }
  34
  35     empty() {
  36         const children = this.getChildren();
  37         for (const child of children) {
  38             child.getDOMElement().remove();
  39         }
  40         this.removeChildren(...children);
  41     }
  42 }