nutella_framework 0.6.6 → 0.6.7

data/framework_components/roomcast-main-app/src/app/components/app/material-ui/menu.jsx

@@ -0,0 +1,177 @@
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var Dom = require('../../../../../node_modules/material-ui/lib/js/utils/dom');
+var KeyLine = require('../../../../../node_modules/material-ui/lib/js/utils/key-line');
+var MenuItem = require('./menu-item.jsx');
+var RaisedButton = Mui.RaisedButton;
+
+var Menu = React.createClass({
+
+    propTypes: {
+        autoWidth: React.PropTypes.bool,
+        onItemTap: React.PropTypes.func,
+        onItemClick: React.PropTypes.func,
+        onToggleClick: React.PropTypes.func,
+        menuItems: React.PropTypes.array.isRequired,
+        selectedIndex: React.PropTypes.number,
+        hideable: React.PropTypes.bool,
+        visible: React.PropTypes.bool,
+        zDepth: React.PropTypes.number
+    },
+
+    getInitialState: function() {
+        return { nestedMenuShown: false }
+    },
+
+    getDefaultProps: function() {
+        return {
+            autoWidth: true,
+            hideable: false,
+            visible: true,
+            zDepth: 1
+        };
+    },
+
+    componentDidMount: function() {
+        var el = this.getDOMNode();
+
+        //Set the menu with
+        this._setKeyWidth(el);
+
+        //Save the initial menu height for later
+        this._initialMenuHeight = el.offsetHeight + KeyLine.Desktop.GUTTER_LESS;
+
+        //Show or Hide the menu according to visibility
+        this._renderVisibility();
+    },
+
+    componentDidUpdate: function(prevProps, prevState) {
+        if (this.props.visible !== prevProps.visible) this._renderVisibility();
+    },
+
+    render: function() {
+        var classes = 'mui-menu';
+        if(this.props.hideable) {
+            classes += ' mui-menu-hideable';
+        }
+        if(this.props.visible) {
+            classes += ' mui-visible';
+        }
+
+        return (
+            <Paper ref="paperContainer" zDepth={this.props.zDepth} className={classes}>
+        {this._getChildren()}
+            </Paper>
+        );
+    },
+
+    _getChildren: function() {
+        var children = [],
+            menuItem,
+            itemComponent,
+            isSelected;
+
+        //This array is used to keep track of all nested menu refs
+        this._nestedChildren = [];
+
+        for (var i=0; i < this.props.menuItems.length; i++) {
+            menuItem = this.props.menuItems[i];
+            isSelected = i === this.props.selectedIndex;
+
+            var {
+                icon,
+                data,
+                attribute,
+                number,
+                toggle,
+                onClick,
+        ...other
+        } = menuItem;
+
+        itemComponent = (
+            <MenuItem
+              {...other}
+                selected={isSelected}
+                key={i}
+                index={i}
+                icon={menuItem.icon}
+                data={menuItem.data}
+                attribute={menuItem.attribute}
+                number={menuItem.number}
+                toggle={menuItem.toggle}
+                onClick={this._onItemClick}
+                onTouchTap={this._onItemTap}>
+              {menuItem.text}
+            </MenuItem>
+        );
+        children.push(itemComponent);
+    }
+
+    var logoutButton =  <div className='logout-button-div' key={'logout-button'} >
+                            <RaisedButton className='logout-button' label='Logout' primary={true} onTouchTap={this.handleLogout} />
+                        </div>;
+    //if(this.props.canLogout) {
+        children.push(logoutButton);
+    //}
+
+    return children;
+},
+
+_setKeyWidth: function(el) {
+    var menuWidth = this.props.autoWidth ?
+    KeyLine.getIncrementalDim(el.offsetWidth) + 'px' :
+        '100%';
+
+    //Update the menu width
+    Dom.withoutTransition(el, function() {
+        el.style.width = menuWidth;
+    });
+},
+
+_renderVisibility: function() {
+    var el;
+
+    if (this.props.hideable) {
+        el = this.getDOMNode();
+        var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode();
+
+        if (this.props.visible) {
+
+            //Open the menu
+            el.style.height = this._initialMenuHeight + 'px';
+            //This is to account for fast clicks
+            if (this.props.visible) {
+                innerContainer.style.overflow = 'visible';
+            }
+
+        } else {
+
+        //Close the menu
+        el.style.height = '0px';
+
+        //Set the overflow to hidden so that animation works properly
+        innerContainer.style.overflow = 'hidden';
+    }
+}
+},
+
+handleLogout: function() {
+    this.props.onLogout();
+},
+
+_onItemClick: function(e, index) {
+    if (this.props.onItemClick) this.props.onItemClick(e, index, this.props.menuItems[index]);
+},
+
+_onItemTap: function(e, index) {
+    if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]);
+},
+
+_onItemToggle: function(e, index, toggled) {
+    if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled);
+}
+
+});
+
+module.exports = Menu;

data/framework_components/roomcast-main-app/src/app/components/app/material-ui/overlay.jsx

@@ -0,0 +1,21 @@
+var React = require('react');
+
+var Overlay = React.createClass({
+
+  render: function() {
+
+    var {...other} = this.props;
+
+    var classes = 'mui-overlay';
+    if (this.props.show) {
+        classes += ' mui-is-shown';
+    }
+
+    return (
+        <div {...other} className={classes} />
+    );
+  }
+
+});
+
+module.exports = Overlay;

data/framework_components/roomcast-main-app/src/app/components/app/material-ui/right-nav.jsx

@@ -0,0 +1,108 @@
+var React = require('react'),
+    Overlay = require('./overlay.jsx'),
+    Mui = require('material-ui'),
+    Paper = Mui.Paper,
+    Menu = require('./menu.jsx');
+
+var RightNav = React.createClass({
+
+    propTypes: {
+        docked: React.PropTypes.bool,
+        header: React.PropTypes.element,
+        onChange: React.PropTypes.func,
+        menuItems: React.PropTypes.array.isRequired,
+        selectedIndex: React.PropTypes.number
+    },
+
+    getDefaultProps: function() {
+        return {
+            docked: true
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            open: this.props.docked,
+            modal: false
+        };
+    },
+
+    toggle: function() {
+        this.setState({ open: !this.state.open });
+        return this;
+    },
+
+    close: function() {
+        this.setState({ open: false });
+        return this;
+    },
+
+    open: function() {
+        this.setState({ open: true });
+        return this;
+    },
+
+    render: function() {
+        var classes = 'mui-right-nav';
+        if (!this.state.open) {
+            classes += ' mui-closed';
+        }
+        var selectedIndex = this.props.selectedIndex;
+        var overlay;
+
+        if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
+        if (this.state.modal) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayBlockTouchTap} />;
+
+        return (
+            <div className={classes}>
+
+        {overlay}
+                <Paper
+                    ref="clickAwayableElement"
+                    className="mui-right-nav-menu"
+                    zDepth={2}
+                    rounded={false}>
+          
+          {this.props.header}
+                    <Menu
+                        ref="menuItems"
+                        zDepth={0}
+                        menuItems={this.props.menuItems}
+                        selectedIndex={selectedIndex}
+                        onItemClick={this._onMenuItemClick}
+                        onItemTap={this.handleItemTap}
+                        onLogout={this.handleLogout}
+                        canLogout={this.props.canLogout} />
+
+                </Paper>
+            </div>
+        );
+    },
+
+    handleLogout: function() {
+        if (!this.props.docked) this.close();
+        this.props.onLogout();
+    },
+
+    _onMenuItemClick: function(e, key, payload) {
+        if (!this.props.docked) this.close();
+        if (this.props.onChange && this.props.selectedIndex !== key) {
+            this.props.onChange(e, key, payload);
+        }
+    },
+
+    _onOverlayTouchTap: function() {
+        this.close();
+    },
+
+    _onOverlayBlockTouchTap: function() {
+        // do nothing
+    },
+
+    handleItemTap: function(e, index, menuItem) {
+        this.props.onItemTap(menuItem);
+    }
+
+});
+
+module.exports = RightNav;

data/framework_components/roomcast-main-app/src/app/components/identity-selector/IdentitiesGrid.js

@@ -0,0 +1,91 @@
+
+var React = require('react');
+var IdentityCard = require('./IdentityCard');
+
+var IdentitiesGrid = React.createClass({
+
+    componentWillMount: function() {
+        this._externalMargin = 20;
+        this._cardMargin = 20;
+        this._heightRatio = 0.6;
+
+        this.computeGrid(this.props.identities);
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        this.computeGrid(nextProps.identities);
+    },
+
+    getInitialState: function () {
+        return  {
+            hasBeenSelected: false
+        }
+    },
+
+    setHasBeenSelected: function(b) {
+        this.setState({
+            hasBeenSelected: b
+        });
+    },
+
+    /**
+     * Computes grid size based on given number of configs.
+     */
+    computeGrid: function(identities) {
+        var N = identities.length; // num of total cards
+        var i = 1;  // num of rows
+        var j = 2;  // num of columns
+        for(var n=1; n<=N; n++) {
+            var p = i * j;
+            if(n > p) {
+                if(i < j) {
+                    i++;
+                } else {
+                    j++;
+                }
+            }
+        }
+        var cardWidth = (window.innerWidth - this._externalMargin*2 - this._cardMargin*2*j) / j;
+        var cardHeight = (window.innerHeight*this._heightRatio - this._externalMargin - this._cardMargin*2*i) / i;
+        this._cardSize = [cardWidth, cardHeight];
+
+    },
+
+    render: function () {
+        var self = this;
+
+        var cards = [];
+
+        var height = window.innerHeight * this._heightRatio;
+        var gridStyle = {height: height};
+
+        var cardStyle = {
+            width: this._cardSize[0],
+            height: this._cardSize[1],
+            //position: 'absolute',
+            flexBasis: this._cardSize[0]
+        };
+
+        this.props.identities.forEach(function(i) {
+                cards.push(
+                    <IdentityCard
+                        key={i}
+                        name={i}
+                        cardStyle={cardStyle}
+                        hasBeenSelected={self.state.hasBeenSelected}
+                        onSelectedIdentity={self.setHasBeenSelected}
+                        onSetRid = {self.props.onSetRid} />);
+        });
+
+        return (
+
+            <div className='identities-grid' style={gridStyle} >
+                {cards}
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = IdentitiesGrid;

data/framework_components/roomcast-main-app/src/app/components/identity-selector/IdentityCard.js

@@ -0,0 +1,86 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var iOSMixin = require('./iOSMixin');
+
+var IdentityCard = React.createClass({
+
+    mixins: [iOSMixin],
+
+    componentDidMount: function() {
+        var self= this;
+        this._colorSelected = '#00bcd4';
+
+    },
+
+    getInitialState: function () {
+        return  {
+            isSelected: false
+        }
+    },
+
+    handleSelectedIdentity: function() {
+        var self = this;
+
+        if(!this.props.hasBeenSelected) {
+
+            this.props.onSelectedIdentity(true);
+
+            // Show selection
+            this.setState({
+                isSelected: true
+            });
+
+            // Trigger native animation
+            var callback = function() {
+                // Exit point from identity-selector
+                self.props.onSetRid(self.props.name);
+            };
+            setTimeout(callback, 500);
+        }
+
+    },
+
+    render: function () {
+
+        var selectedCardStyle = {
+            backgroundColor: this._colorSelected,
+            color: 'white'
+        };
+
+        // Copy
+        var cardStyle = {};
+        for(var p_ in this.props.cardStyle) {
+            cardStyle[p_] = this.props.cardStyle[p_];
+        }
+
+        var className='identity-card';
+
+        // Add properties if selected
+        if(this.state.isSelected) {
+            className += ' identity-card-selected';
+            for(var p in selectedCardStyle) {
+                cardStyle[p] = selectedCardStyle[p];
+            }
+
+        }
+
+        return (
+
+            <Paper className={className} style={cardStyle} onTouchTap={this.handleSelectedIdentity}  >
+
+                <div className='card-name'>
+
+                    <span> {this.props.name} </span>
+
+                </div>
+
+
+
+            </Paper>);
+    }
+
+});
+
+module.exports = IdentityCard;

data/framework_components/roomcast-main-app/src/app/components/identity-selector/iOSMixin.js

@@ -0,0 +1,19 @@
+
+var iOSMixin = {
+
+    iOScall: function(actionType, actionParameters) {
+
+        // JavaScript to send an action to iOS code
+        var appName = 'roomcast';
+        var jsonString = (JSON.stringify(actionParameters));
+        var escapedJsonParameters = escape(jsonString);
+        var url = appName + '://' + actionType + "#" + escapedJsonParameters;
+        console.log('launching url: ', url);
+        document.location.href = url;
+        
+    }
+
+
+};
+
+module.exports = iOSMixin;

data/framework_components/roomcast-main-app/src/app/components/identity-selector/main.js

@@ -0,0 +1,105 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var IdentitiesGrid = require('./IdentitiesGrid');
+var NUTELLA = require('nutella_lib');
+
+var Main = React.createClass({
+
+    componentDidMount: function() {
+        var self = this;
+
+        window.nutella_identity_selector = NUTELLA.init(self.props.params.broker, self.props.params.app_id, self.props.params.run_id, 'identity-selector', function(connected) {
+            if(connected) {
+                window.nutella_identity_selector.net.request('mapping/retrieve', 'all', function (response) {
+                    self.extractIdentitiesFromMapping(response);
+                });
+
+                window.nutella_identity_selector.net.subscribe('mapping/updated', function (message, from) {
+                    self.extractIdentitiesFromMapping(message);
+                });
+
+                window.nutella_identity_selector.net.subscribe('currentConfig/switched', function (message, from) {
+                    if(self.isMounted()) {
+                        self.extractIdentitiesFromMapping(message);
+                    }
+                });
+            } else {
+                console.warn('nutella error in identity-selector');
+            }
+        });
+
+    },
+
+    extractIdentitiesFromMapping: function(mapping) {
+        var ids = [];
+        mapping.forEach(function (f) {
+            for (var i in f.items) {
+                if(f.items.hasOwnProperty(i) && f.items[i].name !== '') {
+                    ids.push(f.items[i].name);
+                }
+            }
+        });
+        this.setIdentities(ids);
+    },
+
+    getInitialState: function () {
+        return  {
+            identities: [],
+            mode: 'id'
+        }
+    },
+
+    setIdentities: function(ids) {
+        this.setState({
+            identities: ids
+        });
+    },
+
+    render: function () {
+
+        var titlesDivStyle = {
+            height: window.innerHeight * (0.4)
+        };
+
+        var gridDivStyle = {
+            height: window.innerHeight * (0.6)
+        };
+
+        var label;
+        switch(this.props.mode) {
+            case 'id':
+                label = 'Select new identity';
+                break;
+            case 'activity':
+                label = 'New Activity!';
+                break;
+        }
+
+        return (
+
+            <div className='main-div' >
+
+                <div className='titles-div' style={titlesDivStyle} >
+
+                    <span className='title' > {label} </span>
+                    <span className='title' > Who are you? </span>
+
+                </div>
+
+                <div className='grid-div' style={gridDivStyle} >
+
+                    <IdentitiesGrid
+                        identities={this.state.identities}
+                        onSetRid = {this.props.onSetRid} />
+
+                </div>
+
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = Main;

data/framework_components/roomcast-main-app/src/app/components/login/AppIdPage.js

@@ -0,0 +1,97 @@
+
+var React = require('react');
+var IdentitiesGrid = require('./IdentitiesGrid');
+
+var AppIdPage = React.createClass({
+
+    componentDidMount: function() {
+    },
+
+    getInitialState: function () {
+        return  {
+            hasBeenSelected: false
+        }
+    },
+
+    handleSetBroker: function(event) {
+        if (event.type == "keydown") {
+            var charCode;
+            if (event.charCode) {
+                charCode = event.charCode;
+            }
+            else {
+                charCode = event.keyCode;
+            }
+        }
+        if (charCode == 13) {
+            var broker = this.refs['input'].getDOMNode().value;
+            this.props.initWithBroker(broker);
+        }
+    },
+
+    render: function () {
+
+        var titlesDivStyle = {
+            height: window.innerHeight * (0.4)
+        };
+
+        var gridDivStyle = {
+            height: window.innerHeight * (0.6)
+        };
+
+        var app_ids_grid = null;
+
+        if(this.props.values) {
+            var backgroundMessage = null;
+            if(this.props.values.length === 0) {
+                backgroundMessage = <p className='backgroundMessage' > No available apps </p>;
+            }
+            app_ids_grid = (
+                <div className='grid-div' style={gridDivStyle} >
+
+                    {backgroundMessage}
+                    <IdentitiesGrid
+                        identities={this.props.values}
+                        type='app_id'
+                        onSwitchPage={this.props.onSwitchPage} />
+
+                </div>
+            );
+        } else {
+            app_ids_grid = (
+                <div className='grid-div' style={gridDivStyle}>
+                </div>
+            );
+        }
+
+        var brokerStyle = {
+            backgroundColor: '#e9eaed',
+            border: 'solid 1px white',
+            position: 'absolute',
+            right: '5px',
+            top: '5px'
+        };
+
+        return (
+
+            <div className='main-div' >
+
+                <input style={brokerStyle} ref='input' onKeyDown={this.handleSetBroker} ></input>
+
+                <div className='titles-div' style={titlesDivStyle} >
+
+                    <img src='dist/assets/Logo_alpha.png' className='rc-logo' />
+                    <span className='title' > application name: </span>
+
+                </div>
+
+                {app_ids_grid}
+
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = AppIdPage;