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