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

   1 import {EditorContainerUiElement, EditorUiElement} from "../core";
   2 import {EditorDropdownButton} from "./dropdown-button";
   3 import moreHorizontal from "@icons/editor/more-horizontal.svg"
   4 import {el} from "../../../utils/dom";
   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             button: {
  19                 label: 'More',
  20                 icon: moreHorizontal,
  21             },
  22         }, []);
  23         this.addChildren(this.overflowButton);
  24     }
  25
  26     protected buildDOM(): HTMLElement {
  27         const slicePosition = this.content.length > this.size ? this.size - 1 : this.size;
  28         const visibleChildren = this.content.slice(0, slicePosition);
  29         const invisibleChildren = this.content.slice(slicePosition);
  30
  31         const visibleElements = visibleChildren.map(child => child.getDOMElement());
  32         if (invisibleChildren.length > 0) {
  33             this.removeChildren(...invisibleChildren);
  34             this.overflowButton.insertItems(...invisibleChildren);
  35             visibleElements.push(this.overflowButton.getDOMElement());
  36         }
  37
  38         return el('div', {
  39             class: 'editor-overflow-container',
  40         }, visibleElements);
  41     }
  42
  43
  44 }