From e66f240e8148fd63e6739950bd773b4052d91501 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 18 Sep 2014 23:22:02 +0200
Subject: add splitter

---
 web/src/js/components/flowdetail.jsx.js |  4 +-
 web/src/js/components/mainview.jsx.js   |  1 +
 web/src/js/components/proxyapp.jsx.js   |  2 +
 web/src/js/components/utils.jsx.js      | 80 +++++++++++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 web/src/js/components/utils.jsx.js

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 253084c2..acf5e6f4 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -39,13 +39,13 @@ var FlowDetailConnectionInfo = React.createClass({
     render: function(){
         return <div>details</div>;
     }
-})
+});
 
 var tabs = {
     request: FlowDetailRequest,
     response: FlowDetailResponse,
     details: FlowDetailConnectionInfo
-}
+};
 
 var FlowDetail = React.createClass({
     mixins: [StickyHeadMixin],
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index 10ecfed0..79eb58ea 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -62,6 +62,7 @@ var MainView = React.createClass({
                            flows={this.state.flows}
                            selectFlow={this.selectFlow}
                            selected={selected} />
+                <Splitter/>
                 {details}
             </div>
         );
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index 6895b852..b45ec911 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -27,6 +27,7 @@ var ProxyAppMain = React.createClass({
             <div id="container">
                 <Header settings={this.state.settings}/>
                 <this.props.activeRouteHandler settings={this.state.settings}/>
+                <Splitter axis="y"/>
                 {this.state.settings.showEventLog ? <EventLog/> : null}
                 <Footer settings={this.state.settings}/>
             </div>
@@ -48,6 +49,7 @@ var ProxyApp = (
             <Route name="flows" path="flows" handler={MainView}/>
             <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
             <Route name="reports" handler={Reports}/>
+            <Redirect path="/" to="flows" />
         </Route>
     </Routes>
     );
\ No newline at end of file
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
new file mode 100644
index 00000000..d986e24a
--- /dev/null
+++ b/web/src/js/components/utils.jsx.js
@@ -0,0 +1,80 @@
+/** @jsx React.DOM */
+
+//React utils. For other utilities, see ../utils.js
+
+var Splitter = React.createClass({
+    getDefaultProps: function () {
+    return {
+        axis: "x"
+        }
+    },
+    getInitialState: function(){
+        return {
+            applied: false,
+            startX: false,
+            startY: false
+        };
+    },
+    onMouseDown: function(e){
+        this.setState({
+            startX: e.pageX,
+            startY: e.pageY
+        });
+        window.addEventListener("mousemove",this.onMouseMove);
+        window.addEventListener("mouseup",this.onMouseUp);
+    },
+    onMouseUp: function(e){
+        window.removeEventListener("mouseup",this.onMouseUp);
+        window.removeEventListener("mousemove",this.onMouseMove);
+
+        var node = this.getDOMNode();
+        var prev = node.previousElementSibling;
+        var next = node.nextElementSibling;
+        this.getDOMNode().style.transform="";
+
+        var dX = e.pageX-this.state.startX;
+        var dY = e.pageY-this.state.startY;
+        var flexBasis;
+        if(this.props.axis === "x"){
+            flexBasis = prev.offsetWidth + dX;
+        } else {
+            flexBasis = prev.offsetHeight + dY;
+        }
+
+        prev.style.flex = "0 0 "+Math.max(0, flexBasis)+"px";   
+        next.style.flex = "1 1 auto";
+
+        this.setState({
+            applied: true
+        });
+    },
+    onMouseMove: function(e){
+        var dX = 0, dY = 0;
+        if(this.props.axis === "x"){
+            dX = e.pageX-this.state.startX;
+        } else {
+            dY = e.pageY-this.state.startY;
+        }
+        this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
+    },
+    reset: function(){
+        if(!this.state.applied){
+            return;
+        }
+        var node = this.getDOMNode();
+        var prev = node.previousElementSibling;
+        var next = node.nextElementSibling;
+        
+        prev.style.flex = "";
+        next.style.flex = "";
+    },
+    render: function(){
+        var className = "splitter";
+        if(this.props.axis === "x"){
+            className += " splitter-x";
+        } else {
+            className += " splitter-y";
+        }
+        return <div className={className} onMouseDown={this.onMouseDown}></div>;
+    }
+});
\ No newline at end of file
-- 
cgit v1.2.3