1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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
|
