From 57598df22899c178e41b1068cb3e9cd22723d69c Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Sun, 29 Sep 2019 13:34:27 +0200
Subject: [PATCH] refactor: re-use @vbelolapotkov's solution

If we make this a mixin, we can re-use the same solution for e.g. the
comment. If sb. notifies you, the browser automatically scrolls to the
comment in which you have been mentioned.
---
 webapp/components/Comment.vue                 |  2 ++
 .../CommentList/CommentList.spec.js           |  3 --
 webapp/components/CommentList/CommentList.vue | 29 ++---------------
 webapp/mixins/scrollToAnchor.js               | 32 +++++++++++++++++++
 4 files changed, 36 insertions(+), 30 deletions(-)
 create mode 100644 webapp/mixins/scrollToAnchor.js

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 2cebde0b6..b1a75f896 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -79,8 +79,10 @@ import ContentMenu from '~/components/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
 import CommentMutations from '~/graphql/CommentMutations'
+import scrollToAnchor from '~/mixins/scrollToAnchor.js'
 
 export default {
+  mixins: [scrollToAnchor],
   data: function() {
     return {
       isCollapsed: true,
diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js
index 3e77d84fb..460f1a4ea 100644
--- a/webapp/components/CommentList/CommentList.spec.js
+++ b/webapp/components/CommentList/CommentList.spec.js
@@ -50,9 +50,6 @@ describe('CommentList.vue', () => {
             },
           },
         },
-        $route: {
-          hash: '',
-        },
       }
       stubs = {
         EditorContent: "<div class='stub'></div>",
diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue
index b5eb070c8..2013140c1 100644
--- a/webapp/components/CommentList/CommentList.vue
+++ b/webapp/components/CommentList/CommentList.vue
@@ -32,8 +32,10 @@
 <script>
 import Comment from '~/components/Comment.vue'
 import HcEmpty from '~/components/Empty.vue'
+import scrollToAnchor from '~/mixins/scrollToAnchor.js'
 
 export default {
+  mixins: [scrollToAnchor],
   components: {
     Comment,
     HcEmpty,
@@ -47,33 +49,6 @@ export default {
         return comment.id === updatedComment.id ? updatedComment : comment
       })
     },
-    scrollCommentsIntoView() {
-      if (!window || !document) {
-        return
-      }
-      const container = document.getElementById('comments')
-      if (container) {
-        const top = container.offsetTop
-        window.scroll({
-          top,
-          left: 0,
-          behavior: 'smooth',
-        })
-      }
-    },
-  },
-  watch: {
-    $route(to, from) {
-      // scroll inside the same page
-      if (to.hash === '#comments') {
-        this.scrollCommentsIntoView()
-      }
-    },
-  },
-  mounted() {
-    if (this.$route.hash === '#comments') {
-      setTimeout(this.scrollCommentsIntoView, 250)
-    }
   },
 }
 </script>
diff --git a/webapp/mixins/scrollToAnchor.js b/webapp/mixins/scrollToAnchor.js
new file mode 100644
index 000000000..e68658f07
--- /dev/null
+++ b/webapp/mixins/scrollToAnchor.js
@@ -0,0 +1,32 @@
+export function scrollToAnchor(anchor) {
+  if (!anchor) return
+  if (!window || !document) {
+    return
+  }
+  const container = document.querySelector(anchor)
+  if (container) {
+    const { top } = container.getBoundingClientRect()
+    setTimeout(() => {
+      // we have to set a small timeout to ensure this part comes after nuxt
+      // scrollBehaviour: https://nuxtjs.org/api/configuration-router/#scrollbehavior
+      window.scroll({
+        top,
+        left: 0,
+        behavior: 'smooth',
+      })
+    }, 250)
+  }
+}
+
+export default {
+  watch: {
+    $route(to, from) {
+      const anchor = to && to.hash
+      scrollToAnchor(anchor)
+    },
+  },
+  mounted() {
+    const anchor = this.$route && this.$route.hash
+    scrollToAnchor(anchor)
+  },
+}