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

   1 import {EditorContainerUiElement, EditorUiElement} from "./core";
   2
   3 import {el} from "../../utils/dom";
   4
   5 export type EditorContextToolbarDefinition = {
   6     selector: string;
   7     content: EditorUiElement[],
   8     displayTargetLocator?: (originalTarget: HTMLElement) => HTMLElement;
   9 };
  10
  11 export class EditorContextToolbar extends EditorContainerUiElement {
  12
  13     protected target: HTMLElement;
  14
  15     constructor(target: HTMLElement, children: EditorUiElement[]) {
  16         super(children);
  17         this.target = target;
  18     }
  19
  20     protected buildDOM(): HTMLElement {
  21         return el('div', {
  22             class: 'editor-context-toolbar',
  23         }, this.getChildren().map(child => child.getDOMElement()));
  24     }
  25
  26     updatePosition() {
  27         const editorBounds = this.getContext().scrollDOM.getBoundingClientRect();
  28         const targetBounds = this.target.getBoundingClientRect();
  29         const dom = this.getDOMElement();
  30         const domBounds = dom.getBoundingClientRect();
  31
  32         const showing = targetBounds.bottom > editorBounds.top
  33             && targetBounds.top < editorBounds.bottom;
  34
  35         dom.hidden = !showing;
  36
  37         if (!showing) {
  38             return;
  39         }
  40
  41         const showAbove: boolean = targetBounds.bottom + 6 + domBounds.height > editorBounds.bottom;
  42         dom.classList.toggle('is-above', showAbove);
  43
  44         const targetMid = targetBounds.left + (targetBounds.width / 2);
  45         const targetLeft = targetMid - (domBounds.width / 2);
  46         if (showAbove) {
  47             dom.style.top = (targetBounds.top - 6 - domBounds.height) + 'px';
  48         } else {
  49             dom.style.top = (targetBounds.bottom + 6) + 'px';
  50         }
  51         dom.style.left = targetLeft + 'px';
  52     }
  53
  54     insert(children: EditorUiElement[]) {
  55         this.addChildren(...children);
  56         const dom = this.getDOMElement();
  57         dom.append(...children.map(child => child.getDOMElement()));
  58     }
  59
  60     protected empty() {
  61         const children = this.getChildren();
  62         for (const child of children) {
  63             child.getDOMElement().remove();
  64         }
  65         this.removeChildren(...children);
  66     }
  67
  68     destroy() {
  69         this.empty();
  70         this.getDOMElement().remove();
  71     }
  72 }