Notification in the CommentStream Working

client/coral-embed-stream/src/Embed.js

@@ -42,15 +42,6 @@ class Embed extends Component {
   }
 
   componentDidMount () {
-
-    // stream id, logged in user, settings
-
-    // Set up messaging between embedded Iframe an parent component
-
-    // this.props.getStream(path || window.location);
-    // this.path = window.location.href.split('#')[0];
-    //
-
     pym.sendMessage('childReady');
 
     pym.onMessage('DOMContentLoaded', hash => {
@@ -69,13 +60,6 @@ class Embed extends Component {
         }
       }, 100);
     });
-    console.log(document.documentElement);
-    document.documentElement.addEventListener('scroll', this.handleScroll);
-  }
-
-  handleScroll = () => {
-    const doc = document.documentElement;
-    console.log((window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0));
   }
 
   componentWillReceiveProps (nextProps) {
@@ -192,7 +176,13 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
-  addNotification: (type, text) => dispatch(addNotification(type, text)),
+  addNotification: (type, text) => {
+    pym.sendMessage('getPosition');
+
+    pym.onMessage('position', position => {
+      dispatch(addNotification(type, text, position));
+    });
+  },
   clearNotification: () => dispatch(clearNotification()),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
   logout: () => dispatch(logout()),

client/coral-embed-stream/style/default.css

@@ -51,7 +51,6 @@ hr {
 /* Notification styles */
 #coral-notif {
   position: fixed;
-  bottom: 0;
   border: 0;
   background: rgb(105,105,105);
   color: white;
@@ -81,7 +80,8 @@ hr {
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;
-  /*height: 100vh;*/
+  min-height: 775px;
+  position: relative;
 }
 
 /* Comment Box Styles */

client/coral-framework/actions/notification.js

@@ -1,11 +1,12 @@
 export const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
 export const CLEAR_NOTIFICATION = 'CLEAR_NOTIFICATION';
 
-export const addNotification = (notifType, text) => {
+export const addNotification = (notifType, text, position) => {
   return {
     type: ADD_NOTIFICATION,
     notifType,
-    text
+    text,
+    position
   };
 };
 

client/coral-framework/modules/notification/Notification.js

@@ -8,14 +8,16 @@ const Notification = (props) => {
     //   props.clearNotification();
     // }, props.notifLength);
   }
-  return <div>
-  {
-    props.notification.text &&
-    <SnackBar id='coral-notif' className={`coral-notif-${props.notification.type}`}>
-      {props.notification.text}
-    </SnackBar>
-  }
-  </div>;
+  return (
+    <div>
+      {
+        props.notification.text &&
+        <SnackBar id='coral-notif' className={`coral-notif-${props.notification.type}`} position={props.notification.position}>
+          {props.notification.text}
+        </SnackBar>
+      }
+    </div>
+  );
 };
 
 export default Notification;

client/coral-framework/reducers/notification.js

@@ -1,14 +1,21 @@
-/* Items Notifications */
-
 import * as actions from '../actions/notification';
-import {fromJS} from 'immutable';
+import {Map} from 'immutable';
 
-const initialState = fromJS({});
+const initialState = Map({
+  text: '',
+  type: '',
+  position: 400
+});
 
 export default (state = initialState, action) => {
   switch (action.type) {
   case actions.ADD_NOTIFICATION:
-    return state.set('text', action.text).set('type', action.notifType);
+    return state
+      .merge({
+        type: action.notifType,
+        text: action.text,
+        position: action.position
+      });
   case actions.CLEAR_NOTIFICATION:
     return initialState;
   default:

client/coral-settings/containers/SettingsContainer.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 import React, {Component} from 'react';
+import {addNotification} from '../actions/notification';
 import I18n from 'coral-framework/modules/i18n/i18n';
 
 import {myCommentHistory} from 'coral-framework/graphql/queries';
@@ -65,7 +66,7 @@ class SettingsContainer extends Component {
           }
         </TabContent>
         <TabContent show={activeTab === 1}>
-          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />
+          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} addNotification={this.props.addNotification} {...this.props} />
         </TabContent>
       </div>
     );

client/coral-ui/components/SnackBar.css

@@ -13,6 +13,7 @@
   border-radius: 3px;
   text-align: center;
   left: 50%;
-  bottom: 0;
   transform: translate(-50%, 0);
+  top: 0;
+  bottom: auto;
 }

client/coral-ui/components/SnackBar.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import styles from './SnackBar.css';
 
-const SnackBar = ({children}) => (
-  <div className={styles.SnackBar}>{children}</div>
-);
+const SnackBar = ({children, className, position, ...attrs}) => {
+  return (
+    <div className={`${styles.SnackBar} ${className}`} style={{top: `${position}px`}} {...attrs} >
+     {children}
+     </div>
+  );
+};
 
 export default SnackBar;

views/article.ejs

@@ -28,6 +28,7 @@
 <script type='text/javascript' src='<%= basePath %>/pym.v1.min.js'></script>
 <script>
   var ready = false;
+  var notificationOffset = 200;
 
   // default to using the window.location
   var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
@@ -38,7 +39,21 @@
   <%}%>
 
   var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream?asset_url=' + encodeURIComponent(url), {title: 'Talk Comments', id:'coralStreamIframe', name: 'coralStreamIframe', asset_url: url});
-  pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})
+  pymParent.onMessage('height', function(height) {
+    document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
+  })
+
+
+  pymParent.onMessage('getPosition', function(notification) {
+    var position = viewport().height + document.body.scrollTop;
+
+    if (position > notificationOffset) {
+      position = position - notificationOffset;
+    }
+
+    pymParent.sendMessage('position', position);
+  });
+
   pymParent.onMessage('childReady', function () {
     var interval = setInterval(function () {
       if (ready) {
@@ -65,6 +80,15 @@
   document.addEventListener('DOMContentLoaded', function () {
     ready = true;
   });
+
+  function viewport() {
+    var e = window, a = 'inner';
+    if ( !( 'innerWidth' in window ) ){
+      a = 'client';
+      e = document.documentElement || document.body;
+    }
+  return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
+  }
 </script>
   </body>
 </html>