pixelfed/resources/assets/js/components/PostComments.vue

169 lines
5.5 KiB
Vue
Raw Normal View History

2018-12-31 04:31:57 +00:00
<style scoped>
2018-10-17 18:41:54 +00:00
span {
font-size: 14px;
}
.comment-text {
}
2018-11-03 03:08:15 +00:00
.comment-text p {
display: inline;
2018-10-17 18:41:54 +00:00
}
</style>
<template>
<div>
2018-11-03 03:08:15 +00:00
<div class="postCommentsLoader text-center">
2018-10-17 18:41:54 +00:00
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
2018-11-03 03:08:15 +00:00
<div class="postCommentsContainer d-none">
2018-11-25 05:36:17 +00:00
<p class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
2018-10-17 18:41:54 +00:00
<div class="comments" data-min-id="0" data-max-id="0">
2019-02-11 05:22:46 +00:00
<p v-for="(reply, index) in results" class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
<span>
2019-02-13 05:46:05 +00:00
<a class="text-dark font-weight-bold mr-1" :href="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
<span class="text-break" v-html="reply.content"></span>
2019-02-11 05:22:46 +00:00
</span>
2019-02-13 05:46:05 +00:00
<span class="pl-2" style="min-width:38px">
2019-02-11 05:22:46 +00:00
<span v-on:click="likeStatus(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
2019-03-07 07:43:12 +00:00
<post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
2018-10-17 18:41:54 +00:00
</span>
</p>
</div>
</div>
</div>
</template>
2019-02-11 05:22:46 +00:00
<style type="text/css" scoped>
.text-lighter {
color:#B8C2CC !important;
}
2019-02-13 05:46:05 +00:00
.text-break {
word-break: break-all !important;
}
2019-02-11 05:22:46 +00:00
</style>
2018-10-17 18:41:54 +00:00
<script>
2019-02-13 05:46:05 +00:00
2018-10-17 18:41:54 +00:00
export default {
2018-11-22 20:21:36 +00:00
props: ['post-id', 'post-username', 'user'],
2018-10-17 18:41:54 +00:00
data() {
return {
2018-11-29 02:27:38 +00:00
results: null,
2018-10-17 18:41:54 +00:00
pagination: {},
min_id: 0,
max_id: 0,
reply_to_profile_id: 0,
}
},
mounted() {
this.fetchData();
},
2018-11-13 19:46:38 +00:00
updated() {
pixelfed.readmore();
},
2018-10-17 18:41:54 +00:00
methods: {
embed(e) {
2018-11-25 05:36:17 +00:00
//pixelfed.embed.build(e);
2018-10-17 18:41:54 +00:00
},
2018-11-22 20:21:36 +00:00
deleteComment(id, i) {
axios.post('/i/delete', {
type: 'comment',
item: id
}).then(res => {
this.results.splice(i, 1);
}).catch(err => {
swal('Something went wrong!', 'Please try again later', 'error');
});
},
2018-11-03 03:08:15 +00:00
l(e) {
let len = e.length;
if(len < 10) { return e; }
return e.substr(0, 10)+'...';
},
2018-10-17 18:41:54 +00:00
reply(e) {
this.reply_to_profile_id = e.account.id;
$('.comment-form input[name=comment]').val('@'+e.account.username+' ');
$('.comment-form input[name=comment]').focus();
},
fetchData() {
let url = '/api/v2/comments/'+this.postUsername+'/status/'+this.postId;
axios.get(url)
.then(response => {
let self = this;
2018-12-30 05:36:16 +00:00
this.results = _.reverse(response.data.data);
2018-10-17 18:41:54 +00:00
this.pagination = response.data.meta.pagination;
2018-11-25 05:36:17 +00:00
if(this.results.length > 0) {
$('.load-more-link').removeClass('d-none');
}
2018-11-03 03:08:15 +00:00
$('.postCommentsLoader').addClass('d-none');
$('.postCommentsContainer').removeClass('d-none');
2018-10-17 18:41:54 +00:00
}).catch(error => {
2018-11-03 03:08:15 +00:00
if(!error.response) {
$('.postCommentsLoader .lds-ring')
.attr('style','width:100%')
.addClass('pt-4 font-weight-bold text-muted')
2018-12-25 21:59:32 +00:00
.text('An error occurred, cannot fetch comments. Please try again later.');
2018-11-03 03:08:15 +00:00
} else {
switch(error.response.status) {
case 401:
$('.postCommentsLoader .lds-ring')
.attr('style','width:100%')
.addClass('pt-4 font-weight-bold text-muted')
.text('Please login to view.');
break;
default:
$('.postCommentsLoader .lds-ring')
.attr('style','width:100%')
.addClass('pt-4 font-weight-bold text-muted')
2018-12-25 21:59:32 +00:00
.text('An error occurred, cannot fetch comments. Please try again later.');
2018-11-03 03:08:15 +00:00
break;
}
}
2018-10-17 18:41:54 +00:00
});
},
loadMore(e) {
e.preventDefault();
if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
$('.load-more-link').addClass('d-none');
return;
}
2018-11-03 03:08:15 +00:00
$('.postCommentsLoader').removeClass('d-none');
2018-10-17 18:41:54 +00:00
let next = this.pagination.links.next;
axios.get(next)
.then(response => {
let self = this;
let res = response.data.data;
2018-11-03 03:08:15 +00:00
$('.postCommentsLoader').addClass('d-none');
2018-10-17 18:41:54 +00:00
for(let i=0; i < res.length; i++) {
this.results.unshift(res[i]);
}
this.pagination = response.data.meta.pagination;
});
2019-02-11 05:22:46 +00:00
},
likeStatus(status, $event) {
if($('body').hasClass('loggedIn') == false) {
return;
}
axios.post('/i/like', {
item: status.id
}).then(res => {
status.favourites_count = res.data.count;
if(status.favourited == true) {
status.favourited = false;
} else {
status.favourited = true;
}
}).catch(err => {
swal('Error', 'Something went wrong, please try again later.', 'error');
});
2019-02-13 05:46:05 +00:00
},
truncate(str,lim) {
return _.truncate(str,{
length: lim
});
2018-10-17 18:41:54 +00:00
}
2019-02-11 05:22:46 +00:00
},
2019-02-13 05:46:05 +00:00
2018-10-17 18:41:54 +00:00
}
</script>