mirror/pixelfed
1
0
Fork 1
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-12-25 01:05:36 +00:00
Code Issues Releases Wiki Activity

Update PostComments component

Browse source
This commit is contained in:
Daniel Supernault 2018-11-02 21:08:15 -06:00
parent 411714491b
commit 4941a24a3f
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 40 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
resources/assets/js/components/PostComments.vue
View file

@ -1,69 +1,26 @@
<style type="text/css"> <style>
.b-dropdown > button {
padding:0 !important;
}
</style>
<style scoped>
span { span {
font-size: 14px; font-size: 14px;
} }
.comment-text { .comment-text {
word-break: break-all; word-break: break-all;
} }
.b-dropdown { .comment-text p {
padding:0 !important; display: inline;
} }
.b-dropdown < button {
}
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #6c757d;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #6c757d transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style> </style>
<template> <template>
<div> <div>
<div class="lwrapper text-center"> <div class="postCommentsLoader text-center">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div> <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div> </div>
<div class="cwrapper d-none"> <div class="postCommentsContainer d-none">
<p class="mb-1 text-center load-more-link"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p> <p class="mb-1 text-center load-more-link"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
<div class="comments" data-min-id="0" data-max-id="0"> <div class="comments" data-min-id="0" data-max-id="0">
<p class="mb-0 d-flex justify-content-between align-items-center" v-for="(comment, index) in results" :data-id="comment.id" v-bind:key="comment.id"> <p class="mb-0 d-flex justify-content-between align-items-center" v-for="(comment, index) in results" :data-id="comment.id" v-bind:key="comment.id">
<span class="pr-3"> <span class="pr-3">
<span class="font-weight-bold pr-1"><bdi><a class="text-dark" :href="comment.account.url">{{comment.account.username}}</a></bdi></span> <span class="font-weight-bold pr-1"><bdi><a class="text-dark" :href="comment.account.url" :title="comment.account.username">{{l(comment.account.username)}}</a></bdi></span>
<span class="comment-text" v-html="comment.content"></span> <span class="comment-text" v-html="comment.content"></span>
</span> </span>
<b-dropdown :id="comment.uri" variant="link" no-caret class="float-right"> <b-dropdown :id="comment.uri" variant="link" no-caret class="float-right">
@ -102,6 +59,11 @@ export default {
embed(e) { embed(e) {
pixelfed.embed.build(e); pixelfed.embed.build(e);
}, },
l(e) {
let len = e.length;
if(len < 10) { return e; }
return e.substr(0, 10)+'...';
},
reply(e) { reply(e) {
this.reply_to_profile_id = e.account.id; this.reply_to_profile_id = e.account.id;
$('.comment-form input[name=comment]').val('@'+e.account.username+' '); $('.comment-form input[name=comment]').val('@'+e.account.username+' ');
@ -114,11 +76,33 @@ export default {
let self = this; let self = this;
this.results = response.data.data; this.results = response.data.data;
this.pagination = response.data.meta.pagination; this.pagination = response.data.meta.pagination;
$('.lwrapper').addClass('d-none'); $('.postCommentsLoader').addClass('d-none');
$('.cwrapper').removeClass('d-none'); $('.postCommentsContainer').removeClass('d-none');
}).catch(error => { }).catch(error => {
$('.lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occured, cannot fetch comments. Please try again later.'); if(!error.response) {
$('.postCommentsLoader .lds-ring')
.attr('style','width:100%')
.addClass('pt-4 font-weight-bold text-muted')
.text('An error occured, cannot fetch comments. Please try again later.');
console.log(error); console.log(error);
} 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')
.text('An error occured, cannot fetch comments. Please try again later.');
break;
}
console.log(error.response.status);
}
}); });
}, },
loadMore(e) { loadMore(e) {
@ -127,18 +111,18 @@ export default {
$('.load-more-link').addClass('d-none'); $('.load-more-link').addClass('d-none');
return; return;
} }
$('.cwrapper').addClass('d-none'); $('.postCommentsContainer').addClass('d-none');
$('.lwrapper').removeClass('d-none'); $('.postCommentsLoader').removeClass('d-none');
let next = this.pagination.links.next; let next = this.pagination.links.next;
axios.get(next) axios.get(next)
.then(response => { .then(response => {
let self = this; let self = this;
let res = response.data.data; let res = response.data.data;
$('.lwrapper').addClass('d-none'); $('.postCommentsLoader').addClass('d-none');
for(let i=0; i < res.length; i++) { for(let i=0; i < res.length; i++) {
this.results.unshift(res[i]); this.results.unshift(res[i]);
} }
$('.cwrapper').removeClass('d-none'); $('.postCommentsContainer').removeClass('d-none');
this.pagination = response.data.meta.pagination; this.pagination = response.data.meta.pagination;
}); });
} }