Merge branch 'master' into wordlist

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 <div className={showSignInDialog ? 'expandForSignin' : ''}>
+    const expandForLogin = showSignInDialog ? {
+      minHeight: document.body.scrollHeight + 150
+    } : {};
+    return <div style={expandForLogin}>
       {
         rootItem
           ? <div className="commentStream">
@@ -116,7 +135,7 @@ class CommentStream extends Component {
                     </div>
                   : <p>Comments are closed for this thread.</p>
                 }
-                {!loggedIn && <SignInContainer />}
+                {!loggedIn && <SignInContainer offset={signInOffset} />}
                 {
                   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)),

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;
 }

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 =>

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,

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) {

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) {

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}) => (
-  <Dialog className={styles.dialog} open={open}>
+const SignDialog = ({open, view, handleClose, offset, ...props}) => (
+  <Dialog
+    className={styles.dialog}
+    open={open}
+    style={{
+      position: 'relative',
+      top: offset !== 0 && offset 
+    }}>
     <span className={styles.close} onClick={handleClose}>×</span>
     {view === 'SIGNIN' && <SignInContent {...props} />}
     {view === 'SIGNUP' && <SingUpContent {...props} />}

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 (
       <div>
         {!noButton && <Button id='coralSignInButton' onClick={showSignInDialog} full>
@@ -138,6 +138,7 @@ class SignInContainer extends Component {
         <SignDialog
           open={auth.showSignInDialog}
           view={auth.view}
+          offset={offset}
           {...this}
           {...this.state}
           {...this.props}