1
0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-01-31 09:35:16 +01:00

refs #116 Fix lazy loading

This commit is contained in:
AkiraFukushima 2018-03-30 17:25:13 +09:00
parent 6561e7df0a
commit 5e27514c26
8 changed files with 24 additions and 17 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="contents"> <div id="contents">
<div :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"> <div id="scrollable" :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
<router-view></router-view> <router-view></router-view>
</div> </div>
<side-bar></side-bar> <side-bar></side-bar>

View File

@ -42,17 +42,17 @@ export default {
}) })
}, },
mounted () { mounted () {
window.addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
}, },
destroyed () { destroyed () {
window.removeEventListener('scroll', this.onScroll) document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
}, },
methods: { methods: {
updateToot (message) { updateToot (message) {
this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message) this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
}, },
onScroll (event) { onScroll (event) {
if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) { if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1]) this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
} }
} }

View File

@ -23,7 +23,7 @@ export default {
}, },
mounted () { mounted () {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
window.addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
}, },
beforeUpdate () { beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline) { if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline) {
@ -32,11 +32,11 @@ export default {
}, },
destroyed () { destroyed () {
this.$store.commit('TimelineSpace/archiveHomeTimeline') this.$store.commit('TimelineSpace/archiveHomeTimeline')
window.removeEventListener('scroll', this.onScroll) document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
}, },
methods: { methods: {
onScroll (event) { onScroll (event) {
if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) { if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
} }
} }

View File

@ -35,13 +35,13 @@ export default {
.catch(() => { .catch(() => {
loading.close() loading.close()
}) })
window.addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
}, },
beforeDestroy () { beforeDestroy () {
this.$store.dispatch('TimelineSpace/Contents/Local/stopLocalStreaming') this.$store.dispatch('TimelineSpace/Contents/Local/stopLocalStreaming')
}, },
destroyed () { destroyed () {
window.removeEventListener('scroll', this.onScroll) document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
}, },
methods: { methods: {
async initialize () { async initialize () {
@ -59,7 +59,7 @@ export default {
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message) this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
}, },
onScroll (event) { onScroll (event) {
if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) { if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
} }
} }

View File

@ -23,7 +23,7 @@ export default {
}, },
mounted () { mounted () {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
window.addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
}, },
beforeUpdate () { beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) { if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
@ -32,11 +32,11 @@ export default {
}, },
destroyed () { destroyed () {
this.$store.commit('TimelineSpace/archiveNotifications') this.$store.commit('TimelineSpace/archiveNotifications')
window.removeEventListener('scroll', this.onScroll) document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
}, },
methods: { methods: {
onScroll (event) { onScroll (event) {
if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) { if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1]) this.$store.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
} }
} }

View File

@ -35,13 +35,13 @@ export default {
.catch(() => { .catch(() => {
loading.close() loading.close()
}) })
window.addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
}, },
beforeDestroy () { beforeDestroy () {
this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming') this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming')
}, },
destroyed () { destroyed () {
window.removeEventListener('scroll', this.onScroll) document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
}, },
methods: { methods: {
async initialize () { async initialize () {
@ -59,7 +59,7 @@ export default {
this.$store.commit('TimelineSpace/Contents/Public/updateToot', message) this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
}, },
onScroll (event) { onScroll (event) {
if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) { if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
} }
} }

View File

@ -28,6 +28,9 @@
<div class="count">{{ account.followers_count }}</div> <div class="count">{{ account.followers_count }}</div>
</el-col> </el-col>
</el-row> </el-row>
<div class="timeline">
Comming soon...
</div>
</div> </div>
</template> </template>
@ -110,4 +113,9 @@ export default {
border: none; border: none;
} }
} }
.timeline {
font-size: 12px;
padding: 12px;
}
</style> </style>

View File

@ -60,7 +60,6 @@ const Favourites = {
access_token: rootState.TimelineSpace.account.accessToken, access_token: rootState.TimelineSpace.account.accessToken,
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1' api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
}) })
console.log(last.id)
// Note: Now this API's explanation and implementation are reversed. // Note: Now this API's explanation and implementation are reversed.
// So if the bug has resolved, please use max_id instead of since_id. // So if the bug has resolved, please use max_id instead of since_id.
// https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md#favourites // https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md#favourites