mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 00:34:50 +00:00
Update vue components
This commit is contained in:
parent
68d3c40345
commit
c238b82ed1
3 changed files with 130 additions and 9 deletions
|
@ -859,7 +859,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
this.fetchProfilePosts();
|
setTimeout(function() {
|
||||||
|
self.fetchProfilePosts();
|
||||||
|
}, 3000);
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
document.querySelectorAll('.status-comment .comment-text a').forEach(function(i, e) {
|
document.querySelectorAll('.status-comment .comment-text a').forEach(function(i, e) {
|
||||||
if(i.href.startsWith(window.location.origin)) {
|
if(i.href.startsWith(window.location.origin)) {
|
||||||
|
@ -947,12 +949,16 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
this.reactions.liked = true;
|
this.reactions.liked = true;
|
||||||
let user = this.user;
|
let user = this.user;
|
||||||
this.likes.push(user);
|
this.likes.unshift(user);
|
||||||
|
setTimeout(function() {
|
||||||
|
event.target.classList.add('animate__animated', 'animate__bounce');
|
||||||
|
},100);
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
swal('Error', 'Something went wrong, please try again later.', 'error');
|
swal('Error', 'Something went wrong, please try again later.', 'error');
|
||||||
});
|
});
|
||||||
|
window.navigator.vibrate(200);
|
||||||
},
|
},
|
||||||
|
|
||||||
shareStatus() {
|
shareStatus() {
|
||||||
|
@ -1383,6 +1389,9 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
fetchProfilePosts() {
|
fetchProfilePosts() {
|
||||||
|
if(!$('body').hasClass('loggedIn') && this.loaded) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
let self = this;
|
let self = this;
|
||||||
let apiUrl = '/api/pixelfed/v1/accounts/' + this.statusProfileId + '/statuses';
|
let apiUrl = '/api/pixelfed/v1/accounts/' + this.statusProfileId + '/statuses';
|
||||||
axios.get(apiUrl, {
|
axios.get(apiUrl, {
|
||||||
|
@ -1426,6 +1435,9 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
showTaggedPeopleModal() {
|
showTaggedPeopleModal() {
|
||||||
|
if(!$('body').hasClass('loggedIn') && this.loaded) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.$refs.taggedModal.show();
|
this.$refs.taggedModal.show();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -11,10 +11,57 @@
|
||||||
|
|
||||||
<div v-if="!loading && !networkError" class="mt-5">
|
<div v-if="!loading && !networkError" class="mt-5">
|
||||||
<div v-if="analysis == 'all'" class="row">
|
<div v-if="analysis == 'all'" class="row">
|
||||||
<div class="col-12 mb-5">
|
<div class="col-12 d-flex justify-content-between align-items-center">
|
||||||
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
|
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
|
||||||
|
<div v-if="placesSearchEnabled" title="Show Places" data-toggle="tooltip">
|
||||||
|
<span v-if="results.placesPagination.total > 0" class="badge badge-light mr-2 p-1 border" style="margin-top:-5px;">{{formatCount(results.placesPagination.total)}}</span>
|
||||||
|
<div class="d-inline custom-control custom-switch">
|
||||||
|
<input type="checkbox" class="custom-control-input" id="placesSwitch" v-model="showPlaces">
|
||||||
|
<label class="custom-control-label font-weight-bold text-sm text-lighter" for="placesSwitch"><i class="fas fa-map-marker-alt"></i></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 mb-5">
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="placesSearchEnabled && showPlaces" class="col-12">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-secondary small font-weight-bold">PLACES <span class="pl-1 text-lighter">({{results.placesPagination.total}})</span></p>
|
||||||
|
</div>
|
||||||
|
<div v-if="results.places.length" class="mb-5">
|
||||||
|
<a v-for="(hashtag, index) in results.places" class="mr-3 pr-4 d-inline-block text-decoration-none" :href="buildUrl('places', hashtag)">
|
||||||
|
<div class="pb-2">
|
||||||
|
<div class="media align-items-center py-2">
|
||||||
|
<div class="media-body text-truncate">
|
||||||
|
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
|
||||||
|
<i class="fas fa-map-marker-alt text-lighter mr-2"></i> {{hashtag.value}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<p v-if="results.places.length == 20 || placesCursor > 0" class="text-center mt-3">
|
||||||
|
<a v-if="placesCursor == 1" href="#" class="btn btn-outline-secondary btn-sm font-weight-bold py-0 disabled" disabled>
|
||||||
|
<i class="fas fa-chevron-left mr-2"></i> Previous
|
||||||
|
</a>
|
||||||
|
<a v-else href="#" @click.prevent="placesPrevPage()" class="btn btn-outline-secondary btn-sm font-weight-bold py-0">
|
||||||
|
<i class="fas fa-chevron-left mr-2"></i> Previous
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<span class="mx-4 small text-lighter">{{placesCursor}}/{{results.placesPagination.last_page}}</span>
|
||||||
|
|
||||||
|
<a v-if="placesCursor !== results.placesPagination.last_page" @click.prevent="placesNextPage()" href="#" class="btn btn-primary btn-sm font-weight-bold py-0">
|
||||||
|
Next <i class="fas fa-chevron-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
<a v-else href="#" class="btn btn-primary btn-sm font-weight-bold py-0 disabled" disabled>
|
||||||
|
Next <i class="fas fa-chevron-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="border py-3 text-center font-weight-bold">No results found</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<p class="text-secondary small font-weight-bold">HASHTAGS <span class="pl-1 text-lighter">({{results.hashtags.length}})</span></p>
|
<p class="text-secondary small font-weight-bold">HASHTAGS <span class="pl-1 text-lighter">({{results.hashtags.length}})</span></p>
|
||||||
|
@ -284,7 +331,8 @@ export default {
|
||||||
results: {
|
results: {
|
||||||
hashtags: [],
|
hashtags: [],
|
||||||
profiles: [],
|
profiles: [],
|
||||||
statuses: []
|
statuses: [],
|
||||||
|
places: [],
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
hashtags: true,
|
hashtags: true,
|
||||||
|
@ -292,6 +340,10 @@ export default {
|
||||||
statuses: true
|
statuses: true
|
||||||
},
|
},
|
||||||
analysis: 'profile',
|
analysis: 'profile',
|
||||||
|
showPlaces: false,
|
||||||
|
placesCursor: 1,
|
||||||
|
placesCache: [],
|
||||||
|
placesSearchEnabled: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
|
@ -300,6 +352,9 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
$('.search-bar input').val(this.query);
|
$('.search-bar input').val(this.query);
|
||||||
},
|
},
|
||||||
|
updated() {
|
||||||
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
bootSearch() {
|
bootSearch() {
|
||||||
let lexer = this.searchLexer();
|
let lexer = this.searchLexer();
|
||||||
|
@ -388,7 +443,7 @@ export default {
|
||||||
params: {
|
params: {
|
||||||
'q': this.query,
|
'q': this.query,
|
||||||
'src': 'metro',
|
'src': 'metro',
|
||||||
'v': 1,
|
'v': 2,
|
||||||
'scope': 'all'
|
'scope': 'all'
|
||||||
}
|
}
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
@ -396,6 +451,9 @@ export default {
|
||||||
this.results.hashtags = results.hashtags ? results.hashtags : [];
|
this.results.hashtags = results.hashtags ? results.hashtags : [];
|
||||||
this.results.profiles = results.profiles ? results.profiles : [];
|
this.results.profiles = results.profiles ? results.profiles : [];
|
||||||
this.results.statuses = results.posts ? results.posts : [];
|
this.results.statuses = results.posts ? results.posts : [];
|
||||||
|
this.results.places = results.places ? results.places : [];
|
||||||
|
this.placesCache = results.places;
|
||||||
|
this.results.placesPagination = results.placesPagination ? results.placesPagination : [];
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
@ -500,6 +558,50 @@ export default {
|
||||||
this.networkError = true;
|
this.networkError = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
placesPrevPage() {
|
||||||
|
this.placesCursor--;
|
||||||
|
if(this.placesCursor == 1) {
|
||||||
|
this.results.places = this.placesCache.slice(0, 20);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let plc = this.placesCursor * 20;
|
||||||
|
this.results.places = this.placesCache.slice(plc, 20);
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
|
||||||
|
placesNextPage() {
|
||||||
|
this.placesCursor++;
|
||||||
|
let plc = this.placesCursor * 20;
|
||||||
|
if(this.placesCache.length > 20) {
|
||||||
|
this.results.places = this.placesCache.slice(this.placesCursor == 1 ? 0 : plc, 20);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
axios.get('/api/search', {
|
||||||
|
params: {
|
||||||
|
'q': this.query,
|
||||||
|
'src': 'metro',
|
||||||
|
'v': 2,
|
||||||
|
'scope': 'all',
|
||||||
|
'page': this.placesCursor
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let results = res.data;
|
||||||
|
this.results.places = results.places ? results.places : [];
|
||||||
|
this.placesCache.push(...results.places);
|
||||||
|
this.loading = false;
|
||||||
|
}).catch(err => {
|
||||||
|
this.loading = false;
|
||||||
|
console.log(err);
|
||||||
|
this.networkError = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
formatCount(num) {
|
||||||
|
let count = window.App.util.format.count(num);
|
||||||
|
return count;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -162,7 +162,8 @@
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div v-if="!modes.distractionFree" class="reactions my-1 pb-2">
|
<div v-if="!modes.distractionFree" class="reactions my-1 pb-2">
|
||||||
<h3 v-bind:class="[status.favourited ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn text-lighter cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
|
<h3 v-if="status.favourited" class="fas fa-heart text-danger pr-3 m-0 cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
|
||||||
|
<h3 v-else class="far fa-heart pr-3 m-0 like-btn text-lighter cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
|
||||||
<h3 v-if="!status.comments_disabled" class="far fa-comment text-lighter pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
|
<h3 v-if="!status.comments_disabled" class="far fa-comment text-lighter pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
|
||||||
<h3 v-if="status.visibility == 'public'" v-bind:class="[status.reblogged ? 'fas fa-retweet pr-3 m-0 text-primary cursor-pointer' : 'fas fa-retweet pr-3 m-0 text-lighter share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
|
<h3 v-if="status.visibility == 'public'" v-bind:class="[status.reblogged ? 'fas fa-retweet pr-3 m-0 text-primary cursor-pointer' : 'fas fa-retweet pr-3 m-0 text-lighter share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
|
||||||
<h3 class="fas fa-expand pr-3 m-0 cursor-pointer text-lighter" v-on:click="lightbox(status)"></h3>
|
<h3 class="fas fa-expand pr-3 m-0 cursor-pointer text-lighter" v-on:click="lightbox(status)"></h3>
|
||||||
|
@ -196,7 +197,7 @@
|
||||||
<span v-html="reply.content" style="word-break: break-all;" class="comment-body"></span>
|
<span v-html="reply.content" style="word-break: break-all;" class="comment-body"></span>
|
||||||
</span>
|
</span>
|
||||||
<span class="mb-0" style="min-width:38px">
|
<span class="mb-0" style="min-width:38px">
|
||||||
<span v-on:click="likeStatus(reply, $event)">
|
<span v-on:click="likeStatus(reply, $event);">
|
||||||
<i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger cursor-pointer':'far fa-heart fa-sm text-lighter cursor-pointer']"></i>
|
<i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger cursor-pointer':'far fa-heart fa-sm text-lighter cursor-pointer']"></i>
|
||||||
</span>
|
</span>
|
||||||
<!-- <post-menu :status="reply" :profile="profile" size="sm" :modal="'true'" :feed="feed" class="d-inline-flex pl-2"></post-menu> -->
|
<!-- <post-menu :status="reply" :profile="profile" size="sm" :modal="'true'" :feed="feed" class="d-inline-flex pl-2"></post-menu> -->
|
||||||
|
@ -411,7 +412,7 @@
|
||||||
<div class="ml-3">
|
<div class="ml-3">
|
||||||
<p class="mb-0">
|
<p class="mb-0">
|
||||||
<span v-if="statusOwner(s)" class="font-weight-bold small">{{s.favourites_count == 1 ? '1 like' : s.favourites_count+' likes'}}</span>
|
<span v-if="statusOwner(s)" class="font-weight-bold small">{{s.favourites_count == 1 ? '1 like' : s.favourites_count+' likes'}}</span>
|
||||||
<span class="px-2"><i v-bind:class="[s.favourited ? 'fas fa-heart text-danger cursor-pointer' : 'far fa-heart like-btn text-lighter cursor-pointer']" v-on:click="likeStatus(s, $event)"></i></span>
|
<span class="px-2"><i v-bind:class="[s.favourited ? 'fas fa-heart text-danger cursor-pointer' : 'far fa-heart like-btn text-lighter cursor-pointer']" v-on:click="likeStatus(s, $event);"></i></span>
|
||||||
<span class="mr-2 cursor-pointer"><i class="fas fa-ellipsis-v" @click="ctxMenu(s)"></i></span>
|
<span class="mr-2 cursor-pointer"><i class="fas fa-ellipsis-v" @click="ctxMenu(s)"></i></span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -922,7 +923,7 @@
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
likeStatus(status) {
|
likeStatus(status, event) {
|
||||||
if($('body').hasClass('loggedIn') == false) {
|
if($('body').hasClass('loggedIn') == false) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -937,6 +938,12 @@
|
||||||
status.favourites_count = count;
|
status.favourites_count = count;
|
||||||
swal('Error', 'Something went wrong, please try again later.', 'error');
|
swal('Error', 'Something went wrong, please try again later.', 'error');
|
||||||
});
|
});
|
||||||
|
window.navigator.vibrate(200);
|
||||||
|
if(status.favourited) {
|
||||||
|
setTimeout(function() {
|
||||||
|
event.target.classList.add('animate__animated', 'animate__bounce');
|
||||||
|
},100);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
shareStatus(status, $event) {
|
shareStatus(status, $event) {
|
||||||
|
|
Loading…
Reference in a new issue