44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import {EditorContainerUiElement, EditorUiElement} from "../core";
|
|
import {EditorDropdownButton} from "./dropdown-button";
|
|
import moreHorizontal from "@icons/editor/more-horizontal.svg"
|
|
import {el} from "../../../utils/dom";
|
|
|
|
|
|
export class EditorOverflowContainer extends EditorContainerUiElement {
|
|
|
|
protected size: number;
|
|
protected overflowButton: EditorDropdownButton;
|
|
protected content: EditorUiElement[];
|
|
|
|
constructor(size: number, children: EditorUiElement[]) {
|
|
super(children);
|
|
this.size = size;
|
|
this.content = children;
|
|
this.overflowButton = new EditorDropdownButton({
|
|
button: {
|
|
label: 'More',
|
|
icon: moreHorizontal,
|
|
},
|
|
}, []);
|
|
this.addChildren(this.overflowButton);
|
|
}
|
|
|
|
protected buildDOM(): HTMLElement {
|
|
const slicePosition = this.content.length > this.size ? this.size - 1 : this.size;
|
|
const visibleChildren = this.content.slice(0, slicePosition);
|
|
const invisibleChildren = this.content.slice(slicePosition);
|
|
|
|
const visibleElements = visibleChildren.map(child => child.getDOMElement());
|
|
if (invisibleChildren.length > 0) {
|
|
this.removeChildren(...invisibleChildren);
|
|
this.overflowButton.insertItems(...invisibleChildren);
|
|
visibleElements.push(this.overflowButton.getDOMElement());
|
|
}
|
|
|
|
return el('div', {
|
|
class: 'editor-overflow-container',
|
|
}, visibleElements);
|
|
}
|
|
|
|
|
|
} |