add context menu

public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js

@@ -0,0 +1,108 @@
+import { QuickReply } from '../../QuickReply.js';
+import { QuickReplyContextLink } from '../../QuickReplyContextLink.js';
+import { QuickReplySet } from '../../QuickReplySet.js';
+import { MenuHeader } from './MenuHeader.js';
+import { MenuItem } from './MenuItem.js';
+
+export class ContextMenu {
+    /**@type {MenuItem[]}*/ itemList = [];
+    /**@type {Boolean}*/ isActive = false;
+
+    /**@type {HTMLElement}*/ root;
+    /**@type {HTMLElement}*/ menu;
+
+
+
+
+    constructor(/**@type {QuickReply}*/qr) {
+        // this.itemList = items;
+        this.itemList = this.build(qr).children;
+        this.itemList.forEach(item => {
+            item.onExpand = () => {
+                this.itemList.filter(it => it != item)
+                    .forEach(it => it.collapse());
+            };
+        });
+    }
+
+    /**
+     * @param {QuickReply} qr
+     * @param {String} chainedMessage
+     * @param {QuickReplySet[]} hierarchy
+     * @param {String[]} labelHierarchy
+     */
+    build(qr, chainedMessage = null, hierarchy = [], labelHierarchy = []) {
+        const tree = {
+            label: qr.label,
+            message: (chainedMessage && qr.message ? `${chainedMessage} | ` : '') + qr.message,
+            children: [],
+        };
+        qr.contextList.forEach((cl) => {
+            if (!hierarchy.includes(cl.set)) {
+                const nextHierarchy = [...hierarchy, cl.set];
+                const nextLabelHierarchy = [...labelHierarchy, tree.label];
+                tree.children.push(new MenuHeader(cl.set.name));
+                cl.set.qrList.forEach(subQr => {
+                    const subTree = this.build(subQr, cl.isChained ? tree.message : null, nextHierarchy, nextLabelHierarchy);
+                    tree.children.push(new MenuItem(
+                        subTree.label,
+                        subTree.message,
+                        (evt) => {
+                            evt.stopPropagation();
+                            const finalQr = Object.assign(new QuickReply(), subQr);
+                            finalQr.message = subTree.message.replace(/%%parent(-\d+)?%%/g, (_, index) => {
+                                return nextLabelHierarchy.slice(parseInt(index ?? '-1'))[0];
+                            });
+                            cl.set.execute(finalQr);
+                        },
+                        subTree.children,
+                    ));
+                });
+            }
+        });
+        return tree;
+    }
+
+    render() {
+        if (!this.root) {
+            const blocker = document.createElement('div'); {
+                this.root = blocker;
+                blocker.classList.add('ctx-blocker');
+                blocker.addEventListener('click', () => this.hide());
+                const menu = document.createElement('ul'); {
+                    this.menu = menu;
+                    menu.classList.add('list-group');
+                    menu.classList.add('ctx-menu');
+                    this.itemList.forEach(it => menu.append(it.render()));
+                    blocker.append(menu);
+                }
+            }
+        }
+        return this.root;
+    }
+
+
+
+
+    show({ clientX, clientY }) {
+        if (this.isActive) return;
+        this.isActive = true;
+        this.render();
+        this.menu.style.bottom = `${window.innerHeight - clientY}px`;
+        this.menu.style.left = `${clientX}px`;
+        document.body.append(this.root);
+    }
+    hide() {
+        if (this.root) {
+            this.root.remove();
+        }
+        this.isActive = false;
+    }
+    toggle(/**@type {PointerEvent}*/evt) {
+        if (this.isActive) {
+            this.hide();
+        } else {
+            this.show(evt);
+        }
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js

@@ -0,0 +1,20 @@
+import { MenuItem } from './MenuItem.js';
+
+export class MenuHeader extends MenuItem {
+    constructor(/**@type {String}*/label) {
+        super(label, null, null);
+    }
+
+
+    render() {
+        if (!this.root) {
+            const item = document.createElement('li'); {
+                this.root = item;
+                item.classList.add('list-group-item');
+                item.classList.add('ctx-header');
+                item.append(this.label);
+            }
+        }
+        return this.root;
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js

@@ -0,0 +1,76 @@
+import { SubMenu } from './SubMenu.js';
+
+export class MenuItem {
+    /**@type {String}*/ label;
+    /**@type {Object}*/ value;
+    /**@type {Function}*/ callback;
+    /**@type {MenuItem[]}*/ childList = [];
+    /**@type {SubMenu}*/ subMenu;
+    /**@type {Boolean}*/ isForceExpanded = false;
+
+    /**@type {HTMLElement}*/ root;
+
+    /**@type {Function}*/ onExpand;
+
+
+
+
+    constructor(/**@type {String}*/label, /**@type {Object}*/value, /**@type {function}*/callback, /**@type {MenuItem[]}*/children = []) {
+        this.label = label;
+        this.value = value;
+        this.callback = callback;
+        this.childList = children;
+    }
+
+
+    render() {
+        if (!this.root) {
+            const item = document.createElement('li'); {
+                this.root = item;
+                item.classList.add('list-group-item');
+                item.classList.add('ctx-item');
+                item.title = this.value;
+                if (this.callback) {
+                    item.addEventListener('click', (evt) => this.callback(evt, this));
+                }
+                item.append(this.label);
+                if (this.childList.length > 0) {
+                    item.classList.add('ctx-has-children');
+                    const sub = new SubMenu(this.childList);
+                    this.subMenu = sub;
+                    const trigger = document.createElement('div'); {
+                        trigger.classList.add('ctx-expander');
+                        trigger.textContent = '⋮';
+                        trigger.addEventListener('click', (evt) => {
+                            evt.stopPropagation();
+                            this.toggle();
+                        });
+                        item.append(trigger);
+                    }
+                    item.addEventListener('mouseover', () => sub.show(item));
+                    item.addEventListener('mouseleave', () => sub.hide());
+
+                }
+            }
+        }
+        return this.root;
+    }
+
+
+    expand() {
+        this.subMenu?.show(this.root);
+        if (this.onExpand) {
+            this.onExpand();
+        }
+    }
+    collapse() {
+        this.subMenu?.hide();
+    }
+    toggle() {
+        if (this.subMenu.isActive) {
+            this.expand();
+        } else {
+            this.collapse();
+        }
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/SubMenu.js

@@ -0,0 +1,66 @@
+/**
+ * @typedef {import('./MenuItem.js').MenuItem} MenuItem
+ */
+
+export class SubMenu {
+    /**@type {MenuItem[]}*/ itemList = [];
+    /**@type {Boolean}*/ isActive = false;
+
+    /**@type {HTMLElement}*/ root;
+
+
+
+
+    constructor(/**@type {MenuItem[]}*/items) {
+        this.itemList = items;
+    }
+
+    render() {
+        if (!this.root) {
+            const menu = document.createElement('ul'); {
+                this.root = menu;
+                menu.classList.add('list-group');
+                menu.classList.add('ctx-menu');
+                menu.classList.add('ctx-sub-menu');
+                this.itemList.forEach(it => menu.append(it.render()));
+            }
+        }
+        return this.root;
+    }
+
+
+
+
+    show(/**@type {HTMLElement}*/parent) {
+        if (this.isActive) return;
+        this.isActive = true;
+        this.render();
+        parent.append(this.root);
+        requestAnimationFrame(() => {
+            const rect = this.root.getBoundingClientRect();
+            console.log(window.innerHeight, rect);
+            if (rect.bottom > window.innerHeight - 5) {
+                this.root.style.top = `${window.innerHeight - 5 - rect.bottom}px`;
+            }
+            if (rect.right > window.innerWidth - 5) {
+                this.root.style.left = 'unset';
+                this.root.style.right = '100%';
+            }
+        });
+    }
+    hide() {
+        if (this.root) {
+            this.root.remove();
+            this.root.style.top = '';
+            this.root.style.left = '';
+        }
+        this.isActive = false;
+    }
+    toggle(/**@type {HTMLElement}*/parent) {
+        if (this.isActive) {
+            this.hide();
+        } else {
+            this.show(parent);
+        }
+    }
+}