From 800ca9aff252e2ecd298892dc83f8f9d5c0cb7a6 Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Thu, 26 Aug 2021 22:22:52 +0900 Subject: [PATCH] refs #2674 Fix scroll position using ResizeObserver --- .../TimelineSpace/Contents/DirectMessages.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Hashtag/Tag.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Home.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Lists/Show.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Local.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Mentions.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Notifications.vue | 24 ++++++++++--------- .../TimelineSpace/Contents/Public.vue | 24 ++++++++++--------- 8 files changed, 104 insertions(+), 88 deletions(-) diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue index a2717534..dcbf1db0 100644 --- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue +++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue @@ -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) diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue index cc34a578..81efd8aa 100644 --- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue +++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue @@ -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) { diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue index ebdfdce1..bd5d609f 100644 --- a/src/renderer/components/TimelineSpace/Contents/Home.vue +++ b/src/renderer/components/TimelineSpace/Contents/Home.vue @@ -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) diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue index e5002b8f..9f2cd71e 100644 --- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue +++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue @@ -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) diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue index 36842b58..a706bb16 100644 --- a/src/renderer/components/TimelineSpace/Contents/Local.vue +++ b/src/renderer/components/TimelineSpace/Contents/Local.vue @@ -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) diff --git a/src/renderer/components/TimelineSpace/Contents/Mentions.vue b/src/renderer/components/TimelineSpace/Contents/Mentions.vue index 1b596f03..8d507e9e 100644 --- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue +++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue @@ -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) diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue index 06e237a0..d4e455f6 100644 --- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue +++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue @@ -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) diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue index 27fe0478..383137ee 100644 --- a/src/renderer/components/TimelineSpace/Contents/Public.vue +++ b/src/renderer/components/TimelineSpace/Contents/Public.vue @@ -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)