Files: 3451510316992d414ec76ba5b29681fe359b7428 / lib / depject / message / html / layout / mini.js
4275 bytesRaw
1 | const { h, computed, Value, when } = require('mutant') |
2 | const nest = require('depnest') |
3 | const ref = require('ssb-ref') |
4 | const ExpanderHook = require('../../../../expander-hook') |
5 | const timestamp = require('../../../../message/html/timestamp') |
6 | |
7 | exports.needs = nest({ |
8 | 'profile.html.person': 'first', |
9 | 'contact.obs.following': 'first', |
10 | 'keys.sync.id': 'first', |
11 | 'message.html': { |
12 | link: 'first', |
13 | metas: 'first', |
14 | actions: 'first', |
15 | references: 'first', |
16 | forks: 'first' |
17 | }, |
18 | 'about.html.image': 'first', |
19 | 'intl.sync.i18n': 'first' |
20 | }) |
21 | |
22 | exports.gives = nest('message.html.layout') |
23 | |
24 | exports.create = function (api) { |
25 | const i18n = api.intl.sync.i18n |
26 | let yourFollows = null |
27 | |
28 | // to get sync follows |
29 | setImmediate(() => { |
30 | const yourId = api.keys.sync.id() |
31 | yourFollows = api.contact.obs.following(yourId) |
32 | }) |
33 | |
34 | return nest('message.html.layout', layout) |
35 | |
36 | function layout (msg, { layout, priority, miniContent, content, includeReferences, includeForks = true, actions = true, hooks, forkedFrom, outOfContext }) { |
37 | if (!(layout === 'mini')) return |
38 | |
39 | const classList = ['Message -mini'] |
40 | |
41 | const needsExpand = Value(false) |
42 | const expanded = Value(false) |
43 | |
44 | // new message previews shouldn't contract |
45 | if (!msg.key) expanded.set(true) |
46 | |
47 | if (yourFollows && yourFollows().includes(msg.value.author)) { |
48 | classList.push('-following') |
49 | } |
50 | |
51 | let replyInfo = null |
52 | |
53 | if (msg.value.content.root) { |
54 | classList.push('-reply') |
55 | if (forkedFrom) { |
56 | replyInfo = h('span', [i18n('forked from parent thread '), api.message.html.link(forkedFrom)]) |
57 | } else if (outOfContext) { |
58 | replyInfo = h('span', [i18n('in reply to '), api.message.html.link(msg.value.content.root)]) |
59 | } |
60 | } else if (msg.value.content.project) { |
61 | replyInfo = h('span', ['on ', api.message.html.link(msg.value.content.project)]) |
62 | } |
63 | |
64 | if (priority === 2) { |
65 | classList.push('-new') |
66 | } |
67 | |
68 | return h('div', { |
69 | classList, |
70 | hooks |
71 | }, [ |
72 | messageHeader(msg, { |
73 | replyInfo, priority, miniContent |
74 | }), |
75 | h('section.content', { |
76 | classList: [when(expanded, '-expanded')], |
77 | hooks: [ExpanderHook(needsExpand)] |
78 | }, [content]), |
79 | computed([msg.key, actions], (key, actions) => { |
80 | if (ref.isMsg(key) && actions) { |
81 | return h('footer', [ |
82 | when(needsExpand, h('div.expander', { |
83 | classList: when(expanded, null, '-truncated') |
84 | }, [ |
85 | h('a', { |
86 | href: '#', |
87 | 'ev-click': toggleAndTrack(expanded) |
88 | }, when(expanded, i18n('See less'), i18n('See more'))) |
89 | ])), |
90 | h('div.actions', [ |
91 | api.message.html.actions(msg) |
92 | ]) |
93 | ]) |
94 | } |
95 | }), |
96 | includeReferences ? api.message.html.references(msg) : null, |
97 | includeForks ? api.message.html.forks(msg) : null |
98 | ]) |
99 | |
100 | // scoped |
101 | |
102 | function messageHeader (msg, { replyInfo, priority, miniContent }) { |
103 | const yourId = api.keys.sync.id() |
104 | const additionalMeta = [] |
105 | if (priority >= 2) { |
106 | additionalMeta.push(h('span.flag -new', { title: 'New Message' })) |
107 | } |
108 | return h('header', [ |
109 | h('div.main', [ |
110 | h('a.avatar', { href: `${msg.value.author}` }, [ |
111 | api.about.html.image(msg.value.author) |
112 | ]), |
113 | h('div.main', [ |
114 | h('div.name', [ |
115 | api.profile.html.person(msg.value.author), |
116 | msg.value.author === yourId ? [' ', h('span.you', {}, i18n('(you)'))] : null |
117 | ]), |
118 | h('div.meta', [ |
119 | miniContent, ' ', |
120 | replyInfo |
121 | ]) |
122 | ]) |
123 | ]), |
124 | h('div.meta', [ |
125 | h('strong', timestamp(msg)), |
126 | additionalMeta, |
127 | api.message.html.metas(msg) |
128 | ]) |
129 | ]) |
130 | } |
131 | } |
132 | } |
133 | |
134 | function toggleAndTrack (param) { |
135 | return { |
136 | handleEvent: handleToggle, |
137 | param |
138 | } |
139 | } |
140 | |
141 | function handleToggle (ev) { |
142 | this.param.set(!this.param()) |
143 | if (!this.param()) { |
144 | ev.target.scrollIntoViewIfNeeded() |
145 | |
146 | // HACK: due to a browser bug, sometimes the body gets affected!? |
147 | // Why not just hack it!!! |
148 | if (document.body.scrollTop > 0) { |
149 | document.body.scrollTop = 0 |
150 | } |
151 | } |
152 | } |
153 |
Built with git-ssb-web