BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts

   1 import {EditorContainerUiElement, EditorUiElement} from "../core";
   2 import {el} from "../../../helpers";
   3 import {EditorDropdownButton} from "./dropdown-button";
   4 import moreHorizontal from "@icons/editor/more-horizontal.svg"
   5
   6
   7 export class EditorOverflowContainer extends EditorContainerUiElement {
   8
   9     protected size: number;
  10     protected overflowButton: EditorDropdownButton;
  11     protected content: EditorUiElement[];
  12
  13     constructor(size: number, children: EditorUiElement[]) {
  14         super(children);
  15         this.size = size;
  16         this.content = children;
  17         this.overflowButton = new EditorDropdownButton({
  18             label: 'More',
  19             icon: moreHorizontal,
  20         }, []);
  21         this.addChildren(this.overflowButton);
  22     }
  23
  24     protected buildDOM(): HTMLElement {
  25         const visibleChildren = this.content.slice(0, this.size);
  26         const invisibleChildren = this.content.slice(this.size);
  27
  28         const visibleElements = visibleChildren.map(child => child.getDOMElement());
  29         if (invisibleChildren.length > 0) {
  30             this.removeChildren(...invisibleChildren);
  31             this.overflowButton.insertItems(...invisibleChildren);
  32             visibleElements.push(this.overflowButton.getDOMElement());
  33         }
  34
  35         return el('div', {
  36             class: 'editor-overflow-container',
  37         }, visibleElements);
  38     }
  39
  40
  41 }