Fix GH-168: Rehabilitate the `Modal` props.style

This makes it more sane, and consistent with the way the react-modal `Modal` works.  The old way made multiple modals on the page have the same `style` prop.

package.json

@@ -44,6 +44,8 @@
     "json-loader": "0.5.2",
     "json2po-stream": "1.0.3",
     "jsx-loader": "0.13.2",
+    "lodash.clone": "3.0.3",
+    "lodash.defaultsdeep": "3.10.0",
     "lodash.omit": "3.1.0",
     "minilog": "2.0.8",
     "node-sass": "3.3.3",

src/components/intro/intro.jsx

@@ -44,7 +44,7 @@ var Intro = React.createClass({
         this.closeRegistration();
     },
     render: function () {
-        var frameSettings = {
+        var frameProps = {
             width: 570,
             height: 357,
             padding: 15
@@ -140,10 +140,10 @@ var Intro = React.createClass({
                         className="video-modal"
                         isOpen={this.state.videoOpen}
                         onRequestClose={this.closeVideo}
-                        frameSettings={frameSettings}>
+                        style={{content:frameProps}}>
                     <iframe
                         src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0"
-                        {...omit(frameSettings, 'padding')} />
+                        {...omit(frameProps, 'padding')} />
                 </Modal>
             </div>
         );

src/components/modal/modal.jsx

-var defaults = require('lodash.defaults');
-var omit = require('lodash.omit');
+var clone = require('lodash.clone');
+var defaultsDeep = require('lodash.defaultsdeep');
 var React = require('react');
 var ReactModal = require('react-modal');
 
 require('./modal.scss');
 
+var defaultStyle = {
+    overlay: {
+        zIndex: 100,
+        backgroundColor: 'rgba(0, 0, 0, .75)'
+    },
+    content: {
+        overflow: 'visible',
+        borderRadius: '6px',
+        width: 500,
+        height: 250,
+        padding: 0,
+        top: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        left: '50%',
+        marginTop: -125,
+        marginLeft: -250
+    }
+};
+
 var Modal = React.createClass({
     type: 'Modal',
     statics: {
@@ -12,46 +32,24 @@ var Modal = React.createClass({
     },
     getDefaultProps: function () {
         return {
-            frameSettings: null,
-            style: {
-                overlay: {
-                    zIndex: 100,
-                    backgroundColor: 'rgba(0, 0, 0, .75)'
-                },
-                content: {
-                    overflow: 'visible',
-                    borderRadius: '6px'
-                }
-            }
+            style: defaultStyle
         };
     },
+    calculateStyle: function () {
+        var style = clone(this.props.style, true);
+        defaultsDeep(style, defaultStyle);
+        style.content.marginTop = (style.content.height + style.content.padding*2) / -2;
+        style.content.marginLeft = (style.content.width + style.content.padding*2) / -2;
+        return style;
+    },
     requestClose: function () {
         return this.refs.modal.portal.requestClose();
     },
     render: function () {
-        var frameSettings = this.props.frameSettings;
-        var style = this.props.style;
-        var modalProps = omit(this.props, ['frameSettings', 'style']);
-        if (frameSettings) {
-            defaults(frameSettings, {
-                width: 500,
-                height: 250,
-                padding: 0
-            });
-            defaults(style.content, {
-                top: '50%',
-                right: 'auto',
-                bottom: 'auto',
-                left: '50%',
-                marginTop: (frameSettings.height + 2*frameSettings.padding) / -2,
-                marginLeft: (frameSettings.width + 2*frameSettings.padding) / -2,
-                height: frameSettings.height,
-                width: frameSettings.width,
-                padding: frameSettings.padding
-            });
-        }
         return (
-            <ReactModal ref="modal" style={style} {...modalProps}>
+            <ReactModal ref="modal"
+                        {...this.props}
+                        style={this.calculateStyle()}>
                 <div className="modal-close" onClick={this.requestClose}></div>
                 {this.props.children}
             </ReactModal>

src/components/registration/registration.jsx

@@ -22,7 +22,7 @@ var Registration = React.createClass({
         window.removeEventListener('message', this.onMessage);
     },
     render: function () {
-        var frameSettings = {
+        var frameProps = {
             width: 610,
             height: 438
         };
@@ -31,8 +31,8 @@ var Registration = React.createClass({
                     isOpen={this.props.isOpen}
                     onRequestClose={this.props.onRequestClose}
                     className="registration"
-                    frameSettings={frameSettings}>
-                <iframe src="/accounts/standalone-registration/" {...frameSettings} />
+                    style={{content:frameProps}}>
+                <iframe src="/accounts/standalone-registration/" {...frameProps} />
             </Modal>
         );
     }