web: take viewport resize into account

3 files changed, 28 insertions, 6 deletions

diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index e03b1a57..e2b32e55 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -23,12 +23,22 @@ var ProxyAppMain = React.createClass({
         this.setState({settings: SettingsStore.getAll()});
     },
     render: function () {
+
+        var eventlog;
+        if (this.state.settings.showEventLog) {
+            eventlog = [
+                <Splitter key="splitter" axis="y"/>,
+                <EventLog key="eventlog"/>
+            ];
+        } else {
+            eventlog = null;
+        }
+
         return (
             <div id="container">
                 <Header settings={this.state.settings}/>
                 <RouteHandler settings={this.state.settings} flowStore={this.state.flowStore}/>
-                {this.state.settings.showEventLog ? <Splitter axis="y"/> : null}
-                {this.state.settings.showEventLog ? <EventLog/> : null}
+                {eventlog}
                 <Footer settings={this.state.settings}/>
             </div>
         );
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 12775adc..81ba6b4d 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -51,6 +51,7 @@ var Splitter = React.createClass({
         this.setState({
             applied: true
         });
+        this.onResize();
     },
     onMouseMove: function (e) {
         var dX = 0, dY = 0;
@@ -61,6 +62,13 @@ var Splitter = React.createClass({
         }
         this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)";
     },
+    onResize: function () {
+        // Trigger a global resize event. This notifies components that employ virtual scrolling
+        // that their viewport may have changed.
+        window.setTimeout(function () {
+            window.dispatchEvent(new CustomEvent("resize"));
+        }, 1);
+    },
     reset: function (willUnmount) {
         if (!this.state.applied) {
             return;
@@ -77,7 +85,7 @@ var Splitter = React.createClass({
                 applied: false
             });
         }
-
+        this.onResize();
     },
     componentWillUnmount: function () {
         this.reset(true);
@@ -104,9 +112,9 @@ function getCookie(name) {
 var xsrf = $.param({_xsrf: getCookie("_xsrf")});
 
 //Tornado XSRF Protection.
-$.ajaxPrefilter(function(options){
-    if(options.type === "post" && options.url[0] === "/"){
-        if(options.data){
+$.ajaxPrefilter(function (options) {
+    if (options.type === "post" && options.url[0] === "/") {
+        if (options.data) {
             options.data += ("&" + xsrf);
         } else {
             options.data = xsrf;
diff --git a/web/src/js/components/virtualscroll.jsx.js b/web/src/js/components/virtualscroll.jsx.js
index b1924949..4f946cb4 100644
--- a/web/src/js/components/virtualscroll.jsx.js
+++ b/web/src/js/components/virtualscroll.jsx.js
@@ -35,6 +35,10 @@ var VirtualScrollMixin = {
     },
     componentDidMount: function () {
         this.onScroll();
+        window.addEventListener('resize', this.onScroll);
+    },
+    componentWillUnmount: function(){
+        window.removeEventListener('resize', this.onScroll);
     },
     onScroll: function () {
         var viewport = this.getDOMNode();