Improve demo app to illustrate this addon's usefulness

bower.json

@@ -12,6 +12,8 @@
     "jquery": "^1.11.1",
     "loader.js": "ember-cli/loader.js#3.2.0",
     "pretender": "0.6.0",
-    "qunit": "~1.17.1"
+    "qunit": "~1.17.1",
+    "pure": "~0.6.0",
+    "Faker": "~2.1.3"
   }
 }

package.json

@@ -23,16 +23,18 @@
     "ember-cli-app-version": "0.3.3",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
+    "ember-cli-github-pages": "0.0.4",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-pretender": "0.3.2",
     "ember-cli-qunit": "0.3.13",
-    "ember-cli-version-checker": "^1.0.2",
     "ember-cli-uglify": "^1.0.1",
+    "ember-cli-version-checker": "^1.0.2",
     "ember-data": "1.0.0-beta.17",
+    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-disable-proxy-controllers": "^0.7.0",
     "ember-export-application-global": "^1.0.2",
-    "ember-disable-prototype-extensions": "^1.0.0",
+    "ember-faker": "1.1.0",
     "ember-try": "0.0.5"
   },
   "keywords": [

tests/acceptance/infinity-route-with-meta-test.js

@@ -48,7 +48,7 @@ module('Acceptance: Infinity Route', {
 });
 
 test('it works when meta is present in payload', assert => {
-  visit('/');
+  visit('/test');
 
   andThen(() => {
     var postsTitle     = find('#posts-title');

tests/acceptance/infinity-route-without-meta-test.js

@@ -25,7 +25,7 @@ module('Acceptance: Infinity Route', {
 });
 
 test('it works when meta is not present in payload', assert => {
-  visit('/');
+  visit('/test');
 
   andThen(() => {
     var postsTitle     = find('#posts-title');

tests/dummy/app/router.js

@@ -6,7 +6,8 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-  this.route('home', { path: '/' });
+  this.route('demo', {path: '/'});
+  this.route('home', { path: 'test' });
   this.route('category', { path: '/category/:category' });
 });
 

tests/dummy/app/routes/demo.js

@@ -0,0 +1,44 @@
+import Ember from 'ember';
+import InfinityRoute from 'ember-infinity/mixins/route';
+import Pretender from 'pretender';
+import faker from 'faker';
+
+
+function generateFakeData(qty) {
+  var data = [];
+  for (var i = 0; i < qty; i++) {
+    data.push({id: i, name: faker.company.companyName()});
+  }
+  return data;
+}
+
+
+export default Ember.Route.extend(InfinityRoute, {
+  init: function () {
+    this._super(...arguments);
+    var fakeData = generateFakeData(104);
+    this.set('pretender', new Pretender());
+    this.get('pretender').get('/posts', request => {
+      var queryParams = request.queryParams;
+      var fd = fakeData;
+      var page = parseInt(request.queryParams.page, 10);
+      var per =  parseInt(request.queryParams.per_page, 10);
+      var payload = {
+        posts: fd.slice((page - 1) * per, Math.min((page) * per, fd.length)),
+        meta: {
+          total_pages: Math.ceil(fd.length/per)
+        }
+      };
+      return [200, {}, JSON.stringify(payload)];
+
+    }, 500 /*ms*/);
+  },
+
+  tearDownPretender: Ember.observer('deactivate', function () {
+    this.set('pretender', undefined);
+  }),
+
+  model() {
+    return this.infinityModel('post');
+  }
+});

tests/dummy/app/styles/app.css

@@ -1,3 +1,46 @@
-ul li {
+body {
+  font-family: 'Arial';
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+.application-view {
+  margin-top: 160px;
+}
+
+.test-list li {
   height: 500px;
 }
+
+.text-center {
+  text-align: center;
+}
+
+.fixed-to-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+
+.jumbo-header {
+  color: #fff;
+  background: purple;
+  font-size: 36px;
+  width: 100%;
+  height: 150px;
+  box-shadow: 0 15px 15px rgba(0,0,0,0.5);
+}
+
+.demo-items {
+  list-style: none;
+}
+.demo-items li {
+  border: 1px solid #999;
+  margin: 10px;
+  background: #fff;
+  box-shadow: 0 0 3px rgba(0,0,0,0.5);
+  padding: 10px;
+  width: 90%;
+}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<h2 id="title">Welcome to Ember.js</h2>
-
+<div class="application-view">
 {{outlet}}
+</div>

tests/dummy/app/templates/demo.hbs

@@ -0,0 +1,13 @@
+<div class="fixed-to-top jumbo-header text-center">
+<a href="https://github.com/hhff/ember-infinity"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
+  <h2 id="title">ember-infinity</h2>
+</div>
+<ul class="demo-items">
+  {{#each content as |item|}}
+    <li>{{item.id}}. {{item.name}}</li>
+  {{/each}}
+  {{infinity-loader
+    infinityModel=content
+    loadingText="Loading more awesome records..."
+    loadedText="Loaded all the records!"}}
+</ul>

tests/dummy/app/templates/home.hbs

@@ -1,6 +1,6 @@
 <h2 id="posts-title">Listing Posts</h2>
 
-<ul>
+<ul class="test-list">
 {{#each model as |post|}}
   <li>{{post.name}}</li>
 {{/each}}