Commit 32b01f5e6a1ea4c8ceee789f8d6e3375e78b6b39
extract scroller building into a module
mix irving committed on 2/1/2017, 4:50:47 AMParent: b3b3e03454ae24d6652ca73a96c1d03116a8abea
Files changed
| modules_basic/feed.js | changed |
| modules_basic/index.js | changed |
| modules_basic/message/confirm.mcss | changed |
| modules_basic/message/render.mcss | changed |
| modules_basic/private.js | changed |
| modules_basic/public.js | changed |
| modules_basic/setup.js | changed |
| modules_basic/thread.js | changed |
| modules_basic/scroller.js | added |
| modules_basic/scroller.mcss | added |
| modules_core/tabs.js | changed |
| modules_extra/channel.js | changed |
| modules_extra/git-ssb.js | changed |
| modules_extra/notifications.js | changed |
| modules_extra/search.js | changed |
| modules_basic/feed.js | ||
|---|---|---|
| @@ -4,8 +4,9 @@ | ||
| 4 | 4 … | var pull = require('pull-stream') |
| 5 | 5 … | var u = require('../util') |
| 6 | 6 … | |
| 7 | 7 … | exports.needs = { |
| 8 … | + build_scroller: 'first', | |
| 8 | 9 … | sbot_user_feed: 'first', |
| 9 | 10 … | message_render: 'first', |
| 10 | 11 … | avatar_profile: 'first', |
| 11 | 12 … | signifier: 'first' |
| @@ -18,44 +19,33 @@ | ||
| 18 | 19 … | |
| 19 | 20 … | return function (id) { |
| 20 | 21 … | //TODO: header of user info, avatars, names, follows. |
| 21 | 22 … | |
| 22 | - if(ref.isFeed(id)) { | |
| 23 … | + if(!ref.isFeed(id)) return | |
| 23 | 24 … | |
| 24 | - var content = h('div.column.scroller__content') | |
| 25 | - var div = h('div.column.scroller', | |
| 26 | - {style: {'overflow':'auto'}}, | |
| 27 | - h('div.scroller__wrapper', | |
| 28 | - h('div', api.avatar_profile(id)), | |
| 29 | - h('header', 'Activity'), | |
| 30 | - content | |
| 31 | - ) | |
| 32 | - ) | |
| 25 … | + const profile = h('div', api.avatar_profile(id)) | |
| 26 … | + var { container, content } = api.build_scroller({ prepend: [profile, h('header', 'Activity')] }) | |
| 27 … | + | |
| 28 … | + api.signifier(id, function (_, names) { | |
| 29 … | + if(names.length) container.title = names[0].name | |
| 30 … | + }) | |
| 33 | 31 … | |
| 34 | - api.signifier(id, function (_, names) { | |
| 35 | - if(names.length) div.title = names[0].name | |
| 36 | - }) | |
| 32 … | + pull( | |
| 33 … | + api.sbot_user_feed({id: id, old: false, live: true}), | |
| 34 … | + Scroller(container, content, api.message_render, true, false) | |
| 35 … | + ) | |
| 37 | 36 … | |
| 37 … | + //how to handle when have scrolled past the start??? | |
| 38 | 38 … | |
| 39 | - pull( | |
| 40 | - api.sbot_user_feed({id: id, old: false, live: true}), | |
| 41 | - Scroller(div, content, api.message_render, true, false) | |
| 42 | - ) | |
| 39 … | + pull( | |
| 40 … | + u.next(api.sbot_user_feed, { | |
| 41 … | + id: id, reverse: true, | |
| 42 … | + limit: 50, live: false | |
| 43 … | + }, ['value', 'sequence']), | |
| 44 … | + // pull.through(console.log.bind(console)), | |
| 45 … | + Scroller(container, content, api.message_render, false, false) | |
| 46 … | + ) | |
| 43 | 47 … | |
| 44 | - //how to handle when have scrolled past the start??? | |
| 45 | - | |
| 46 | - pull( | |
| 47 | - u.next(api.sbot_user_feed, { | |
| 48 | - id: id, reverse: true, | |
| 49 | - limit: 50, live: false | |
| 50 | - }, ['value', 'sequence']), | |
| 51 | - // pull.through(console.log.bind(console)), | |
| 52 | - Scroller(div, content, api.message_render, false, false) | |
| 53 | - ) | |
| 54 | - | |
| 55 | - return div | |
| 56 | - | |
| 57 | - } | |
| 48 … | + return container | |
| 58 | 49 … | } |
| 59 | - | |
| 60 | 50 … | } |
| 61 | 51 … | |
| modules_basic/index.js | ||
|---|---|---|
| @@ -14,8 +14,9 @@ | ||
| 14 | 14 … | 'pub': require('./pub'), |
| 15 | 15 … | 'public': require('./public'), |
| 16 | 16 … | 'relationships': require('./relationships'), |
| 17 | 17 … | 'reply': require('./reply'), |
| 18 … | + 'scroller': require('./scroller'), | |
| 18 | 19 … | 'setup': require('./setup'), |
| 19 | 20 … | 'thread': require('./thread'), |
| 20 | 21 … | 'timestamp': require('./timestamp') |
| 21 | 22 … | } |
| modules_basic/message/confirm.mcss | ||
|---|---|---|
| @@ -6,10 +6,8 @@ | ||
| 6 | 6 … | -message_preview { |
| 7 | 7 … | background-color: white |
| 8 | 8 … | |
| 9 | 9 … | div { |
| 10 | - border: none | |
| 11 | - | |
| 12 | 10 … | header.author { |
| 13 | 11 … | div { |
| 14 | 12 … | section { |
| 15 | 13 … | -timestamp { |
| modules_basic/message/render.mcss | ||
|---|---|---|
| @@ -1,7 +1,6 @@ | ||
| 1 | 1 … | Message { |
| 2 | 2 … | padding: 1rem .5rem 1rem 7.5rem |
| 3 | - border-top: solid 1px gainsboro | |
| 4 | 3 … | min-height: 5rem |
| 5 | 4 … | |
| 6 | 5 … | position: relative |
| 7 | 6 … | display: flex |
| modules_basic/private.js | ||
|---|---|---|
| @@ -9,8 +9,9 @@ | ||
| 9 | 9 … | if(Array.isArray(ary)) return ary.map(iter) |
| 10 | 10 … | } |
| 11 | 11 … | |
| 12 | 12 … | exports.needs = { |
| 13 … | + build_scroller: 'first', | |
| 13 | 14 … | message_render: 'first', |
| 14 | 15 … | message_compose: 'first', |
| 15 | 16 … | message_unbox: 'first', |
| 16 | 17 … | sbot_log: 'first', |
| @@ -47,55 +48,50 @@ | ||
| 47 | 48 … | |
| 48 | 49 … | screen_view: function (path) { |
| 49 | 50 … | if(path !== '/private') return |
| 50 | 51 … | |
| 51 | - var div = h('div.column.scroller', | |
| 52 | - {style: {'overflow':'auto'}}) | |
| 52 … | + var composer = api.message_compose( | |
| 53 … | + {type: 'post', recps: [], private: true}, | |
| 54 … | + { | |
| 55 … | + prepublish: function (msg) { | |
| 56 … | + msg.recps = [id].concat(msg.mentions).filter(function (e) { | |
| 57 … | + return ref.isFeed('string' === typeof e ? e : e.link) | |
| 58 … | + }) | |
| 59 … | + if(!msg.recps.length) | |
| 60 … | + throw new Error('cannot make private message without recipients - just mention the user in an at reply in the message you send') | |
| 61 … | + return msg | |
| 62 … | + }, | |
| 63 … | + placeholder: 'Write a private message' | |
| 64 … | + } | |
| 65 … | + ) | |
| 66 … | + var { container, content } = api.build_scroller({ prepend: composer }) | |
| 53 | 67 … | |
| 54 | 68 … | // if local id is different from sbot id, sbot won't have indexes of |
| 55 | 69 … | // private threads |
| 56 | 70 … | //TODO: put all private indexes client side. |
| 57 | 71 … | var id = require('../keys').id |
| 58 | 72 … | api.sbot_whoami(function (err, feed) { |
| 59 | 73 … | if (err) return console.error(err) |
| 60 | 74 … | if(id !== feed.id) |
| 61 | - return div.appendChild(h('h4', | |
| 75 … | + return container.appendChild(h('h4', | |
| 62 | 76 … | 'Private messages are not supported in the lite client.')) |
| 63 | 77 … | |
| 64 | - var compose = api.message_compose( | |
| 65 | - {type: 'post', recps: [], private: true}, | |
| 66 | - { | |
| 67 | - prepublish: function (msg) { | |
| 68 | - msg.recps = [id].concat(msg.mentions).filter(function (e) { | |
| 69 | - return ref.isFeed('string' === typeof e ? e : e.link) | |
| 70 | - }) | |
| 71 | - if(!msg.recps.length) | |
| 72 | - throw new Error('cannot make private message without recipients - just mention the user in an at reply in the message you send') | |
| 73 | - return msg | |
| 74 | - }, | |
| 75 | - placeholder: 'Write a private message' | |
| 76 | - } | |
| 77 | - ) | |
| 78 | - | |
| 79 | - var content = h('div.column.scroller__content') | |
| 80 | - div.appendChild(h('div.scroller__wrapper', compose, content)) | |
| 81 | - | |
| 82 | 78 … | pull( |
| 83 | 79 … | u.next(api.sbot_log, {old: false, limit: 100}), |
| 84 | 80 … | unbox(), |
| 85 | - Scroller(div, content, api.message_render, true, false) | |
| 81 … | + Scroller(container, content, api.message_render, true, false) | |
| 86 | 82 … | ) |
| 87 | 83 … | |
| 88 | 84 … | pull( |
| 89 | 85 … | u.next(api.sbot_log, {reverse: true, limit: 1000}), |
| 90 | 86 … | unbox(), |
| 91 | - Scroller(div, content, api.message_render, false, false, function (err) { | |
| 87 … | + Scroller(container, content, api.message_render, false, false, function (err) { | |
| 92 | 88 … | if(err) throw err |
| 93 | 89 … | }) |
| 94 | 90 … | ) |
| 95 | 91 … | }) |
| 96 | 92 … | |
| 97 | - return div | |
| 93 … | + return container | |
| 98 | 94 … | }, |
| 99 | 95 … | |
| 100 | 96 … | message_meta: function (msg) { |
| 101 | 97 … | if(msg.value.content.recps || msg.value.private) |
| modules_basic/public.js | ||
|---|---|---|
| @@ -1,49 +1,50 @@ | ||
| 1 | -var h = require('hyperscript') | |
| 2 | -var u = require('../util') | |
| 3 | -var pull = require('pull-stream') | |
| 4 | -var Scroller = require('pull-scroll') | |
| 1 … | +const fs = require('fs') | |
| 2 … | +const h = require('hyperscript') | |
| 3 … | +const u = require('../util') | |
| 4 … | +const pull = require('pull-stream') | |
| 5 … | +const Scroller = require('pull-scroll') | |
| 5 | 6 … | |
| 6 | 7 … | exports.needs = { |
| 8 … | + build_scroller: 'first', | |
| 7 | 9 … | message_render: 'first', |
| 8 | 10 … | message_compose: 'first', |
| 9 | 11 … | sbot_log: 'first', |
| 10 | 12 … | } |
| 11 | 13 … | |
| 12 | 14 … | exports.gives = { |
| 13 | - builtin_tabs: true, screen_view: true | |
| 15 … | + builtin_tabs: true, | |
| 16 … | + screen_view: true, | |
| 17 … | + // mcss: true | |
| 14 | 18 … | } |
| 15 | 19 … | |
| 16 | 20 … | exports.create = function (api) { |
| 17 | - | |
| 18 | 21 … | return { |
| 19 | - builtin_tabs: function () { | |
| 20 | - return ['/public'] | |
| 21 | - }, | |
| 22 … | + builtin_tabs, | |
| 23 … | + screen_view, | |
| 24 … | + // mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8') | |
| 25 … | + } | |
| 22 | 26 … | |
| 23 | - screen_view: function (path, sbot) { | |
| 24 | - if(path === '/public') { | |
| 27 … | + function builtin_tabs () { | |
| 28 … | + return ['/public'] | |
| 29 … | + } | |
| 25 | 30 … | |
| 26 | - var content = h('div.column.scroller__content') | |
| 27 | - var div = h('div.column.scroller', | |
| 28 | - {style: {'overflow':'auto'}}, | |
| 29 | - h('div.scroller__wrapper', | |
| 30 | - api.message_compose({type: 'post'}, {placeholder: 'Write a public message'}), | |
| 31 | - content | |
| 32 | - ) | |
| 33 | - ) | |
| 31 … | + function screen_view (path, sbot) { | |
| 32 … | + if(path !== '/public') return | |
| 34 | 33 … | |
| 35 | - pull( | |
| 36 | - u.next(api.sbot_log, {old: false, limit: 100}), | |
| 37 | - Scroller(div, content, api.message_render, true, false) | |
| 38 | - ) | |
| 34 … | + const composer = api.message_compose({type: 'post'}, {placeholder: 'Write a public message'}) | |
| 35 … | + var { container, content } = api.build_scroller({ prepend: composer }) | |
| 39 | 36 … | |
| 40 | - pull( | |
| 41 | - u.next(api.sbot_log, {reverse: true, limit: 100, live: false}), | |
| 42 | - Scroller(div, content, api.message_render, false, false) | |
| 43 | - ) | |
| 37 … | + pull( | |
| 38 … | + u.next(api.sbot_log, {old: false, limit: 100}), | |
| 39 … | + Scroller(container, content, api.message_render, true, false) | |
| 40 … | + ) | |
| 44 | 41 … | |
| 45 | - return div | |
| 46 | - } | |
| 47 | - } | |
| 42 … | + pull( | |
| 43 … | + u.next(api.sbot_log, {reverse: true, limit: 100, live: false}), | |
| 44 … | + Scroller(container, content, api.message_render, false, false) | |
| 45 … | + ) | |
| 46 … | + | |
| 47 … | + return container | |
| 48 | 48 … | } |
| 49 | 49 … | } |
| 50 … | + | |
| modules_basic/setup.js | ||
|---|---|---|
| @@ -1,5 +1,4 @@ | ||
| 1 | - | |
| 2 | 1 … | var h = require('hyperscript') |
| 3 | 2 … | var pull = require('pull-stream') |
| 4 | 3 … | |
| 5 | 4 … | exports.needs = { |
| @@ -10,8 +9,15 @@ | ||
| 10 | 9 … | sbot_progress: 'first', |
| 11 | 10 … | sbot_query: 'first' |
| 12 | 11 … | } |
| 13 | 12 … | |
| 13 … | +exports.gives = { | |
| 14 … | + setup_is_fresh_install: true, | |
| 15 … | + progress_bar: true, | |
| 16 … | + setup_joined_network: true, | |
| 17 … | + screen_view: true | |
| 18 … | +} | |
| 19 … | + | |
| 14 | 20 … | //maybe this could show the pubs, or |
| 15 | 21 … | //if someone locally follows you, |
| 16 | 22 … | //it could show the second degree pubs? |
| 17 | 23 … | |
| @@ -28,13 +34,17 @@ | ||
| 28 | 34 … | }}] |
| 29 | 35 … | } |
| 30 | 36 … | |
| 31 | 37 … | exports.create = function (api) { |
| 38 … | + return { | |
| 39 … | + setup_is_fresh_install, | |
| 40 … | + progress_bar, | |
| 41 … | + setup_joined_network, | |
| 42 … | + screen_view | |
| 43 … | + } | |
| 32 | 44 … | |
| 33 | - var exports = {} | |
| 34 | - | |
| 35 | 45 … | //test whether we are connected to the ssb network. |
| 36 | - exports.setup_is_fresh_install = function (cb) { | |
| 46 … | + function setup_is_fresh_install (cb) { | |
| 37 | 47 … | //test by checking whether you have any friends following you? |
| 38 | 48 … | pull( |
| 39 | 49 … | api.sbot_query({query: followers_query(id), limit: 1, live: false}), |
| 40 | 50 … | pull.collect(function (err, ary) { |
| @@ -78,9 +88,9 @@ | ||
| 78 | 88 … | |
| 79 | 89 … | return h('div.invite-form.row', input, accept) |
| 80 | 90 … | } |
| 81 | 91 … | |
| 82 | - exports.progress_bar = function () { | |
| 92 … | + function progress_bar () { | |
| 83 | 93 … | var liquid = h('div.hyperprogress__liquid', '.') |
| 84 | 94 … | var bar = h('div.hyperprogress__bar', liquid) |
| 85 | 95 … | liquid.style.width = '0%' |
| 86 | 96 … | |
| @@ -99,9 +109,9 @@ | ||
| 99 | 109 … | |
| 100 | 110 … | //when you join the network, I want this to show as people follow you. |
| 101 | 111 … | //that could be when a pub accepts the invite, or when a local peer accepts. |
| 102 | 112 … | |
| 103 | - exports.setup_joined_network = function (id) { | |
| 113 … | + function setup_joined_network (id) { | |
| 104 | 114 … | var followers = h('div.column') |
| 105 | 115 … | var label = h('label', 'not connected to a network') |
| 106 | 116 … | var joined = h('div.setup__joined', label, followers) |
| 107 | 117 … | |
| @@ -118,31 +128,32 @@ | ||
| 118 | 128 … | |
| 119 | 129 … | return joined |
| 120 | 130 … | } |
| 121 | 131 … | |
| 122 | - exports.screen_view = function (path) { | |
| 132 … | + function screen_view (path) { | |
| 123 | 133 … | if(path !== '/setup') return |
| 124 | 134 … | |
| 125 | - var id = require('../keys').id | |
| 135 … | + var { id } = require('../keys') | |
| 126 | 136 … | |
| 127 | 137 … | //set up an avatar |
| 128 | 138 … | |
| 129 | 139 … | var status = h('span') |
| 130 | - return h('div.scroller', h('div.scroller__wrapper', | |
| 131 | - h('h1', 'welcome to patchbay!'), | |
| 132 | - h('div', | |
| 133 | - 'please choose avatar image and name', | |
| 134 | - api.avatar_edit(id) | |
| 135 | - ), | |
| 136 | - h('h2', 'join network'), | |
| 137 | - invite_form(), | |
| 138 | - //show avatars of anyone on the same local network. | |
| 139 | - //show realtime changes in your followers, especially for local. | |
| 140 … | + var invite = h('input', {placeholder: 'invite code'}) | |
| 141 … | + return h('div.scroller', [ | |
| 142 … | + h('div.scroller__wrapper', [ | |
| 143 … | + h('h1', 'welcome to patchbay!'), | |
| 144 … | + h('div', | |
| 145 … | + 'please choose avatar image and name', | |
| 146 … | + api.avatar_edit(id) | |
| 147 … | + ), | |
| 148 … | + h('h2', 'join network'), | |
| 149 … | + invite_form(), | |
| 150 … | + //show avatars of anyone on the same local network. | |
| 151 … | + //show realtime changes in your followers, especially for local. | |
| 140 | 152 … | |
| 141 | - exports.progress_bar(), | |
| 142 | - exports.setup_joined_network(require('../keys').id) | |
| 143 | - )) | |
| 153 … | + progress_bar(), | |
| 154 … | + setup_joined_network(id) | |
| 155 … | + ]) | |
| 156 … | + ]) | |
| 144 | 157 … | } |
| 158 … | +} | |
| 145 | 159 … | |
| 146 | - return exports | |
| 147 | - | |
| 148 | -} | |
| modules_basic/thread.js | ||
|---|---|---|
| @@ -18,8 +18,9 @@ | ||
| 18 | 18 … | } |
| 19 | 19 … | } |
| 20 | 20 … | |
| 21 | 21 … | exports.needs = { |
| 22 … | + build_scroller: 'first', | |
| 22 | 23 … | message_render: 'first', |
| 23 | 24 … | message_name: 'first', |
| 24 | 25 … | message_compose: 'first', |
| 25 | 26 … | message_unbox: 'first', |
| @@ -60,19 +61,13 @@ | ||
| 60 | 61 … | root: id, |
| 61 | 62 … | branch: id //mutated when thread is loaded. |
| 62 | 63 … | } |
| 63 | 64 … | |
| 64 | - var content = h('div.column.scroller__content') | |
| 65 | - var div = h('div.column.scroller', | |
| 66 | - {style: {'overflow-y': 'auto'}}, | |
| 67 | - h('div.scroller__wrapper', | |
| 68 | - content, | |
| 69 | - api.message_compose(meta, {shrink: false, placeholder: 'Write a reply'}) | |
| 70 | - ) | |
| 71 | - ) | |
| 65 … | + var composer = api.message_compose(meta, {shrink: false, placeholder: 'Write a reply'}) | |
| 66 … | + var { container, content } = api.build_scroller({ append: composer }) | |
| 72 | 67 … | |
| 73 | 68 … | api.message_name(id, function (err, name) { |
| 74 | - div.title = name | |
| 69 … | + container.title = name | |
| 75 | 70 … | }) |
| 76 | 71 … | |
| 77 | 72 … | pull( |
| 78 | 73 … | api.sbot_links({ |
| @@ -118,8 +113,8 @@ | ||
| 118 | 113 … | }) |
| 119 | 114 … | } |
| 120 | 115 … | |
| 121 | 116 … | loadThread() |
| 122 | - return div | |
| 117 … | + return container | |
| 123 | 118 … | } |
| 124 | 119 … | } |
| 125 | 120 … | } |
| modules_basic/scroller.js | ||
|---|---|---|
| @@ -1,0 +1,32 @@ | ||
| 1 … | +const fs = require('fs') | |
| 2 … | +const h = require('../h') | |
| 3 … | + | |
| 4 … | +exports.gives = { | |
| 5 … | + build_scroller: true, | |
| 6 … | + mcss: true | |
| 7 … | +} | |
| 8 … | + | |
| 9 … | +exports.create = function (api) { | |
| 10 … | + return { | |
| 11 … | + build_scroller, | |
| 12 … | + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8') | |
| 13 … | + } | |
| 14 … | + | |
| 15 … | + function build_scroller ({ prepend = [], append = [] } = {}) { | |
| 16 … | + const content = h('section.content') | |
| 17 … | + | |
| 18 … | + const container = h('Scroller', { style: { overflow: 'auto' } }, [ | |
| 19 … | + h('div.wrapper', [ | |
| 20 … | + h('header', prepend), | |
| 21 … | + content, | |
| 22 … | + h('footer', append) | |
| 23 … | + ]) | |
| 24 … | + ]) | |
| 25 … | + | |
| 26 … | + return { | |
| 27 … | + content, | |
| 28 … | + container | |
| 29 … | + } | |
| 30 … | + } | |
| 31 … | +} | |
| 32 … | + | |
| modules_basic/scroller.mcss | ||
|---|---|---|
| @@ -1,0 +1,23 @@ | ||
| 1 … | +Scroller { | |
| 2 … | + display: flex | |
| 3 … | + flex-direction: column | |
| 4 … | + | |
| 5 … | + overflow: auto | |
| 6 … | + width: 100% | |
| 7 … | + min-height: 0px | |
| 8 … | + | |
| 9 … | + div.wrapper { | |
| 10 … | + flex: 1 | |
| 11 … | + max-width: 600px | |
| 12 … | + margin-left: auto | |
| 13 … | + margin-right: auto | |
| 14 … | + | |
| 15 … | + section.content { | |
| 16 … | + | |
| 17 … | + div { | |
| 18 … | + border-top: solid 1px gainsboro | |
| 19 … | + } | |
| 20 … | + } | |
| 21 … | + } | |
| 22 … | +} | |
| 23 … | + | |
| modules_core/tabs.js | ||
|---|---|---|
| @@ -9,8 +9,9 @@ | ||
| 9 | 9 … | return el |
| 10 | 10 … | } |
| 11 | 11 … | |
| 12 | 12 … | exports.needs = { |
| 13 … | + build_scroller: 'first', | |
| 13 | 14 … | screen_view: 'first', |
| 14 | 15 … | search_box: 'first', |
| 15 | 16 … | menu: 'first', |
| 16 | 17 … | external_confirm:'first' |
| @@ -19,10 +20,9 @@ | ||
| 19 | 20 … | exports.gives = 'screen_view' |
| 20 | 21 … | |
| 21 | 22 … | exports.create = function (api) { |
| 22 | 23 … | return function (path) { |
| 23 | - if(path !== 'tabs') | |
| 24 | - return | |
| 24 … | + if(path !== 'tabs') return | |
| 25 | 25 … | |
| 26 | 26 … | function setSelected (indexes) { |
| 27 | 27 … | var ids = indexes.map(function (index) { |
| 28 | 28 … | return tabs.get(index).id |
| @@ -46,9 +46,9 @@ | ||
| 46 | 46 … | var el = api.screen_view(path) |
| 47 | 47 … | |
| 48 | 48 … | if(el) { |
| 49 | 49 … | if(!el.title) el.title = path |
| 50 | - el.scroll = keyscroll(el.querySelector('.scroller__content')) | |
| 50 … | + el.scroll = keyscroll(el.querySelector('.Scroller .\\.content')) | |
| 51 | 51 … | tabs.add(el, change) |
| 52 | 52 … | // localStorage.openTabs = JSON.stringify(tabs.tabs) |
| 53 | 53 … | return change |
| 54 | 54 … | } |
| @@ -72,9 +72,9 @@ | ||
| 72 | 72 … | var el = api.screen_view(path) |
| 73 | 73 … | if(!el) return |
| 74 | 74 … | el.id = el.id || path |
| 75 | 75 … | if (!el) return |
| 76 | - el.scroll = keyscroll(el.querySelector('.scroller__content')) | |
| 76 … | + el.scroll = keyscroll(el.querySelector('.Scroller .\\.content')) | |
| 77 | 77 … | if(el) tabs.add(el, false, false) |
| 78 | 78 … | }) |
| 79 | 79 … | |
| 80 | 80 … | tabs.select(0) |
| @@ -100,9 +100,9 @@ | ||
| 100 | 100 … | |
| 101 | 101 … | var el = api.screen_view(path) |
| 102 | 102 … | if(el) { |
| 103 | 103 … | el.id = el.id || path |
| 104 | - el.scroll = keyscroll(el.querySelector('.scroller__content')) | |
| 104 … | + el.scroll = keyscroll(el.querySelector('.Scroller .\\.content')) | |
| 105 | 105 … | tabs.add(el, !ev.ctrlKey, !!ev.shiftKey) |
| 106 | 106 … | // localStorage.openTabs = JSON.stringify(tabs.tabs) |
| 107 | 107 … | } |
| 108 | 108 … | |
| @@ -164,16 +164,12 @@ | ||
| 164 | 164 … | } |
| 165 | 165 … | }) |
| 166 | 166 … | |
| 167 | 167 … | // errors tab |
| 168 | - var errorsContent = h('div.column.scroller__content') | |
| 169 | - var errors = h('div.column.scroller', { | |
| 170 | - id: 'errors', | |
| 171 | - style: {'overflow':'auto'} | |
| 172 | - }, h('div.scroller__wrapper', | |
| 173 | - errorsContent | |
| 174 | - ) | |
| 175 | - ) | |
| 168 … | + var { | |
| 169 … | + container: errors, | |
| 170 … | + content: errorsContent | |
| 171 … | + } = api.build_scroller() | |
| 176 | 172 … | |
| 177 | 173 … | // remove loader error handler |
| 178 | 174 … | if (window.onError) { |
| 179 | 175 … | window.removeEventListener('error', window.onError) |
| modules_extra/channel.js | ||
|---|---|---|
| @@ -3,8 +3,9 @@ | ||
| 3 | 3 … | var Scroller = require('pull-scroll') |
| 4 | 4 … | var mfr = require('map-filter-reduce') |
| 5 | 5 … | |
| 6 | 6 … | exports.needs = { |
| 7 … | + build_scroller: 'first', | |
| 7 | 8 … | message_render: 'first', |
| 8 | 9 … | message_compose: 'first', |
| 9 | 10 … | sbot_log: 'first', |
| 10 | 11 … | sbot_query: 'first', |
| @@ -35,16 +36,10 @@ | ||
| 35 | 36 … | screen_view: function (path) { |
| 36 | 37 … | if(path[0] === '#') { |
| 37 | 38 … | var channel = path.substr(1) |
| 38 | 39 … | |
| 39 | - var content = h('div.column.scroller__content') | |
| 40 | - var div = h('div.column.scroller', | |
| 41 | - {style: {'overflow':'auto'}}, | |
| 42 | - h('div.scroller__wrapper', | |
| 43 | - api.message_compose({type: 'post', channel: channel}), | |
| 44 | - content | |
| 45 | - ) | |
| 46 | - ) | |
| 40 … | + var composer = api.message_compose({type: 'post', channel: channel}) | |
| 41 … | + var { container, content } = api.build_scroller({ prepend: composer }) | |
| 47 | 42 … | |
| 48 | 43 … | function matchesChannel(msg) { |
| 49 | 44 … | if (msg.sync) console.error('SYNC', msg) |
| 50 | 45 … | var c = msg && msg.value && msg.value.content |
| @@ -53,19 +48,19 @@ | ||
| 53 | 48 … | |
| 54 | 49 … | pull( |
| 55 | 50 … | api.sbot_log({old: false}), |
| 56 | 51 … | pull.filter(matchesChannel), |
| 57 | - Scroller(div, content, api.message_render, true, false) | |
| 52 … | + Scroller(container, content, api.message_render, true, false) | |
| 58 | 53 … | ) |
| 59 | 54 … | |
| 60 | 55 … | pull( |
| 61 | 56 … | api.sbot_query({reverse: true, query: [ |
| 62 | 57 … | {$filter: {value: {content: {channel: channel}}}} |
| 63 | 58 … | ]}), |
| 64 | - Scroller(div, content, api.message_render, false, false) | |
| 59 … | + Scroller(container, content, api.message_render, false, false) | |
| 65 | 60 … | ) |
| 66 | 61 … | |
| 67 | - return div | |
| 62 … | + return container | |
| 68 | 63 … | } |
| 69 | 64 … | }, |
| 70 | 65 … | |
| 71 | 66 … | connection_status: function (err) { |
| modules_extra/git-ssb.js | ||
|---|---|---|
| @@ -3,15 +3,17 @@ | ||
| 3 | 3 … | var pull = require('pull-stream') |
| 4 | 4 … | var Scroller = require('pull-scroll') |
| 5 | 5 … | |
| 6 | 6 … | exports.needs = { |
| 7 … | + build_scroller: 'first', | |
| 7 | 8 … | message_render: 'first', |
| 8 | 9 … | message_compose: 'first', |
| 9 | 10 … | sbot_log: 'first' |
| 10 | 11 … | } |
| 11 | 12 … | |
| 12 | 13 … | exports.gives = { |
| 13 | - menu_items: true, screen_view: true | |
| 14 … | + menu_items: true, | |
| 15 … | + screen_view: true | |
| 14 | 16 … | } |
| 15 | 17 … | |
| 16 | 18 … | exports.create = function (api) { |
| 17 | 19 … | return { |
| @@ -21,29 +23,25 @@ | ||
| 21 | 23 … | |
| 22 | 24 … | screen_view: function (path, sbot) { |
| 23 | 25 … | if(path === '/git-ssb') { |
| 24 | 26 … | |
| 25 | - var content = h('div.column.scroller__content') | |
| 26 | - var div = h('div.column.scroller', | |
| 27 | - {style: {'overflow':'auto'}}, | |
| 28 | - h('div.scroller__wrapper', content) | |
| 29 | - ) | |
| 27 … | + var { container, content } = api.build_scroller() | |
| 30 | 28 … | |
| 31 | 29 … | pull( |
| 32 | 30 … | u.next(api.sbot_log, {old: false, limit: 100}), |
| 33 | - Scroller(div, content, api.message_render, true, false) | |
| 31 … | + Scroller(container, content, api.message_render, true, false) | |
| 34 | 32 … | ) |
| 35 | 33 … | |
| 36 | 34 … | pull( |
| 37 | 35 … | u.next(api.sbot_log, {reverse: true, limit: 100, live: false}), |
| 38 | 36 … | pull.filter(function(msg) { return msg.value.content.type }), |
| 39 | 37 … | pull.filter(function(msg) { |
| 40 | 38 … | return msg.value.content.type.match(/^git/) |
| 41 | 39 … | }), |
| 42 | - Scroller(div, content, api.message_render, false, false) | |
| 40 … | + Scroller(container, content, api.message_render, false, false) | |
| 43 | 41 … | ) |
| 44 | 42 … | |
| 45 | - return div | |
| 43 … | + return container | |
| 46 | 44 … | } |
| 47 | 45 … | } |
| 48 | 46 … | } |
| 49 | 47 … | } |
| modules_extra/notifications.js | ||
|---|---|---|
| @@ -7,8 +7,9 @@ | ||
| 7 | 7 … | var cont = require('cont') |
| 8 | 8 … | var ref = require('ssb-ref') |
| 9 | 9 … | |
| 10 | 10 … | exports.needs = { |
| 11 … | + build_scroller: 'first', | |
| 11 | 12 … | message_render: 'first', |
| 12 | 13 … | sbot_log: 'first', |
| 13 | 14 … | sbot_get: 'first', |
| 14 | 15 … | sbot_user_feed: 'first', |
| @@ -126,22 +127,16 @@ | ||
| 126 | 127 … | oldest = msg.value.timestamp |
| 127 | 128 … | } |
| 128 | 129 … | }) |
| 129 | 130 … | |
| 130 | - var content = h('div.column.scroller__content') | |
| 131 | - var div = h('div.column.scroller', | |
| 132 | - {style: {'overflow':'auto'}}, | |
| 133 | - h('div.scroller__wrapper', | |
| 134 | - content | |
| 135 | - ) | |
| 136 | - ) | |
| 131 … | + var { container, content } = api.build_scroller() | |
| 137 | 132 … | |
| 138 | 133 … | pull( |
| 139 | 134 … | u.next(api.sbot_log, {old: false, limit: 100}), |
| 140 | 135 … | unbox(), |
| 141 | 136 … | notifications(ids), |
| 142 | 137 … | pull.filter(), |
| 143 | - Scroller(div, content, api.message_render, true, false) | |
| 138 … | + Scroller(container, content, api.message_render, true, false) | |
| 144 | 139 … | ) |
| 145 | 140 … | |
| 146 | 141 … | pull( |
| 147 | 142 … | u.next(api.sbot_log, {reverse: true, limit: 100, live: false}), |
| @@ -151,12 +146,12 @@ | ||
| 151 | 146 … | pull.take(function (msg) { |
| 152 | 147 … | // abort stream after we pass the oldest messages of our feeds |
| 153 | 148 … | return !oldest ? true : msg.value.timestamp > oldest |
| 154 | 149 … | }), |
| 155 | - Scroller(div, content, api.message_render, false, false) | |
| 150 … | + Scroller(container, content, api.message_render, false, false) | |
| 156 | 151 … | ) |
| 157 | 152 … | |
| 158 | - return div | |
| 153 … | + return container | |
| 159 | 154 … | } |
| 160 | 155 … | } |
| 161 | 156 … | } |
| 162 | 157 … | } |
| modules_extra/search.js | ||
|---|---|---|
| @@ -4,8 +4,9 @@ | ||
| 4 | 4 … | var Scroller = require('pull-scroll') |
| 5 | 5 … | var TextNodeSearcher = require('text-node-searcher') |
| 6 | 6 … | |
| 7 | 7 … | exports.needs = { |
| 8 … | + build_scroller: 'first', | |
| 8 | 9 … | message_render: 'first', |
| 9 | 10 … | sbot_log: 'first' |
| 10 | 11 … | } |
| 11 | 12 … | |
| @@ -59,16 +60,9 @@ | ||
| 59 | 60 … | |
| 60 | 61 … | var total = 0, matches = 0 |
| 61 | 62 … | |
| 62 | 63 … | var header = h('div.search_header', '') |
| 63 | - var content = h('div.column.scroller__content') | |
| 64 | - var div = h('div.column.scroller', | |
| 65 | - {style: {'overflow':'auto'}}, | |
| 66 | - h('div.scroller__wrapper', | |
| 67 | - header, | |
| 68 | - content | |
| 69 | - ) | |
| 70 | - ) | |
| 64 … | + var { container, content } = api.build_scroller({ prepend: header}) | |
| 71 | 65 … | |
| 72 | 66 … | function matchesQuery (data) { |
| 73 | 67 … | total++ |
| 74 | 68 … | var m = _matches(data) |
| @@ -76,10 +70,8 @@ | ||
| 76 | 70 … | header.textContent = 'searched:'+total+', found:'+matches |
| 77 | 71 … | return m |
| 78 | 72 … | } |
| 79 | 73 … | |
| 80 | - | |
| 81 | - | |
| 82 | 74 … | function renderMsg(msg) { |
| 83 | 75 … | var el = api.message_render(msg) |
| 84 | 76 … | highlight(el, createOrRegExp(query)) |
| 85 | 77 … | return el |
| @@ -87,18 +79,18 @@ | ||
| 87 | 79 … | |
| 88 | 80 … | pull( |
| 89 | 81 … | api.sbot_log({old: false}), |
| 90 | 82 … | pull.filter(matchesQuery), |
| 91 | - Scroller(div, content, renderMsg, true, false) | |
| 83 … | + Scroller(container, content, renderMsg, true, false) | |
| 92 | 84 … | ) |
| 93 | 85 … | |
| 94 | 86 … | pull( |
| 95 | 87 … | u.next(api.sbot_log, {reverse: true, limit: 500, live: false}), |
| 96 | 88 … | pull.filter(matchesQuery), |
| 97 | - Scroller(div, content, renderMsg, false, false) | |
| 89 … | + Scroller(container, content, renderMsg, false, false) | |
| 98 | 90 … | ) |
| 99 | 91 … | |
| 100 | - return div | |
| 92 … | + return container | |
| 101 | 93 … | } |
| 102 | 94 … | } |
| 103 | 95 … | |
| 104 | 96 … | } |
Built with git-ssb-web