Commit 452ca9b83a7f4a1dc4fd6398dd62555e98c8fe5b
markdown: add "-pending" class to image blobs that haven't yet pulled
Matt McKegg committed on 6/12/2017, 5:00:23 AMParent: a3f728451ea4f496b80c42138d030295e43de153
Files changed
| message/html/markdown.js | changed |
| message/html/markdown.js | ||
|---|---|---|
| @@ -2,11 +2,13 @@ | ||
| 2 | 2 … | const h = require('mutant/h') |
| 3 | 3 … | const ref = require('ssb-ref') |
| 4 | 4 … | const nest = require('depnest') |
| 5 | 5 … | var htmlEscape = require('html-escape') |
| 6 … | +var watch = require('mutant/watch') | |
| 6 | 7 … | |
| 7 | 8 … | exports.needs = nest({ |
| 8 | 9 … | 'blob.sync.url': 'first', |
| 10 … | + 'blob.obs.has': 'first', | |
| 9 | 11 … | 'emoji.sync.url': 'first' |
| 10 | 12 … | }) |
| 11 | 13 … | |
| 12 | 14 … | exports.gives = nest('message.html.markdown') |
| @@ -27,24 +29,26 @@ | ||
| 27 | 29 … | } |
| 28 | 30 … | }) |
| 29 | 31 … | } |
| 30 | 32 … | |
| 31 | - var md = h('div', {className: 'Markdown'}) | |
| 32 | - md.innerHTML = renderer.block(content.text, { | |
| 33 | - emoji: (emoji) => { | |
| 34 | - var url = emojiMentions[emoji] | |
| 35 | - ? api.blob.sync.url(emojiMentions[emoji]) | |
| 36 | - : api.emoji.sync.url(emoji) | |
| 37 | - return renderEmoji(emoji, url) | |
| 38 | - }, | |
| 39 | - toUrl: (id) => { | |
| 40 | - if (ref.isBlob(id)) return api.blob.sync.url(id) | |
| 41 | - return mentions[id] || id | |
| 42 | - }, | |
| 43 | - imageLink: (id) => id | |
| 33 … | + return h('Markdown', { | |
| 34 … | + hooks: [ | |
| 35 … | + LoadingBlobHook(api.blob.obs.has) | |
| 36 … | + ], | |
| 37 … | + innerHTML: renderer.block(content.text, { | |
| 38 … | + emoji: (emoji) => { | |
| 39 … | + var url = emojiMentions[emoji] | |
| 40 … | + ? api.blob.sync.url(emojiMentions[emoji]) | |
| 41 … | + : api.emoji.sync.url(emoji) | |
| 42 … | + return renderEmoji(emoji, url) | |
| 43 … | + }, | |
| 44 … | + toUrl: (id) => { | |
| 45 … | + if (ref.isBlob(id)) return api.blob.sync.url(id) | |
| 46 … | + return mentions[id] || id | |
| 47 … | + }, | |
| 48 … | + imageLink: (id) => id | |
| 49 … | + }) | |
| 44 | 50 … | }) |
| 45 | - | |
| 46 | - return md | |
| 47 | 51 … | } |
| 48 | 52 … | |
| 49 | 53 … | function renderEmoji (emoji, url) { |
| 50 | 54 … | if (!url) return ':' + emoji + ':' |
| @@ -57,4 +61,27 @@ | ||
| 57 | 61 … | > |
| 58 | 62 … | ` |
| 59 | 63 … | } |
| 60 | 64 … | } |
| 65 … | + | |
| 66 … | +function LoadingBlobHook (hasBlob) { | |
| 67 … | + return function (element) { | |
| 68 … | + var releases = [] | |
| 69 … | + element.querySelectorAll('img').forEach(img => { | |
| 70 … | + var id = ref.extract(img.src) | |
| 71 … | + if (id) { | |
| 72 … | + releases.push(watch(hasBlob(id), has => { | |
| 73 … | + if (has === false) { | |
| 74 … | + img.classList.add('-pending') | |
| 75 … | + } else { | |
| 76 … | + img.classList.remove('-pending') | |
| 77 … | + } | |
| 78 … | + })) | |
| 79 … | + } | |
| 80 … | + }) | |
| 81 … | + return function () { | |
| 82 … | + while (releases.length) { | |
| 83 … | + releases.pop()() | |
| 84 … | + } | |
| 85 … | + } | |
| 86 … | + } | |
| 87 … | +} | |
Built with git-ssb-web