From 278efa4b930e227acec326664a7e9e595b7d9657 Mon Sep 17 00:00:00 2001
From: Antti Pilto <antti.pilto@student.oulu.fi>
Date: Mon, 1 Oct 2018 21:02:06 +0300
Subject: [PATCH] Add scroll to start button

---
 .../ChooseCharacters/ChooseCharacters.jsx     | 42 ++++++++++++++++++-
 .../ChooseCharacters/ChooseCharacters.scss    | 33 ++++++++++++++-
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/components/ChooseCharacters/ChooseCharacters.jsx b/src/components/ChooseCharacters/ChooseCharacters.jsx
index ee8cf2e..7f2da43 100644
--- a/src/components/ChooseCharacters/ChooseCharacters.jsx
+++ b/src/components/ChooseCharacters/ChooseCharacters.jsx
@@ -11,10 +11,42 @@ class ChooseCharacters extends Component {
             errMsg : '',
             selectedGroups: this.props.selectedGroups,
             showAlternatives: [],
-            showSimilars: []
+            showSimilars: [],
+            startIsVisible: true
         }
         this.toggleSelect = this.toggleSelect.bind(this);
         this.startGame = this.startGame.bind(this);
+        this.testIsStartVisible = this.testIsStartVisible.bind(this);
+    }
+
+    componentDidMount() {
+        this.testIsStartVisible();
+        window.addEventListener('resize', this.testIsStartVisible);
+        window.addEventListener('scroll', this.testIsStartVisible);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.testIsStartVisible);
+        window.removeEventListener('scroll', this.testIsStartVisible);
+    }
+
+    testIsStartVisible() {
+        if(this.startRef) {
+            const rect = this.startRef.getBoundingClientRect();
+            if(rect.y > window.innerHeight && this.state.startIsVisible)
+                this.setState({ startIsVisible: false });
+            else if(rect.y <= window.innerHeight && !this.state.startIsVisible)
+                this.setState({ startIsVisible: true });
+        }
+    }
+
+    scrollToStart() {
+        if(this.startRef) {
+            const rect = this.startRef.getBoundingClientRect();
+            const absTop = rect.top + window.pageYOffset;
+            const scrollPos = absTop - window.innerHeight + 50;
+            window.scrollTo(0, scrollPos > 0 ? scrollPos : 0);
+        }
     }
 
     getIndex(groupName) {
@@ -230,7 +262,13 @@ class ChooseCharacters extends Component {
                             this.state.errMsg != '' &&
                                 <div className="error-message">{this.state.errMsg}</div>
                         }
-                        <button className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button>
+                        <button ref={c => this.startRef = c} className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button>
+                    </div>
+                    <div className="down-arrow"
+                        style={{display: this.state.startIsVisible ? 'none' : 'block'}}
+                        onClick={(e) => this.scrollToStart(e)}
+                    >
+                        Start
                     </div>
                 </div>
             </div>
diff --git a/src/components/ChooseCharacters/ChooseCharacters.scss b/src/components/ChooseCharacters/ChooseCharacters.scss
index 4f7c188..f6b0a64 100644
--- a/src/components/ChooseCharacters/ChooseCharacters.scss
+++ b/src/components/ChooseCharacters/ChooseCharacters.scss
@@ -6,7 +6,7 @@
         margin-top: 0;
     }
 }
-.choose-characters 
+.choose-characters
 {
     .panel-heading {
         font-weight: bold;
@@ -111,4 +111,33 @@
 
 .switch.disabled {
     cursor: not-allowed;
-}
\ No newline at end of file
+}
+
+.down-arrow {
+    user-select: none;
+    cursor: pointer;
+    border-radius: 4px 4px 0 0;
+	display: block;
+	position: fixed;
+    bottom: 20px;
+    right: 12px;
+    color: #fff;
+	background: #d9534f;
+	padding: 7px 0 2px;
+	width: 60px;
+	text-align: center;
+}
+
+.down-arrow:after {
+	content: '';
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 100%;
+	width: 0;
+	height: 0;
+	border-top: 10px solid #d9534f;
+	border-right: 30px solid transparent;
+	border-bottom: 0 solid transparent;
+	border-left: 30px solid transparent;
+}