Add ScrollListenerMixin

Author: jeroencoumans

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
+.module-cache
 node_modules

src/ScrollBlocker.css renamed to ScrollBlocker.css

@@ -0,0 +1,26 @@
+/** @jsx React.DOM */
+var React = require('react');
+var cx = require('react/lib/cx');
+
+var ScrollBlocker = React.createClass({displayName: 'ScrollBlocker',
+
+  getDefaultProps: function () {
+    return {
+      active: false
+    };
+  },
+
+  render: function () {
+    var classes = cx({
+      'ScrollBlocker': this.props.active
+    });
+
+    return (
+      React.DOM.div( {className:cx(classes, this.props.className)}, 
+        this.props.children
+      )
+    );
+  }
+});
+
+module.exports = ScrollBlocker;

ScrollBlocker.js

@@ -0,0 +1,70 @@
+var win = typeof window !== 'undefined' ? window : false;
+
+var getScrollTop = function () {
+  return win.pageYOffset || win.document.scrollTop || win.document.body.scrollTop || 0;
+}
+
+var ScrollListenerMixin = {
+
+  getDefaultProps: function() {
+    return {
+      endScrollTimeout: 300
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      scrollTop: 0,
+      isScrolling: false
+    };
+  },
+
+  componentDidMount: function () {
+    if (win) {
+      win.addEventListener('scroll', this._onPageScroll);
+    }
+  },
+
+  componentWillUnmount: function () {
+    if (win) {
+      win.removeEventListener('scroll', this._onPageScroll);
+    }
+  },
+
+  shouldComponentUpdate: function(nextProps, nextState) {
+    return (
+      nextState.scrollTop !== this.state.scrollTop ||
+      nextState.isScrolling !== this.state.isScrolling
+    )
+  },
+
+  _onPageScrollEnd: function () {
+    var scrollTop = getScrollTop();
+    if (scrollTop === this.state.scrollTop) {
+      win.clearTimeout(this._pageScrollTimeout);
+      this.setState({ isScrolling: false });
+
+      if (typeof this.props.onPageScrollEnd === 'function') {
+        this.props.onPageScrollEnd(scrollTop, isScrolling);
+      }
+    }
+  },
+
+  _onPageScroll: function () {
+    var scrollTop = getScrollTop();
+
+    this.setState({
+      scrollTop: scrollTop,
+      isScrolling: true
+    });
+
+    win.clearTimeout(this._pageScrollTimeout);
+    this._pageScrollTimeout = win.setTimeout(this._onPageScrollEnd, this.props.endScrollTimeout);
+
+    if (typeof this.props.onPageScroll === 'function') {
+      this.props.onPageScroll(scrollTop, isScrolling);
+    }
+  }
+};
+
+module.exports = ScrollListenerMixin;

ScrollListenerMixin.js

@@ -1,5 +1,7 @@
-var ScrollBlocker = require('src/ScrollBlocker');
+var ScrollBlocker = require('./ScrollBlocker');
+var ScrollListenerMixin = require('./ScrollListenerMixin');
 
 module.exports = {
-  ScrollBlocker: ScrollBlocker
+  ScrollBlocker: ScrollBlocker,
+  ScrollListenerMixin: ScrollListenerMixin
 }

index.js

@@ -4,7 +4,8 @@
   "description": "A set of components that react to page scrolling",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "./node_modules/react-tools/bin/jsx -x jsx ./jsx ."
   },
   "repository": {
     "type": "git",
@@ -24,5 +25,9 @@
   "homepage": "https://github.com/jeroencoumans/react-scroll-components",
   "peerDependencies": {
     "react": "^0.10.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "react-tools": "^0.10.0"
   }
 }