Files: e44b7eb8a3b234c36379114fa5b542fd77bc46f6 / app / html / modal.js
1278 bytesRaw
| 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) return h('Modal -close') |
| 20 | |
| 21 | return h('Modal -open', |
| 22 | { |
| 23 | className, |
| 24 | 'ev-click': closeMe, |
| 25 | 'ev-keydown': ev => { |
| 26 | if (ev.keyCode === 27) closeMe() // Escape |
| 27 | } |
| 28 | }, |
| 29 | [ |
| 30 | h('div.content', { 'ev-click': (ev) => ev.stopPropagation() }, [ |
| 31 | content |
| 32 | ]) |
| 33 | ] |
| 34 | ) |
| 35 | }) |
| 36 | |
| 37 | isOpen(state => { |
| 38 | if (state !== true) return |
| 39 | |
| 40 | focus() |
| 41 | function focus () { |
| 42 | if (!lb.isConnected) setTimeout(focus, 200) |
| 43 | else { |
| 44 | const target = lb.querySelector('input') || lb.querySelector('textarea') |
| 45 | if (target) target.focus() |
| 46 | } |
| 47 | } |
| 48 | }) |
| 49 | |
| 50 | lb.open = openMe |
| 51 | lb.close = closeMe |
| 52 | |
| 53 | return lb |
| 54 | }) |
| 55 | } |
| 56 |
Built with git-ssb-web