Files: 26f53e95ef79f594060f273929b9b44b2e9b3481 / plugs / message / html / layout / default.js
3781 bytesRaw
1 | const { h, computed, Value, when } = require('mutant') |
2 | var nest = require('depnest') |
3 | var ref = require('ssb-ref') |
4 | var ExpanderHook = require('../../../../lib/expander-hook') |
5 | |
6 | exports.needs = nest({ |
7 | 'profile.html.person': 'first', |
8 | 'message.obs.backlinks': 'first', |
9 | 'message.obs.name': 'first', |
10 | 'message.obs.author': 'first', |
11 | 'message.html': { |
12 | link: 'first', |
13 | meta: 'map', |
14 | action: 'map', |
15 | timestamp: 'first', |
16 | backlinks: '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 | return nest('message.html.layout', layout) |
27 | |
28 | function layout (msg, {layout, previousId, priority, content, includeReferences = false, includeForks = true, compact = false}) { |
29 | if (!(layout === undefined || layout === 'default')) return |
30 | |
31 | var classList = ['Message'] |
32 | var replyInfo = null |
33 | |
34 | var needsExpand = Value(false) |
35 | var expanded = Value(false) |
36 | |
37 | if (msg.value.content.root) { |
38 | classList.push('-reply') |
39 | var branch = msg.value.content.branch |
40 | if (branch) { |
41 | if (!previousId || (previousId && last(branch) && previousId !== last(branch))) { |
42 | replyInfo = h('span', [i18n('in reply to '), api.message.html.link(last(branch))]) |
43 | } |
44 | } |
45 | } else if (msg.value.content.project) { |
46 | replyInfo = h('span', [i18n('on '), api.message.html.link(msg.value.content.project)]) |
47 | } |
48 | |
49 | if (compact) { |
50 | classList.push('-compact') |
51 | } |
52 | |
53 | if (priority === 2) { |
54 | classList.push('-new') |
55 | } |
56 | |
57 | return h('div', { |
58 | classList |
59 | }, [ |
60 | messageHeader(msg, { replyInfo, priority, needsExpand, expanded }), |
61 | h('section', { |
62 | classList: [ when(expanded, '-expanded') ], |
63 | hooks: [ ExpanderHook(needsExpand) ] |
64 | }, [content]), |
65 | computed(msg.key, (key) => { |
66 | if (ref.isMsg(key)) { |
67 | return h('footer', [ |
68 | when(needsExpand, h('div.expander', { |
69 | classList: when(expanded, null, '-truncated') |
70 | }, [ |
71 | h('a', { |
72 | href: '#', |
73 | 'ev-click': toggleAndTrack(expanded) |
74 | }, when(expanded, i18n('See less'), i18n('See more'))) |
75 | ])), |
76 | h('div.actions', [ |
77 | api.message.html.action(msg) |
78 | ]) |
79 | ]) |
80 | } |
81 | }), |
82 | api.message.html.backlinks(msg, {includeReferences, includeForks}) |
83 | ]) |
84 | |
85 | // scoped |
86 | |
87 | function messageHeader (msg, {replyInfo, priority}) { |
88 | var additionalMeta = [] |
89 | if (priority >= 2) { |
90 | additionalMeta.push(h('span.flag -new', {title: i18n('New Message')})) |
91 | } |
92 | return h('header', [ |
93 | h('div.main', [ |
94 | h('a.avatar', {href: `${msg.value.author}`}, [ |
95 | api.about.html.image(msg.value.author) |
96 | ]), |
97 | h('div.main', [ |
98 | h('div.name', [ |
99 | api.profile.html.person(msg.value.author) |
100 | ]), |
101 | h('div.meta', [ |
102 | api.message.html.timestamp(msg), ' ', |
103 | replyInfo |
104 | ]) |
105 | ]) |
106 | ]), |
107 | h('div.meta', [ |
108 | api.message.html.meta(msg), |
109 | additionalMeta |
110 | ]) |
111 | ]) |
112 | } |
113 | } |
114 | } |
115 | |
116 | function last (array) { |
117 | if (Array.isArray(array)) { |
118 | return array[array.length - 1] |
119 | } else { |
120 | return array |
121 | } |
122 | } |
123 | |
124 | function toggleAndTrack (param) { |
125 | return { |
126 | handleEvent: handleToggle, |
127 | param |
128 | } |
129 | } |
130 | |
131 | function handleToggle (ev) { |
132 | this.param.set(!this.param()) |
133 | if (!this.param()) { |
134 | ev.target.scrollIntoViewIfNeeded() |
135 | |
136 | // HACK: due to a browser bug, sometimes the body gets affected!? |
137 | // Why not just hack it!!! |
138 | if (document.body.scrollTop > 0) { |
139 | document.body.scrollTop = 0 |
140 | } |
141 | } |
142 | } |
143 |
Built with git-ssb-web