2.0 rewrite

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "js/skinny-coffee-machine"]
+	path = js/skinny-coffee-machine
+	url = git://github.com/fredwu/skinny-coffee-machine.git
+[submodule "js/jqstub"]
+	path = js/jqstub
+	url = git://github.com/fredwu/jqstub.git

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - 0.8
+before_install:
+  - git submodule update --init --recursive

README.md

@@ -1,4 +1,6 @@
-# Endless Scroll [![endorse](http://api.coderwall.com/fredwu/endorsecount.png)](http://coderwall.com/fredwu)
+# Endless Scroll [![endorse](http://api.coderwall.com/fredwu/endorsecount.png)](http://coderwall.com/fredwu) [![Build Status](https://secure.travis-ci.org/fredwu/jquery-endless-scroll.png?branch=2.0-rewrite)](http://travis-ci.org/fredwu/jquery-endless-scroll)
+
+#### This branch is currently being rewritten, please ignore the documentation below (they are for version 1.x).
 
 If you don't already know, [endless scrolling](http://www.google.com/search?q=endless+scroll) (or infinite scrolling or pagination) is a popular technique amongst modern websites such as [Google Reader](http://reader.google.com/) and [Live Image Search](http://www.live.com/?scope=images), whereby instead of paging through items using traditional pagination links, the page just keeps loading with new items attached to the end.
 
@@ -46,7 +48,7 @@ There are a few options to customise the behaviour of this plugin:
   <tr>
     <td>content</td>
     <td>String or Function</td>
-    <td>Plain HTML content to insert after each call, can be either a string or a function that returns a string, when passed as a function it accepts three arguments:<ul><li><em>fireSequence</em> the number of times the event triggered during the current page session</li><li><em>pageSequence</em> a positive or negative value that represents the scroll direction sequence</li><li><em>scrollDirection</em> a string of either 'prev' or 'next'</li></ul></td>
+    <td>Plain HTML content to insert after each call, can be either a string or a function that returns a string, when passed as a function it accepts three arguments:<ul><li><em>fireSequence</em> the number of times the event triggered during the current page session</li><li><em>pageSequence</em> a positive or negative integer that represents the scroll direction sequence</li><li><em>scrollDirection</em> a string of either 'prev' or 'next'</li></ul></td>
   </tr>
   <tr>
     <td>insertBefore</td>
@@ -76,12 +78,12 @@ There are a few options to customise the behaviour of this plugin:
   <tr>
     <td>callback</td>
     <td>Function</td>
-    <td>Callback function, accepts three arguments:<ul><li><em>fireSequence</em> the number of times the event triggered during the current page session</li><li><em>pageSequence</em> a positive or negative value that represents the scroll direction sequence</li><li><em>scrollDirection</em> a string of either 'prev' or 'next'</li></ul></td>
+    <td>Callback function, accepts three arguments:<ul><li><em>fireSequence</em> the number of times the event triggered during the current page session</li><li><em>pageSequence</em> a positive or negative integer that represents the scroll direction sequence</li><li><em>scrollDirection</em> a string of either 'prev' or 'next'</li></ul></td>
   </tr>
   <tr>
     <td>ceaseFire</td>
     <td>Function</td>
-    <td>Stops the event (no more endless scrolling) if the function returns true, accepts three arguments:<ul><li><em>fireSequence</em> the number of times the event triggered during the current page session</li><li><em>pageSequence</em> a positive or negative value that represents the scroll direction sequence</li><li><em>scrollDirection</em> a string of either 'prev' or 'next'</li></ul></td>
+    <td>Stops the event (no more endless scrolling) if the function returns true, accepts three arguments:<ul><li><em>fireSequence</em> the number of times the event triggered during the current page session</li><li><em>pageSequence</em> a positive or negative integer that represents the scroll direction sequence</li><li><em>scrollDirection</em> a string of either 'prev' or 'next'</li></ul></td>
   </tr>
 </table>
 
@@ -126,12 +128,23 @@ The command for automatically compiling to JavaScript is:
 coffee -w -b -o js/ -c src/
 ```
 
+Starting from v2.0.0 the code base is tested with [Mocha](http://visionmedia.github.com/mocha/) and [Chai](http://chaijs.com/). The tests can be found in `test/`, please write the tests in `test/tests.coffee`. Again, to automatically compile the test code to JavaScript:
+
+```bash
+coffee -w -b -o test/ -c test/
+```
+
 ## Browser Support
 
 All modern browsers (Firefox, Chrome, Safari, Opera, IE7+) should be supported. Please [open an issue](https://github.com/fredwu/jquery-endless-scroll/issues) if Endless Scroll doesn't work on a particular browser.
 
 ## Changelog
 
+v2.0.0
+
+- Completely rewritten from the ground up with tests.
+- A new demo page based on Twitter Bootstrap.
+
 v1.8.0 [2012-04-17]
 
 - Added `ceaseFireOnEmpty`.
@@ -231,4 +244,4 @@ Check out my other jQuery plugins:
 
 Copyright (c) 2008-2012 Fred Wu
 
-Dual licensed under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.gnu.org/licenses/gpl.html) licenses.
+Licensed under the [MIT](http://www.opensource.org/licenses/mit-license.php) license.

css/endless-scroll-demo.css

@@ -0,0 +1,30 @@
+section {
+  padding-top: 90px;
+}
+
+ul {
+  height: 200px;
+  overflow-y: auto;
+}
+
+  ul li {
+    list-style: none;
+  }
+
+.navbar .nav {
+  position: absolute;
+  padding-left: 200px;
+  left: auto;
+  bottom: 20px;
+}
+
+.footer {
+  background-color: #F5F5F5;
+  border-top: 1px solid #E5E5E5;
+  margin-top: 70px;
+  padding: 50px 0;
+}
+
+  .footer p {
+    text-align: center;
+  }

grunt.js

@@ -0,0 +1,53 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: '<json:package.json>',
+    meta: {
+      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
+        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
+    },
+    min: {
+      dist: {
+        src: ['js/<%= pkg.name %>.js'],
+        dest: 'js/<%= pkg.name %>.min.js'
+      }
+    },
+    watch: {
+      coffee: {
+        files: ['src/*.coffee', 'test/*.coffee'],
+        tasks: 'coffee'
+      },
+      tests: {
+        files: ['js/*.js', 'test/*.js'],
+        tasks: 'mocha'
+      }
+    },
+    coffee: {
+      app: {
+        src: ['src/*.coffee'],
+        dest: 'js',
+        options: {
+          bare: true
+        }
+      },
+      tests: {
+        src: ['test/*.coffee'],
+        dest: 'test/',
+        options: {
+          bare: false
+        }
+      }
+    },
+    mocha: {
+      tests: ['test/tests-jquery.html', 'test/tests-zepto.html']
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-coffee');
+  grunt.loadNpmTasks('grunt-mocha');
+
+  grunt.registerTask('test', 'mocha');
+  grunt.registerTask('default', 'coffee mocha');
+};

index.html

@@ -4,103 +4,84 @@
 <head>
   <title>Endless Scroll Demo (by Fred Wu)</title>
   <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
-
-  <style type="text/css" media="screen">
-    * { margin: auto; }
-    body { margin: 20px 0; background: #abc; color: #111; font-family: Helvetica, Arial, Verdana, 'Lucida Grande', sans-serif; }
-    h1, h3, p { text-align: center; }
-    div.example { padding: 20px; margin: 10px auto; background: #bcd; width: 750px; }
-    div.example h3 { margin-bottom: 10px; }
-    ul, ol { padding: 0; }
-    #list { width: 50px; height: 150px; overflow-y: scroll; }
-    #images { width: 600px; height: 550px; overflow-x: hidden; text-align: center; list-style: none; }
-    .endless_scroll_loader { position: fixed; top: 10px; right: 20px; }
-  </style>
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/endless-scroll-demo.css" />
 
   <script type="text/javascript" src="js/jquery.min.js"></script>
+  <script type="text/javascript" src="js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="js/skinny-coffee-machine/skinny-coffee-machine.js"></script>
   <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
   <script type="text/javascript" charset="utf-8">
-    $(function() {
-      $('#list').endlessScroll({
-        pagesToKeep: 10,
-        fireOnce: false,
-        insertBefore: "#list div:first",
-        insertAfter: "#list div:last",
-        content: function(i, p) {
-          console.log(i, p)
-          return '<li>' + p + '</li>'
-        },
-        ceaseFire: function(i) {
-          if (i >= 10) {
-            return true;
-          }
-        },
-        intervalFrequency: 5
-      });
 
-      $('#images').scrollTop(101);
-      var images = $("ul#images").clone().find("li");
-      $('#images').endlessScroll({
-        pagesToKeep: 5,
-        inflowPixels: 100,
-        fireDelay: 10,
-        content: function(i, p, d) {
-          console.log(i, p, d)
-          return images.eq(Math.floor(Math.random()*8))[0].outerHTML;
-        }
-      });
-    });
   </script>
 </head>
 
-<body>
-  <h1>Endless Scroll Demo</h1>
-  <h3>by <a href="http://fredwu.me/">Fred Wu</a></h3>
+<body data-spy="scroll" data-target=".navbar" data-offset="90">
+  <header class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        <h1 class="brand">Endless Scroll Demo</h1>
+        <ul class="nav">
+          <li class="active"><a href="#simple">Simple</a></li>
+          <li><a href="#images">Images</a></li>
+        </ul>
+      </div>
+    </div>
+  </header>
 
-  <div class="example">
-    <h3>Ends in 10 calls:</h3>
-    <ul id="list">
-      <li>1</li>
-      <li>2</li>
-      <li>3</li>
-      <li>4</li>
-      <li>5</li>
-      <li>6</li>
-      <li>7</li>
-      <li>8</li>
-      <li>9</li>
-      <li>10</li>
-      <li>11</li>
-      <li>12</li>
-      <li>13</li>
-      <li>14</li>
-      <li>15</li>
-      <li>16</li>
-      <li>17</li>
-      <li>18</li>
-      <li>19</li>
-      <li>20</li>
-    </ul>
-  </div>
+  <div class="container" >
+    <section id="simple">
+      <div class="page-header">
+        <h1>Simple Example</h1>
+      </div>
 
-  <div class="example">
-    <h3>Never ending:</h3>
-    <ul id="images">
-      <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
-      <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
-      <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
-      <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
-      <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
-      <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
-      <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
-      <li><img src="img/flowing-rock.jpg" width="580" height="360" alt="Grass Blades" /></li>
-    </ul>
-  </div>
+      <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+        <li>11</li>
+        <li>12</li>
+        <li>13</li>
+        <li>14</li>
+        <li>15</li>
+        <li>16</li>
+        <li>17</li>
+        <li>18</li>
+        <li>19</li>
+        <li>20</li>
+      </ul>
+    </section>
 
-  <div class="example">
-    <p>Copyright &copy; <a href="http://fredwu.me/">Fred Wu</a></p>
+    <section id="images">
+      <div class="page-header">
+        <h1>Images Example</h1>
+      </div>
+
+      <ul>
+        <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
+        <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
+        <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
+        <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
+        <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
+        <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
+        <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
+        <li><img src="img/flowing-rock.jpg" width="580" height="360" alt="Grass Blades" /></li>
+      </ul>
+    </section>
   </div>
 
-</body>
+  <footer class="footer">
+    <div class="container">
+      <p>Copyright &copy; <a href="http://fredwu.me/">Fred Wu</a></p>
+    </div>
+  </footer>
 
-</html>
+</body>
+</html>

jquery-endless-scroll.jquery.json

@@ -0,0 +1 @@
+package.json