1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { h, removeAllChildNodes, render } from '../core.ts'import { boxShadow, zIndex } from './_config.ts'import { addStylesToHead } from './_helpers.ts'
interface MenuOptions {  position: { x: number; y: number }  list: any}
export class Menu {  defaultParentId = 'menu_items_container'  cssHash = Math.random().toString(36).substring(2)
  // didUnmount() {  //   const el = document.querySelector(`[data-css-hash*="${this.cssHash}"]`)  //   if (el) el.remove()  // }
  private getParentElement(id: string) {    // delete all other    const others = document.querySelectorAll(`[id^="${this.defaultParentId}"]`)    others.forEach(e => {      e.remove()    })
    let el = document.getElementById(`${this.defaultParentId}-${id}`)    if (!el) {      el = document.createElement('div')      el.id = `${this.defaultParentId}-${id}`    }
    removeAllChildNodes(el)    document.body.appendChild(el)
    return el  }
  close() {    removeAllChildNodes(this.getParentElement(this.cssHash))  }
  open(menuOptions: MenuOptions) {    const { position, list } = menuOptions
    // check in which corner the menu appears and adjust fixed position.    const left = position.x < window.innerWidth / 2 ? 'left' : 'right'    const top = position.y < window.innerHeight / 2 ? 'top' : 'bottom'
    const styles = `       #menu_items_background-${this.cssHash} {      width: 100vw;      height: 100vh;      background: transparent;      position: fixed;      top: 0;      left: 0;      z-index: ${zIndex.menu}          }       #menu_items_list-${this.cssHash} {      position: fixed;      background: white;            border-radius: 4px;      min-width: 112px;
      ${top}: ${position.y > window.innerHeight / 2 ? window.innerHeight - position.y : position.y}px;      ${left}: ${position.x > window.innerWidth / 2 ? window.innerWidth - position.x : position.x}px;
      z-index: ${zIndex.menu}
      ${boxShadow}    }
    `    // remove old styles    const el = document.querySelector(`[data-css-hash*="${this.cssHash}"]`)    if (el) el.remove()
    // add new styles    addStylesToHead(styles, this.cssHash)
    const itemsList = h('div', { id: `menu_items_list-${this.cssHash}` }, list)    const itemsBg = h('div', { onClick: () => this.close(), id: `menu_items_background-${this.cssHash}` }, itemsList)
    itemsList.addEventListener('click', (e: Event) => e.stopPropagation())
    this.getParentElement(this.cssHash).appendChild(render(itemsBg))  }}