Commit bc3baa90f43110f56698bc1c3de13714835c9d08
implement scroller with mutant-scroll
mix irving committed on 11/19/2017, 4:59:55 AMParent: f30be9436ba56489c01de7d4c5dfef6669137201
Files changed
| app/html/context.js | changed |
| app/html/scroller.js | changed |
| package-lock.json | changed |
| package.json | changed |
| app/html/context.js | ||
|---|---|---|
| @@ -88,21 +88,21 @@ | ||
| 88 | 88 | location: { page: 'blogIndex' }, |
| 89 | 89 | }) |
| 90 | 90 | ] |
| 91 | 91 | |
| 92 | - const { scroller } = api.app.html.scroller({ | |
| 92 | + return api.app.html.scroller({ | |
| 93 | 93 | classList: [ 'level', '-one' ], |
| 94 | 94 | prepend, |
| 95 | - streamBottom: api.feed.pull.private, | |
| 95 | + stream: api.feed.pull.private, | |
| 96 | 96 | filter: pull( |
| 97 | 97 | pull.filter(msg => msg.value.content.type === 'post'), // TODO is this the best way to protect against votes? |
| 98 | 98 | pull.filter(msg => msg.value.author != myKey), |
| 99 | 99 | pull.filter(msg => msg.value.content.recps), |
| 100 | 100 | pull.through(updateRecentMsgLog), |
| 101 | 101 | pull.filter(isLatestMsg) |
| 102 | - //pull.through( // trim exisiting from content up Top case) | |
| 102 | + //pull.through( // trim exisiting from content up Top case) // do this with new updateTop in mutant-scroll | |
| 103 | 103 | ), |
| 104 | - renderer: (msg) => { | |
| 104 | + render: (msg) => { | |
| 105 | 105 | const { author } = msg.value |
| 106 | 106 | if (nearby.has(author)) return |
| 107 | 107 | |
| 108 | 108 | return Option({ |
| @@ -113,10 +113,8 @@ | ||
| 113 | 113 | location: Object.assign({}, msg, { feed: author }) // TODO make obs? |
| 114 | 114 | }) |
| 115 | 115 | } |
| 116 | 116 | }) |
| 117 | - | |
| 118 | - return scroller | |
| 119 | 117 | } |
| 120 | 118 | |
| 121 | 119 | function LevelTwoContext () { |
| 122 | 120 | const { key, value, feed: targetUser, page } = location |
| app/html/scroller.js | ||
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| 1 | 1 | const nest = require('depnest') |
| 2 | 2 | const { h } = require('mutant') |
| 3 | 3 | const pull = require('pull-stream') |
| 4 | -const pullScroll = require('pull-scroll') | |
| 4 | +const Scroller = require('mutant-scroll') | |
| 5 | 5 | const next = require('pull-next-step') |
| 6 | 6 | |
| 7 | 7 | exports.gives = nest('app.html.scroller') |
| 8 | 8 | |
| @@ -14,65 +14,74 @@ | ||
| 14 | 14 | return nest('app.html.scroller', createScroller) |
| 15 | 15 | |
| 16 | 16 | function createScroller (opts = {}) { |
| 17 | 17 | const { |
| 18 | - streamTop, | |
| 19 | - streamBottom, | |
| 20 | - filter = (msg) => true, | |
| 21 | - renderer, | |
| 22 | - classList = [], | |
| 23 | - content = h('section.content'), | |
| 24 | - prepend = [], | |
| 25 | - append = [] | |
| 18 | + stream, | |
| 19 | + filter = pull.filter((msg) => true), | |
| 20 | + // renderer, | |
| 21 | + // classList = [], | |
| 22 | + // content = h('section.content'), | |
| 23 | + // prepend = [], | |
| 24 | + // append = [] | |
| 26 | 25 | } = opts |
| 27 | 26 | |
| 28 | - if (!streamTop && !streamBottom) throw new Error('Scroller requires a at least one stream: streamTop || streamBottom') | |
| 29 | - if (!renderer) throw new Error('Scroller expects a renderer') | |
| 27 | + const streamToTop = undefined | |
| 28 | + // pull( | |
| 29 | + // next(stream, {old: false, limit: 100}, ['value', 'timestamp']), | |
| 30 | + // filter // is a pull-stream through | |
| 31 | + // ) | |
| 30 | 32 | |
| 31 | - const scroller = h('Scroller', { classList, style: { overflow: 'auto' } }, [ | |
| 32 | - h('div.wrapper', [ | |
| 33 | - h('header', prepend), | |
| 34 | - content, | |
| 35 | - h('footer', append) | |
| 36 | - ]) | |
| 37 | - ]) | |
| 38 | - // scroller.scroll = keyscroll(content) // used for e.g. reset | |
| 33 | + const streamToBottom = pull( | |
| 34 | + next(stream, {reverse: true, limit: 100, live: false}, ['value', 'timestamp']), | |
| 35 | + filter | |
| 36 | + ) | |
| 39 | 37 | |
| 40 | - draw() | |
| 38 | + return Scroller(Object.assign({}, opts, { streamToTop, streamToBottom })) | |
| 41 | 39 | |
| 42 | - return { | |
| 43 | - scroller, | |
| 44 | - content, | |
| 45 | - // reset, | |
| 46 | - } | |
| 40 | + // const scroller = h('Scroller', { classList, style: { overflow: 'auto' } }, [ | |
| 41 | + // h('div.wrapper', [ | |
| 42 | + // h('header', prepend), | |
| 43 | + // content, | |
| 44 | + // h('footer', append) | |
| 45 | + // ]) | |
| 46 | + // ]) | |
| 47 | + // // scroller.scroll = keyscroll(content) // used for e.g. reset | |
| 47 | 48 | |
| 48 | - function draw () { | |
| 49 | - reset() | |
| 49 | + // draw() | |
| 50 | + | |
| 51 | + // return { | |
| 52 | + // scroller, | |
| 53 | + // content, | |
| 54 | + // // reset, | |
| 55 | + // } | |
| 56 | + | |
| 57 | + // function draw () { | |
| 58 | + // reset() | |
| 50 | 59 | |
| 51 | - if (streamTop) { | |
| 52 | - pull( | |
| 53 | - next(streamTop, {old: false, limit: 100}, ['value', 'timestamp']), | |
| 54 | - filter, | |
| 55 | - // filterDownThrough(), | |
| 56 | - pullScroll(scroller, content, renderer, true, false) | |
| 57 | - ) | |
| 58 | - } | |
| 60 | + // if (streamTop) { | |
| 61 | + // pull( | |
| 62 | + // next(streamTop, {old: false, limit: 100}, ['value', 'timestamp']), | |
| 63 | + // filter, | |
| 64 | + // // filterDownThrough(), | |
| 65 | + // pullScroll(scroller, content, renderer, true, false) | |
| 66 | + // ) | |
| 67 | + // } | |
| 59 | 68 | |
| 60 | - if (streamBottom) { | |
| 61 | - pull( | |
| 62 | - next(streamBottom, {reverse: true, limit: 100, live: false}, ['value', 'timestamp']), | |
| 63 | - filter, | |
| 64 | - // filterUpThrough(), | |
| 65 | - pullScroll(scroller, content, renderer, false, false) | |
| 66 | - ) | |
| 67 | - } | |
| 68 | - } | |
| 69 | + // if (streamBottom) { | |
| 70 | + // pull( | |
| 71 | + // next(streamBottom, {reverse: true, limit: 100, live: false}, ['value', 'timestamp']), | |
| 72 | + // filter, | |
| 73 | + // // filterUpThrough(), | |
| 74 | + // pullScroll(scroller, content, renderer, false, false) | |
| 75 | + // ) | |
| 76 | + // } | |
| 77 | + // } | |
| 69 | 78 | |
| 70 | - function reset () { | |
| 71 | - } | |
| 72 | - | |
| 79 | + // function reset () { | |
| 80 | + // } | |
| 81 | + // } | |
| 82 | + | |
| 73 | 83 | } |
| 74 | - | |
| 75 | 84 | } |
| 76 | 85 | |
| 77 | 86 | function keyscroll (content) { |
| 78 | 87 | var curMsgEl |
| package-lock.json | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 202220 bytes New file size: 203359 bytes |
Built with git-ssb-web