git ssb

2+

mixmix / ticktack



Commit e73bff8390f085ab1944c5d9ac4c514cbbacf355

Browse Files

first pass navigation

mix irving committed on 8/9/2017, 5:57:07 AM
Parent: ca60633113df0b41f3bab3e4319dcd13a9c9555e

Files changed

app/html/app.jschanged
app/html/thread.jschanged
app/html/nav.jsadded
app/html/nav.mcssadded
app/index.jschanged
app/page/group.jschanged
app/page/home.jschanged
app/page/page.mcsschanged
app/page/private.jschanged
app/sync/goTo.jsdeleted
index.jschanged
history/index.jsadded
history/obs/store.jsadded
history/sync/back.jsadded
history/sync/push.jsadded
app/html/app.jsView
@@ -4,9 +4,9 @@
44
55 exports.gives = nest('app.html.app')
66
77 exports.needs = nest({
8- 'app.sync.goTo': 'first',
8+ 'history.sync.push': 'first',
99 'styles.css': 'first'
1010 })
1111
1212 exports.create = (api) => {
@@ -15,7 +15,7 @@
1515 function app () {
1616 const css = values(api.styles.css()).join('\n')
1717 insertCss(css)
1818
19- return api.app.sync.goTo({ page: 'home' })
19+ return api.history.sync.push({ page: 'home' })
2020 }
2121 }
app/html/thread.jsView
@@ -7,9 +7,8 @@
77 exports.gives = nest('app.html.thread')
88
99 exports.needs = nest({
1010 'about.html.image': 'first',
11- 'app.sync.goTo': 'first',
1211 'feed.obs.thread': 'first',
1312 'keys.sync.id': 'first',
1413 'message.html.markdown': 'first'
1514 })
@@ -25,9 +24,8 @@
2524
2625 const thread = api.feed.obs.thread(id)
2726 const chunkedMessages = buildChunkedMessages(thread.messages)
2827
29- const { goTo } = api.app.sync
3028 const threadView = h('Thread',
3129 map(chunkedMessages, chunk => {
3230 const author = computed([chunk], chunk => get(chunk, '[0].value.author'))
3331
app/html/nav.jsView
@@ -1,0 +1,25 @@
1+const nest = require('depnest')
2+const { h } = require('mutant')
3+
4+exports.gives = nest('app.html.nav')
5+
6+exports.needs = nest({
7+ 'history.sync.push': 'first',
8+ 'history.sync.back': 'first'
9+})
10+
11+exports.create = (api) => {
12+ return nest('app.html.nav', nav)
13+
14+ function nav (id) {
15+ const { push, back } = api.history.sync
16+ return h('Nav', [
17+ h('div', { 'ev-click': back }, '(<)'),
18+ h('div', { 'ev-click': () => push({page: 'home'}) }, 'Home'),
19+ h('div', { 'ev-click': () => push({type: 'group', key: '%sadlkjas;lkdjas'}) }, 'Group'),
20+ h('div', { 'ev-click': () => push({key: '%fXXZgQrwnj7F+Y19H0IXxNriuvPFoahvusih3UzpkfA=.sha256'}) }, 'Private Thread A'),
21+ h('div', { 'ev-click': () => push({key: '%3cWZHeN6k03XpvDBxrxP5bGLsNByFLTvr/rKYFV4f+c=.sha256'}) }, 'Private Thread B'),
22+ ])
23+ }
24+}
25+
app/html/nav.mcssView
@@ -1,0 +1,11 @@
1+Nav {
2+ display: flex
3+ margin-left: 1rem
4+
5+ div {
6+ margin-right: 1rem
7+
8+
9+ }
10+}
11+
app/index.jsView
@@ -1,14 +1,12 @@
11 module.exports = {
22 html: {
33 app: require('./html/app'),
4- thread: require('./html/thread')
4+ thread: require('./html/thread'),
5+ nav: require('./html/nav')
56 },
67 page: {
78 group: require('./page/group'),
89 home: require('./page/home'),
910 private: require('./page/private')
10- },
11- sync: {
12- goTo: require('./sync/goTo')
1311 }
1412 }
app/page/group.jsView
@@ -3,9 +3,9 @@
33
44 exports.gives = nest('app.page.group')
55
66 exports.needs = nest({
7- 'app.sync.goTo': 'first'
7+ 'app.html.nav': 'first'
88 })
99
1010 exports.create = (api) => {
1111 return nest('app.page.group', group)
@@ -17,9 +17,9 @@
1717 const { goTo } = api.app.sync
1818
1919 return h('Page -group', [
2020 h('h1', 'Group'),
21- h('a', { 'ev-click': () => goTo({ page: 'home' }) }, 'Home'),
21+ api.app.html.nav(),
2222 h('p', `key: ${location.key}`)
2323 ])
2424 }
2525 }
app/page/home.jsView
@@ -3,25 +3,19 @@
33
44 exports.gives = nest('app.page.home')
55
66 exports.needs = nest({
7- 'app.sync.goTo': 'first'
7+ 'app.html.nav': 'first'
88 })
99
1010 exports.create = (api) => {
1111 return nest('app.page.home', home)
1212
1313 function home (location) {
1414 // location here can expected to be: { page: 'home' }
15- const { goTo } = api.app.sync
1615
1716 return h('Page -home', [
1817 h('h1', 'Home'),
19- h('nav', [
20- h('div', { 'ev-click': () => goTo({ page: 'home' }) }, 'Home'),
21- h('div', { 'ev-click': () => goTo({ type: 'group', key: '%sadlkjas;lkdjas' }) }, 'Group'),
22- h('div', { 'ev-click': () => goTo({key: '%fXXZgQrwnj7F+Y19H0IXxNriuvPFoahvusih3UzpkfA=.sha256'}) }, 'Private Thread A'),
23- h('div', { 'ev-click': () => goTo({key: '%3cWZHeN6k03XpvDBxrxP5bGLsNByFLTvr/rKYFV4f+c=.sha256'}) }, 'Private Thread B'),
24- ])
18+ api.app.html.nav(),
2519 ])
2620 }
2721 }
app/page/page.mcssView
@@ -1,6 +1,6 @@
11 Page {
2- h1, nav {
2+ h1 {
33 margin-left: 1rem
44 }
55
66 }
app/page/private.jsView
@@ -5,24 +5,23 @@
55
66 exports.gives = nest('app.page.private')
77
88 exports.needs = nest({
9- 'app.sync.goTo': 'first',
9+ 'app.html.nav': 'first',
1010 'app.html.thread': 'first'
1111 })
1212
1313 exports.create = (api) => {
1414 return nest('app.page.private', private)
1515
1616 function private (location) {
1717 // location here can expected to be an ssb-message
18- const { goTo } = api.app.sync
1918
2019 const thread = api.app.html.thread(location.key)
2120
2221 return h('Page -private', [
2322 h('h1', 'Private message'),
24- h('nav', { 'ev-click': () => goTo({ page: 'home' }) }, 'Home'),
23+ api.app.html.nav(),
2524 thread
2625 ])
2726 }
2827 }
app/sync/goTo.jsView
@@ -1,22 +1,0 @@
1-const nest = require('depnest')
2-
3-exports.gives = nest('app.sync.goTo')
4-
5-exports.needs = nest({
6- 'router.sync.router': 'first'
7-})
8-
9-exports.create = (api) => {
10- return nest('app.sync.goTo', goTo)
11-
12- function goTo (location) {
13- console.log('goTo', location)
14- const newView = api.router.sync.router(location)
15-
16- // TODO (mix) : change once history in place
17- const oldView = document.body.firstChild
18- oldView
19- ? document.body.replaceChild(newView, oldView)
20- : document.body.appendChild(newView)
21- }
22-}
index.jsView
@@ -1,7 +1,8 @@
11 const ticktack = {
22 app: require('./app'),
33 blob: require('./blob'),
4+ history: require('./history'),
45 router: require('./router'),
56 styles: require('./styles')
67 }
78
history/index.jsView
@@ -1,0 +1,10 @@
1+module.exports ={
2+ obs: {
3+ store: require('./obs/store'),
4+ },
5+ sync: {
6+ push: require('./sync/push'),
7+ back: require('./sync/back')
8+ }
9+}
10+
history/obs/store.jsView
@@ -1,0 +1,11 @@
1+const nest = require('depnest')
2+const { Array: MutantArray } = require('mutant')
3+
4+exports.gives = nest('history.obs.store')
5+
6+var _store = MutantArray()
7+
8+exports.create = (api) => {
9+ return nest('history.obs.store', () => _store)
10+}
11+
history/sync/back.jsView
@@ -1,0 +1,31 @@
1+const nest = require('depnest')
2+const last = require('lodash/last')
3+
4+exports.gives = nest('history.sync.back')
5+
6+exports.needs = nest({
7+ 'history.obs.store': 'first',
8+ 'router.sync.router': 'first'
9+})
10+
11+exports.create = (api) => {
12+ return nest('history.sync.back', back)
13+
14+ function back () {
15+ const history = api.history.obs.store()
16+ if (history().length === 1) return false
17+
18+ history.pop()
19+ const location = last(history())
20+
21+ const newView = api.router.sync.router(location)
22+ renderPage(newView)
23+ }
24+}
25+
26+function renderPage (newView) {
27+ const oldView = document.body.firstChild
28+ oldView
29+ ? document.body.replaceChild(newView, oldView)
30+ : document.body.appendChild(newView)
31+}
history/sync/push.jsView
@@ -1,0 +1,30 @@
1+const nest = require('depnest')
2+
3+exports.gives = nest('history.sync.push')
4+
5+exports.needs = nest({
6+ 'history.obs.store': 'first',
7+ 'router.sync.router': 'first'
8+})
9+
10+exports.create = (api) => {
11+ return nest('history.sync.push', push)
12+
13+ function push (location) {
14+ const newView = api.router.sync.router(location)
15+
16+ if (!newView) return
17+
18+ api.history.obs.store().push(location)
19+
20+ renderPage(newView)
21+ }
22+}
23+
24+function renderPage (newView) {
25+ const oldView = document.body.firstChild
26+ oldView
27+ ? document.body.replaceChild(newView, oldView)
28+ : document.body.appendChild(newView)
29+
30+}

Built with git-ssb-web