diff --git a/frontend/app/components/auth-panel/auth-panel.tsx b/frontend/app/components/auth-panel/auth-panel.tsx index 9e88d98b..0ed6d820 100644 --- a/frontend/app/components/auth-panel/auth-panel.tsx +++ b/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 { 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); } } diff --git a/frontend/app/components/comment/comment.tsx b/frontend/app/components/comment/comment.tsx index 8e26d963..2fe104c2 100644 --- a/frontend/app/components/comment/comment.tsx +++ b/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 { const parentCommentNode = document.getElementById(`${COMMENT_NODE_CLASSNAME_PREFIX}${pid}`); if (parentCommentNode) { - parentCommentNode.scrollIntoView(); + const top = parentCommentNode.getBoundingClientRect().top; + if (!postMessage({ scrollTo: top })) { + parentCommentNode.scrollIntoView(); + } } }; diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx index 2b226aad..dd541631 100644 --- a/frontend/app/components/root/root.tsx +++ b/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 { if (comment) { setTimeout(() => { - window.parent.postMessage(JSON.stringify({ scrollTo: comment.getBoundingClientRect().top }), '*'); + postMessage({ scrollTo: comment.getBoundingClientRect().top }); }, 500); } } diff --git a/frontend/app/components/user-info/user-info.tsx b/frontend/app/components/user-info/user-info.tsx index 68295118..bbce3bab 100644 --- a/frontend/app/components/user-info/user-info.tsx +++ b/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 { 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 }); } } } diff --git a/frontend/app/utils/postMessage.ts b/frontend/app/utils/postMessage.ts new file mode 100644 index 00000000..6cdf7160 --- /dev/null +++ b/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; +}