68 lines
1.4 KiB
Vue
68 lines
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>
|