YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improving Performance

Browse Source
This commit is contained in:
Dominic Masters
2018-08-13 19:40:34 +10:00
parent 1ee3dee3c3
commit 550cf15e76
9 changed files with 67 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/animation/fade/ElementScrollFader.jsx
View File

@ -29,22 +29,35 @@ class ElementScrollFader extends React.Component {
this.state = { visible: false };
this.onScrollBound = this.onScroll.bind(this);
this.updateRectangleBound = this.updateRectangle.bind(this);
this.checkEffectBound = this.checkEffect.bind(this);
this.rect = null;
}
componentDidMount() {
//Update rectangle
if(this.rectTimer) clearInterval(this.rectTimer);
this.rectTimer = setInterval(this.updateRectangleBound, 100);
if(!this.initialCheckFunction) {
this.initialCheckFunction = setTimeout(this.checkEffectBound, 300);
}
document.addEventListener('scroll', this.onScrollBound, true);
document.addEventListener("DOMContentLoaded", this.onScrollBound);
document.addEventListener("DOMContentLoaded", this.updateRectangleBound);
}
componentWillUnmount() {
this.detachListener();
}
//Used for rect calculation
updateRectangle() {
if(!this.refs || !this.refs.fader) return;
this.rect = this.refs.fader.getBoundingClientRect();
}
onScroll(e) {
this.checkEffect();
}
@ -52,18 +65,29 @@ class ElementScrollFader extends React.Component {
//Common functions
detachListener() {
document.removeEventListener('scroll', this.onScrollBound);
document.removeEventListener("DOMContentLoaded", this.onScrollBound);
document.removeEventListener("DOMContentLoaded", this.updateRectangleBound);
if(this.rectTimer) clearInterval(this.rectTimer);
if(this.initialCheckFunction) clearTimeout(this.initialCheckFunction);
}
checkEffect() {
if(typeof window === typeof undefined) return;
if(!this.refs || !this.refs.fader) return;
if(this.state.visible) return this.detachListener();
if(!this.rect) this.updateRectangle();
//Get bounds
var rect = this.refs.fader.getBoundingClientRect();
var rect = this.rect;
//If our top is at least half way UP the page, show
if(rect.top > window.innerHeight / 1.5) return;
this.setState({visible: true});
this.setState({
visible: true
});
this.detachListener();//stop Listening
if(this.props.onVisible) {