Fix #430 (#440)

* add postMessage util

* use scrollTo via postMessage (fixes "scroll to parent" on Safari #430)

* use postMessage

frontend/app/components/auth-panel/auth-panel.tsx

@@ -15,6 +15,7 @@ import { EmailLoginForm, EmailLoginFormConnected } from './__email-login-form';
 import { StoreState } from '@app/store';
 import { ProviderState } from '@app/store/provider/reducers';
 import debounce from '@app/utils/debounce';
+import postMessage from '@app/utils/postMessage';
 
 export interface Props {
   user: User | null;
@@ -122,8 +123,8 @@ export class AuthPanel extends Component<Props, State> {
   toggleUserInfoVisibility() {
     const user = this.props.user;
     if (window.parent && user) {
-      const data = JSON.stringify({ isUserInfoShown: true, user });
-      window.parent.postMessage(data, '*');
+      const data = { isUserInfoShown: true, user };
+      postMessage(data);
     }
   }
 

frontend/app/components/comment/comment.tsx

@@ -20,6 +20,7 @@ import { AvatarIcon } from '@app/components/avatar-icon';
 import Countdown from '../countdown';
 import { boundActions } from './connected-comment';
 import { getPreview, uploadImage } from '@app/common/api';
+import postMessage from '@app/utils/postMessage';
 
 export type Props = {
   user: User | null;
@@ -288,7 +289,10 @@ export class Comment extends Component<Props, State> {
     const parentCommentNode = document.getElementById(`${COMMENT_NODE_CLASSNAME_PREFIX}${pid}`);
 
     if (parentCommentNode) {
-      parentCommentNode.scrollIntoView();
+      const top = parentCommentNode.getBoundingClientRect().top;
+      if (!postMessage({ scrollTo: top })) {
+        parentCommentNode.scrollIntoView();
+      }
     }
   };
 

frontend/app/components/root/root.tsx

@@ -41,6 +41,7 @@ import { Thread } from '@app/components/thread';
 import { uploadImage, getPreview } from '@app/common/api';
 import { isUserAnonymous } from '@app/utils/isUserAnonymous';
 import { bindActions } from '@app/utils/actionBinder';
+import postMessage from '@app/utils/postMessage';
 
 const mapStateToProps = (state: StoreState) => ({
   user: state.user,
@@ -141,7 +142,7 @@ export class Root extends Component<Props, State> {
 
       if (comment) {
         setTimeout(() => {
-          window.parent.postMessage(JSON.stringify({ scrollTo: comment.getBoundingClientRect().top }), '*');
+          postMessage({ scrollTo: comment.getBoundingClientRect().top });
         }, 500);
       }
     }

frontend/app/components/user-info/user-info.tsx

@@ -10,6 +10,7 @@ import { userInfo } from '@app/common/user-info-settings';
 
 import LastCommentsList from './last-comments-list';
 import { AvatarIcon } from '../avatar-icon';
+import postMessage from '@app/utils/postMessage';
 
 interface Props {
   comments: Comment[] | null;
@@ -70,8 +71,7 @@ class UserInfo extends Component<Props, State> {
   static onKeyDown(e: KeyboardEvent): void {
     // ESCAPE key pressed
     if (e.keyCode === 27) {
-      const data = JSON.stringify({ isUserInfoShown: false });
-      window.parent.postMessage(data, '*');
+      postMessage({ isUserInfoShown: false });
     }
   }
 }

frontend/app/utils/postMessage.ts

@@ -0,0 +1,21 @@
+import { User } from '@app/common/types';
+
+export type Message =
+  | { inited: true }
+  | {
+      isUserInfoShown: true;
+      user: User;
+    }
+  | { isUserInfoShown: false }
+  | { scrollTo: number };
+
+/**
+ * Sends message to parent window
+ *
+ * @returns request success of fail
+ */
+export default function postMessage(data: Message): boolean {
+  if (!window.parent || window.parent === window) return false;
+  window.parent.postMessage(JSON.stringify(data), '*');
+  return true;
+}