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         }, false, []);
  21         this.addChildren(this.overflowButton);
  22     }
  23
  24     protected buildDOM(): HTMLElement {
  25         const slicePosition = this.content.length > this.size ? this.size - 1 : this.size;
  26         const visibleChildren = this.content.slice(0, slicePosition);
  27         const invisibleChildren = this.content.slice(slicePosition);
  28
  29         const visibleElements = visibleChildren.map(child => child.getDOMElement());
  30         if (invisibleChildren.length > 0) {
  31             this.removeChildren(...invisibleChildren);
  32             this.overflowButton.insertItems(...invisibleChildren);
  33             visibleElements.push(this.overflowButton.getDOMElement());
  34         }
  35
  36         return el('div', {
  37             class: 'editor-overflow-container',
  38         }, visibleElements);
  39     }
  40
  41
  42 }