git ssb

1
const nest = require('depnest')
2
const { h, computed, 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 = computed(isOpen, _isOpen => {
19
      if (!_isOpen) {
20
        return h('Modal -close', [
21
          content
22
          // NOTE contnet must be in the DOM for any downstream mutant Observers to be updating
23
        ])
24
      }
25
26
      return h('Modal -open',
27
        {
28
          className,
29
          'ev-click': closeMe,
30
          'ev-keydown': ev => {
31
            if (ev.keyCode === 27) closeMe() // Escape
32
          }
33
        },
34
        [
35
          h('div.content', { 'ev-click': (ev) => ev.stopPropagation() }, [
36
            content
37
          ])
38
        ]
39
      )
40
    })
41
42
    isOpen(state => {
43
      if (state !== true) return
44
45
      focus()
46
      function focus () {
47
        if (!lb.isConnected) setTimeout(focus, 200)
48
        else {
49
          const target = lb.querySelector('input') || lb.querySelector('textarea')
50
          if (target) target.focus()
51
        }
52
      }
53
    })
54
55
    lb.open = openMe
56
    lb.close = closeMe
57
58
    return lb
59
  })
60
}
61