round one

README.md

@@ -0,0 +1,43 @@
+# Scroll Fever
+
+A progress bar that fills up as you scroll down the page in your browser.
+
+## Installation
+
+```
+npm install scroll-fever --save
+```
+
+## Usage
+
+In your application's javascript file:
+
+```js
+// pre-browserify.js
+var ScrollFever = require('scroll-fever')
+new ScrollFever()
+```
+
+Add styles:
+
+```css
+#scroll-fever {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 6px;
+  background: red;
+}
+```
+
+Use [browserify](http://browserify.org/) to bundle it up for the browser:
+
+```sh
+browserify pre-browserify.js -o post-browserify.js
+```
+
+## Demo
+
+See the `demo` directory in the repo.
+

bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "scroll-fever",
+  "version": "0.0.0",
+  "main": "index.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "components",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

demo/post-browserify.js

@@ -0,0 +1,44 @@
+;(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({1:[function(require,module,exports){
+var ScrollFever = require('../index')
+
+document.addEventListener('DOMContentLoaded', function(){
+  window.scrollFever = new ScrollFever()
+})
+
+},{"../index":2}],2:[function(require,module,exports){
+var ScrollFever,
+  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+ScrollFever = (function() {
+
+  function ScrollFever(dom_id) {
+    this.dom_id = dom_id != null ? dom_id : 'scroll-fever';
+    this.paint = __bind(this.paint, this);
+
+    this.el = document.createElement('div');
+    this.el.setAttribute('id', this.dom_id);
+    this.el.setAttribute('class', this.dom_id);
+    document.body.appendChild(this.el);
+    document.addEventListener('scroll', this.paint);
+    this.paint();
+  }
+
+  ScrollFever.prototype.getBodyHeight = function() {
+    var body, html;
+    body = document.body;
+    html = document.documentElement;
+    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+  };
+
+  ScrollFever.prototype.paint = function() {
+    this.scale = (window.scrollY / (this.getBodyHeight() - window.innerHeight) * 100) + "%";
+    return this.el.style.width = this.scale;
+  };
+
+  return ScrollFever;
+
+})();
+
+module.exports = ScrollFever;
+},{}]},{},[1])
+;

demo/pre-browserify.js

@@ -0,0 +1,5 @@
+var ScrollFever = require('../index')
+
+document.addEventListener('DOMContentLoaded', function(){
+  window.scrollFever = new ScrollFever()
+})

index.js

@@ -0,0 +1,34 @@
+var ScrollFever,
+  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+ScrollFever = (function() {
+
+  function ScrollFever(dom_id) {
+    this.dom_id = dom_id != null ? dom_id : 'scroll-fever';
+    this.paint = __bind(this.paint, this);
+
+    this.el = document.createElement('div');
+    this.el.setAttribute('id', this.dom_id);
+    this.el.setAttribute('class', this.dom_id);
+    document.body.appendChild(this.el);
+    document.addEventListener('scroll', this.paint);
+    this.paint();
+  }
+
+  ScrollFever.prototype.getBodyHeight = function() {
+    var body, html;
+    body = document.body;
+    html = document.documentElement;
+    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+  };
+
+  ScrollFever.prototype.paint = function() {
+    this.scale = (window.scrollY / (this.getBodyHeight() - window.innerHeight) * 100) + "%";
+    return this.el.style.width = this.scale;
+  };
+
+  return ScrollFever;
+
+})();
+
+module.exports = ScrollFever;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "scroll-fever",
+  "version": "0.0.0",
+  "description": "A progress bar that fills up as you scroll down the page.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zeke/scroll-fever"
+  },
+  "keywords": [
+    "scroll",
+    "browser",
+    "presentations",
+    "slides"
+  ],
+  "author": {
+    "name": "Zeke Sikelianos",
+    "email": "zeke@sikelianos.com",
+    "url": "http://zeke.sikelianos.com/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zeke/scroll-fever/issues"
+  }
+}

src/scroll-fever.coffee

@@ -0,0 +1,31 @@
+class ScrollFever
+
+  constructor: (@dom_id='scroll-fever') ->
+
+    # Create DOM element
+    @el = document.createElement('div')
+    @el.setAttribute('id', @dom_id)
+    @el.setAttribute('class', @dom_id)
+    document.body.appendChild(@el)
+
+    # Listen for Scrollage
+    document.addEventListener('scroll', @paint)
+
+    # First-time render
+    @paint()
+
+  # Account for document height discrepancies between browsers
+  # http://stackoverflow.com/a/1147768/95670
+  getBodyHeight: ->
+    body = document.body
+    html = document.documentElement
+    Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
+
+  # Set width based on scroll position
+  # Width when scrolled to top: 0%
+  # Width when scrolled to bottom: 100%
+  paint: =>
+    @scale = (window.scrollY/(@getBodyHeight()-window.innerHeight)*100)+"%"
+    @el.style.width = @scale
+
+module.exports = ScrollFever