garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

improve scrolling performance by registering events only once instead of once per entry

Browse Source
This commit is contained in:
Athou
2013-09-10 15:56:30 +02:00
parent dd94125d52
commit bb4529b6f1
4 changed files with 77 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/main/webapp/js/controllers.js
View File

@@ -665,15 +665,17 @@ module.controller('FeedListCtrl', [
'$route',
'$state',
'$window',
'$timeout',
'$location',
'EntryService',
'SettingsService',
'FeedService',
'CategoryService',
'AnalyticsService',
function($scope, $stateParams, $http, $route, $state, $window, $location, EntryService, SettingsService, FeedService,
function($scope, $stateParams, $http, $route, $state, $window, $timeout, $location, EntryService, SettingsService, FeedService,
CategoryService, AnalyticsService) {
$window = angular.element($window);
AnalyticsService.track();
$scope.keywords = $location.search().q;
@@ -758,6 +760,79 @@ module.controller('FeedListCtrl', [
}, callback);
};
var watch_scrolling = true;
var watch_current = true;
$scope.$watch('current', function(newValue, oldValue) {
if (!watch_current) {
return;
}
if (newValue && newValue !== oldValue) {
var force = $scope.navigationMode == 'keyboard';
// timeout here to execute after dom update
$timeout(function() {
var docTop = $(window).scrollTop();
var docBottom = docTop + $(window).height();
var elem = $('#entry_' + newValue.id);
var elemTop = elem.offset().top;
var elemBottom = elemTop + elem.height();
if (!force && (elemTop > docTop) && (elemBottom < docBottom)) {
// element is entirely visible
return;
} else {
var scrollTop = elemTop - $('#toolbar').outerHeight();
watch_scrolling = false;
$('html, body').animate({
scrollTop : scrollTop
}, 400, 'swing', function() {
watch_scrolling = true;
});
}
});
}
});
var scrollHandler = function() {
if (!watch_scrolling || _.size($scope.entries) === 0) {
return;
}
$scope.navigationMode = 'scroll';
if (SettingsService.settings.viewMode == 'expanded') {
var w = $(window);
var docTop = w.scrollTop();
var current = null;
for ( var i = 0; i < $scope.entries.length; i++) {
var entry = $scope.entries[i];
var e = $('#entry_' + entry.id);
if (e.offset().top + e.height() > docTop + $('#toolbar').outerHeight()) {
current = entry;
break;
}
}
var previous = $scope.current;
$scope.current = current;
if (previous != current) {
if (SettingsService.settings.scrollMarks) {
$scope.mark($scope.current, true);
}
watch_current = false;
$scope.$apply();
watch_current = true;
}
}
};
var scrollListener = _.throttle(scrollHandler, 200);
$window.on('scroll', scrollListener);
$scope.$on('$destroy', function() {
return $window.off('scroll', scrollListener);
});
$scope.goToFeed = function(id) {
$state.transitionTo('feeds.view', {
_type : 'feed',
@@ -955,16 +1030,6 @@ module.controller('FeedListCtrl', [
}
};
$scope.onScroll = function(entry) {
$scope.navigationMode = 'scroll';
if (SettingsService.settings.viewMode == 'expanded') {
$scope.current = entry;
if (SettingsService.settings.scrollMarks) {
$scope.mark(entry, true);
}
}
};
Mousetrap.bind('j', function(e) {
$scope.$apply(function() {
$scope.navigationMode = 'keyboard';