homegrown infinite scroll through pages on site page

This commit is contained in:
Noah Levitt 2015-10-12 23:08:35 +00:00
parent 3df4a3e109
commit 196e52ac0a
4 changed files with 37 additions and 19 deletions

View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.1/ng-infinite-scroll.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/controllers.js"></script>
<style>

View File

@ -46,4 +46,3 @@ brozzlerConsoleApp.filter("byteformat", function() {
return result;
}
});

View File

@ -59,7 +59,7 @@ brozzlerControllers.controller("JobController", ["$scope", "$routeParams", "$htt
$http.get("/api/jobs/" + $routeParams.id).success(function(data) {
$scope.job = data;
$scope.job.page_count = $scope.job.queued_count = 0;
console.log("job=", $scope.job);
// console.log("job=", $scope.job);
$http.get("/api/stats/" + $scope.job.conf.warcprox_meta.stats.buckets[0]).success(function(data) {
$scope.job.stats = data;
// console.log("job stats=", $scope.job.stats);
@ -76,28 +76,41 @@ brozzlerControllers.controller("JobController", ["$scope", "$routeParams", "$htt
}]);
brozzlerControllers.controller("SiteController", ["$scope", "$routeParams", "$http",
function($scope, $routeParams, $http) {
brozzlerControllers.controller("SiteController", ["$scope", "$routeParams", "$http", "$window",
function($scope, $routeParams, $http, $window) {
var start = 0;
$scope.loading = false;
$scope.pages = [];
$window.addEventListener("scroll", function() {
// console.log("window.scrollTop=" + window.scrollTop + " window.offsetHeight=" + window.offsetHeight + " window.scrollHeight=" + window.scrollHeight);
if ($window.innerHeight + $window.scrollY + 50 >= window.document.documentElement.scrollHeight) {
loadMorePages();
}
});
var loadMorePages = function() {
if ($scope.loading)
return;
$scope.loading = true;
// console.log("load more! start=" + start);
$http.get("/api/site/" + $routeParams.id + "/pages?start=" + start + "&end=" + (start+90)).then(function(response) {
$scope.pages = $scope.pages.concat(response.data.pages);
// console.log("pages = ", $scope.pages);
start += response.data.pages.length;
$scope.loading = false;
}, function(reason) {
$scope.loading = false;
});
};
$http.get("/api/site/" + $routeParams.id).success(function(data) {
$scope.site = data;
loadSiteStats($http, $scope.site);
// console.log("site = ", $scope.site);
});
$http.get("/api/site/" + $routeParams.id + "/pages?start=0&end=99").success(function(data) {
$scope.pages = data.pages;
console.log("pages = ", $scope.pages);
});
loadMorePages();
}]);
/*
$http.get("/api/site/" + $routeParams.id).then(function(response) {
console.log("/api/site/" + $routeParams.id + " returned", response);
$scope.site = response.data;
return $http.get("/api/site/" + $routeParams.id + "/pages");
}).then(function(response) {
console.log("/api/site/" + $routeParams.id + "/pages returned", response);
$scope.site.pages = response.data.pages;
});
*/

View File

@ -48,6 +48,11 @@
</a>
</div>
</div>
<div class="col-sm-12" ng-show="loading">
<div style="text-align:center;font-size:300%">
<span class="fa fa-spinner fa-pulse"></span>
</div>
</div>
</div>
</div>