git ssb - change modal to auto-focus on first input/textarea, add Esc to close listener

mixmix committed on 11/6/2018, 9:04:30 PM
Parent: 3f492d0842220c7734124da1dbd5752a49994324

app/html/modal.js	changed
package-lock.json	changed

app/html/modal.jsView
		@@ -6,19 +6,44 @@
6	6 …	exports.create = (api) => {
7	7 …	return nest('app.html.modal', (content, { isOpen, onClose, className = '' } = {}) => {
8	8 …	if (typeof isOpen !== 'function') isOpen = Value(false)
9	9 …
10		- const openMe = () => isOpen.set(true)
	10 …	+ const openMe = () => {
	11 …	+ isOpen.set(true)
	12 …	+ }
11	13 …	const closeMe = () => {
12	14 …	isOpen.set(false)
13	15 …	if (typeof onClose === 'function') onClose()
14	16 …	}
15	17 …
16		- const lb = h('Modal', { classList: [when(isOpen, '-open', '-close'), className], 'ev-click': closeMe },
17		- h('div.content', {'ev-click': (ev) => ev.stopPropagation()}, [
18		- content
19		- ]))
	18 …	+ const lb = h('Modal',
	19 …	+ {
	20 …	+ classList: [ className, when(isOpen, '-open', '-close') ],
	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 …	+ ])
	30 …	+ ]
	31 …	+ )
20	32 …
	33 …	+ isOpen(state => {
	34 …	+ if (!state) return
	35 …	+
	36 …	+ focus()
	37 …	+ function focus () {
	38 …	+ if (!lb.isConnected) setTimeout(focus, 200)
	39 …	+ else {
	40 …	+ const target = lb.querySelector('input') \|\| lb.querySelector('textarea')
	41 …	+ if (target) target.focus()
	42 …	+ }
	43 …	+ }
	44 …	+ })
	45 …	+
21	46 …	lb.open = openMe
22	47 …	lb.close = closeMe
23	48 …
24	49 …	return lb

package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes. Old file size: 374391 bytes New file size: 374372 bytes

Dominic / patchbay