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

130 lines
3.5 KiB
JavaScript
Raw Normal View History

2016-10-28 16:08:03 +00:00
import Attachment from '../attachment/attachment.vue'
2016-10-30 15:12:35 +00:00
import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue'
2016-11-03 15:59:27 +00:00
import PostStatusForm from '../post_status_form/post_status_form.vue'
2017-02-16 14:58:49 +00:00
import UserCardContent from '../user_card_content/user_card_content.vue'
import { filter } from 'lodash'
2016-10-28 16:08:03 +00:00
2016-10-28 13:19:42 +00:00
const Status = {
props: [
'statusoid',
2017-03-05 13:34:14 +00:00
'expandable',
'inConversation',
'focused',
'highlight',
'compact',
'replies'
],
2016-11-03 15:59:27 +00:00
data: () => ({
replying: false,
2017-02-13 23:01:50 +00:00
expanded: false,
2017-02-16 14:58:49 +00:00
unmuted: false,
userExpanded: false
2016-11-03 15:59:27 +00:00
}),
2016-10-28 16:08:03 +00:00
computed: {
muteWords () {
return this.$store.state.config.muteWords
},
hideAttachments () {
2017-03-05 13:34:14 +00:00
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
},
2016-10-28 16:08:03 +00:00
retweet () { return !!this.statusoid.retweeted_status },
retweeter () { return this.statusoid.user.name },
status () {
if (this.retweet) {
return this.statusoid.retweeted_status
} else {
return this.statusoid
}
2016-11-06 19:45:26 +00:00
},
loggedIn () {
return !!this.$store.state.users.currentUser
2017-02-13 23:01:50 +00:00
},
muteWordHits () {
const statusText = this.status.text.toLowerCase()
const hits = filter(this.muteWords, (muteWord) => {
return statusText.includes(muteWord.toLowerCase())
})
return hits
},
muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
isReply () { return !!this.status.in_reply_to_status_id },
borderColor () {
return {
2017-03-09 10:48:43 +00:00
borderBottomColor: this.$store.state.config.colors['base02']
}
},
isFocused () {
// retweet or root of an expanded conversation
2017-04-12 16:07:55 +00:00
if (this.focused) {
return true
2017-04-12 16:07:55 +00:00
} else if (!this.inConversation) {
return false
2017-04-12 16:07:55 +00:00
}
// use conversation highlight only when in conversation
return this.status.id === this.highlight
}
2016-10-28 16:08:03 +00:00
},
components: {
2016-10-30 15:12:35 +00:00
Attachment,
2016-11-03 15:59:27 +00:00
FavoriteButton,
RetweetButton,
DeleteButton,
2017-02-16 14:58:49 +00:00
PostStatusForm,
UserCardContent
2016-11-03 15:59:27 +00:00
},
methods: {
linkClicked ({target}) {
if (target.tagName === 'SPAN') {
target = target.parentNode
}
if (target.tagName === 'A') {
window.open(target.href, '_blank')
}
},
2016-11-03 15:59:27 +00:00
toggleReplying () {
this.replying = !this.replying
},
gotoOriginal (id) {
// only handled by conversation, not status_or_conversation
this.$emit('goto', id)
},
toggleExpanded () {
this.$emit('toggleExpanded')
2017-02-13 23:01:50 +00:00
},
toggleMute () {
this.unmuted = !this.unmuted
2017-02-16 14:58:49 +00:00
},
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
replyEnter (id, event) {
if (this.$store.state.config.hoverPreview) {
let rect = event.target.getBoundingClientRect()
2017-06-07 15:13:24 +00:00
this.$emit('preview', Number(id), rect.left + 20, rect.top + 20 + window.pageYOffset)
}
},
replyLeave () {
this.$emit('preview', 0, 0, 0)
2016-11-03 15:59:27 +00:00
}
},
watch: {
2017-04-12 16:07:55 +00:00
'highlight': function (id) {
id = Number(id)
if (this.status.id === id) {
let rect = this.$el.getBoundingClientRect()
2017-04-12 16:07:55 +00:00
if (rect.top < 100) {
window.scrollBy(0, rect.top - 200)
} else if (rect.bottom > window.innerHeight - 50) {
window.scrollBy(0, rect.bottom - window.innerHeight + 50)
2017-04-12 16:07:55 +00:00
}
}
}
2016-10-28 16:08:03 +00:00
}
2016-10-28 13:19:42 +00:00
}
export default Status