Files: 2752aa47e92f4d4bb94db8f41b22062b563703b7 / app / html / scroller.js
1497 bytesRaw
1 | const nest = require('depnest') |
2 | const { h } = require('mutant') |
3 | |
4 | exports.gives = nest('app.html.scroller') |
5 | |
6 | exports.create = function (api) { |
7 | return nest('app.html.scroller', Scroller) |
8 | |
9 | function Scroller ({ prepend = [], content = null, append = [] } = {}) { |
10 | content = content || h('section.content') |
11 | |
12 | const container = h('Scroller', { style: { overflow: 'auto' } }, [ |
13 | h('div.wrapper', [ |
14 | h('header', prepend), |
15 | content, |
16 | h('footer', append) |
17 | ]) |
18 | ]) |
19 | |
20 | container.scroll = keyscroll(content) |
21 | |
22 | return { |
23 | content, |
24 | container |
25 | } |
26 | } |
27 | } |
28 | |
29 | function keyscroll (container) { |
30 | var curMsgEl |
31 | |
32 | if (!container) return () => {} |
33 | |
34 | container.addEventListener('click', onActivateChild, false) |
35 | container.addEventListener('focus', onActivateChild, true) |
36 | |
37 | function onActivateChild (ev) { |
38 | for (var el = ev.target; el; el = el.parentNode) { |
39 | if (el.parentNode === container) { |
40 | curMsgEl = el |
41 | return |
42 | } |
43 | } |
44 | } |
45 | |
46 | return function scroll (d) { |
47 | selectChild((!curMsgEl || d === 'first') ? container.firstChild |
48 | : d < 0 ? curMsgEl.previousElementSibling || container.firstChild |
49 | : d > 0 ? curMsgEl.nextElementSibling || container.lastChild |
50 | : curMsgEl) |
51 | |
52 | return curMsgEl |
53 | } |
54 | |
55 | function selectChild (el) { |
56 | if (!el) { return } |
57 | |
58 | if (!el.scrollIntoViewIfNeeded && !el.scrollIntoView) return |
59 | ;(el.scrollIntoViewIfNeeded || el.scrollIntoView).call(el) |
60 | el.focus() |
61 | curMsgEl = el |
62 | } |
63 | |
64 | } |
65 |
Built with git-ssb-web