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

prosjekt2/src/App.css

@@ -40,6 +40,10 @@ q{
   text-align: center;
 }
 
+.activeDot{
+  background-color: rgba(100,100,100,0.8) !important;
+}
+
 .box{
   margin: 1vw;
   display: flex;

prosjekt2/src/components/Footer.jsx

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

prosjekt2/src/components/MiddlePart.jsx

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

prosjekt2/src/components/NavigationDots.jsx

 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;