Intro - Bugfixes and Feature

Added scroll wheel support for intro
Hides visible arrow keys when at first or last item
fixed css bug where next is slightly visible

src/components/Intro.js

@@ -22,106 +22,6 @@ class Intro extends React.Component {
         };
     }
 
-  handleKey = (e) => {
-      /**
-       * handleKey - Handle key events and hand off to handleInput
-      */
-    switch(e.key) {
-        case "ArrowUp": // If received an up Arrow
-            this.handleInput('up');
-            break;
-        case "ArrowDown": // If received a down Arrow
-            this.handleInput('down')
-            break;
-        default:
-            break;
-    }
-  }
-
-  handleInput = (input) => {
-    /**
-     * handleInput - handle input events. A majority of the functionality is to scroll through Intro topics
-     */
-
-    // Up Arrow
-    if (input === "up" && !this.state.moving && this.state.currLoc > 0 ) {
-
-        // Activate animation going to next topic
-        this.setState({
-            prev: 'current top',
-            moving: true
-        });
-
-        // Wait 900 ms until the transition is finished
-        setTimeout(()=>{
-            // Once timeout finishes, place topics in correct location without transition
-            let prevloc = this.state.prevLoc-1;
-            let currloc = this.state.currLoc-1;
-            let nextloc = this.state.nextLoc-1;
-            this.setState({
-                prev: 'previous notrans',
-                currLoc: currloc,
-                nextLoc: nextloc,
-            });
-
-            // wait another 75 ms to 
-            setTimeout(()=>{
-                this.setState({ // remove notrans from each div
-                    prev: 'previous',
-                    prevLoc: prevloc,
-                    moving: false,
-                });
-
-            }, 75);
-
-        }, 900);
-    } else if (input === "down" && !this.state.moving && this.state.nextLoc < this.topics.length) {
-        // Activate transition going to previous topic
-        this.setState({
-            //curr: 'previous',
-            next: 'current',
-            moving: true,
-        });
-
-        // wait 900 ms before placing all topics into correct divs
-        setTimeout(()=>{
-            // move all topics into correct divs
-            let prevloc = this.state.prevLoc+1;
-            let currloc = this.state.currLoc+1;
-            let nextloc = this.state.nextLoc+1;
-            this.setState({
-                next: 'next notrans',
-                prevLoc: prevloc,
-                currLoc: currloc,
-            });
-
-            // wait 20ms and remove notrans
-            setTimeout(()=>{
-                this.setState({
-                    next: 'next',
-                    nextLoc: nextloc,
-                    moving: false,
-                });
-            }, 75);
-        }, 900);
-        
-    } else if (input === "down" && this.state.nextLoc >= this.topics.length) {
-        // Set something to happen when you reach the end
-    }
-    
-  };
-
-  componentDidMount() {
-    setTimeout(()=>{ // At the start, wait 100ms and enable intro
-        this.setState({
-            start: true,
-        });
-    }, 100);
-
-    document.title = "HomePage"; // Set document title
-
-  }
-
     // Topics to display in intro
     // DISCLAIMER: Please add content to the topic or bugs may occur...
     topics = [
@@ -142,14 +42,127 @@ class Intro extends React.Component {
         </Topic>
     ];
 
+    handleKey = (e) => {
+        /**
+         * handleKey - Handle key events and hand off to handleInput
+        */
+        switch (e.key) {
+            case "ArrowUp": // If received an up Arrow
+                this.handleInput('up');
+                break;
+            case "ArrowDown": // If received a down Arrow
+                this.handleInput('down')
+                break;
+            default:
+                break;
+        }
+    }
+
+    handleInput = (input) => {
+        /**
+         * handleInput - handle input events. A majority of the functionality is to scroll through Intro topics
+         */
+
+        // Up Arrow
+        if (input === "up" && !this.state.moving && this.state.currLoc > 0) {
+
+            // Activate animation going to next topic
+            this.setState({
+                prev: 'current top',
+                moving: true
+            });
+
+            // Wait 900 ms until the transition is finished
+            setTimeout(() => {
+                // Once timeout finishes, place topics in correct location without transition
+                let prevloc = this.state.prevLoc - 1;
+                let currloc = this.state.currLoc - 1;
+                let nextloc = this.state.nextLoc - 1;
+                this.setState({
+                    prev: 'previous notrans',
+                    currLoc: currloc,
+                    nextLoc: nextloc,
+                });
+
+                // wait another 75 ms to 
+                setTimeout(() => {
+                    this.setState({ // remove notrans from each div
+                        prev: 'previous',
+                        prevLoc: prevloc,
+                        moving: false,
+                    });
+
+                }, 75);
+
+            }, 900);
+        } else if (input === "down" && !this.state.moving && this.state.nextLoc < this.topics.length) {
+            // Activate transition going to previous topic
+            this.setState({
+                //curr: 'previous',
+                next: 'current',
+                moving: true,
+            });
+
+            // wait 900 ms before placing all topics into correct divs
+            setTimeout(() => {
+                // move all topics into correct divs
+                let prevloc = this.state.prevLoc + 1;
+                let currloc = this.state.currLoc + 1;
+                let nextloc = this.state.nextLoc + 1;
+                this.setState({
+                    next: 'next notrans',
+                    prevLoc: prevloc,
+                    currLoc: currloc,
+                });
+
+                // wait 20ms and remove notrans
+                setTimeout(() => {
+                    this.setState({
+                        next: 'next',
+                        nextLoc: nextloc,
+                        moving: false,
+                    });
+                }, 75);
+            }, 900);
+
+        } else if (input === "down" && this.state.nextLoc >= this.topics.length) {
+            // Set something to happen when you reach the end
+        }
+
+    };
+
+    onWheel(event) {
+        /**
+         * onScroll: Handle wheel event and moves intro up or down based on wheel scroll direction
+         */
+        if (event.deltaY < 0) {
+            this.handleInput('up');
+        }
+
+        if (event.deltaY > 0) {
+            this.handleInput('down');
+        }
+    }
+
+    componentDidMount() {
+        setTimeout(() => { // At the start, wait 100ms and enable intro
+            this.setState({
+                start: true,
+            });
+        }, 100);
+
+        document.title = "HomePage"; // Set document title
+
+    }
+
     render() {
 
         // TODO: Fix bug where scrolling too fast will allow one to exit expected topic range
 
         // Render page
         return (
-        <div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start':'intro'}>
+            <div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start' : 'intro'} onWheel={(event) => { this.onWheel(event) }}>
-            <div className='navbutton top' onClick={()=>{this.handleInput('up')}}><ChevronDoubleUp/></div>
+                <div className={'navbutton top' + (this.state.currLoc > 0 ? "" : " hidden")} onClick={() => { this.handleInput('up') }}><ChevronDoubleUp /></div>
                 <div id="previous" className={this.state.prev}>
                     {this.topics[this.state.prevLoc]}
                 </div>
@@ -159,7 +172,7 @@ class Intro extends React.Component {
                 <div id="next" className={this.state.next}>
                     {this.topics[this.state.nextLoc]}
                 </div>
-            <div className='navbutton bottom' onClick={()=>{this.handleInput('down')}}><ChevronDoubleDown/></div>
+                <div className={'navbutton bottom' + (this.state.currLoc < this.topics.length - 1 ? "" : " hidden")} onClick={() => { this.handleInput('down') }}><ChevronDoubleDown /></div>
             </div>
         );
     }

src/components/css/Intro.css

@@ -21,7 +21,7 @@
     display: flex;
     position:fixed;
     transition: opacity 750ms ease-out, top 750ms ease-out;
-    top:-99%;
+    top:-100%;
     left:0;
     justify-content: center;
     align-items: center;
@@ -49,7 +49,7 @@
     display: flex;
     position:fixed;
     transition: opacity 750ms ease-out, top 750ms ease-out;
-    top:99%;
+    top:100%;
     left:0;
     justify-content: center;
     align-items: center;
@@ -81,6 +81,19 @@
     color: #C4C4C4
 }
 
+.intro .navbutton.hidden {
+    opacity: 0;
+    
+}
+
+.intro .navbutton.bottom {
+    margin-top: auto;
+}
+
+.intro .navbutton.top {
+    z-index: 14;
+}
+
 .intro .navbutton {
     z-index: 14;
     font-size: 48px;
@@ -92,12 +105,7 @@
     align-items: center;
     justify-content: center;
 
-}
+    opacity: 1;
-
+    animation:none !important;
-.intro .navbutton.bottom {
+    transition: opacity ease 0.25s;
-    margin-top: auto;
-}
-
-.intro .navbutton.top {
-    z-index: 14;
 }