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