diff options
Diffstat (limited to '')
| -rw-r--r-- | webclient/room/room-controller.js | 44 | ||||
| -rw-r--r-- | webclient/room/room.html | 6 | ||||
| -rw-r--r-- | webclient/rooms/rooms.html | 2 |
3 files changed, 45 insertions, 7 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> diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html index 8edeb13ced..c3ee85f8a0 100644 --- a/webclient/rooms/rooms.html +++ b/webclient/rooms/rooms.html @@ -86,7 +86,7 @@ </div> <div> <form> - <input size="40" ng-model="joinAlias.room_alias" ng-enter="joinAlias(joinAlias.room_alias)" placeholder="(e.g. #foo_channe:example.org)"/> + <input size="40" ng-model="joinAlias.room_alias" ng-enter="joinAlias(joinAlias.room_alias)" placeholder="(e.g. #foo_channel:example.org)"/> <button ng-disabled="!joinAlias.room_alias" ng-click="joinAlias(joinAlias.room_alias)">Join room</button> </form> </div> |