resize

jerronl · Aug 2, 2017 · f510af7 · f510af7
1 parent 8bfe36a
commit f510af7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,15 @@
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.5",
     "redux": "^3.6.0",
-    "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.5"
+  },
+  "devDependencies": {
+    "css-loader": "^0.28.4",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "style-loader": "^0.18.2",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "webpack": "^3.4.1"
   }
 }
diff --git a/src/components/GoldenLayoutWrapper.jsx b/src/components/GoldenLayoutWrapper.jsx
@@ -3,8 +3,33 @@ import {Provider} from 'react-redux';
 import {IncrementButtonContainer} from './IncrementButton';
 import {DecrementButtonContainer} from './DecrementButton';
 import {TestComponentContainer} from './TestComponent';
+import '../index.styl'
 
 class GoldenLayoutWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.setNode = this.setNode.bind(this);
+        this.updateDimensions=this.updateDimensions.bind(this);
+        this.state = {
+            ht:500,
+        }
+    }
+    setNode(node) {
+        this.node = node;
+    }
+    updateDimensions() {
+        if (this.node && this.myLayout) {
+            this.setState({
+                ht: $(window).height() - this.node.getBoundingClientRect().top-5,
+            });
+
+            this.myLayout.updateSize();
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.updateDimensions);
+    }
+
     componentDidMount() {
         // Build basic golden-layout config
         const config = {
@@ -36,7 +61,7 @@ class GoldenLayoutWrapper extends React.Component {
             return Wrapped;
         };
 
-        var layout = new GoldenLayout(config, '#goldenLayout');
+        var layout = new GoldenLayout(config, this.node);
         layout.registerComponent('IncrementButtonContainer', 
                                  wrapComponent(IncrementButtonContainer, this.context.store)
         );
@@ -47,11 +72,15 @@ class GoldenLayoutWrapper extends React.Component {
                                  wrapComponent(TestComponentContainer, this.context.store)
         );
         layout.init();
+
+        window.addEventListener("resize", this.updateDimensions);
+        this.myLayout=layout;
+        this.updateDimensions();
     }
 
     render() {
         return (
-            <div id="goldenLayout"/>
+            <div ref={this.setNode} style={{height:this.state.ht+'px'}}/>
         );
     }
 }

diff --git a/src/index.html b/src/index.html
@@ -2,14 +2,8 @@
 
 <html>
     <head>
-        <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
-        <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" />
-        <link type="text/css" rel="stylesheet" href="https://golden-layout.com/assets/css/goldenlayout-dark-theme.css" />
-
         <title>React-Redux with GoldenLayout</title>
-        <style type="text/css">
-        .lm_root {height:300px;}
-        </style>
+
     </head>
     <body>
         <div id="root"></div>

diff --git a/src/index.styl b/src/index.styl
@@ -0,0 +1,3 @@
+@import '~golden-layout/src/css/goldenlayout-base.css'
+@import '~golden-layout/src/css/goldenlayout-light-theme.css'
+
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -1,6 +1,7 @@
 import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
 
 export default () => ({
     entry: [
@@ -43,7 +44,30 @@ export default () => ({
                     ]
                 }
             }]
-        }]
+        },
+            {
+                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+                loader: 'file-loader?name=fonts/[name].[ext]'
+            },
+            {
+                test: /\.styl$/i,
+                exclude: /node_modules/,
+                use: ['style-loader','css-loader','stylus-loader']
+            },
+            {
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options : { autoprefixer: false, sourceMap: true, importLoaders: 1 }
+                        },
+                        'postcss-loader'
+                    ]
+                })
+            },
+        ]
     },
     resolve: {
         extensions: ['.js', '.jsx']
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		@import '~golden-layout/src/css/goldenlayout-base.css'
		@import '~golden-layout/src/css/goldenlayout-light-theme.css'