From 8a33f335a5587812b90f5ccaa959711f5dd9995c Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Fri, 16 Mar 2018 01:00:44 +0200
Subject: [PATCH] add scrolling to the comment if there is any id in url

e.g. https://demo.remark42.com/web/#remark__comment-3669787380
---
 web/app/components/root/root.jsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx
index 52a0f1a7..b0e76f85 100644
--- a/web/app/components/root/root.jsx
+++ b/web/app/components/root/root.jsx
@@ -23,6 +23,7 @@ export default class Root extends Component {
     this.addComment = this.addComment.bind(this);
     this.onSignIn = this.onSignIn.bind(this);
     this.onSignOut = this.onSignOut.bind(this);
+    this.checkUrlHash = this.checkUrlHash.bind(this);
   }
 
   componentWillMount() {
@@ -36,10 +37,14 @@ export default class Root extends Component {
       .finally(() => {
         api.find({ url })
           .then(({ comments } = {}) => store.set('comments', comments))
-          .finally(() => this.setState({
-            loaded: true,
-            user: store.get('user'),
-          }));
+          .finally(() => {
+            this.setState({
+              loaded: true,
+              user: store.get('user'),
+            });
+
+            setTimeout(this.checkUrlHash);
+          });
 
         api.getConfig().then(config => {
           store.set('config', config);
@@ -48,6 +53,19 @@ export default class Root extends Component {
       });
   }
 
+  checkUrlHash() {
+    if (window.parent.location.hash.indexOf('#remark__comment-') === 0) {
+      const comment = document.querySelector(window.parent.location.hash);
+
+      if (comment) {
+        setTimeout(() => {
+          comment.scrollIntoView();
+          window.scrollTo(window.scrollX, 0); // sometimes smth goes wrong and iframe scrolls; we return it here
+        }, 1000);
+      }
+    }
+  }
+
   onSignOut() {
     api.logOut().then(() => {
       store.set('user', {});