Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix lazy loading for account timeline in sidebar

This commit is contained in:
AkiraFukushima 2020-01-12 17:25:58 +09:00
parent 69c68b2128
commit 3e5ac49ed7
1 changed files with 69 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
View File

@ -1,39 +1,38 @@
<template>
<div id="account_timeline">
<template v-for="message in pinnedToots">
<toot
:message="message"
:key="message.id"
:focused="message.uri + message.id === focusedId"
:pinned="true"
:overlaid="modalOpened"
v-on:update="updatePinnedToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
<div id="account_timeline">
<template v-for="message in pinnedToots">
<toot
:message="message"
:key="message.id"
:focused="message.uri + message.id === focusedId"
:pinned="true"
:overlaid="modalOpened"
v-on:update="updatePinnedToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
>
</toot>
</template>
<template v-for="message in timeline">
<toot
:message="message"
:key="message.id"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
</toot>
</template>
<template v-for="message in timeline">
<toot
:message="message"
:key="message.id"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
>
</toot>
</template>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</toot>
</template>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
</div>
</div>
</template>
<script>
@ -43,9 +42,9 @@ import { Event } from '~/src/renderer/components/event'
export default {
name: 'timeline',
props: [ 'account' ],
props: ['account'],
components: { Toot },
data () {
data() {
return {
focusedId: null
}
@ -59,58 +58,58 @@ export default {
...mapState('App', {
backgroundColor: state => state.theme.background_color
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
])
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
},
created () {
created() {
this.load()
},
mounted () {
mounted() {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/clearTimeline')
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-sidebar', () => {
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
})
})
},
beforeDestroy () {
beforeDestroy() {
Event.$emit('focus-timeline')
Event.$off('focus-sidebar')
},
destroyed () {
destroyed() {
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
}
},
watch: {
account: function (_newAccount, _oldAccount) {
account: function(_newAccount, _oldAccount) {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/clearTimeline')
this.load()
}
},
methods: {
load () {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', this.account)
.catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
load() {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', this.account).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
},
onScroll (event) {
onScroll(event) {
// for lazyLoading
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('account_profile').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch(
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/lazyFetchTimeline',
{
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
!this.lazyloading
) {
this.$store
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/lazyFetchTimeline', {
account: this.account,
last: this.timeline[this.timeline.length - 1]
status: this.timeline[this.timeline.length - 1]
})
.catch(() => {
.catch(err => {
console.error(err)
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
@ -118,16 +117,16 @@ export default {
})
}
},
updatePinnedToot (message) {
updatePinnedToot(message) {
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updatePinnedToot', message)
},
updateToot (message) {
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updateToot', message)
},
deleteToot (message) {
deleteToot(message) {
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/deleteToot', message)
},
focusNext () {
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
@ -135,16 +134,16 @@ export default {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex > 0) {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusTimeline () {
focusTimeline() {
this.focusedId = 0
Event.$emit('focus-timeline')
}
@ -153,11 +152,11 @@ export default {
</script>
<style lang="scss" scoped>
.loading-card {
height: 60px;
}
.loading-card {
height: 60px;
}
.loading-card:empty {
height: 0;
}
.loading-card:empty {
height: 0;
}
</style>