| plugs/message/html/layout/mini.jsView |
|---|
| 1 | | -const {h, computed} = require('mutant') |
| 2 | | -const nest = require('depnest') |
| 1 | +const { h, map, computed } = require('mutant') |
| 2 | +var nest = require('depnest') |
| 3 | 3 | var ref = require('ssb-ref') |
| 4 | 4 | |
| 5 | 5 | exports.needs = nest({ |
| 6 | + 'profile.html.person': 'first', |
| 7 | + 'message.obs.backlinks': 'first', |
| 8 | + 'message.obs.name': 'first', |
| 6 | 9 | 'message.html': { |
| 10 | + link: 'first', |
| 11 | + meta: 'map', |
| 7 | 12 | action: 'map', |
| 8 | | - backlinks: 'first', |
| 9 | | - author: 'first', |
| 10 | | - meta: 'map', |
| 11 | 13 | timestamp: 'first' |
| 12 | 14 | }, |
| 13 | | - 'profile.html.person': 'first' |
| 15 | + 'about.html.image': 'first' |
| 14 | 16 | }) |
| 15 | 17 | |
| 16 | 18 | exports.gives = nest('message.html.layout') |
| 17 | 19 | |
| 18 | | -exports.create = (api) => { |
| 19 | | - return nest('message.html.layout', mini) |
| 20 | +exports.create = function (api) { |
| 21 | + return nest('message.html.layout', layout) |
| 20 | 22 | |
| 21 | | - function mini (msg, opts) { |
| 22 | | - if (opts.layout !== 'mini') return |
| 23 | + function layout (msg, opts) { |
| 24 | + if (!(opts.layout === 'mini')) return |
| 23 | 25 | |
| 24 | | - var classList = [] |
| 25 | | - var additionalMeta = [] |
| 26 | | - var footer = [] |
| 26 | + var backlinks = opts.backlinks ? api.message.obs.backlinks(msg.key) : [] |
| 27 | + var classList = ['Message -mini'] |
| 28 | + var replyInfo = null |
| 27 | 29 | |
| 28 | | - if (opts.showActions) { |
| 29 | | - |
| 30 | | - footer.push( |
| 31 | | - computed(msg.key, (key) => { |
| 32 | | - if (ref.isMsg(key)) { |
| 33 | | - return h('footer', [ |
| 34 | | - h('div.actions', [ |
| 35 | | - api.message.html.action(msg) |
| 36 | | - ]) |
| 37 | | - ]) |
| 38 | | - } |
| 39 | | - }) |
| 40 | | - ) |
| 30 | + if (msg.value.content.root) { |
| 31 | + classList.push('-reply') |
| 32 | + var branch = msg.value.content.branch |
| 33 | + if (branch) { |
| 34 | + if (!opts.previousId || (opts.previousId && last(branch) && opts.previousId !== last(branch))) { |
| 35 | + replyInfo = h('span', ['in reply to ', api.message.html.link(last(branch))]) |
| 36 | + } |
| 37 | + } |
| 38 | + } else if (msg.value.content.project) { |
| 39 | + replyInfo = h('span', ['on ', api.message.html.link(msg.value.content.project)]) |
| 41 | 40 | } |
| 42 | 41 | |
| 43 | | - if (opts.priority >= 2) { |
| 42 | + if (opts.priority === 2) { |
| 44 | 43 | classList.push('-new') |
| 45 | | - additionalMeta.push(h('span.flag -new', {title: 'New Message'})) |
| 46 | 44 | } |
| 47 | | - return h('Message -mini', {classList}, [ |
| 48 | | - h('header', [ |
| 49 | | - h('div.mini', [ |
| 50 | | - api.profile.html.person(msg.value.author), ' ', |
| 51 | | - opts.miniContent |
| 45 | + |
| 46 | + return h('div', { |
| 47 | + classList |
| 48 | + }, [ |
| 49 | + messageHeader(msg, { |
| 50 | + replyInfo, |
| 51 | + priority: opts.priority, |
| 52 | + miniContent: opts.miniContent |
| 53 | + }), |
| 54 | + h('section', [opts.content]), |
| 55 | + computed(msg.key, (key) => { |
| 56 | + if (ref.isMsg(key)) { |
| 57 | + return h('footer', [ |
| 58 | + h('div.actions', [ |
| 59 | + api.message.html.action(msg) |
| 60 | + ]) |
| 61 | + ]) |
| 62 | + } |
| 63 | + }), |
| 64 | + map(backlinks, backlink => { |
| 65 | + return h('a.backlink', { |
| 66 | + href: backlink, |
| 67 | + title: backlink |
| 68 | + }, [ |
| 69 | + h('strong', 'Referenced from'), ' ', api.message.obs.name(backlink) |
| 70 | + ]) |
| 71 | + }) |
| 72 | + ]) |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | + function messageHeader (msg, {replyInfo, priority, miniContent}) { |
| 77 | + var additionalMeta = [] |
| 78 | + if (opts.priority >= 2) { |
| 79 | + additionalMeta.push(h('span.flag -new', {title: 'New Message'})) |
| 80 | + } |
| 81 | + return h('header', [ |
| 82 | + h('div.main', [ |
| 83 | + h('a.avatar', {href: `${msg.value.author}`}, [ |
| 84 | + api.about.html.image(msg.value.author) |
| 85 | + ]), |
| 86 | + h('div.main', [ |
| 87 | + h('div.name', [ |
| 88 | + api.profile.html.person(msg.value.author) |
| 89 | + ]), |
| 90 | + h('div.meta', [ |
| 91 | + miniContent, ' ', |
| 92 | + replyInfo |
| 93 | + ]) |
| 94 | + ]) |
| 52 | 95 | ]), |
| 53 | | - h('div.meta', {}, [ |
| 96 | + h('div.meta', [ |
| 54 | 97 | api.message.html.meta(msg), |
| 55 | | - api.message.html.timestamp(msg), |
| 56 | | - additionalMeta |
| 98 | + additionalMeta, |
| 99 | + h('strong', api.message.html.timestamp(msg)) |
| 57 | 100 | ]) |
| 58 | | - ]), |
| 59 | | - h('section', [opts.content]), |
| 60 | | - footer |
| 61 | | - ]) |
| 101 | + ]) |
| 102 | + } |
| 62 | 103 | } |
| 63 | 104 | } |
| 105 | + |
| 106 | +function last (array) { |
| 107 | + if (Array.isArray(array)) { |
| 108 | + return array[array.length - 1] |
| 109 | + } else { |
| 110 | + return array |
| 111 | + } |
| 112 | +} |