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 React, {Component} from 'react';
import NavigationDots from './NavigationDots'; import NavigationDots from './NavigationDots';
/*
Creates a footer with navigation-dots. Is used for small screens.
*/
class Footer extends Component { class Footer extends Component {
render() { render() {
return ( return (
<div className="footer" id="footer"> <div className="footer" id="footer">
<NavigationDots goToFirstSlide={this.props.goToFirstSlide} <NavigationDots goToFirstSlide={this.props.goToFirstSlide}
goToSecondSlide={this.props.goToSecondSlide} goToSecondSlide={this.props.goToSecondSlide}
goToThirdSlide={this.props.goToThirdSlide} goToThirdSlide={this.props.goToThirdSlide}
goToFourthSlide={this.props.goToFourthSlide} /> goToFourthSlide={this.props.goToFourthSlide} />
</div> </div>
) )
} }
} }
export default Footer; export default Footer;
\ No newline at end of file
import React from 'react'; import React from 'react';
/*
Creates a div for the svg-images.
*/
class ImageBox extends React.Component{ class ImageBox extends React.Component{
constructor(props){ constructor(props){
...@@ -8,9 +11,17 @@ class ImageBox extends React.Component{ ...@@ -8,9 +11,17 @@ class ImageBox extends React.Component{
this.getSVG = this.getSVG.bind(this); this.getSVG = this.getSVG.bind(this);
this.getSVGnames = this.getSVGnames.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; this._isMounted = false;
} }
/*
Finds the correct name for the svg-image to be displayed.
*/
getSVGnames(option){ getSVGnames(option){
var svgFiles = {'cat': ['chillax', 'fluff', 'lick', 'stare'], var svgFiles = {'cat': ['chillax', 'fluff', 'lick', 'stare'],
'dragon': ['b&w', 'cartoon', 'flying', 'red'], 'dragon': ['b&w', 'cartoon', 'flying', 'red'],
...@@ -19,8 +30,10 @@ class ImageBox extends React.Component{ ...@@ -19,8 +30,10 @@ class ImageBox extends React.Component{
return svgFiles[option]; 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() { getSVG() {
console.log(this.props);
let svg_name = this.getSVGnames(this.props.imageIndex)[this.props.currentIndex]; let svg_name = this.getSVGnames(this.props.imageIndex)[this.props.currentIndex];
let con = document.getElementById("svg-container"); let con = document.getElementById("svg-container");
if (con !== null){ if (con !== null){
......
...@@ -5,11 +5,13 @@ import SoundBox from "./SoundBox"; ...@@ -5,11 +5,13 @@ import SoundBox from "./SoundBox";
import NextButton from './NextButton'; import NextButton from './NextButton';
import PrevButton from './PrevButton'; import PrevButton from './PrevButton';
/* /*
Creates a component with layout of svg-image, text and audio for larger screens. Creates a component with layout of svg-image, text and audio for larger screens.
*/ */
class LargeScreenBox extends React.Component{ class LargeScreenBox extends React.Component{
/*
Updates the content in SoundBox, ImageBox and TextBox.
*/
changeContentPB = () => { changeContentPB = () => {
this.refs.SoundBox.changeSoundContentSB(); this.refs.SoundBox.changeSoundContentSB();
this.refs.ImageBox.getSVG(); this.refs.ImageBox.getSVG();
......
...@@ -36,6 +36,9 @@ class MiddlePart extends React.Component{ ...@@ -36,6 +36,9 @@ class MiddlePart extends React.Component{
} }
} }
this.changeContent = this.changeContent.bind(this); 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._updateIndex = false;
this._fetchFav = false; this._fetchFav = false;
} }
...@@ -121,13 +124,17 @@ class MiddlePart extends React.Component{ ...@@ -121,13 +124,17 @@ class MiddlePart extends React.Component{
*/ */
resize = () => this.forceUpdate(); resize = () => this.forceUpdate();
/*
Adds eventlistener for when window on screen is resized.
*/
componentDidMount(){ componentDidMount(){
/*
Adds eventlistener for when window on screen is resized.
*/
window.addEventListener("resize", this.resize); window.addEventListener("resize", this.resize);
} }
/*
Updates displayed content only when a change is made.
*/
componentDidUpdate(){ componentDidUpdate(){
if (this._updateIndex){ if (this._updateIndex){
this.changeContent() this.changeContent()
...@@ -139,10 +146,10 @@ class MiddlePart extends React.Component{ ...@@ -139,10 +146,10 @@ class MiddlePart extends React.Component{
this._fetchFav = false; this._fetchFav = false;
} }
/*
Removes eventlistener for when window on screen is resized.
*/
componentWillUnmount() { componentWillUnmount() {
/*
Removes eventlistener for when window on screen is resized.
*/
window.removeEventListener("resize", this.resize); window.removeEventListener("resize", this.resize);
} }
//-------------------------------------------------------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------------------------------------------------
......
import React from 'react'; import React from 'react';
class NavigationDots extends React.Component{ function NavigationDots(){
return (
render(){ <div className="navDots">
return ( <button className = "dot" onClick={this.props.goToFirstSlide}></button>
<div className="navDots"> <button className = "dot" onClick={this.props.goToSecondSlide}></button>
<button className = "dot" onClick={this.props.goToFirstSlide}></button> <button className = "dot" onClick={this.props.goToThirdSlide}></button>
<button className = "dot" onClick={this.props.goToSecondSlide}></button> <button className = "dot" onClick={this.props.goToFourthSlide}></button>
<button className = "dot" onClick={this.props.goToThirdSlide}></button> </div>
<button className = "dot" onClick={this.props.goToFourthSlide}></button> );
</div>
);
}
} }
export default NavigationDots; export default NavigationDots;
......
...@@ -5,12 +5,13 @@ import SoundBox from "./SoundBox"; ...@@ -5,12 +5,13 @@ import SoundBox from "./SoundBox";
import NextButton from './NextButton'; import NextButton from './NextButton';
import PrevButton from './PrevButton'; import PrevButton from './PrevButton';
/* /*
Creates a component with layout of svg-image, text and audio for smaller screens. Creates a component with layout of svg-image, text and audio for smaller screens.
*/ */
class SmallScreenBox extends React.Component{ class SmallScreenBox extends React.Component{
/*
Updates the content in SoundBox, ImageBox and TextBox.
*/
changeContentPB = () => { changeContentPB = () => {
this.refs.SoundBox.changeSoundContentSB(); this.refs.SoundBox.changeSoundContentSB();
this.refs.ImageBox.getSVG(); this.refs.ImageBox.getSVG();
......
...@@ -7,6 +7,11 @@ class TextBox extends React.Component{ ...@@ -7,6 +7,11 @@ class TextBox extends React.Component{
this.getText = this.getText.bind(this); 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._isMounted = false;
this.state = { this.state = {
...@@ -15,6 +20,10 @@ class TextBox extends React.Component{ ...@@ -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() { getText() {
fetch('assets/text/'+this.props.textIndex+'.json', { fetch('assets/text/'+this.props.textIndex+'.json', {
headers: { headers: {
......
import React from 'react'; 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() { function Viewport() {
return ( return (
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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