Animate parallax on load; Experimental Link scrolls to top

mopidy_iris/static/app.css

@@ -4375,7 +4375,6 @@ input[type="submit"] {
 
 .parallax {
   overflow: hidden;
-  background: #181818;
   position: absolute;
   top: -10%;
   right: -10px;
@@ -4384,22 +4383,27 @@ input[type="submit"] {
   transform: translateZ(-50px) scale(2);
   transform-origin: bottom center;
   z-index: -1;
-  max-height: 80vh; }
+  max-height: 80vh;
+  background-color: #323232; }
   .parallax__image {
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    top: -10px;
+    left: -10px;
+    bottom: -10px;
+    right: -10px;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
-    background-color: #323232; }
+    opacity: 0; }
   .parallax__overlay {
     content: '';
     display: block;
     position: absolute;
-    bottom: -2px;
+    bottom: -10px;
     left: 0;
     right: 0;
     height: 100%;
@@ -4408,6 +4412,8 @@ input[type="submit"] {
   .parallax--blur .parallax__image {
     -webkit-filter: blur(10px);
     filter: blur(10px); }
+  .parallax--loaded .parallax__image {
+    opacity: 1; }
   .light-theme .parallax {
     background: #FFFFFF; }
     .light-theme .parallax__image {

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1540323451";
+	var build = "1540367502";
 	var version = "3.28.1";
 
 	// Construct the script tag

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{
 

src/scss/app.scss

@@ -12,6 +12,7 @@
 @import 'components/loader';
 @import 'components/dragger';
 @import 'components/images';
+@import 'components/parallax';
 @import 'components/icon';
 @import 'components/slider';
 @import 'components/playback-controls';

src/scss/components/_images.scss

@@ -66,59 +66,3 @@
 .playback-controls {
 	z-index: 3;
 }
-
-.parallax {
-	overflow: hidden;
-	background: colour(dark_grey);
-	position: absolute;
-	top: -10%;
-	right: -10px;
-	left: -10px;
-	height: 100%;
-	transform: translateZ(-50px) scale(2);
-	transform-origin: bottom center;
-	z-index: -1;
-	max-height: 80vh;
-
-	&__image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		background-repeat: no-repeat;
-		background-size: cover;
-		background-position: 50% 50%;
-		background-color: lighten(colour(dark_grey), 10%);
-	}
-
-	&__overlay {
-		content: '';
-		display: block;
-		position: absolute;
-		bottom: -2px;
-		left: 0;
-		right: 0;
-		height: 100%;
-		background-image: linear-gradient(rgba(24,24,24,0), rgba(24,24,24,1));
-		z-index: 1;
-	}
-
-	&--blur {
-		.parallax__image {
-			@include blur();
-		}
-	}
-
-	.light-theme & {
-		background: colour(white);
-
-		&__image {
-			background-color: colour(white);
-		}
-
-		&__overlay {
-			background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
-		}
-	}
-}

src/scss/components/_parallax.scss

@@ -0,0 +1,68 @@
+$parallax: 'parallax';
+
+.#{$parallax} {
+	overflow: hidden;
+	position: absolute;
+	top: -10%;
+	right: -10px;
+	left: -10px;
+	height: 100%;
+	transform: translateZ(-50px) scale(2);
+	transform-origin: bottom center;
+	z-index: -1;
+	max-height: 80vh;
+	background-color: lighten(colour(dark_grey), 10%);
+
+	&__image {
+		@include animate(0.5s);
+		position: absolute;
+		top: -10px;
+		left: -10px;
+		bottom: -10px;
+		right: -10px;
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-position: 50% 50%;
+		opacity: 0;
+	}
+
+	&__overlay {
+		content: '';
+		display: block;
+		position: absolute;
+		bottom: -10px;
+		left: 0;
+		right: 0;
+		height: 100%;
+		background-image: linear-gradient(rgba(24,24,24,0), rgba(24,24,24,1));
+		z-index: 1;
+	}
+
+	&--blur {
+		.#{$parallax} {
+			&__image {
+				@include blur();
+			}
+		}
+	}
+
+	&--loaded {
+		.#{$parallax} {
+			&__image {
+				opacity: 1;
+			}
+		}
+	}
+
+	.light-theme & {
+		background: colour(white);
+
+		&__image {
+			background-color: colour(white);
+		}
+
+		&__overlay {
+			background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+		}
+	}
+}