mention link

This commit is contained in:
Henry Jameson 2021-06-07 16:16:10 +03:00
parent 1923ed84d4
commit 22c8f71945
6 changed files with 161 additions and 3 deletions

View file

@ -0,0 +1,71 @@
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { getTextColor, rgb2hex } from 'src/services/color_convert/color_convert.js'
import { mapGetters, mapState } from 'vuex'
import { convert } from 'chromatism'
const MentionLink = {
name: 'MentionLink',
props: {
url: {
required: true,
type: String
},
content: {
required: true,
type: String
},
origattrs: {
required: true,
type: Object
}
},
methods: {
onClick () {
const link = generateProfileLink(this.user.id, this.user.screen_name)
this.$router.push(link)
}
},
computed: {
user () {
return this.$store.getters.findUserByUrl(this.url)
},
isYou () {
// FIXME why user !== currentUser???
return this.user.screen_name === this.currentUser.screen_name
},
userName () {
return this.userNameFullUi.split('@')[0]
},
userNameFull () {
return this.user.screen_name
},
userNameFullUi () {
return this.user.screen_name_ui
},
highlight () {
return this.mergedConfig.highlight[this.user.screen_name]
},
bg () {
if (this.highlight) return this.highlight.color
},
text () {
if (this.bg) {
const linkColor = this.mergedConfig.customTheme.colors.link
const color = getTextColor(convert(this.bg).rgb, convert(linkColor).rgb)
return rgb2hex(color)
}
},
style () {
return [
this.bg && `--mention-bg: ${this.bg}`,
this.text && `--mention-text: ${this.text}`
].filter(_ => _).join('; ')
},
...mapGetters(['mergedConfig']),
...mapState({
currentUser: state => state.users.currentUser
})
}
}
export default MentionLink

View file

@ -0,0 +1,49 @@
.MentionLink {
position: relative;
white-space: normal;
display: inline-block;
& .new,
& .original,
& .full {
padding: 0 2px;
margin: 0 -2px;
display: inline-block;
border-radius: 2px;
}
.original {
opacity: 0.5;
}
.full {
pointer-events: none;
position: absolute;
opacity: 0;
top: 0;
bottom: 0;
left: 0;
word-wrap: normal;
white-space: nowrap;
transition: opacity 0.2s ease;
background-color: var(--mention-bg, var(--popover));
color: var(--mention-text, var(--link));
z-index: 1;
}
.new {
background-color: var(--mention-bg);
color: var(--mention-text, var(--link));
&.-you {
& .shortName,
& .full {
font-weight: 600;
}
}
}
&:hover .new .full {
opacity: 1;
}
}

View file

@ -0,0 +1,17 @@
<template>
<span class="MentionLink">
<a v-if="!user" v-html="content" href="url" class="original"/>
<span v-if="user" class="new" :style="style" :class="{ '-you': isYou }" >
<button class="button-unstyled short" @click.prevent="onClick">
<span class="shortName">@<span v-html="userName" /></span> <span v-if="isYou">(You)</span>
</button>
<span class="full" v-if="userName !== userNameFull">
@<span v-html="userNameFull" />
</span>
</span>
</span>
</template>
<script src="./mention_link.js"/>
<style lang="scss" src="./mention_link.scss"/>

View file

@ -1,7 +1,8 @@
import Vue from 'vue'
import { unescape } from 'lodash'
import { unescape, flattenDeep } from 'lodash'
import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
import StillImage from 'src/components/still-image/still-image.vue'
import MentionLink from 'src/components/mention_link/mention_link.vue'
import './rich_content.scss'
@ -22,6 +23,9 @@ export default Vue.component('RichContent', {
const attrs = getAttrs(tag)
return <StillImage {...{ attrs }} class="img"/>
}
const renderMention = (attrs, children) => {
return <MentionLink url={attrs.href} content={flattenDeep(children).join('')} origattrs={attrs}/>
}
const structure = convertHtml(this.html)
const processItem = (item) => {
if (typeof item === 'string') {
@ -45,8 +49,14 @@ export default Vue.component('RichContent', {
if (Array.isArray(item)) {
const [opener, children] = item
const Tag = getTagName(opener)
if (Tag === 'img') {
return renderImage(opener)
switch (Tag) {
case 'img':
return renderImage(opener)
case 'a':
const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) {
return renderMention(attrs, children)
}
}
if (children !== undefined) {
return <Tag {...{ attrs: getAttrs(opener) }}>

View file

@ -168,6 +168,13 @@ const StatusContent = {
LinkPreview,
RichContent
},
mounted () {
const { attentions } = this.status
attentions.forEach(attn => {
const { id } = attn
this.$store.state.api.backendInteractor.fetchUserIfMissing(this.$store, id)
})
},
methods: {
linkClicked (event) {
const target = event.target.closest('.status-content a')

View file

@ -246,6 +246,10 @@ export const getters = {
}
return result
},
findUserByUrl: state => query => {
return state.users
.find(u => u.statusnet_profile_url.toLowerCase() === query.toLowerCase())
},
relationship: state => id => {
const rel = id && state.relationships[id]
return rel || { id, loading: true }