1
/**
2
 * @typedef {import('./MenuItem.js').MenuItem} MenuItem
3
 */
4

5
export class SubMenu {
6
    /**@type {MenuItem[]}*/ itemList = [];
7
    /**@type {Boolean}*/ isActive = false;
8

9
    /**@type {HTMLElement}*/ root;
10

11

12
    constructor(/**@type {MenuItem[]}*/items) {
13
        this.itemList = items;
14
    }
15

16
    render() {
17
        if (!this.root) {
18
            const menu = document.createElement('ul'); {
19
                this.root = menu;
20
                menu.classList.add('list-group');
21
                menu.classList.add('ctx-menu');
22
                menu.classList.add('ctx-sub-menu');
23
                this.itemList.forEach(it => menu.append(it.render()));
24
            }
25
        }
26
        return this.root;
27
    }
28

29

30
    show(/**@type {HTMLElement}*/parent) {
31
        if (this.isActive) return;
32
        this.isActive = true;
33
        this.render();
34
        parent.append(this.root);
35
        requestAnimationFrame(() => {
36
            const rect = this.root.getBoundingClientRect();
37
            console.log(window.innerHeight, rect);
38
            if (rect.bottom > window.innerHeight - 5) {
39
                this.root.style.top = `${window.innerHeight - 5 - rect.bottom}px`;
40
            }
41
            if (rect.right > window.innerWidth - 5) {
42
                this.root.style.left = 'unset';
43
                this.root.style.right = '100%';
44
            }
45
        });
46
    }
47
    hide() {
48
        if (this.root) {
49
            this.root.remove();
50
            this.root.style.top = '';
51
            this.root.style.left = '';
52
        }
53
        this.isActive = false;
54
    }
55
    toggle(/**@type {HTMLElement}*/parent) {
56
        if (this.isActive) {
57
            this.hide();
58
        } else {
59
            this.show(parent);
60
        }
61
    }
62
}