a3x/kana
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add scroll to start button

Browse source
This commit is contained in:
Antti Pilto 2018-10-01 21:02:06 +03:00
parent cd906d31ca
commit 278efa4b93
2 changed files with 71 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/ChooseCharacters/ChooseCharacters.jsx
View file

@ -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>

29
src/components/ChooseCharacters/ChooseCharacters.scss
View file

@ -112,3 +112,32 @@
.switch.disabled {
cursor: not-allowed;
}
.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;
}