add custom emoji rendering

This commit is contained in:
Nolan Lawson 2018-01-21 22:46:27 -08:00
parent a11f31bb3f
commit ec411d1ce6
2 changed files with 49 additions and 21 deletions

View file

@ -32,8 +32,8 @@
</div>
{{/if}}
{{#if !status.spoiler_text || spoilerShown}}
<div class="status-content" ref:contentNode>
{{{status.content}}}
<div class="status-content">
{{{hydratedContent}}}
</div>
{{/if}}
{{#if originalMediaAttachments && originalMediaAttachments.length}}
@ -161,6 +161,12 @@
font-size: 0.9em;
}
:global(.status-content .status-emoji) {
width: 20px;
height: 20px;
margin: -3px 0;
}
:global(.status-content p) {
margin: 0 0 20px;
}
@ -283,12 +289,11 @@
import Toolbar from './Toolbar.html'
import { mark, stop } from '../_utils/marks'
import IntlRelativeFormat from 'intl-relativeformat'
import { replaceAll } from '../_utils/replaceAll'
const relativeFormat = new IntlRelativeFormat('en-US');
export default {
oncreate() {
this.hydrateHtml()
},
components: {
Avatar,
Media,
@ -304,31 +309,38 @@
},
originalStatus: (status) => status.reblog ? status.reblog : status,
originalAccount: (originalStatus) => originalStatus.account,
originalMediaAttachments: (originalStatus) => originalStatus.media_attachments
originalMediaAttachments: (originalStatus) => originalStatus.media_attachments,
hydratedContent: (originalStatus) => {
let status = originalStatus
let content = status.content
if (status.tags && status.tags.length) {
for (let tag of status.tags) {
let {name, url} = tag
content = replaceAll(content, url, `/tags/${name}`)
}
}
if (status.emojis && status.emojis.length) {
for (let emoji of status.emojis) {
let { shortcode, url } = emoji
let shortcodeWithColons = `:${shortcode}:`
content = replaceAll(
content,
shortcodeWithColons,
`<img class="status-emoji" draggable="false" src="${url}" alt="${shortcodeWithColons}" title="${shortcodeWithColons}" />`
)
}
}
return content
}
},
methods: {
onClickSpoilerButton() {
this.set({spoilerShown: !this.get('spoilerShown')})
this.hydrateHtml()
this.fire('recalculateHeight')
},
onClickSensitiveMediaButton() {
this.set({sensitiveShown: !this.get('sensitiveShown')})
this.fire('recalculateHeight')
},
hydrateHtml() {
let status = this.get('originalStatus')
if (status.tags && status.tags.length && this.refs.contentNode) {
let anchorTags = this.refs.contentNode.querySelectorAll('a[rel=tag]')
for (let tag of status.tags) {
let {name, url} = tag
for (let anchorTag of anchorTags) {
if (anchorTag.getAttribute('href') === url) {
anchorTag.setAttribute('href', `/tags/${name}`)
}
}
}
}
}
}
}

View file

@ -0,0 +1,16 @@
export function replaceAll(string, replacee, replacement) {
if (!string.length || !replacee.length || !replacement.length) {
return string
}
let idx
let pos = 0
while (true) {
idx = string.indexOf(replacee, pos)
if (idx === -1) {
break
}
string = string.substring(0, idx) + replacement + string.substring(idx + replacee.length)
pos = idx + replacement.length
}
return string
}