BookStack/resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts

44 lines
1.5 KiB
TypeScript
Raw Normal View History

2024-06-27 23:28:06 +08:00
import {EditorContainerUiElement, EditorUiElement} from "../core";
import {el} from "../../../helpers";
import {EditorDropdownButton} from "./dropdown-button";
import moreHorizontal from "@icons/editor/more-horizontal.svg"
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,
},
}, []);
2024-06-27 23:28:06 +08:00
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);
2024-06-27 23:28:06 +08:00
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);
}
}