frontend/src/components/Post.vue
2021-01-17 00:20:05 +11:00

68 lines
No EOL
1.4 KiB
Vue

<template>
<div class="post">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">{{post.Thread.name | truncateMid(50)}}</p>
<p class="subtitle is-6">{{username}}</p>
</div>
</div>
</div>
<div class="content">
<div tabindex='-1'
class='post__content'
v-html='postContentHTML'
@mouseup='setShowQuote'
@blur='showQuote = false'
></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ThreadPost',
props: [
'post',
'highlight',
'showReply',
'showThread',
'showSelect',
'clickForPost',
'allowQuote'
],
data() {
let post = this.post
return {
hover: false,
showShareModal: false,
showReportPostModal: false,
postURL: `${location.origin}/p/${post.id}`,
selected: false,
showQuote: false,
quoteX: 0,
quoteY: 0,
quoteSelection: '',
postContentHTML: post.content
}
},
computed: {
username () {
if(this.post.User) {
return this.post.User.username
} else {
return '[deleted]'}
},
showActions () {
return this.hover || this.showShareModal || this.showReportPostModal
}
},
mounted () {
this.$linkExpander(this.post.content, v => this.postContentHTML = v);
}
}
</script>