fix: restore scroll position not working

aleksey-hoffman · Aug 24, 2021 · 728a1b2 · 728a1b2
1 parent cf2174d
commit 728a1b2
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 63 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -667,30 +667,6 @@ export default {
         appNode.classList.remove('layout-no-transition')
       }, 500)
     },
-    restoreRouteScrollPosition (params) {
-      const { toRoute } = params
-      const historyItems = this.history.itemsRaw
-      const lastHistoryItem = historyItems[historyItems.length - 1]
-      const secondFromEndHistoryItem = historyItems[historyItems.length - 2]
-      const gotBackToSameNavigatorDir = toRoute.name === 'navigator' && (secondFromEndHistoryItem === this.currentDir.path)
-      const shouldRestoreScroll = toRoute.name !== 'navigator' || !gotBackToSameNavigatorDir
-      if (shouldRestoreScroll) {
-        const scrollArea = this.$utils.getContentAreaNode(toRoute.name)
-        const savedScrollPosition = this.routeScrollPosition[toRoute.name]
-        if (savedScrollPosition) {
-          scrollArea.scroll({
-            top: savedScrollPosition,
-            left: 0,
-            behavior: 'auto'
-          })
-        }
-      }
-    },
-    setRouteScrollPosition (params) {
-      const { fromRoute } = params
-      const scrollArea = this.$utils.getContentAreaNode(fromRoute.name)
-      this.routeScrollPosition[fromRoute.name] = scrollArea?.scrollTop
-    },
     importExpress () {
       // Lazy-import heavy module
       if (express === undefined) { express = require('express') }

diff --git a/src/store.js b/src/store.js
@@ -2305,16 +2305,37 @@ export default new Vuex.Store({
         })
       }
     },
-    ROUTE_MOUNTED_HOOK_CALLBACK ({ state, commit,dispatch, getters }, payload) {
-      // Restore route scroll position
-      eventHub.$emit('app:method', {
-        method: 'restoreRouteScrollPosition',
-        params: {
-          toRoute: {
-            name: payload.route
-          }
+    ROUTE_MOUNTED_HOOK_CALLBACK (store, params) {
+      store.dispatch('RESTORE_ROUTE_SCROLL_POSITION', params)
+    },
+    ROUTE_ACTIVATED_HOOK_CALLBACK (store, params) {
+      store.dispatch('RESTORE_ROUTE_SCROLL_POSITION', params)
+    },
+    RESTORE_ROUTE_SCROLL_POSITION  (store, params) {
+      const historyItems = store.state.navigatorView.history.items
+      const secondFromEndHistoryPath = historyItems[historyItems.length - 2]
+      const returnedBackToSameNavigatorDir = params.route === 'navigator' &&
+        (
+          secondFromEndHistoryPath === store.state.navigatorView.currentDir.path || 
+          secondFromEndHistoryPath === undefined
+        )
+      const shouldRestoreScroll = params.route !== 'navigator' || returnedBackToSameNavigatorDir
+
+      if (shouldRestoreScroll) {
+        const scrollArea = utils.getContentAreaNode(params.route)
+        const savedScrollPosition = store.state.routeScrollPosition[params.route]
+        if (savedScrollPosition) {
+          scrollArea.scroll({
+            top: savedScrollPosition,
+            behavior: 'auto'
+          })
         }
-      })
+      }
+    },
+    SAVE_ROUTE_SCROLL_POSITION  (store, params) {
+      const scrollArea = utils.getContentAreaNode(params.fromRoute.name)
+      const scrollAreaPosition = scrollArea?.scrollTop || 0
+      store.state.routeScrollPosition[params.fromRoute.name] = scrollAreaPosition
     },
     CHECK_CONDITIONS ({ commit,dispatch, getters }, payload) {
       const defaultOptions = {

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -361,15 +361,17 @@ export default {
     }
   },
   beforeRouteLeave (to, from, next) {
-    this.$eventHub.$emit('app:method', {
-      method: 'setRouteScrollPosition',
-      params: {
-        toRoute: to,
-        fromRoute: from
-      }
+    this.$store.dispatch('SAVE_ROUTE_SCROLL_POSITION', {
+      toRoute: to,
+      fromRoute: from
     })
     next()
   },
+  activated () {
+    this.$store.dispatch('ROUTE_ACTIVATED_HOOK_CALLBACK', {
+      route: 'dashboard'
+    })
+  },
   async mounted () {
     this.$store.dispatch('ROUTE_MOUNTED_HOOK_CALLBACK', {
       route: 'dashboard'

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -182,16 +182,16 @@ export default {
     }
   },
   beforeRouteLeave (to, from, next) {
-    this.$eventHub.$emit('app:method', {
-      method: 'setRouteScrollPosition',
-      params: {
-        toRoute: to,
-        fromRoute: from
-      }
+    this.$store.dispatch('SAVE_ROUTE_SCROLL_POSITION', {
+      toRoute: to,
+      fromRoute: from
     })
     next()
   },
   activated () {
+    this.$store.dispatch('ROUTE_ACTIVATED_HOOK_CALLBACK', {
+      route: 'home'
+    })
     const video = document.querySelector('#media-banner__video')
     const videoGlow = document.querySelector('#media-banner__glow')
     if (video) { video.play() }

diff --git a/src/views/Navigator.vue b/src/views/Navigator.vue
@@ -148,15 +148,17 @@ export default {
     }
   },
   beforeRouteLeave (to, from, next) {
-    this.$eventHub.$emit('app:method', {
-      method: 'setRouteScrollPosition',
-      params: {
-        toRoute: to,
-        fromRoute: from
-      }
+    this.$store.dispatch('SAVE_ROUTE_SCROLL_POSITION', {
+      toRoute: to,
+      fromRoute: from
     })
     next()
   },
+  activated () {
+    this.$store.dispatch('ROUTE_ACTIVATED_HOOK_CALLBACK', {
+      route: 'navigator'
+    })
+  },
   async mounted () {
     this.$nextTick(() => {
       this.$store.dispatch('ROUTE_MOUNTED_HOOK_CALLBACK', {

diff --git a/src/views/Notes.vue b/src/views/Notes.vue
@@ -127,15 +127,17 @@ export default {
     }
   },
   beforeRouteLeave (to, from, next) {
-    this.$eventHub.$emit('app:method', {
-      method: 'setRouteScrollPosition',
-      params: {
-        toRoute: to,
-        fromRoute: from
-      }
+    this.$store.dispatch('SAVE_ROUTE_SCROLL_POSITION', {
+      toRoute: to,
+      fromRoute: from
     })
     next()
   },
+  activated () {
+    this.$store.dispatch('ROUTE_ACTIVATED_HOOK_CALLBACK', {
+      route: 'notes'
+    })
+  },
   mounted () {
     this.$store.dispatch('ROUTE_MOUNTED_HOOK_CALLBACK', {
       route: 'notes'

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -1285,12 +1285,9 @@ export default {
     }
   },
   beforeRouteLeave (to, from, next) {
-    this.$eventHub.$emit('app:method', {
-      method: 'setRouteScrollPosition',
-      params: {
-        toRoute: to,
-        fromRoute: from
-      }
+    this.$store.dispatch('SAVE_ROUTE_SCROLL_POSITION', {
+      toRoute: to,
+      fromRoute: from
     })
     next()
   },
@@ -1358,6 +1355,11 @@ export default {
       ...objects
     }
   },
+  activated () {
+    this.$store.dispatch('ROUTE_ACTIVATED_HOOK_CALLBACK', {
+      route: 'settings'
+    })
+  },
   created () {
     this.settingsSelectedTab = this.lastOpenedSettingsTabValue
   },