Animate parallax on load; Experimental Link scrolls to top

src/js/App.js

@@ -73,7 +73,9 @@ class App extends React.Component{
 			}
 
 			// Scroll to top of <main>
-			document.getElementById('main').scrollTo(0, 0);
+			// This doesn't know the difference between forward or backward navigation
+			// so isn't quite a right fit
+			//document.getElementById('main').scrollTo(0, 0);
 
 			// Hide our sidebar
 			this.props.uiActions.toggleSidebar(false);

src/js/components/Link.js

@@ -1,8 +1,8 @@
 
-import React from 'react'
-import { Link } from 'react-router'
+import React from 'react';
+import { Link } from 'react-router';
 
-export default class Link extends React.Component{
+export default class extends React.Component{
 
 	constructor(props){
 		super(props);
@@ -10,16 +10,16 @@ export default class Link extends React.Component{
 
 	handleClick(e){
 		if (!this.props.retainScroll){
-			window.scrollTo(0, 0);
+			document.getElementById('main').scrollTo(0, 0);
 		}
 	}
 
-render(){
+	render(){
 		return (
 			<Link 
 				onClick={e => this.handleClick(e)}
 				className={this.props.className ? this.props.className : null} 
-				to={to}>
+				to={this.props.to}>
 					{this.props.children}
 			</Link>
 		);

src/js/components/Parallax.js

@@ -5,6 +5,36 @@ export default class Parallax extends React.Component{
 
 	constructor(props){
 		super(props);
+
+		this.state = {
+			loaded: false,
+			url: ''
+		}
+	}
+
+	componentWillMount(){
+		if (this.props.image){
+			this.loadImage(this.props.image);
+		}
+	}
+
+	componentWillReceiveProps(nextProps){
+		if ((!this.state.url || nextProps.image != this.state.url ) && nextProps.image){
+			this.loadImage(nextProps.image);
+		}
+	}
+
+	loadImage(url){
+		var self = this;
+		var imageObject = new Image();
+		imageObject.src = url;
+
+		imageObject.onload = function(){
+			self.setState({
+				loaded: true,
+				url: url
+			});
+		}
 	}
 
 	render(){
@@ -12,10 +42,13 @@ export default class Parallax extends React.Component{
 		if (this.props.blur){
 			class_name += " parallax--blur";
 		}
+		if (this.state.loaded){
+			class_name += " parallax--loaded";
+		}
 
 		return (
 			<div className={class_name}>
-				<div className="parallax__image" style={{backgroundImage: 'url('+this.props.image+')'}}></div>
+				<div className="parallax__image" style={{backgroundImage: 'url('+this.state.url+')'}}></div>
 				<div className="parallax__overlay"></div>
 			</div>
 		);

src/js/components/URILink.js

@@ -1,6 +1,6 @@
 
-import React from 'react'
-import { Link } from 'react-router'
+import React from 'react';
+import Link from './Link';
 
 export default class URILink extends React.Component{