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