pinafore/routes/_components/profile/AccountDisplayName.html
Nolan Lawson 37e12e8d73
add option to remove emoji from user display names (#450)
* add option to remove emoji from user display names

fixes #449

* slight memory perf improvement
2018-08-19 18:03:26 -07:00

35 lines
1.3 KiB
HTML

<span class="account-display-name">{@html massagedAccountName }</span>
<style>
.account-display-name {
pointer-events: none; /* allows focus to work correctly, focus on the parent only */
}
</style>
<script>
import { emojifyText, removeEmoji } from '../../_utils/emojifyText'
import { store } from '../../_store/store'
import escapeHtml from 'escape-html'
import emojiRegex from 'emoji-regex'
let theEmojiRegex
export default {
store: () => store,
computed: {
emojis: ({ account }) => (account.emojis || []),
accountName: ({ account }) => (account.display_name || account.username),
massagedAccountName: ({ accountName, emojis, $autoplayGifs, $omitEmojiInDisplayNames }) => {
accountName = escapeHtml(accountName)
if ($omitEmojiInDisplayNames) { // display name emoji are annoying to some screenreader users
theEmojiRegex = theEmojiRegex || emojiRegex() // only init when needed
let emojiFreeAccountName = removeEmoji(accountName.replace(theEmojiRegex, ''), emojis).trim()
if (emojiFreeAccountName) {
return emojiFreeAccountName // only remove emoji if the resulting username is non-empty
}
}
return emojifyText(accountName, emojis, $autoplayGifs)
}
}
}
</script>