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

135 lines
3.4 KiB
JavaScript
Raw Normal View History

2021-06-07 13:16:10 +00:00
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters, mapState } from 'vuex'
2021-06-07 20:42:04 +00:00
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import UserAvatar from '../user_avatar/user_avatar.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAt
} from '@fortawesome/free-solid-svg-icons'
library.add(
faAt
)
2021-06-07 13:16:10 +00:00
const MentionLink = {
name: 'MentionLink',
components: {
UserAvatar
},
2021-06-07 13:16:10 +00:00
props: {
url: {
required: true,
2021-06-07 13:16:10 +00:00
type: String
},
content: {
required: true,
type: String
},
2021-06-08 14:04:57 +00:00
userId: {
required: false,
type: String
},
userScreenName: {
required: false,
type: String
2021-06-07 13:16:10 +00:00
}
},
methods: {
onClick () {
2021-06-08 14:04:57 +00:00
const link = generateProfileLink(
this.userId || this.user.id,
this.userScreenName || this.user.screen_name
)
2021-06-07 13:16:10 +00:00
this.$router.push(link)
}
},
computed: {
user () {
return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
2021-06-07 13:16:10 +00:00
},
isYou () {
// FIXME why user !== currentUser???
return this.user && this.user.id === this.currentUser.id
2021-06-07 13:16:10 +00:00
},
userName () {
2021-06-08 14:04:57 +00:00
return this.user && this.userNameFullUi.split('@')[0]
2021-06-07 13:16:10 +00:00
},
serverName () {
// XXX assumed that domain does not contain @
return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
},
2021-06-07 13:16:10 +00:00
userNameFull () {
2021-06-08 14:04:57 +00:00
return this.user && this.user.screen_name
2021-06-07 13:16:10 +00:00
},
userNameFullUi () {
2021-06-08 14:04:57 +00:00
return this.user && this.user.screen_name_ui
2021-06-07 13:16:10 +00:00
},
highlight () {
2021-06-08 14:04:57 +00:00
return this.user && this.mergedConfig.highlight[this.user.screen_name]
2021-06-07 13:16:10 +00:00
},
2021-06-07 20:42:04 +00:00
highlightType () {
return this.highlight && ('-' + this.highlight.type)
2021-06-07 13:16:10 +00:00
},
2021-06-07 20:42:04 +00:00
highlightClass () {
if (this.highlight) return highlightClass(this.user)
2021-06-07 13:16:10 +00:00
},
style () {
2021-06-07 20:42:04 +00:00
if (this.highlight) {
const {
backgroundColor,
backgroundPosition,
backgroundImage,
...rest
} = highlightStyle(this.highlight)
return rest
}
2021-06-07 13:16:10 +00:00
},
2021-06-08 08:38:44 +00:00
classnames () {
return [
{
'-you': this.isYou && this.shouldBoldenYou,
'-highlighted': this.highlight
2021-06-08 08:38:44 +00:00
},
this.highlightType
]
},
useAtIcon () {
return this.mergedConfig.useAtIcon
},
isRemote () {
return this.userName !== this.userNameFull
},
shouldShowFullUserName () {
const conf = this.mergedConfig.mentionLinkDisplay
if (conf === 'short') {
return false
} else if (conf === 'full') {
return true
} else { // full_for_remote
return this.isRemote
}
},
shouldShowTooltip () {
return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
},
shouldShowAvatar () {
return this.mergedConfig.mentionLinkShowAvatar
},
shouldShowYous () {
return this.mergedConfig.mentionLinkShowYous
},
shouldBoldenYou () {
return this.mergedConfig.mentionLinkBoldenYou
},
shouldFadeDomain () {
return this.mergedConfig.mentionLinkFadeDomain
},
2021-06-07 13:16:10 +00:00
...mapGetters(['mergedConfig']),
...mapState({
currentUser: state => state.users.currentUser
})
}
}
export default MentionLink