From 1dc00e0fe85994a9ae201587971f957b5e876394 Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sun, 25 Jan 2015 14:54:16 +0200
Subject: [PATCH] implement faider functionality

---
 src/jade/index.jade         |  2 +-
 src/js/components/fader.jsx | 45 +++++++++++++++++++++++++++++++++++++
 src/js/main.js              |  3 +++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/js/components/fader.jsx

diff --git a/src/jade/index.jade b/src/jade/index.jade
index a199b5a..ced3132 100644
--- a/src/jade/index.jade
+++ b/src/jade/index.jade
@@ -57,7 +57,7 @@ html
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
         i.fa.fa-github
 
-    #fade.fader
+    #fader
 
 
     script(src='js/bundle.js')
diff --git a/src/js/components/fader.jsx b/src/js/components/fader.jsx
new file mode 100644
index 0000000..72bbb1c
--- /dev/null
+++ b/src/js/components/fader.jsx
@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('React');
+
+function clamp(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
+
+module.exports = React.createClass({
+  getDefaultProps() {
+    return {
+      threshold: 100
+    };
+  },
+  getInitialState() {
+    return {
+      opacity: 0
+    };
+  },
+  onScroll() {
+    var scrollableDistance = document.body.scrollHeight - window.innerHeight,
+        scrollTop = window.pageYOffset || document.documentElement.scrollTop,
+        distanceToBottom = scrollableDistance - scrollTop;
+
+    this.setState({
+      opacity: clamp(0, 1, distanceToBottom / this.props.threshold)
+    });
+  },
+  componentDidMount() {
+    window.addEventListener('scroll', this.onScroll);
+    this.onScroll();
+  },
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll);
+  },
+  render() {
+    var style = {
+      opacity: this.state.opacity
+    };
+
+    return (
+      <div className="fader" style={style}></div>
+    )
+  }
+});
diff --git a/src/js/main.js b/src/js/main.js
index 2e89726..4bc0a0f 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -7,3 +7,6 @@ React.render(
   require('./components/inviteForm')(),
   document.getElementById('invite-form'));
 
+React.render(
+  require('./components/fader')(),
+  document.getElementById('fader'));