nutella_framework 0.4.13 → 0.4.16

data/framework_components/roomcast-package-creator/src/app/components/material-ui/enhanced-textarea.jsx

@@ -0,0 +1,113 @@
+var React = require('react');
+var Classable = require('../../../../node_modules/material-ui/src/js/mixins/classable');
+
+var EnhancedTextarea = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    onChange: React.PropTypes.func,
+    onHeightChange: React.PropTypes.func,
+    textareaClassName: React.PropTypes.string,
+    rows: React.PropTypes.number
+  },
+
+  getDefaultProps: function() {
+    return {
+      rows: 1
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      height: this.props.rows * 24
+    };
+  },
+
+  componentDidMount: function() {
+    this._syncHeightWithShadow();
+  },
+
+  render: function() {
+
+    var {
+      className,
+      onChange,
+      onHeightChange,
+      textareaClassName,
+      rows,
+      valueLink,
+      ...other,
+    } = this.props;
+
+    var classes = this.getClasses('mui-enhanced-textarea');
+    var textareaClassName = 'mui-enhanced-textarea-input';
+    var style = {
+      height: this.state.height + 'px'
+    };
+
+    if (this.props.textareaClassName) {
+      textareaClassName += ' ' + this.props.textareaClassName;
+    }
+
+    if (this.props.hasOwnProperty('valueLink')) {
+      other.value = this.props.valueLink.value;
+    }
+
+    return (
+      <div className={classes}>
+        <textarea
+          ref="shadow"
+          className="mui-enhanced-textarea-shadow"
+          tabIndex="-1"
+          rows={this.props.rows}
+          defaultValue={this.props.defaultValue}
+          readOnly={true}
+          value={this.props.value} />
+        <textarea
+          {...other}
+          ref="input"
+          className={textareaClassName}
+          rows={this.props.rows}
+          style={style}
+          onChange={this._handleChange} />
+      </div>
+    );
+  },
+
+  getInputNode: function() {
+    return this.refs.input.getDOMNode();
+  },
+
+  _syncHeightWithShadow: function(newValue, e) {
+    var shadow = this.refs.shadow.getDOMNode();
+    var currentHeight = this.state.height;
+    var newHeight;
+
+    if (newValue !== undefined) shadow.value = newValue;
+    newHeight = shadow.scrollHeight;
+
+    if (currentHeight !== newHeight) {
+      this.setState({height: newHeight});
+      if (this.props.onHeightChange) this.props.onHeightChange(e, newHeight);
+    }
+  },
+
+  _handleChange: function(e) {
+    this._syncHeightWithShadow(e.target.value);
+
+    if (this.props.hasOwnProperty('valueLink')) {
+      this.props.valueLink.requestChange(e.target.value);
+    }
+
+    if (this.props.onChange) this.props.onChange(e);
+  },
+  
+  componentWillReceiveProps: function(nextProps) {
+    if (nextProps.value != this.props.value) {
+      this._syncHeightWithShadow(nextProps.value);
+    }
+  }
+});
+
+module.exports = EnhancedTextarea;

data/framework_components/roomcast-package-creator/src/app/components/material-ui/floating-action-button_.jsx

@@ -0,0 +1,73 @@
+var React = require('react');
+var CssEvent = require('../../../../node_modules/material-ui/src/js/utils/css-event.js');
+var Classable = require('../../../../node_modules/material-ui/src/js/mixins/classable.js');
+var EnhancedButton = require('../../../../node_modules/material-ui/src/js/enhanced-button.jsx');
+var Icon = require('../../../../node_modules/material-ui/src/js/icon.jsx');
+var Paper = require('../../../../node_modules/material-ui/src/js/paper.jsx');
+var Ripple = require('../../../../node_modules/material-ui/src/js/ripple.jsx');
+
+var FloatingActionButton_ = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    icon: React.PropTypes.string.isRequired,
+    mini: React.PropTypes.bool,
+    onTouchTap: React.PropTypes.func,
+    secondary: React.PropTypes.bool
+  },
+
+  getInitialState: function() {
+    var zDepth = 1;
+    return {
+      zDepth: zDepth,
+      initialZDepth: zDepth
+    };
+  },
+
+  render: function() {
+    var {
+      className,
+      icon,
+      mini,
+      onTouchTap,
+      ...other } = this.props,
+      classes = this.getClasses('mui-floating-action-button', {
+        'mui-is-mini': this.props.mini,
+        'mui-is-secondary': this.props.secondary
+      });
+
+    return (
+      <Paper className={classes} innerClassName="mui-floating-action-button-inner" zDepth={this.state.zDepth} circle={true}>
+        <EnhancedButton 
+          {...other}
+          className="mui-floating-action-button-container" 
+          onTouchTap={this._onTouchTap}>
+
+          
+          <Ripple className="mui-floating-action-button-focus-ripple" />
+          <Icon className="mui-floating-action-button-icon" icon={this.props.icon} />
+
+        </EnhancedButton>
+        <Ripple ref="ripple" className="mui-floating-action-button-ripple" />
+      </Paper>
+    );
+  },
+
+  _onTouchTap: function(e) {
+    if (!this.props.disabled) this._animateButtonClick(e);
+    if (this.props.onTouchTap) this.props.onTouchTap(e);
+  },
+
+  _animateButtonClick: function(e) {
+    var el = this.getDOMNode();
+
+    //animate the ripple
+    this.refs.ripple.animateFromCenter();
+
+  }
+
+});
+
+module.exports = FloatingActionButton_;

data/framework_components/roomcast-package-creator/src/app/components/material-ui/menu-item.jsx

@@ -0,0 +1,100 @@
+var React = require('react');
+
+var MenuItem = React.createClass({
+
+  propTypes: {
+    index: React.PropTypes.number.isRequired,
+    iconClassName: React.PropTypes.string,
+    iconRightClassName: React.PropTypes.string,
+    attribute: React.PropTypes.string,
+    number: React.PropTypes.string,
+    data: React.PropTypes.string,
+    toggle: React.PropTypes.bool,
+    onTouchTap: React.PropTypes.func,
+    onClick: React.PropTypes.func,
+    onToggle: React.PropTypes.func,
+    selected: React.PropTypes.bool
+  },
+
+  getDefaultProps: function() {
+    return {
+      toggle: false
+    };
+  },
+
+  render: function() {
+    var classes = 'mui-menu-item';
+    if(this.props.selected) {
+      classes += ' mui-is-selected';
+    }
+    if(this.props.currentSelected) {
+      classes += ' mui-is-current-selected';
+    }
+
+    var icon;
+    var data;
+    var iconRight;
+    var attribute;
+    var number;
+
+    if (this.props.iconClassName) icon = <FontIcon className={'mui-menu-item-icon ' + this.props.iconClassName} />;
+    if (this.props.iconRightClassName) iconRight = <FontIcon className={'mui-menu-item-icon-right ' + this.props.iconRightClassName} />;
+    if (this.props.data) data = <span className="mui-menu-item-data">{this.props.data}</span>;
+    if (this.props.number !== undefined) number = <span className="mui-menu-item-number">{this.props.number}</span>;
+    if (this.props.attribute !== undefined) attribute = <span className="mui-menu-item-attribute">{this.props.attribute}</span>;
+
+    var useIcon;
+    var deleteIcon;
+
+    var hiddenStyle = {
+      color: 'transparent',
+      cursor: 'default'
+    };
+
+    if(!this.props.lastConfig && !this.props.lastItem) {
+      useIcon = <div className='check-config-icon' onTouchTap={this.handleChangeConfig} > <i className="fa fa-check"></i> </div>;
+      deleteIcon = <div className='delete-config-icon'> <i className="fa fa-times" onTouchTap={this.handleDeleteConfig}></i> </div>;
+    }
+    if(this.props.lastConfig && !this.props.lastItem) {
+      useIcon = <div className='check-config-icon' onTouchTap={this.handleChangeConfig} > <i className="fa fa-check"></i> </div>
+      deleteIcon = <div className='delete-config-icon' style={hiddenStyle} > <i className="fa fa-times" style={hiddenStyle} ></i> </div>;
+    }
+    if(this.props.lastItem) {
+      useIcon = <div className='check-config-icon' onTouchTap={this.handleAddEmptyConfig} > <i className="fa fa-check"></i> </div>
+      deleteIcon = <div className='delete-config-icon' style={hiddenStyle} > <i className="fa fa-times" style={hiddenStyle} ></i> </div>;
+    }
+
+    return (
+        <div
+            key={this.props.index}
+            className={classes} >
+
+          {icon}
+          {this.props.children}
+          {data}
+          {attribute}
+          {number}
+          {iconRight}
+
+          {deleteIcon}
+          {useIcon}
+
+        </div>
+    );
+  },
+
+  handleChangeConfig: function(e) {
+    if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.index, 'change');
+  },
+
+  handleDeleteConfig: function(e) {
+    if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.index, 'delete');
+  },
+
+  handleAddEmptyConfig: function(e) {
+    if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.index, 'add');
+  }
+
+});
+
+module.exports = MenuItem;

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

@@ -0,0 +1,209 @@
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var Dom = require('../../../../node_modules/material-ui/src/js/utils/dom');
+var KeyLine = require('../../../../node_modules/material-ui/src/js/utils/key-line');
+var MenuItem = require('./menu-item.jsx');
+var ConfigField = require('../ConfigField');
+
+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 { hasToUpdateValues: 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);
+        var menuWidth = document.getElementsByClassName('resources-panel')[0].offsetWidth / 2.4;
+        //Update the menu width
+        el.style.width = menuWidth + 'px';
+
+        //Save the initial menu height and item height for later
+        this._initialMenuHeight = el.offsetHeight + KeyLine.Desktop.GUTTER_LESS;
+        this._itemHeight = el.offsetHeight / (this.props.menuItems.length);
+
+        //Show or Hide the menu according to visibility
+        this._renderVisibility();
+    },
+
+    componentDidUpdate: function(prevProps, prevState) {
+        this.updateHeight(this.props.menuItems.length);
+        if (this.props.visible !== prevProps.visible) this._renderVisibility();
+    },
+
+    updateHeight: function(numItems) {
+        if(this.props.visible) {
+
+            // Compute new height
+            this._initialMenuHeight = this._itemHeight * numItems + KeyLine.Desktop.GUTTER_LESS;
+
+            // Update menu height
+            this.getDOMNode().style.height = this._initialMenuHeight + 'px';
+
+        }
+    },
+
+    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;
+
+        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;
+
+            var menuContent;
+
+            if(this.props.configMenu) {
+
+                var lastItem = i === this.props.menuItems.length - 1;
+
+                menuContent = ( <ConfigField ref={'configField_' + lastItem}
+                                             placeholder={menuItem.lastSavedName}
+                                             value={menuItem.text}
+                                             configId={menuItem.configId}
+                                             hasToUpdateValues={this.state.hasToUpdateValues}
+                                             lastItem={lastItem}
+                                             onUpdatedValues={this.handleUpdatedValues}
+                                             onChange={this.handleInputChange} /> );
+
+            } else {
+                menuContent = menuItem.text;
+            }
+
+            itemComponent = (
+                <MenuItem
+                    {...other}
+                    selected={isSelected}
+                    key={i}
+                    index={i}
+                    icon={menuItem.icon}
+                    data={menuItem.data}
+                    attribute={menuItem.attribute}
+                    number={menuItem.number}
+                    toggle={menuItem.toggle}
+                    onTouchTap={this._onItemTap}
+                    lastItem={lastItem}
+                    lastConfig={this.props.menuItems.length === 2} >
+
+                    {menuContent}
+
+                </MenuItem>
+            );
+
+            children.push(itemComponent);
+        }
+
+        this._numItems = children.length;
+        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';
+            }
+        }
+    },
+
+    handleInputChange: function(id, value) {
+        this.props.onInputChange(id, value);
+    },
+
+    _onItemTap: function(e, index, action) {
+       // if(action === 'delete' || action === 'add') {
+            this.setState({hasToUpdateValues: true});
+      //  }
+        if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index], action);
+    },
+
+    handleUpdatedValues: function() {
+        this.setState({hasToUpdateValues: false});
+    }
+
+});
+
+module.exports = Menu;

data/framework_components/roomcast-package-creator/src/app/components/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-package-creator/src/app/components/material-ui/raised-button_.jsx

@@ -0,0 +1,72 @@
+var React = require('react');
+var Mui = '../../../../node_modules/material-ui/src/js';
+var CssEvent = require('../../../../node_modules/material-ui/src/js/utils/css-event');
+var Classable = require('../../../../node_modules/material-ui/src/js/mixins/classable');
+var EnhancedButton = require('../../../../node_modules/material-ui/src/js/enhanced-button.jsx');
+var Paper = require('../../../../node_modules/material-ui/src/js/paper.jsx');
+var Ripple = require('../../../../node_modules/material-ui/src/js/ripple.jsx');
+
+var RaisedButton_ = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    label: React.PropTypes.string.isRequired,
+    onTouchTap: React.PropTypes.func,
+    primary: React.PropTypes.bool,
+    secondary: React.PropTypes.bool
+  },
+
+  getInitialState: function() {
+    var zDepth = 1;
+    return {
+      zDepth: zDepth,
+      initialZDepth: zDepth
+    };
+  },
+
+  render: function() {
+    var {
+      className,
+      onTouchTap,
+      ...other } = this.props,
+      classes = this.getClasses('mui-raised-button', {
+        'mui-is-primary': this.props.primary,
+        'mui-is-secondary': !this.props.primary && this.props.secondary,
+        'mui-is-save-button': !this.props.primary && !this.props.secondary && this.props.saveButton,
+        'mui-is-undo-button': !this.props.primary && !this.props.secondary && !this.props.saveButton && this.props.undoButton
+      });
+
+    return (
+      <Paper className={classes} zDepth={this.state.zDepth}>
+        <EnhancedButton 
+          {...other}
+          className="mui-raised-button-container" 
+          onTouchTap={this._onTouchTap}>
+
+          <Ripple ref="ripple" className="mui-raised-button-ripple" />
+          <Ripple className="mui-raised-button-focus-ripple" />
+          <span className="mui-raised-button-label">{this.props.label}</span>
+
+        </EnhancedButton>
+      </Paper>
+    );
+  },
+
+  _onTouchTap: function(e) {
+    if (!this.props.disabled) this._animateButtonClick(e);
+    if (this.props.onTouchTap) this.props.onTouchTap(e);
+  },
+
+  _animateButtonClick: function(e) {
+    var el = this.getDOMNode();
+
+    //animate the ripple
+    this.refs.ripple.animate(e);
+
+  }
+
+});
+
+module.exports = RaisedButton_;

data/framework_components/roomcast-package-creator/src/app/components/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;