infinite-scrolling

This commit is contained in:
Jeremie Panzer
2013-03-25 13:52:02 +01:00
parent f0c4733b76
commit 0443fbf267
8 changed files with 82 additions and 18 deletions

View File

@@ -102,15 +102,45 @@ module.controller('FeedListCtrl', function($scope, $routeParams, $http,
$scope.refreshList();
});
$scope.offset = 0;
$scope.limit = 10;
$scope.busy = false;
$scope.hasMore = true;
$scope.refreshList = function() {
if ($scope.settings.readingMode) {
$scope.entryList = EntryService.get({
_type : $scope.selectedType,
_id : $scope.selectedId,
_readtype : $scope.settings.readingMode
_readtype : $scope.settings.readingMode,
offset : $scope.offset,
limit : 30
});
}
};
$scope.loadMoreEntries = function() {
if ($scope.busy || !$scope.hasMore)
return;
if (!$scope.settings.readingMode)
return;
$scope.busy = true;
EntryService.get({
_type : $scope.selectedType,
_id : $scope.selectedId,
_readtype : $scope.settings.readingMode,
offset : $scope.offset,
limit : $scope.limit
}, function(data) {
for ( var i = 0; i < data.entries.length; i++) {
$scope.entryList.entries.push(data.entries[i]);
}
$scope.offset = $scope.offset + data.entries.length;
$scope.busy = false;
$scope.hasMore = data.entries.length == $scope.limit;
});
}
$scope.mark = function(entry, read) {
if (entry.read != read) {

View File

@@ -1,6 +1,6 @@
var app = angular.module('commafeed', [ 'ui', 'ui.bootstrap',
'commafeed.directives', 'commafeed.controllers', 'commafeed.services',
'ngSanitize', 'ngUpload' ]);
'ngSanitize', 'ngUpload', 'infinite-scroll' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/feeds/view/:_type/:_id', {

View File

@@ -2,7 +2,7 @@
{{readType}}
<span>{{entryList.name}}</span><span
ng-show="selectedType == 'category'"> &#187;</span>
<div class="accordion" id="feed-accordion">
<div class="accordion" id="feed-accordion" infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
<div class="accordion-group" ng-repeat="entry in entryList.entries">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
@@ -17,5 +17,6 @@
<div class="accordion-inner" ng-bind-html="entry.content"></div>
</div>
</div>
<div ng-show="busy">Loading data...</div>
</div>
</div>

View File

@@ -0,0 +1,2 @@
/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */
var mod;mod=angular.module("infinite-scroll",[]),mod.directive("infiniteScroll",["$rootScope","$window","$timeout",function(i,n,e){return{link:function(t,l,o){var r,c,f,a;return n=angular.element(n),f=0,null!=o.infiniteScrollDistance&&t.$watch(o.infiniteScrollDistance,function(i){return f=parseInt(i,10)}),a=!0,r=!1,null!=o.infiniteScrollDisabled&&t.$watch(o.infiniteScrollDisabled,function(i){return a=!i,a&&r?(r=!1,c()):void 0}),c=function(){var e,c,u,d;return d=n.height()+n.scrollTop(),e=l.offset().top+l.height(),c=e-d,u=n.height()*f>=c,u&&a?i.$$phase?t.$eval(o.infiniteScroll):t.$apply(o.infiniteScroll):u?r=!0:void 0},n.on("scroll",c),t.$on("$destroy",function(){return n.off("scroll",c)}),e(function(){return o.infiniteScrollImmediateCheck?t.$eval(o.infiniteScrollImmediateCheck)?c():void 0:c()},0)}}}]);