|
import { generateId, wait } from "./shared_utils.js";
|
|
import { createElement as $el, getClosestOrSelf, setAttributes} from "./utils_dom.js";
|
|
|
|
|
|
|
|
|
|
class Menu {
|
|
|
|
private element: HTMLMenuElement = $el('menu.rgthree-menu');
|
|
private callbacks: Map<string, (e: PointerEvent) => Promise<boolean|void>> = new Map();
|
|
|
|
private handleWindowPointerDownBound = this.handleWindowPointerDown.bind(this);
|
|
|
|
constructor(options: MenuOption[]) {
|
|
this.setOptions(options);
|
|
this.element.addEventListener('pointerup', async (e) => {
|
|
const target = getClosestOrSelf(e.target as HTMLElement, "[data-callback],menu");
|
|
if (e.which !== 1) {
|
|
return;
|
|
}
|
|
const callback = target?.dataset?.['callback'];
|
|
if (callback) {
|
|
const halt = await this.callbacks.get(callback)?.(e);
|
|
if (halt !== false) {
|
|
this.close();
|
|
}
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.stopImmediatePropagation();
|
|
});
|
|
}
|
|
|
|
setOptions(options: MenuOption[]) {
|
|
for (const option of options) {
|
|
if (option.type === 'title') {
|
|
this.element.appendChild($el(`li`, {
|
|
html: option.label
|
|
}));
|
|
} else {
|
|
const id = generateId(8);
|
|
this.callbacks.set(id, async (e: PointerEvent) => { return option?.callback?.(e); });
|
|
this.element.appendChild($el(`li[role="button"][data-callback="${id}"]`, {
|
|
html: option.label
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
|
|
toElement() {
|
|
return this.element;
|
|
}
|
|
|
|
async open(e: PointerEvent) {
|
|
const parent = (e.target as HTMLElement).closest('div,dialog,body') as HTMLElement
|
|
parent.appendChild(this.element);
|
|
setAttributes(this.element, {
|
|
style: {
|
|
left: `${e.clientX + 16}px`,
|
|
top: `${e.clientY - 16}px`,
|
|
}
|
|
});
|
|
this.element.setAttribute('state', 'measuring-open');
|
|
await wait(16);
|
|
const rect = this.element.getBoundingClientRect();
|
|
if (rect.right > window.innerWidth) {
|
|
this.element.style.left = `${e.clientX - rect.width - 16}px`;
|
|
await wait(16);
|
|
}
|
|
this.element.setAttribute('state', 'open');
|
|
setTimeout(() => {
|
|
window.addEventListener('pointerdown', this.handleWindowPointerDownBound);
|
|
});
|
|
}
|
|
|
|
handleWindowPointerDown(e:PointerEvent) {
|
|
if (!this.element.contains(e.target as HTMLElement)) {
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
async close() {
|
|
window.removeEventListener('pointerdown', this.handleWindowPointerDownBound);
|
|
this.element.setAttribute('state', 'measuring-closed');
|
|
await wait(16);
|
|
this.element.setAttribute('state', 'closed');
|
|
this.element.remove();
|
|
}
|
|
|
|
isOpen() {
|
|
return (this.element.getAttribute('state') || '').includes('open');
|
|
}
|
|
|
|
}
|
|
|
|
type MenuOption = {
|
|
label: string;
|
|
type?: 'title'|'item'|'separator';
|
|
callback?: (e: PointerEvent) => void;
|
|
}
|
|
|
|
type MenuButtonOptions = {
|
|
icon: string;
|
|
options: MenuOption[];
|
|
}
|
|
|
|
export class MenuButton {
|
|
|
|
private options: MenuButtonOptions;
|
|
private menu: Menu;
|
|
|
|
private element: HTMLButtonElement = $el('button.rgthree-button[data-action="open-menu"]')
|
|
|
|
constructor(options: MenuButtonOptions) {
|
|
this.options = options;
|
|
this.element.innerHTML = options.icon;
|
|
this.menu = new Menu(options.options);
|
|
|
|
this.element.addEventListener('pointerdown', (e) => {
|
|
if (!this.menu.isOpen()) {
|
|
this.menu.open(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
toElement() {
|
|
return this.element;
|
|
}
|
|
|
|
} |
