secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Parallax disabling for low-powered devices

Browse Source
This commit is contained in:
James Barnsley
2018-09-17 08:18:07 +12:00
parent cbdd2c4ad3
commit b5111b1840
17 changed files with 204 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/js/components/Parallax.js
View File

@ -6,61 +6,69 @@ export default class Parallax extends React.Component{
constructor(props){
super(props);
this._loading = false
this._loaded = false
if (!this.props.disabled){
this.state = {
scrollTop: 0,
windowWidth: 0,
windowHeight: 0,
canvas: {
width: 0,
height: 0
},
image: {},
loading: false,
url: false
this._loading = false
this._loaded = false
this.state = {
scrollTop: 0,
windowWidth: 0,
windowHeight: 0,
canvas: {
width: 0,
height: 0
},
image: {},
loading: false,
url: false
}
// we need to manually bind this as eventListener doesn't work with anonymous functions
this.handleResize = this.handleResize.bind(this);
this.handleScroll = this.handleScroll.bind(this);
}
// we need to manually bind this as eventListener doesn't work with anonymous functions
this.handleResize = this.handleResize.bind(this);
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount(){
this._mounted = true;
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
if (!this.props.disabled){
if (this.props.image){
this._loading = true;
this.setState({url: this.props.image, image: false, loading: true});
this.loadImage(this.props.image)
.then(
response => {
if (this._mounted){
this._loading = false;
this._loaded = true;
this.setState({url: this.props.image, image: response, loading: false});
this.updateCanvas(response);
this._mounted = true;
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
if (this.props.image){
this._loading = true;
this.setState({url: this.props.image, image: false, loading: true});
this.loadImage(this.props.image)
.then(
response => {
if (this._mounted){
this._loading = false;
this._loaded = true;
this.setState({url: this.props.image, image: response, loading: false});
this.updateCanvas(response);
}
}
}
)
} else {
this._loaded = true;
this.state.image = false;
this.updateCanvas();
)
} else {
this._loaded = true;
this.state.image = false;
this.updateCanvas();
}
}
}
componentWillUnmount(){
this._mounted = false;
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
}
if (!this.props.disabled){
this._mounted = false;
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
}
}
componentWillReceiveProps(nextProps){
if ((!this.state.url || nextProps.image != this.state.url ) && !this._loading && nextProps.image){
if (!nextProps.disabled && (!this.state.url || nextProps.image != this.state.url ) && !this._loading && nextProps.image){
this._loading = true;
this.setState({ url: nextProps.image, image: false, loading: true });
this.loadImage(nextProps.image)
@ -204,6 +212,9 @@ export default class Parallax extends React.Component{
}
render(){
if (this.props.disabled){
return null;
}
return (
<div className={this.props.blur ? "parallax blur" : "parallax"}>