From 3bd4edbce34f1c6fddbfb297366ce13626c9f5ee Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Sat, 12 May 2018 14:38:26 +0300
Subject: [PATCH] fix scroll to parent

---
 web/app/common/post-message.js                |  1 +
 .../comment__link-to-parent.scss              |  4 +--
 web/app/components/comment/comment.jsx        | 25 ++++++++++---------
 web/app/embed.js                              | 12 ++++++---
 web/iframe.html                               |  9 ++++---
 5 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 web/app/common/post-message.js

diff --git a/web/app/common/post-message.js b/web/app/common/post-message.js
new file mode 100644
index 00000000..f8381a2f
--- /dev/null
+++ b/web/app/common/post-message.js
@@ -0,0 +1 @@
+export default msg => window.parent.postMessage(JSON.stringify(msg), '*');
diff --git a/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss b/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss
index a7ebce68..9948dbe6 100644
--- a/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss
+++ b/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss
@@ -1,9 +1,9 @@
 .comment__link-to-parent {
   display: inline-block;
-  height: 12px;
+  height: 10px;
   width: 16px;
   margin-left: 8px;
-  vertical-align: -2px;
+  vertical-align: -1px;
   background: url('comment__link-to-parent.svg') center no-repeat;
   cursor: pointer;
 
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index 7651ba66..609dd81b 100644
--- a/web/app/components/comment/comment.jsx
+++ b/web/app/components/comment/comment.jsx
@@ -3,6 +3,7 @@ import { h, Component } from 'preact';
 import api from 'common/api';
 import { API_BASE, BASE_URL, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
 import { url } from 'common/settings';
+import postMessage from 'common/post-message';
 import store from 'common/store';
 
 import Input from 'components/input';
@@ -187,8 +188,8 @@ export default class Comment extends Component {
 
     e.preventDefault();
 
-    window.location.hash = '';
-    window.location.hash = `#${COMMENT_NODE_CLASSNAME_PREFIX}${pid}`;
+    postMessage({ hash: '' });
+    postMessage({ hash: `#${COMMENT_NODE_CLASSNAME_PREFIX}${pid}` });
   }
 
   render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
@@ -271,6 +272,16 @@ export default class Comment extends Component {
 
             <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">{o.time}</a>
 
+            {
+              mods.level > 0 && (
+                <a
+                  className="comment__link-to-parent"
+                  href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
+                  onClick={this.scrollToParent}
+                />
+              )
+            }
+
             {
               isAdmin && userBlocked && (
                 <span className="comment__status">Blocked</span>
@@ -301,16 +312,6 @@ export default class Comment extends Component {
                 title={isGuest ? 'Only authorized users are allowed to vote' : (isCurrentUser ? 'You can\'t vote for your own comment' : null)}
               >Vote down</span>
             </span>
-
-            {
-              mods.level > 0 && (
-                <a
-                  className="comment__link-to-parent"
-                  href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
-                  onClick={this.scrollToParent}
-                />
-              )
-            }
           </div>
 
           <div
diff --git a/web/app/embed.js b/web/app/embed.js
index c20b39fd..0e928754 100644
--- a/web/app/embed.js
+++ b/web/app/embed.js
@@ -49,16 +49,22 @@ function init() {
 
   const iframe = node.getElementsByTagName('iframe')[0];
 
-  window.addEventListener('message', updateIframeHeight);
+  window.addEventListener('message', receiveMessages);
 
   window.addEventListener('hashchange', postHashToIframe);
 
   setTimeout(postHashToIframe, 1000);
 
-  function updateIframeHeight(event) {
+  function receiveMessages(event) {
     try {
       const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
-      iframe.style.height = `${data.remarkIframeHeight}px`;
+      if (data.remarkIframeHeight) {
+        iframe.style.height = `${data.remarkIframeHeight}px`;
+      }
+
+      if (data.hash) {
+        window.location.hash = data.hash;
+      }
     } catch (e) {}
   }
 
diff --git a/web/iframe.html b/web/iframe.html
index eac0ed8f..a1cb7180 100644
--- a/web/iframe.html
+++ b/web/iframe.html
@@ -26,12 +26,15 @@
       }
     }, 200);
 
-    window.addEventListener('message', updateHash);
+    window.addEventListener('message', receiveMessages);
 
-    function updateHash(event) {
+    function receiveMessages(event) {
       try {
         const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
-        location.hash = data.hash;
+
+        if (data.hash) {
+          location.hash = data.hash;
+        }
       } catch (e) {}
     }
   </script>