Added infinite scrolling. It's sliiiightly buggy in that it jumps down the list a bit, but it is overall working pretty well. Added ng-infinite-scroll-matrix.js and jquery-1.8.3 as deps.

2 files changed, 44 insertions, 6 deletions

diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 0d54c6f4d8..6f1aeccca4 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -15,6 +15,32 @@ limitations under the License.
 */
 
 angular.module('RoomController', [])
+// FIXME move directives outta here!
+.directive("keepScroll", function(){
+  return {
+    controller : function($scope){
+      var element = 0;
+      this.setElement = function(el){
+        element = el;
+      }
+      this.addItem = function(item){
+        element.scrollTop = (element.scrollTop+item.clientHeight+1); //1px for margin
+      };
+    },
+    link : function(scope,el,attr, ctrl) {
+     ctrl.setElement(el[0]);
+    }
+  };
+})
+// FIXME move directives outta here!
+.directive("scrollItem", function(){
+  return{
+    require : "^keepScroll",
+    link : function(scope, el, att, scrCtrl){
+      scrCtrl.addItem(el[0]);
+    }
+  }
+})
 .controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
                                function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
    'use strict';
@@ -54,7 +80,14 @@ angular.module('RoomController', [])
         updatePresence(event);
     });
     
-    var paginate = function(numItems) {
+    $scope.paginateMore = function() {
+        if ($scope.state.can_paginate) {
+            console.log("Paginating more.");
+            paginate(MESSAGES_PER_PAGINATION, false);
+        }
+    };
+    
+    var paginate = function(numItems, toBottom) {
         matrixService.paginateBackMessages($scope.room_id, $scope.state.earliest_token, numItems).then(
             function(response) {
                 eventHandlerService.handleEvents(response.data.chunk, false);
@@ -63,6 +96,11 @@ angular.module('RoomController', [])
                     // no more messages to paginate :(
                     $scope.state.can_paginate = false;
                 }
+                
+                if (toBottom) {
+                    console.log("Scrolling to bottom");
+                    scrollToBottom();
+                }
             },
             function(error) {
                 console.log("Failed to paginateBackMessages: " + JSON.stringify(error));
@@ -181,7 +219,7 @@ angular.module('RoomController', [])
                     }
                 );
                 
-                paginate(MESSAGES_PER_PAGINATION);
+                paginate(MESSAGES_PER_PAGINATION, true);
             },
             function(reason) {
                 $scope.feedback = "Can't join room: " + reason;
@@ -223,6 +261,6 @@ angular.module('RoomController', [])
     };
     
     $scope.loadMoreHistory = function() {
-        paginate(MESSAGES_PER_PAGINATION);
+        paginate(MESSAGES_PER_PAGINATION, false);
     };
 }]);
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 93917071d9..e2a4c221c6 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -20,9 +20,9 @@
         </table>
     </div>
     
-    <div class="messageTableWrapper">
-        <table class="messageTable">
-            <tr ng-repeat="msg in events.rooms[room_id].messages" ng-class="msg.user_id === state.user_id ? 'mine' : ''">
+    <div class="messageTableWrapper" keep-scroll>
+        <table class="messageTable" infinite-scroll="paginateMore()">
+            <tr ng-repeat="msg in events.rooms[room_id].messages" ng-class="msg.user_id === state.user_id ? 'mine' : ''" scroll-item>
                 <td class="leftBlock">
                     <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
                     <div class="timestamp">{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}</div>