git ssb

1
const nest = require('depnest')
2
const { h, Value } = require('mutant')
3
4
exports.gives = nest('app.html.modal')
5
6
exports.create = (api) => {
7
  return nest('app.html.modal', (content, { isOpen, onClose, className = '' } = {}) => {
8
    if (typeof isOpen !== 'function') isOpen = Value(false)
9
10
    const openMe = () => {
11
      isOpen.set(true)
12
    }
13
    const closeMe = () => {
14
      isOpen.set(false)
15
      if (typeof onClose === 'function') onClose()
16
    }
17
18
    const lb = h('Modal -closed',
19
      {
20
        className,
21
        'ev-click': closeMe,
22
        'ev-keydown': ev => {
23
          if (ev.keyCode === 27) closeMe() // Escape
24
        }
25
      },
26
      [
27
        h('div.content', { 'ev-click': (ev) => ev.stopPropagation() }, [
28
          content
29
          // I think content must be in the DOM for any downstream mutant Observers to be updating
30
        ])
31
      ]
32
    )
33
34
    isOpen(state => {
35
      if (state === true) {
36
        lb.classList.remove('-closed')
37
        lb.classList.add('-open')
38
      } else {
39
        lb.classList.remove('-open')
40
        lb.classList.add('-closed')
41
        return
42
      }
43
44
      focus()
45
      function focus () {
46
        if (!lb.isConnected) setTimeout(focus, 200)
47
        else {
48
          const target = lb.querySelector('input') || lb.querySelector('textarea')
49
          if (target) target.focus()
50
        }
51
      }
52
    })
53
54
    lb.open = openMe
55
    lb.close = closeMe
56
57
    return lb
58
  })
59
}
60