diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 0fda9444d..de4abcce8 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -67,23 +67,42 @@ class CommentStream extends Component { // Set up messaging between embedded Iframe an parent component this.pym = new Pym.Child({polling: 100}); - const path = /https?\:\/\/([^?#]+)/.exec(this.pym.parentUrl); + const path = this.pym.parentUrl.split('#')[0]; - this.props.getStream(path[1] || window.location); + this.props.getStream(path || window.location); this.path = path; this.pym.sendMessage('childReady'); + + this.pym.onMessage('DOMContentLoaded', hash => { + const commentId = hash.replace('#', 'c_'); + let count = 0; + const interval = setInterval(() => { + if (document.getElementById(commentId)) { + window.clearInterval(interval); + this.pym.scrollParentToChildEl(commentId); + } + + if (++count > 100) { // ~10 seconds + // give up waiting for the comments to load. + // it would be weird for the page to jump after that long. + window.clearInterval(interval); + } + }, 100); + }); } render () { const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0]; const rootItem = this.props.items.assets && this.props.items.assets[rootItemId]; const {actions, users, comments} = this.props.items; - const {loggedIn, user, showSignInDialog} = this.props.auth; + const {loggedIn, user, showSignInDialog, signInOffset} = this.props.auth; const {status} = this.props.config; const {activeTab} = this.state; - - return
+ const expandForLogin = showSignInDialog ? { + minHeight: document.body.scrollHeight + 150 + } : {}; + return
{ rootItem ?
@@ -116,7 +135,7 @@ class CommentStream extends Component {
:

Comments are closed for this thread.

} - {!loggedIn && } + {!loggedIn && } { rootItem.comments && rootItem.comments.map((commentId) => { const comment = comments[commentId]; @@ -272,7 +291,7 @@ const mapDispatchToProps = (dispatch) => ({ getStream: (rootId) => dispatch(getStream(rootId)), addNotification: (type, text) => dispatch(addNotification(type, text)), clearNotification: () => dispatch(clearNotification()), - showSignInDialog: () => dispatch(showSignInDialog()), + showSignInDialog: (offset) => dispatch(showSignInDialog(offset)), postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)), deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)), appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)), diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 59efc3dc8..766ad763a 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -8,7 +8,7 @@ body { } .expandForSignin { - min-height: 550px; + min-height: 600px; } button { @@ -113,7 +113,6 @@ hr { /* Comment styles */ .comment { - position: relative; margin-bottom: 10px; position: relative; } diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index 13a9c72bc..7ad5e4c34 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -6,7 +6,7 @@ import coralApi, {base} from '../helpers/response'; import {addItem} from './items'; // Dialog Actions -export const showSignInDialog = () => ({type: actions.SHOW_SIGNIN_DIALOG}); +export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset}); export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG}); export const changeView = view => dispatch => diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js index a4803fa96..cf5b25921 100644 --- a/client/coral-framework/reducers/auth.js +++ b/client/coral-framework/reducers/auth.js @@ -22,7 +22,8 @@ export default function auth (state = initialState, action) { switch (action.type) { case actions.SHOW_SIGNIN_DIALOG : return state - .set('showSignInDialog', true); + .set('showSignInDialog', true) + .set('signInOffset', action.offset); case actions.HIDE_SIGNIN_DIALOG : return state.merge(Map({ isLoading: false, diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index f0ab1b22f..dd5979888 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -8,7 +8,8 @@ const FlagButton = ({flag, id, postAction, deleteAction, addItem, showSignInDial const flagged = flag && flag.current_user; const onFlagClick = () => { if (!currentUser) { - showSignInDialog(); + const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75; + showSignInDialog(offset); return; } if (!flagged) { diff --git a/client/coral-plugin-likes/LikeButton.js b/client/coral-plugin-likes/LikeButton.js index b3d31fbf4..0672da071 100644 --- a/client/coral-plugin-likes/LikeButton.js +++ b/client/coral-plugin-likes/LikeButton.js @@ -8,7 +8,8 @@ const LikeButton = ({like, id, postAction, deleteAction, addItem, showSignInDial const liked = like && like.current_user; const onLikeClick = () => { if (!currentUser) { - showSignInDialog(); + const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75; + showSignInDialog(offset); return; } if (!liked) { diff --git a/client/coral-sign-in/components/SignDialog.js b/client/coral-sign-in/components/SignDialog.js index 242b7443a..68d96b910 100644 --- a/client/coral-sign-in/components/SignDialog.js +++ b/client/coral-sign-in/components/SignDialog.js @@ -6,8 +6,14 @@ import SignInContent from './SignInContent'; import SingUpContent from './SignUpContent'; import ForgotContent from './ForgotContent'; -const SignDialog = ({open, view, handleClose, ...props}) => ( - +const SignDialog = ({open, view, handleClose, offset, ...props}) => ( + × {view === 'SIGNIN' && } {view === 'SIGNUP' && } diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index 28dc021d2..07f82a849 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -129,7 +129,7 @@ class SignInContainer extends Component { } render() { - const {auth, showSignInDialog, noButton} = this.props; + const {auth, showSignInDialog, noButton, offset} = this.props; return (
{!noButton &&