UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2025-01-30 16:30:45 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix Timeline.vue, add proper infinite scroll

Browse source
This commit is contained in:
Daniel Supernault 2019-01-02 21:56:44 -07:00
parent cdc7207297
commit 0c1eff85d2
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
resources/assets/js/components/Timeline.vue
View file

@ -2,11 +2,6 @@
<div class="container" style=""> <div class="container" style="">
<div class="row"> <div class="row">
<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1"> <div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1">
<div class="loader text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id"> <div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id">
<div class="card-header d-inline-flex align-items-center bg-white"> <div class="card-header d-inline-flex align-items-center bg-white">
@ -97,6 +92,10 @@
</form> </form>
</div> </div>
</div> </div>
<infinite-loading @infinite="infiniteTimeline">
<div slot="no-more" class="font-weight-bold text-light">No more posts to load</div>
<div slot="no-results" class="font-weight-bold text-light">No posts found</div>
</infinite-loading>
</div> </div>
<div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2"> <div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2">
@ -241,7 +240,6 @@
}, },
updated() { updated() {
this.scroll();
}, },
methods: { methods: {
@ -279,6 +277,32 @@
}); });
}, },
infiniteTimeline($state) {
let homeTimeline = '/api/v1/timelines/home';
let localTimeline = '/api/v1/timelines/public';
let apiUrl = this.scope == '/' ? homeTimeline : localTimeline;
axios.get(apiUrl, {
params: {
page: this.page,
},
}).then(res => {
if (res.data.length) {
$('.timeline .loader').addClass('d-none');
let data = res.data;
this.feed.push(...data);
let ids = data.map(status => status.id);
this.min_id = Math.min(...ids);
if(this.page == 1) {
this.max_id = Math.max(...ids);
}
this.page += 1;
$state.loaded();
} else {
$state.complete();
}
});
},
fetchNotifications() { fetchNotifications() {
axios.get('/api/v1/notifications') axios.get('/api/v1/notifications')
.then(res => { .then(res => {
@ -288,16 +312,6 @@
}); });
}, },
scroll() {
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight == document.documentElement.offsetHeight;
if (bottomOfWindow) {
this.fetchTimelineApi();
}
};
},
reportUrl(status) { reportUrl(status) {
let type = status.in_reply_to ? 'comment' : 'post'; let type = status.in_reply_to ? 'comment' : 'post';
let id = status.id; let id = status.id;