Affix, sadly still using jQuery for now

zengm-games · Aug 24, 2016 · d2ea621 · d2ea621
1 parent 3b38bc7
commit d2ea621
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 26 deletions.
diff --git a/TODO b/TODO
@@ -1,7 +1,6 @@
 REACT
 
 Live
-  affix plays
   going to live_game URL should redirect to live if there is no game forthcoming, like it used to
 
 Switch between two leagues directly with forward/back (react to react) and it has the two controllers problem

diff --git a/src/css/bbgm.scss b/src/css/bbgm.scss
@@ -737,14 +737,6 @@ tr.warning > td {
   }
 }
 
-@media (min-width: 1200px) {
-  // Widen the fixed sidebar again
-  .affix-bottom,
-  .affix {
-    width: 360px;
-  }
-}
-
 // Large screen sidebar, adapted from Bootstrap docs
 .bs-sidenav {
   margin-top: 24px;

diff --git a/src/js/views/liveGame.js b/src/js/views/liveGame.js
@@ -77,22 +77,6 @@ async function updatePlayByPlay(inputs) {
     }*/
 }
 
-function uiFirst() {
-    // Keep plays list always visible
-    $("#affixPlayByPlay").affix({
-        offset: {
-            top: 80,
-        },
-    });
-
-    // Keep height of plays list equal to window
-    const playByPlayList = document.getElementById("playByPlayList");
-    playByPlayList.style.height = `${window.innerHeight - 114}px`;
-    window.addEventListener("resize", () => {
-        playByPlayList.style.height = `${window.innerHeight - 114}px`;
-    });
-}
-
 module.exports = bbgmViewReact.init({
     id: "liveGame",
     get,

diff --git a/src/js/views/views/LiveGame.js b/src/js/views/views/LiveGame.js
@@ -1,4 +1,5 @@
 const classNames = require('classnames');
+const $ = require('jquery');
 const React = require('react');
 const bbgmViewReact = require('../../util/bbgmViewReact');
 const helpers = require('../../util/helpers');
@@ -117,6 +118,7 @@ class LiveGame extends React.Component {
         }
 
         this.handleSpeedChange = this.handleSpeedChange.bind(this);
+        this.setPlayByPlayDivHeight = this.setPlayByPlayDivHeight.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -131,10 +133,27 @@ class LiveGame extends React.Component {
 
     componentDidMount() {
         this.componentIsMounted = true;
+
+        // Keep plays list always visible
+        $(this.affixDiv).affix({
+            offset: {
+                top: 80,
+            },
+        });
+
+        // Keep height of plays list equal to window
+        this.setPlayByPlayDivHeight();
+        window.addEventListener("resize", this.setPlayByPlayDivHeight);
     }
 
     componentWillUnmount() {
         this.componentIsMounted = false;
+
+        window.removeEventListener("resize", this.setPlayByPlayDivHeight);
+    }
+
+    setPlayByPlayDivHeight() {
+        this.playByPlayDiv.style.height = `${window.innerHeight - 114}px`;
     }
 
     startLiveGame(events) {
@@ -273,7 +292,9 @@ class LiveGame extends React.Component {
                     }
                 </div>
                 <div className="col-md-3">
-                    <div id="affixPlayByPlay">
+                    <div ref={c => {
+                        this.affixDiv = c;
+                    }}>
                         <form>
                             <label htmlFor="playByPlaySpeed">Play-By-Play Speed:</label>
                             <input type="range" id="playByPlaySpeed" min="1" max="33" step="1" style={{width: '100%'}} value={this.state.speed} onChange={this.handleSpeedChange} />