Merge ed74968 into 810a305

PRX · Feb 4, 2016 · 389c8c1 · 389c8c1
2 parents 810a305 + ed74968
commit 389c8c1
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,6 @@ log
 .assets
 .cache
 npm-debug.log
-
+.ruby-version
+*.sublime-project
+*.sublime-workspace
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ The quickest way to get started is to check out the repository and execute it ag
 git clone git://github.com/PRX/www.prx.org.git prx.org
 cd prx.org
 echo 8080 > ~/.pow/www.prx
+ulimit -S -n 2048 # for osx
 npm install
 npm run-script devServer
 ```

diff --git a/src/app/home/home.config.js b/src/app/home/home.config.js
@@ -22,8 +22,11 @@
         }
       },
       resolve: {
-        picks: function (ngHal, $filter) {
-          return ngHal.follow('prx:picks').follow('prx:items').then(function (picks) {
+        pickList: function(ngHal) {
+          return ngHal.follow('prx:picks');
+        },
+        picks: function(pickList, $filter) {
+          return pickList.follow('prx:items').then(function (picks) {
             return $filter('groupStandalonePicks')(picks);
           });
         }
@@ -46,8 +49,11 @@
         }
       },
       resolve: {
-        picks: function (ngHal, $filter) {
-          return ngHal.follow('prx:picks').follow('prx:items').then(function (picks) {
+        pickList: function(ngHal) {
+          return ngHal.follow('prx:picks');
+        },
+        picks: function(pickList, $filter) {
+          return pickList.follow('prx:items').then(function (picks) {
             return $filter('groupStandalonePicks')(picks);
           });
         }

diff --git a/src/app/home/home.controller.js b/src/app/home/home.controller.js
@@ -4,10 +4,12 @@
     .module('prx.home')
     .controller('HomeCtrl', HomeCtrl);
 
-  HomeCtrl.$inject = ['picks', '$scope'];
+  HomeCtrl.$inject = ['pickList', 'picks', '$scope', '$filter'];
 
-  function HomeCtrl(picks, $scope) {
-    this.picks = picks;
+  function HomeCtrl(pickList, picks, $scope, $filter) {
+    var ctrl = this;
+
+    ctrl.picks = picks;
     $scope.$on('$play', function (event, params) {
       if (!angular.isDefined(params.next)) {
         params.next = mkNext;
@@ -28,6 +30,34 @@
         });
       }
     }
+
+    ctrl.hasMore = false;
+    function setHasMore() {
+      ctrl.hasMore = pickList &&
+        angular.isFunction(pickList.link) &&
+        angular.isDefined(pickList.link('next'));
+    }
+    setHasMore();
+
+    ctrl.loadingMore = false;
+    ctrl.loadMore = function () {
+      if (!ctrl.loadingMore) {
+        ctrl.loadingMore = true;
+        pickList.follow('next').then(function (nextList) {
+          pickList = nextList;
+          return nextList.follow('prx:items')
+            .then(function (picks) {
+              return $filter('groupStandalonePicks')(picks);
+            })
+            .then(function (groupedItems) {
+              Array.prototype.push.apply(ctrl.picks, groupedItems);
+            });
+        })['finally'](function () {
+          setHasMore();
+          ctrl.loadingMore = false;
+        });
+      }
+    };
   }
 
 }());
diff --git a/src/app/home/home.directive.js b/src/app/home/home.directive.js
@@ -0,0 +1,30 @@
+(function () {
+
+  angular
+    .module('prx.home')
+    .directive('onScrollIn', onScrollIn);
+
+  onScrollIn.$inject = ['$window'];
+
+  function onScrollIn($window) {
+    return {
+      restrict: 'A',
+      link: function (scope, elem, attrs) {
+        var buffer = parseInt(attrs.scrollInBuffer, 10);
+        buffer = isNaN(buffer) ? 0 : buffer;
+
+        function windowScrolled(event) {
+          if ((elem[0].getBoundingClientRect().top - buffer) < $window.innerHeight) {
+            scope.$eval(attrs.onScrollIn);
+          }
+        }
+
+        angular.element($window).on('scroll', windowScrolled);
+        scope.$on('$destroy', function() {
+          angular.element($window).off('scroll', windowScrolled);
+        });
+      }
+    };
+  }
+
+}());
diff --git a/src/app/home/home.html.jade b/src/app/home/home.html.jade
@@ -7,3 +7,10 @@ article.home
           h2 Staff Picks
         div
           prx-pick(ng-repeat="pick in home.picks", pick="pick")
+        footer
+          button.more(ng-click="home.loadMore()", ng-show="home.hasMore"
+            on-scroll-in="home.loadMore()",
+            scroll-in-buffer="100",
+            ng-disabled="home.loadingMore")
+              span(ng-show="home.loadingMore") Loading...
+              span(ng-hide="home.loadingMore") More
diff --git a/src/app/home/home.spec.js b/src/app/home/home.spec.js
@@ -12,10 +12,27 @@ describe('prx.home', function () {
 
   describe ('HomeCtrl', function () {
     it ('attaches the picks injected to $scope', inject(function ($controller) {
-      var sigil = 'sigil';
-      var scope = {};
-      var controller = $controller('HomeCtrl', {picks: sigil, $scope: {$on: function () {}}});
-      expect(controller.picks).toBe(sigil);
+      var controller = $controller('HomeCtrl', {
+        picks: 'sigil',
+        pickList: {},
+        $scope: {$on: function () {}},
+        $filter: null
+      });
+      expect(controller.picks).toBe('sigil');
+      expect(controller.hasMore).toBeFalsy();
+      expect(controller.loadingMore).toBeFalsy();
+    }));
+
+    it ('checks the pickList for hasMore', inject(function ($controller) {
+      var controller = $controller('HomeCtrl', {
+        picks: 'sigil',
+        pickList: {link: function() {return true;}},
+        $scope: {$on: function () {}},
+        $filter: null
+      });
+      expect(controller.picks).toBe('sigil');
+      expect(controller.hasMore).toBeTruthy();
+      expect(controller.loadingMore).toBeFalsy();
     }));
   });
 
@@ -27,13 +44,69 @@ describe('prx.home', function () {
       ngHal = _ngHal_;
     }));
 
-    it ('gets the picks', function () {
+    it ('gets the pickList', function () {
       var spy = ngHal.stubFollow('prx:picks', ngHal.mock());
-      $injector.invoke(state.resolve.picks, null, {});
+      $injector.invoke(state.resolve.pickList, null, {});
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it ('gets the picks from the pickList', function () {
+      var mock = ngHal.mock();
+      var spy = mock.stubFollow('prx:items');
+      $injector.invoke(state.resolve.picks, null, {pickList: mock});
       expect(spy).toHaveBeenCalled();
     });
   });
 
+  describe ('loadMore', function () {
+    it ('loads the next page', inject(function ($controller, _ngHal_) {
+      var pickList = _ngHal_.mock();
+      var nextPicks = _ngHal_.mock();
+      var spy = pickList.stubFollow('next', nextPicks);
+      var spy2 = nextPicks.stubFollow('prx:items', ['bar']);
+      var controller = $controller('HomeCtrl', {
+        picks: ['foo'],
+        pickList: pickList,
+        $scope: {$on: function () {}},
+        $filter: function() { return function(a) {return a;}; }
+      });
+      controller.loadMore();
+      expect(spy).toHaveBeenCalled();
+      expect(spy2).toHaveBeenCalled();
+      expect(controller.picks).toEqual(['foo', 'bar']);
+      expect(controller.hasMore).toBeFalsy();
+      expect(controller.loadingMore).toBeFalsy();
+    }));
+  });
+
+  describe ('onScrollIn', function () {
+    it ('triggers when an element scrolls into view', inject(function ($compile, $rootScope, $window) {
+      if ($window.parent._phantom) {
+        return; // window scroll detection doesn't work here
+      }
+
+      var elem = angular.element("<div style='padding-top:1000px'><div style='height:10px' on-scroll-in='triggered=true'></div></div>");
+      var scope = $rootScope.$new();
+      elem = $compile(elem)(scope);
+      win = angular.element($window);
+      $window.document.body.appendChild(elem[0]);
+
+      win.triggerHandler('scroll');
+      expect(scope.triggered).toBeFalsy();
+
+      $window.scroll(0, 1000 - $window.innerHeight - 100);
+      win.triggerHandler('scroll');
+      expect(scope.triggered).toBeFalsy();
+
+      $window.scroll(0, 1000 - $window.innerHeight + 100);
+      win.triggerHandler('scroll');
+      expect(scope.triggered).toBeTruthy();
+
+      $window.document.body.removeChild(elem[0]);
+      scope.$destroy();
+    }));
+  });
+
   describe ('continuous playback', function () {
 
     function makePick() {
@@ -54,7 +127,11 @@ describe('prx.home', function () {
     beforeEach(inject(function ($controller, $rootScope, _$q_) {
       $q = _$q_;
       $scope = $rootScope.$new();
-      controller = $controller('HomeCtrl', {picks: [], $scope: $scope});
+      controller = $controller('HomeCtrl', {
+        pickList: {link: function() {}},
+        picks: [],
+        $scope: $scope
+      });
     }));
 
     it ('sets next on $play event', function () {

diff --git a/src/app/home/home.styl b/src/app/home/home.styl
@@ -11,4 +11,11 @@ article.home .main {
     font-size: 20px;
     font-weight: lighter;
   }
+
+  footer {
+    width: 100%;
+    text-align: center;
+    margin-top: 20px;
+  }
+
 }