Implement infinite scrolling

I't not perfect but it's a start.
This commit is contained in:
Tor Hveem 2015-12-19 15:44:34 +01:00
parent 5dc0b4df02
commit df36d56fa7
3 changed files with 34 additions and 1 deletions

View file

@ -36,6 +36,7 @@
<script type="text/javascript" src="js/connection.js"></script>
<script type="text/javascript" src="js/file-change.js"></script>
<script type="text/javascript" src="js/imgur-drop-directive.js"></script>
<script type="text/javascript" src="js/whenscrolled-directive.js"></script>
<script type="text/javascript" src="js/inputbar.js"></script>
<script type="text/javascript" src="js/plugin-directive.js"></script>
<script type="text/javascript" src="js/websockets.js"></script>
@ -264,7 +265,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</li>
</ul>
</div>
<div id="bufferlines" class="favorite-font" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-class="{'withnicklist': showNicklist}" imgur-drop>
<div id="bufferlines" class="favorite-font" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-class="{'withnicklist': showNicklist}" when-scrolled="infiniteScroll()" imgur-drop>
<div id="nicklist" ng-if="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
<ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist">
<li ng-repeat="nick in group.nicks|orderBy:'name'">

View file

@ -539,6 +539,17 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
return connection.fetchMoreLines(numLines);
};
$scope.infiniteScroll = function() {
// Check if we are already fetching
if ($rootScope.loadingLines) {
return;
}
var buffer = models.getActiveBuffer();
if (!buffer.allLinesFetched) {
$scope.fetchMoreLines();
}
};
$rootScope.updateBufferBottom = function(bottom) {
var eob = document.getElementById("end-of-buffer");
var bl = document.getElementById('bufferlines');

View file

@ -0,0 +1,21 @@
(function() {
'use strict';
var weechat = angular.module('weechat');
weechat.directive('whenScrolled', function() {
return function(scope, elm, attr) {
var raw = elm[0];
var fun = function() {
if (raw.scrollTop === 0) {
scope.$apply(attr.whenScrolled);
}
};
elm.bind('scroll', function() {
_.debounce(fun, 200)();
});
};
});
})();