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

refs #2674 Fix scroll position using ResizeObserver

This commit is contained in:
AkiraFukushima 2021-08-26 22:22:52 +09:00
parent d2cf04c4bb
commit 800ca9aff2
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
8 changed files with 104 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -40,7 +40,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -89,21 +90,21 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
}
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
beforeDestroy() {
if (!this.unreadNotification.direct) {
@ -111,6 +112,7 @@ export default {
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
}
Event.$off('focus-timeline')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)

24
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -41,7 +41,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -84,18 +85,18 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
watch: {
tag: function (newTag, _oldTag) {
@ -124,6 +125,7 @@ export default {
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
this.reset()
Event.$off('focus-timeline')
this.observer.disconnect()
},
methods: {
async load(tag) {

24
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -41,7 +41,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -100,24 +101,25 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
}
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
beforeDestroy() {
Event.$off('focus-timeline')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)

24
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -41,7 +41,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -85,18 +86,18 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
watch: {
list_id: function () {
@ -122,6 +123,7 @@ export default {
},
beforeDestroy() {
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)

24
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -40,7 +40,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -89,21 +90,21 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
}
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
beforeDestroy() {
if (!this.unreadNotification.local) {
@ -111,6 +112,7 @@ export default {
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
}
Event.$off('focus-timeline')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)

24
src/renderer/components/TimelineSpace/Contents/Mentions.vue
View File

@ -39,7 +39,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -84,24 +85,25 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
}
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
beforeDestroy() {
Event.$off('focus-timeline')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)

24
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -39,7 +39,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -86,24 +87,25 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
}
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
beforeDestroy() {
Event.$off('focus-timeline')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)

24
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -40,7 +40,8 @@ export default {
data() {
return {
focusedId: null,
scroll: null
scroll: null,
observer: null
}
},
computed: {
@ -90,21 +91,21 @@ export default {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
}
if (!this.heading && !this.lazyLoading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
}
this.scroll.prepare()
},
beforeDestroy() {
if (!this.unreadNotification.public) {
@ -112,6 +113,7 @@ export default {
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
}
Event.$off('focus-timeline')
this.observer.disconnect()
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)