pleroma-fe/src/components/mention_link/mention_link.js

101 lines
2.4 KiB
JavaScript
Raw Normal View History

2021-06-07 15:16:10 +02:00
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters, mapState } from 'vuex'
2021-06-07 22:42:04 +02:00
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
2021-06-07 15:16:10 +02:00
const MentionLink = {
name: 'MentionLink',
props: {
url: {
required: true,
2021-06-07 15:16:10 +02:00
type: String
},
content: {
required: true,
type: String
},
2021-06-08 16:04:57 +02:00
userId: {
required: false,
type: String
},
userScreenName: {
required: false,
type: String
},
2021-06-08 10:38:44 +02:00
firstMention: {
required: false,
type: Boolean,
default: false
2021-06-07 15:16:10 +02:00
}
},
methods: {
onClick () {
2021-06-08 16:04:57 +02:00
const link = generateProfileLink(
this.userId || this.user.id,
this.userScreenName || this.user.screen_name
)
2021-06-07 15:16:10 +02:00
this.$router.push(link)
}
},
computed: {
user () {
2021-06-08 16:04:57 +02:00
return this.url && this.$store.getters.findUserByUrl(this.url)
2021-06-07 15:16:10 +02:00
},
isYou () {
// FIXME why user !== currentUser???
2021-06-08 16:04:57 +02:00
return this.user && this.user.screen_name === this.currentUser.screen_name
2021-06-07 15:16:10 +02:00
},
userName () {
2021-06-08 16:04:57 +02:00
return this.user && this.userNameFullUi.split('@')[0]
2021-06-07 15:16:10 +02:00
},
userNameFull () {
2021-06-08 16:04:57 +02:00
return this.user && this.user.screen_name
2021-06-07 15:16:10 +02:00
},
userNameFullUi () {
2021-06-08 16:04:57 +02:00
return this.user && this.user.screen_name_ui
2021-06-07 15:16:10 +02:00
},
highlight () {
2021-06-08 16:04:57 +02:00
return this.user && this.mergedConfig.highlight[this.user.screen_name]
2021-06-07 15:16:10 +02:00
},
2021-06-07 22:42:04 +02:00
highlightType () {
return this.highlight && ('-' + this.highlight.type)
2021-06-07 15:16:10 +02:00
},
2021-06-07 22:42:04 +02:00
highlightClass () {
if (this.highlight) return highlightClass(this.user)
2021-06-07 15:16:10 +02:00
},
2021-06-08 11:58:28 +02:00
oldPlace () {
2021-06-08 13:51:42 +02:00
return !this.mergedConfig.mentionsOwnLine
2021-06-08 11:58:28 +02:00
},
oldStyle () {
2021-06-08 13:51:42 +02:00
return !this.mergedConfig.mentionsNewStyle
2021-06-08 11:58:28 +02:00
},
2021-06-07 15:16:10 +02:00
style () {
2021-06-07 22:42:04 +02:00
if (this.highlight) {
const {
backgroundColor,
backgroundPosition,
backgroundImage,
...rest
} = highlightStyle(this.highlight)
return rest
}
2021-06-07 15:16:10 +02:00
},
2021-06-08 10:38:44 +02:00
classnames () {
return [
{
'-you': this.isYou,
'-highlighted': this.highlight,
2021-06-08 11:58:28 +02:00
'-firstMention': this.firstMention,
'-oldStyle': this.oldStyle
2021-06-08 10:38:44 +02:00
},
this.highlightType
]
},
2021-06-07 15:16:10 +02:00
...mapGetters(['mergedConfig']),
...mapState({
currentUser: state => state.users.currentUser
})
}
}
export default MentionLink