mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-08 15:21:56 +03:00
1243108e0f
Now toolbars stay open on mouse-out, and close on other toolbar open, outside click or an accepted action. To support: - Added new system to track and manage open dropdowns. - Added way for buttons to optionally emit events upon actions. - Added way to listen for events. - Used the above to control when dropdowns should hide on action, since some dont (like overflow containers and split dropdown buttons).
45 lines
1.5 KiB
TypeScript
45 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,
|
|
},
|
|
hideOnAction: false,
|
|
}, []);
|
|
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);
|
|
}
|
|
|
|
|
|
} |