Commit 8ad0b6ca authored by mirree's avatar mirree
Browse files

Commented code and rewrote NavigationDots to a function

parent aea92819
import React, {Component} from 'react';
import NavigationDots from './NavigationDots';
/*
Creates a footer with navigation-dots. Is used for small screens.
*/
class Footer extends Component {
render() {
return (
......
import React from 'react';
/*
Creates a div for the svg-images.
*/
class ImageBox extends React.Component{
constructor(props){
......@@ -8,9 +11,17 @@ class ImageBox extends React.Component{
this.getSVG = this.getSVG.bind(this);
this.getSVGnames = this.getSVGnames.bind(this);
/*
The boolean variable keeps track of whether or not the component is mounted.
Is used to prevents the attempt of injecting a svg-image in a div that does not exist any more,
which is a danger because fetch is asynchronous.
*/
this._isMounted = false;
}
/*
Finds the correct name for the svg-image to be displayed.
*/
getSVGnames(option){
var svgFiles = {'cat': ['chillax', 'fluff', 'lick', 'stare'],
'dragon': ['b&w', 'cartoon', 'flying', 'red'],
......@@ -19,8 +30,10 @@ class ImageBox extends React.Component{
return svgFiles[option];
};
/*
Fetches the svg-image to be displayed, and displays it in the div with id="svg-container" after emptying it first.
*/
getSVG() {
console.log(this.props);
let svg_name = this.getSVGnames(this.props.imageIndex)[this.props.currentIndex];
let con = document.getElementById("svg-container");
if (con !== null){
......
......@@ -5,11 +5,13 @@ import SoundBox from "./SoundBox";
import NextButton from './NextButton';
import PrevButton from './PrevButton';
/*
Creates a component with layout of svg-image, text and audio for larger screens.
*/
class LargeScreenBox extends React.Component{
/*
Creates a component with layout of svg-image, text and audio for larger screens.
Updates the content in SoundBox, ImageBox and TextBox.
*/
class LargeScreenBox extends React.Component{
changeContentPB = () => {
this.refs.SoundBox.changeSoundContentSB();
this.refs.ImageBox.getSVG();
......
......@@ -36,6 +36,9 @@ class MiddlePart extends React.Component{
}
}
this.changeContent = this.changeContent.bind(this);
// Boolean variables to know when content should be changed,
// and when favorite collection should be displayed.
this._updateIndex = false;
this._fetchFav = false;
}
......@@ -121,13 +124,17 @@ class MiddlePart extends React.Component{
*/
resize = () => this.forceUpdate();
componentDidMount(){
/*
Adds eventlistener for when window on screen is resized.
*/
componentDidMount(){
window.addEventListener("resize", this.resize);
}
/*
Updates displayed content only when a change is made.
*/
componentDidUpdate(){
if (this._updateIndex){
this.changeContent()
......@@ -139,10 +146,10 @@ class MiddlePart extends React.Component{
this._fetchFav = false;
}
componentWillUnmount() {
/*
Removes eventlistener for when window on screen is resized.
*/
componentWillUnmount() {
window.removeEventListener("resize", this.resize);
}
//--------------------------------------------------------------------------------------------------------------------------------------
......
import React from 'react';
class NavigationDots extends React.Component{
render(){
function NavigationDots(){
return (
<div className="navDots">
<button className = "dot" onClick={this.props.goToFirstSlide}></button>
......@@ -11,8 +9,6 @@ class NavigationDots extends React.Component{
<button className = "dot" onClick={this.props.goToFourthSlide}></button>
</div>
);
}
}
export default NavigationDots;
......
......@@ -5,12 +5,13 @@ import SoundBox from "./SoundBox";
import NextButton from './NextButton';
import PrevButton from './PrevButton';
/*
Creates a component with layout of svg-image, text and audio for smaller screens.
*/
class SmallScreenBox extends React.Component{
/*
Creates a component with layout of svg-image, text and audio for smaller screens.
Updates the content in SoundBox, ImageBox and TextBox.
*/
class SmallScreenBox extends React.Component{
changeContentPB = () => {
this.refs.SoundBox.changeSoundContentSB();
this.refs.ImageBox.getSVG();
......
......@@ -7,6 +7,11 @@ class TextBox extends React.Component{
this.getText = this.getText.bind(this);
/*
The boolean variable keeps track of whether or not the component is mounted.
Is used to prevents the attempt of setting the state of a component that has unmounted,
which is a danger because fetch is asynchronous.
*/
this._isMounted = false;
this.state = {
......@@ -15,6 +20,10 @@ class TextBox extends React.Component{
}
}
/*
Fetches the correct json-file, and displays different texts and authors depending on currentIndex
only if component is mounted.
*/
getText() {
fetch('assets/text/'+this.props.textIndex+'.json', {
headers: {
......
import React from 'react';
/*
Creates a component consisting of a <meta> viewport element.
This gives the browser instructions on how to control the page's dimensions and scaling.
(w3schools.com; https://www.w3schools.com/css/css_rwd_viewport.asp)
*/
function Viewport() {
return (
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
......
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