UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-09 16:24:51 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update PostComponent.vue

Browse source
This commit is contained in:
Daniel Supernault 2018-12-01 21:57:43 -07:00
parent 73230b7b29
commit 25a3d142ff
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 153 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
resources/assets/js/components/PostComponent.vue
View file

@ -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">
<span class="like-count">{{status.favourites_count || 0}}</span> likes
<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;
}