Commit 54c13189 authored by mirree's avatar mirree
Browse files

Updated visibility of current chosen composition by coloring the corresponding navigation dot

parent cf79e0c2
......@@ -40,6 +40,10 @@ q{
text-align: center;
}
.activeDot{
background-color: rgba(100,100,100,0.8) !important;
}
.box{
margin: 1vw;
display: flex;
......
......@@ -5,13 +5,22 @@ import NavigationDots from './NavigationDots';
Creates a footer with navigation-dots. Is used for small screens.
*/
class Footer extends Component {
/*
Calls the function toggleClasses in NavigationDots to update the dot-buttons.
*/
updateNavDots(){
this.refs.NavigationDots.toggleClasses();
}
render() {
return (
<div className="footer" id="footer">
<NavigationDots goToFirstSlide={this.props.goToFirstSlide}
goToSecondSlide={this.props.goToSecondSlide}
goToThirdSlide={this.props.goToThirdSlide}
goToFourthSlide={this.props.goToFourthSlide} />
<NavigationDots ref="NavigationDots"
currentIndex={this.props.currentIndex}
goToFirstSlide={this.props.goToFirstSlide}
goToSecondSlide={this.props.goToSecondSlide}
goToThirdSlide={this.props.goToThirdSlide}
goToFourthSlide={this.props.goToFourthSlide} />
</div>
)
}
......
......@@ -56,12 +56,14 @@ class MiddlePart extends React.Component{
changeContent = () => {
let width = window.innerWidth;
let height = window.innerHeight;
if (width < 768 || (width < height)) {
this.refs.SmallScreenBox.changeContentPB();
this.refs.Footer.updateNavDots();
}
else{
this.refs.LargeScreenBox.changeContentPB();
this.refs.NavigationDots.toggleClasses();
}
}
......@@ -184,10 +186,12 @@ class MiddlePart extends React.Component{
goToPrevSlide={this.goToPrevSlide}
goToNextSlide={this.goToNextSlide}/>
</div>
<Footer goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide}/>
<Footer ref="Footer"
currentIndex={this.state.currentIndex}
goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide}/>
</div>
);
}
......@@ -205,7 +209,9 @@ class MiddlePart extends React.Component{
goToPrevSlide={this.goToPrevSlide}
goToNextSlide={this.goToNextSlide} />
</div>
<NavigationDots goToFirstSlide={this.goToFirstSlide}
<NavigationDots ref="NavigationDots"
currentIndex={this.state.currentIndex}
goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide} />
......
import React from 'react';
function NavigationDots(props){
return (
<div className="navDots">
<button className = "dot" onClick={props.goToFirstSlide}></button>
<button className = "dot" onClick={props.goToSecondSlide}></button>
<button className = "dot" onClick={props.goToThirdSlide}></button>
<button className = "dot" onClick={props.goToFourthSlide}></button>
</div>
);
/*
Creates round buttons for navigating between the different compositions in a combination.
*/
class NavigationDots extends React.Component{
constructor(props){
super(props)
this.toggleClasses = this.toggleClasses.bind(this)
}
/*
Updates the classes of the dot-buttons.
*/
toggleClasses = () => {
for (let i=0; i<4; i++){
if (this.props.currentIndex===i){
document.getElementById('dot_'+i).classList += [" activeDot"]
}
else{
document.getElementById('dot_'+i).classList = ["dot"]
}
}
}
componentDidMount(){
this.toggleClasses()
}
render(){
return (
<div className="navDots">
<button id="dot_0" className = "dot" onClick={this.props.goToFirstSlide}></button>
<button id="dot_1" className = "dot" onClick={this.props.goToSecondSlide}></button>
<button id="dot_2" className = "dot" onClick={this.props.goToThirdSlide}></button>
<button id="dot_3" className = "dot" onClick={this.props.goToFourthSlide}></button>
</div>
);
}
}
export default NavigationDots;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment