add debug component for globalnotifications

js/components/global_notification.js

@@ -7,18 +7,33 @@ import GlobalNotificationStore from '../stores/global_notification_store';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import { mergeOptions } from '../utils/general_utils';
+
 let GlobalNotification = React.createClass({
 
     componentDidMount() {
         GlobalNotificationStore.listen(this.onChange);
+
+        // init container width
+        this.handleContainerResize();
+
+        // we're using an event listener on window here,
+        // as it was not possible to listen to the resize events of a dom node
+        window.addEventListener('resize', this.handleContainerResize);
     },
 
     componentWillUnmount() {
         GlobalNotificationStore.unlisten(this.onChange);
+        window.removeEventListener('resize', this.handleContainerResize);
     },
 
     getInititalState() {
-        return this.extractFirstElem(GlobalNotificationStore.getState().notificationQue);
+        return mergeOptions(
+            this.extractFirstElem(GlobalNotificationStore.getState().notificationQue),
+            {
+                containerWidth: 0
+            }
+        );
     },
 
     extractFirstElem(l) {
@@ -35,7 +50,14 @@ let GlobalNotification = React.createClass({
         }
     },
 
+    handleContainerResize() {
+        this.setState({
+            containerWidth: this.refs.containerWrapper.getDOMNode().offsetWidth
+        });
+    },
+
     render() {
+        console.log(this.state);
         let notificationClass = 'ascribe-global-notification ';
         let message = this.state && this.state.message ? this.state.message : null;
 

js/components/header.js

@@ -19,11 +19,12 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
 import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
 
+import HeaderNotificationDebug from './header_notification_debug';
+
 
 import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 
-let Link = Router.Link;
 
 let Header = React.createClass({
     mixins: [Router.Navigation],
@@ -43,11 +44,13 @@ let Header = React.createClass({
         UserStore.unlisten(this.onChange);
         WhitelabelStore.unlisten(this.onChange);
     },
+
     handleLogout(){
         UserActions.logoutCurrentUser();
         Alt.flush();
         this.transitionTo('login');
     },
+
     getLogo(){
         let logo = (
             <span>
@@ -110,6 +113,7 @@ let Header = React.createClass({
                         <Nav navbar left>
                         </Nav>
                         <Nav navbar right>
+                            <HeaderNotificationDebug />
                             {addNewWork}
                             {collection}
                             {account}

js/components/header_notification_debug.js

@@ -0,0 +1,29 @@
+'use strict';
+
+import React from 'react';
+
+import GlobalNotificationModel from '../models/global_notification_model';
+import GlobalNotificationActions from '../actions/global_notification_actions';
+
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+
+/*
+    This components purpose is to be inserted into the page's navigation in order
+    debug the globalnotificationsaction easily
+
+ */
+let HeaderNotificationDebug = React.createClass({
+
+    triggerNotification() {
+        let notification = new GlobalNotificationModel('this is a test, please ignore', 'success');
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    render() {
+        return (
+            <MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
+        );
+    }
+});
+
+export default HeaderNotificationDebug;