git ssb - keyboard scrollable feed · Dominic/patchbay@5735e273

Commit 5735e273f1d15ee90fb67318abe87d354d52a937

keyboard scrollable feed

mix irving committed on 12/9/2017, 11:46:03 PM
Parent: 1994ec8623da9c5cd8b54b0dd3d1e3f59a22809a

Files changed

app/html/scroller.js	changed
app/page/feed.js	changed
junk/keyscroll.js	added
main.js	changed
package-lock.json	changed
package.json	changed
feed/html/feedCard.js	added
feed/html/feedCard.mcss	added

app/html/scroller.jsView
		@@ -1,6 +1,7 @@
1	1 …	const nest = require('depnest')
2	2 …	const { h } = require('mutant')
	3 …	+const keyscroll = require('../../junk/keyscroll')
3	4 …
4	5 …	exports.gives = nest('app.html.scroller')
5	6 …
6	7 …	exports.create = function (api) {
		@@ -25,38 +26,4 @@
25	26 …	}
26	27 …	}
27	28 …	}
28	29 …
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		- function selectChild (el) {
47		- if (!el) { return }
48		-
49		- ;(el.scrollIntoViewIfNeeded \|\| el.scrollIntoView).call(el)
50		- el.focus()
51		- curMsgEl = el
52		- }
53		-
54		- return function scroll (d) {
55		- selectChild((!curMsgEl \|\| d === 'first') ? container.firstChild
56		- : d < 0 ? curMsgEl.previousElementSibling \|\| container.firstChild
57		- : d > 0 ? curMsgEl.nextElementSibling \|\| container.lastChild
58		- : curMsgEl)
59		-
60		- return curMsgEl
61		- }
62		-}

app/page/feed.jsView
		@@ -1,12 +1,13 @@
1	1 …	const nest = require('depnest')
2	2 …	const { h, Value, resolve, computed } = require('mutant')
3	3 …	const pull = require('pull-stream')
4	4 …	const Scroller = require('mutant-scroll')
5		-var HLRU = require('hashlru')
6		-
7	5 …	const next = require('pull-next-step')
	6 …	+const HLRU = require('hashlru')
8	7 …
	8 …	+const keyscroll = require('../../junk/keyscroll')
	9 …	+
9	10 …	exports.gives = nest({
10	11 …	'app.html.menuItem': true,
11	12 …	'app.page.feed': true
12	13 …	})
		@@ -15,8 +16,9 @@
15	16 …	'app.html.filter': 'first',
16	17 …	'app.html.scroller': 'first',
17	18 …	'app.sync.goTo': 'first',
18	19 …	'feed.pull.public': 'first',
	20 …	+ 'feed.html.feedCard': 'first',
19	21 …	'message.html.compose': 'first',
20	22 …	'message.html.render': 'first',
21	23 …	'message.sync.root': 'first',
22	24 …	'sbot.async.get': 'first',
		@@ -51,24 +53,8 @@
51	53 …	pull.filter(msg => msg.value && msg.value.content),
52	54 …	pull.filter(msg => msg.value.content.type === 'post')
53	55 …	)
54	56 …
55		- const render = (msgObs) => {
56		- // if (msg.value.content.type === 'about') debugger
57		- const msg = resolve(msgObs) // actually the rollup
58		- return h('ThreadCard', [
59		- api.message.html.render(msg),
60		- 'Recent replies:',
61		- computed(msgObs, msg => {
62		- return h('ul', msg.replies.map(reply => h('li', [
63		- reply.value.timestamp,
64		- ' ',
65		- reply.key
66		- ])))
67		- })
68		- ])
69		- }
70		-
71	57 …	var scroller = Scroller({
72	58 …	classList: [ 'Page', '-feed' ],
73	59 …	prepend: composer,
74	60 …	streamToTop: pull(
		@@ -85,9 +71,9 @@
85	71 …	),
86	72 …	// store: recentMsgCache,
87	73 …	updateTop: updateRecentMsgCache,
88	74 …	updateBottom: updateRecentMsgCache,
89		- render
	75 …	+ render: api.feed.html.feedCard
90	76 …	})
91	77 …
92	78 …	function miniRollup () {
93	79 …	return pull(
		@@ -147,8 +133,9 @@
147	133 …	})
148	134 …	}
149	135 …
150	136 …	scroller.title = '/feed'
	137 …	+ scroller.scroll = keyscroll(scroller.children.item(1))
151	138 …	return scroller
152	139 …	}
153	140 …	}
154	141 …

junk/keyscroll.jsView
		@@ -1,0 +1,35 @@
	1 …	+module.exports = function keyscroll (container) {
	2 …	+ var curMsgEl
	3 …	+
	4 …	+ if (!container) return () => {}
	5 …	+
	6 …	+ container.addEventListener('click', onActivateChild, false)
	7 …	+ container.addEventListener('focus', onActivateChild, true)
	8 …	+
	9 …	+ function onActivateChild (ev) {
	10 …	+ for (var el = ev.target; el; el = el.parentNode) {
	11 …	+ if (el.parentNode === container) {
	12 …	+ curMsgEl = el
	13 …	+ return
	14 …	+ }
	15 …	+ }
	16 …	+ }
	17 …	+
	18 …	+ return function scroll (d) {
	19 …	+ selectChild((!curMsgEl \|\| d === 'first') ? container.firstChild
	20 …	+ : d < 0 ? curMsgEl.previousElementSibling \|\| container.firstChild
	21 …	+ : d > 0 ? curMsgEl.nextElementSibling \|\| container.lastChild
	22 …	+ : curMsgEl)
	23 …	+
	24 …	+ return curMsgEl
	25 …	+ }
	26 …	+
	27 …	+ function selectChild (el) {
	28 …	+ if (!el) { return }
	29 …	+
	30 …	+ ;(el.scrollIntoViewIfNeeded \|\| el.scrollIntoView).call(el)
	31 …	+ el.focus()
	32 …	+ curMsgEl = el
	33 …	+ }
	34 …	+}
	35 …	+

main.jsView
		@@ -12,8 +12,9 @@
12	12 …	app: bulk(__dirname, [ 'app/*/.js' ]),
13	13 …	blob: bulk(__dirname, [ 'blob/*/.js' ]),
14	14 …	channel: bulk(__dirname, [ 'channel/*/.js' ]),
15	15 …	contact: bulk(__dirname, [ 'contact/*/.js' ]),
	16 …	+ feed: bulk(__dirname, [ 'feed/*/.js' ]),
16	17 …	message: bulk(__dirname, [ 'message/*/.js' ]),
17	18 …	router: bulk(__dirname, [ 'router/*/.js' ]),
18	19 …	styles: bulk(__dirname, [ 'styles/*/.js' ]),
19	20 …

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

package.jsonView
		@@ -64,9 +64,9 @@
64	64 …	"patch-settings": "^1.0.1",
65	65 …	"patch-suggest": "^1.0.1",
66	66 …	"patchbay-book": "^1.0.3",
67	67 …	"patchbay-gatherings": "^2.0.0",
68		- "patchcore": "^1.18.0",
	68 …	+ "patchcore": "^1.20.1",
69	69 …	"pull-abortable": "^4.1.1",
70	70 …	"pull-cat": "^1.1.11",
71	71 …	"pull-next": "^1.0.0",
72	72 …	"pull-scroll": "^1.0.9",

feed/html/feedCard.jsView
		@@ -1,0 +1,41 @@
	1 …	+const nest = require('depnest')
	2 …	+const { h, resolve, computed } = require('mutant')
	3 …	+
	4 …	+exports.gives = nest({
	5 …	+ 'feed.html.feedCard': true
	6 …	+})
	7 …	+
	8 …	+exports.needs = nest({
	9 …	+ 'message.html.render': 'first',
	10 …	+})
	11 …	+
	12 …	+
	13 …	+exports.create = function (api) {
	14 …	+ return nest({
	15 …	+ 'feed.html.feedCard': feedCard,
	16 …	+ })
	17 …	+
	18 …	+ function feedCard (msgObs) {
	19 …	+ const msg = resolve(msgObs) // actually the rollup
	20 …	+
	21 …	+ const opts = {
	22 …	+ attributes: {
	23 …	+ tabindex: '0', // needed to be able to show focus on keyscroll
	24 …	+ 'data-id': msg.key,
	25 …	+ 'data-root': msg.value.content.root \|\| msg.key
	26 …	+ },
	27 …	+ }
	28 …	+ return h('FeedCard', opts, [
	29 …	+ api.message.html.render(msg),
	30 …	+ 'Recent replies:',
	31 …	+ computed(msgObs, msg => {
	32 …	+ return h('ul', msg.replies.map(reply => h('li', [
	33 …	+ reply.value.timestamp,
	34 …	+ ' ',
	35 …	+ reply.key
	36 …	+ ])))
	37 …	+ })
	38 …	+ ])
	39 …	+ }
	40 …	+}
	41 …	+

feed/html/feedCard.mcssView
		@@ -1,0 +1,21 @@
	1 …	+FeedCard {
	2 …	+ padding-left: 1rem
	3 …	+ padding-bottom: .5rem
	4 …	+ border-left: 5px solid #fff
	5 …	+ filter: saturate(30%) opacity(50%)
	6 …	+
	7 …	+ transition: all 0.1s ease-in
	8 …	+
	9 …	+ :focus {
	10 …	+ outline: none
	11 …	+ border-left: 5px solid #dbdbdb
	12 …	+ filter: none
	13 …	+ }
	14 …	+
	15 …	+ /* TODO remove this dep this will */
	16 …	+ div.Message {
	17 …	+ :focus { outline: none }
	18 …	+ }
	19 …	+
	20 …	+}
	21 …	+

Built with git-ssb-web

Dominic / patchbay

Commit 5735e273f1d15ee90fb67318abe87d354d52a937

keyboard scrollable feed

Files changed