satellite/satbd-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds endless scrolling on albums

Browse Source
This commit is contained in:
Alexandre Tuleu
2016-02-12 18:45:14 +01:00
parent c13dc5dad1
commit c5f294a818
5 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@@ -8,7 +8,8 @@
"angular-animate": "^1.5.0", "angular-animate": "^1.5.0",
"angular-sanitize": "^1.5.0", "angular-sanitize": "^1.5.0",
"angular-bootstrap": "^1.1.2", "angular-bootstrap": "^1.1.2",
"bootstrap": "^3.3.6" "bootstrap": "^3.3.6",
"angular-inview": "^1.5.6"
}, },
"devDependencies": { "devDependencies": {
"angular-mocks": "^1.5.0", "angular-mocks": "^1.5.0",

1
webapp/html/index.html
View File

@@ -50,6 +50,7 @@
<script src="/bower_components/angular-animate/angular-animate.min.js"></script> <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script> <script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/bower_components/angular-inview/angular-inview.js"></script>
<!-- inject:js --> <!-- inject:js -->
<!-- endinject --> <!-- endinject -->
</body> </body>

2
webapp/js/directives.js
View File

@@ -20,7 +20,7 @@ directives.controller('AlbumCtrl', function($scope,$http,$log,$uibModal,albumSer
.then(function(data) { .then(function(data) {
$scope.album = data; $scope.album = data;
}, function(err) { }, function(err) {
$log.error('Could not fetch album' + $scope.id + ' :' + err); $log.error('Could not fetch album ' + $scope.id + ' :' + err);
}); });
$scope.openAlbumModal = function() { $scope.openAlbumModal = function() {
var albumModalInstance = $uibModal.open({ var albumModalInstance = $uibModal.open({

12
webapp/js/views/recents/recents.html
View File

@@ -1,5 +1,9 @@
<h1> Albums Récents </h1> <h1 class="text-center"> Albums Récents </h1>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 album" ng-repeat="id in albumIDs"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 album" ng-repeat="id in albumIDs">
<album album-id="id"> </album> <album album-id="id"> </album>
</div>
</div>
<div class="row text-center" in-view="$inview&&loadMore()" ng-if="scrollMore">
Chargement ...
</div> </div>

27
webapp/js/views/recents/recents.js
View File

@@ -1,7 +1,8 @@
'use strict'; 'use strict';
angular.module('satbd.satellite.bar.views.recents',[ angular.module('satbd.satellite.bar.views.recents',[
'ngRoute' 'ngRoute',
'angular-inview'
]).config(function($routeProvider) { ]).config(function($routeProvider) {
$routeProvider.when('/recents', { $routeProvider.when('/recents', {
templateUrl: 'js/views/recents/recents.html', templateUrl: 'js/views/recents/recents.html',
@@ -9,12 +10,30 @@ angular.module('satbd.satellite.bar.views.recents',[
}); });
}).controller('RecentsCtrl', function( $scope, $http, $log) { }).controller('RecentsCtrl', function( $scope, $http, $log) {
$scope.albumIDs = []; $scope.albumIDs = [];
$scope.allAlbums = [];
$scope.scrollMore = false;
//we put all the albums in one variable
$http.get('/api/recents') $http.get('/api/recents')
.success(function(data) { .success(function(data) {
for (var i=0; i < 10; i++) { $scope.allAlbums = data;
$scope.albumIDs.push(data[i]); $scope.scrollMore = true;
}
}).error(function(err){ }).error(function(err){
$log.error(err); $log.error(err);
}); });
$scope.loadMore = function() {
$log.info('Loading more components');
if (!$scope.scrollMore || $scope.albumIDs.length >= $scope.allAlbums.length) {
$scope.scrollMore = false;
$log.info('reached the end of albums')
return;
}
var newSize = Math.min($scope.albumIDs.length + 50, $scope.allAlbums.length);
for( var i = $scope.albumIDs.length; i < newSize; i++) {
$scope.albumIDs.push($scope.allAlbums[i]);
}
}
}); });