Merge branch 'master' into payload-filtering

architecture.xml

@@ -0,0 +1 @@
+<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36" version="6.0.1.8" editor="www.draw.io" type="device"><diagram name="Page-1">7Vpbc6M2FP41nrYP6wFksP1oO0k7nd1O2nTa7qMMCtZGICpE4vTXVwIJkCVnnQbbWU/z4MDRBen7zk0HRmCVbX9ksNh8ogkio8BLtiNwNQqC6dwTv1Lw3AjCYNoIUoaTRuR3gjv8D1JCNS6tcIJKoyOnlHBcmMKY5jmKuSGDjNEns9s9JeZTC5giS3AXQ2JL/8QJ3zTSWeh18p8QTjf6yb6nWtYwfkgZrXL1vFEA7uu/pjmDei7Vv9zAhD71ROB6BFaMUt5cZdsVIhJaDVsz7mZPa7tuhnJ+yIBJ1Ix4hKRCesn1wvizBkOMELiLm6VYbSGFMaGVmGD5tMEc3RUwlsInoQlCtuEZEXe+uFRTI8bRdu/6/HbXQpkQzRBnz6KLGhBpjdCK1Nw9daQEGvpNn5C56giVIqTtzB0Y4kLh4cYGOKBIhJqoW8r4hqY0h+S6ky5r7pGcwTPBQFvM/5LicajuPuuWXCys1yRvP6sJSg4ZX0iNrmGHZYljLb7BpJ08T+xOQtjr8gVx/qwsDVacClG3g4+UFqpfyRl9QCtKKKv3DLz6r23R9tARbLEpIKMVixVmCkWx4hSpXoHSOgnni1rAEIEcP5pW+RZOw/kxOPV7jHrjaWiQalA6Bt8IqTvU/BeWQ+9EpEb+8UkNTFLHfmTyGrbtt4hhsQXEviETHoDtJpKcgO3AiliLohCCO8REqBkFERErWib4UVym8vL7X0R6MgpWcp/bgqGyHH8pf9AdxeN6fS1FOijEOdCyot7eEAemZojzdZbRC3L+xBXkZt7b0Zx8Pf4fH4I2fVIQABcEMxcEkwEgiCbHdx8vhYTatVyil/AnjtB/Ii/huxTbcg2LJMP5SObIN+JXHmOYWAbN9zkHewLpet6JI/F1dqwdSTCzrShwWFE0hBGF5zWi6cUaUXhGIwotI1pRBmWX62yNkvIdaDmYOWLFsbTcn9vJRyWeGni3jD5i4T7OAUmkE2Bt+L59TPY9YEMCBoCkXW4HySeIiUrIsNj1OQAJDECmDhVxlQ2GwCME53WEl+oHdc3gLCfMwC6T/UzXwta9XyskJI5Dx0OF3tcxY7aTYx/qN6cDGAVwBBKCxWa+kxjeib1biIhtcRMEU8dymkvLuRe6uiOCBKe51GkxvzyFLyVIOIZkoRoynCS12blQ34Pra4qWhxxnpg6kgyGQjo7hfuyi5WW4mDe4DjX0lmIxY0t9sHOYB7ucNi5Njepoff1EjR+0Jqr1o93PYSWAo5TPTJVpg5Sjzn056mRGLDC3I1ZzLD1BxJrYdZz/X14ci9TwRKQC+/hxw2jtNq7zRJ5CSJXivHTlIwzBWHS8YSiptoemJfqFXxOLE1qt6xbf0BV/TyQd9k3g7rkvmJzw3DeZWsCrYpFQNFU+imAmd52vy8JdK1rRLKtyzJ/39f1qtekTzGHa1bgPJK/KyCKWC+0yoY9wjcgtLXFd7AJXa8o5zUQHIhuW7UvsniWp19h2NsXpDtntO21pd4V+GyKVA+epEg+gEMAMkD6w9QEcSx1mdjrbI9eiDWXrujLwrmkbnhLgOHcfixKdYvco+Q0l2C7HaHgTyGEp4N13Dhj4O4adigSIbGjmcxsa3x8AG/2sgXMBqyRxifE+1J8fnaH8GjpKazRP6dV+p3FqrTYNPnAWHl3v7QZR68CCx3C+PXyivyv5RdVSFhU+qPrAQvQg6J53rbuR975JrexpZMOHslZPOYs/Kbb2LLpS/jskD+LfgsWSj5hXjfgKw5TBrBcUmseZS3ghJTjz9v4QLWNfUkiKDXzlNi6p1mNmIbZbb2VvrDTL3L39LrA55nffXoLrfwE=</diagram></mxfile>

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}