mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 22:41:27 +00:00
Update PostComponent.vue
This commit is contained in:
Daniel Supernault
parent
73230b7b29
commit
25a3d142ff
1 changed files with 153 additions and 11 deletions
|
|
@ -1,8 +1,12 @@
|
|||
<style>
|
||||
|
||||
#l-modal .modal-body,
|
||||
#s-modal .modal-body {
|
||||
max-height: 70vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="postComponent">
|
||||
<div class="postComponent d-none">
|
||||
<div class="container px-0 mt-md-4">
|
||||
<div class="card card-md-rounded-0 status-container orientation-unknown">
|
||||
<div class="row mx-0">
|
||||
|
|
@ -91,7 +95,7 @@
|
|||
<div class="status-comment">
|
||||
<p class="mb-1 read-more" style="overflow: hidden;">
|
||||
<span class="font-weight-bold pr-1">{{statusUsername}}</span>
|
||||
<span class="comment-text" :id="status.id + '-status-readmore'"></span>
|
||||
<span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
|
||||
</p>
|
||||
<post-comments :user="this.user" :post-id="statusId" :post-username="statusUsername"></post-comments>
|
||||
</div>
|
||||
|
|
@ -124,8 +128,13 @@
|
|||
</form>
|
||||
</span>
|
||||
</div>
|
||||
<div class="likes font-weight-bold mb-0">
|
||||
<div class="reaction-counts font-weight-bold mb-0">
|
||||
<span style="cursor:pointer;" v-on:click="likesModal">
|
||||
<span class="like-count">{{status.favourites_count || 0}}</span> likes
|
||||
</span>
|
||||
<span class="float-right" style="cursor:pointer;" v-on:click="sharesModal">
|
||||
<span class="share-count pl-4">{{status.reblogs_count || 0}}</span> shares
|
||||
</span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
<a v-bind:href="statusUrl" class="small text-muted">
|
||||
|
|
@ -150,6 +159,69 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-modal ref="likesModal"
|
||||
id="l-modal"
|
||||
hide-footer
|
||||
centered
|
||||
title="Likes"
|
||||
body-class="list-group-flush p-0">
|
||||
<div class="list-group">
|
||||
<div class="list-group-item border-0" v-for="user in likes">
|
||||
<div class="media">
|
||||
<a :href="user.url">
|
||||
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<p class="mb-0" style="font-size: 14px">
|
||||
<a :href="user.url" class="font-weight-bold text-dark">
|
||||
{{user.username}}
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-muted mb-0" style="font-size: 14px">
|
||||
{{user.display_name}}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<infinite-loading @infinite="infiniteLikesHandler" spinner="spiral">
|
||||
<div slot="no-more"></div>
|
||||
<div slot="no-results"></div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal ref="sharesModal"
|
||||
id="s-modal"
|
||||
hide-footer
|
||||
centered
|
||||
title="Shares"
|
||||
body-class="list-group-flush p-0">
|
||||
<div class="list-group">
|
||||
<div class="list-group-item border-0" v-for="user in shares">
|
||||
<div class="media">
|
||||
<a :href="user.url">
|
||||
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<p class="mb-0" style="font-size: 14px">
|
||||
<a :href="user.url" class="font-weight-bold text-dark">
|
||||
{{user.username}}
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-muted mb-0" style="font-size: 14px">
|
||||
{{user.display_name}}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<infinite-loading @infinite="infiniteSharesHandler" spinner="spiral">
|
||||
<div slot="no-more"></div>
|
||||
<div slot="no-results"></div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -272,9 +344,14 @@ export default {
|
|||
status: {},
|
||||
media: {},
|
||||
user: {},
|
||||
reactions: {}
|
||||
reactions: {},
|
||||
likes: {},
|
||||
likesPage: 1,
|
||||
shares: {},
|
||||
sharesPage: 1,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let token = $('meta[name="csrf-token"]').attr('content');
|
||||
$('input[name="_token"]').each(function(k, v) {
|
||||
|
|
@ -282,11 +359,12 @@ export default {
|
|||
el.val(token);
|
||||
});
|
||||
this.fetchData();
|
||||
//pixelfed.hydrateLikes();
|
||||
this.authCheck();
|
||||
},
|
||||
|
||||
updated() {
|
||||
$('.carousel').carousel();
|
||||
|
||||
if(this.reactions) {
|
||||
if(this.reactions.bookmarked == true) {
|
||||
$('.far.fa-bookmark').removeClass('far').addClass('fas text-warning');
|
||||
|
|
@ -298,6 +376,11 @@ export default {
|
|||
$('.far.fa-heart ').removeClass('far text-dark').addClass('fas text-danger');
|
||||
}
|
||||
}
|
||||
|
||||
if(this.status) {
|
||||
let title = this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes';
|
||||
$('head title').text(title);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
authCheck() {
|
||||
|
|
@ -314,24 +397,36 @@ export default {
|
|||
$('.post-actions').removeClass('d-none');
|
||||
}
|
||||
},
|
||||
|
||||
reportUrl() {
|
||||
return '/i/report?type=post&id=' + this.status.id;
|
||||
},
|
||||
|
||||
timestampFormat() {
|
||||
let ts = new Date(this.status.created_at);
|
||||
return ts.toDateString() + ' ' + ts.toLocaleTimeString();
|
||||
},
|
||||
|
||||
fetchData() {
|
||||
let url = '/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId;
|
||||
axios.get(url)
|
||||
let loader = this.$loading.show({
|
||||
'opacity': 0,
|
||||
'background-color': '#f5f8fa'
|
||||
});
|
||||
axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId)
|
||||
.then(response => {
|
||||
let self = this;
|
||||
self.status = response.data.status;
|
||||
self.user = response.data.user;
|
||||
self.media = self.status.media_attachments;
|
||||
self.reactions = response.data.reactions;
|
||||
self.likes = response.data.likes;
|
||||
self.shares = response.data.shares;
|
||||
self.likesPage = 2;
|
||||
self.sharesPage = 2;
|
||||
this.buildPresenter();
|
||||
this.showMuteBlock();
|
||||
loader.hide();
|
||||
$('.postComponent').removeClass('d-none');
|
||||
}).catch(error => {
|
||||
if(!error.response) {
|
||||
$('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occured, cannot fetch media. Please try again later.');
|
||||
|
|
@ -351,9 +446,58 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
commentFocus() {
|
||||
$('.comment-form input[name="comment"]').focus();
|
||||
},
|
||||
|
||||
likesModal() {
|
||||
if(this.status.favourites_count == 0 || $('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
this.$refs.likesModal.show();
|
||||
},
|
||||
|
||||
sharesModal() {
|
||||
if(this.status.reblogs_count == 0 || $('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
this.$refs.sharesModal.show();
|
||||
},
|
||||
|
||||
infiniteLikesHandler($state) {
|
||||
let api = '/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId;
|
||||
axios.get(api, {
|
||||
params: {
|
||||
page: this.likesPage,
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
if (data.data.length) {
|
||||
this.likesPage += 1;
|
||||
this.likes.push(...data.data);
|
||||
$state.loaded();
|
||||
} else {
|
||||
$state.complete();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
infiniteSharesHandler($state) {
|
||||
axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId, {
|
||||
params: {
|
||||
page: this.sharesPage,
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
if (data.data.length) {
|
||||
this.sharesPage += 1;
|
||||
this.shares.push(...data.data);
|
||||
$state.loaded();
|
||||
} else {
|
||||
$state.complete();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
buildPresenter() {
|
||||
let container = $('.postPresenterContainer');
|
||||
let status = this.status;
|
||||
|
|
@ -364,8 +508,6 @@ export default {
|
|||
el.val(status.account.id);
|
||||
});
|
||||
|
||||
$('.status-comment .comment-text').html(status.content);
|
||||
|
||||
if(container.children().length != 0) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue