Files: 885b7de1caf8644fe426d6f49b82f1f738f9b3bf / app / html / scroller.js
1658 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 (opts = {}) { |
10 | const { prepend = [], content = null, append = [], classList = [], className = '', title = '' } = opts |
11 | |
12 | const contentSection = h('section.content', { title: '' }, content) |
13 | |
14 | const container = h('Scroller', |
15 | { classList, className, title, style: { 'overflow-y': 'scroll', 'overflow-x': 'auto' } }, |
16 | [ |
17 | h('section.top', prepend), |
18 | contentSection, |
19 | h('section.bottom', append) |
20 | ] |
21 | ) |
22 | |
23 | container.scroll = keyscroll(contentSection) |
24 | |
25 | return { |
26 | content: contentSection, |
27 | container |
28 | } |
29 | } |
30 | } |
31 | |
32 | function keyscroll (content) { |
33 | var curMsgEl |
34 | |
35 | if (!content) return () => {} |
36 | |
37 | content.addEventListener('click', onActivateChild, false) |
38 | content.addEventListener('focus', onActivateChild, true) |
39 | |
40 | function onActivateChild (ev) { |
41 | for (var el = ev.target; el; el = el.parentNode) { |
42 | if (el.parentNode === content) { |
43 | curMsgEl = el |
44 | return |
45 | } |
46 | } |
47 | } |
48 | |
49 | return function scroll (d) { |
50 | selectChild((!curMsgEl || d === 'first') ? content.firstChild |
51 | : d < 0 ? curMsgEl.previousElementSibling || content.firstChild |
52 | : d > 0 ? curMsgEl.nextElementSibling || content.lastChild |
53 | : curMsgEl) |
54 | |
55 | return curMsgEl |
56 | } |
57 | |
58 | function selectChild (el) { |
59 | if (!el) { return } |
60 | |
61 | if (!el.scrollIntoViewIfNeeded && !el.scrollIntoView) return |
62 | ;(el.scrollIntoViewIfNeeded || el.scrollIntoView).call(el) |
63 | el.focus() |
64 | curMsgEl = el |
65 | } |
66 | } |
67 |
Built with git-ssb-web