Add spin.js-based throbber for all loading

This commit is contained in:
Joseph Schorr 2013-10-01 16:42:20 -04:00
parent ee41f79bcc
commit 76d9cbc14f
8 changed files with 90 additions and 23 deletions

View file

@ -78,11 +78,6 @@ function HeaderCtrl($scope, UserService) {
}
function RepoListCtrl($scope, Restangular) {
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList().then(function(resp) {
$scope.repositories = resp.repositories;
});
$scope.getCommentFirstLine = function(commentString) {
return getMarkedDown(getFirstTextLine(commentString));
};
@ -91,6 +86,16 @@ function RepoListCtrl($scope, Restangular) {
if (!string) { return ''; }
return getMarkedDown(string);
};
$('.spin').spin();
$scope.loading = true;
// Load the list of repositories.
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList().then(function(resp) {
$scope.repositories = resp.repositories;
$scope.loading = false;
});
}
function LandingCtrl($scope) {
@ -162,25 +167,31 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
var name = $routeParams.name;
var tag = $routeParams.tag || 'latest';
$('.spin').spin();
$scope.loading = true;
var repositoryFetch = Restangular.one('repository/' + namespace + '/' + name);
repositoryFetch.get().then(function(repo) {
$rootScope.title = namespace + '/' + name;
$scope.repo = repo;
$scope.currentTag = repo.tags[tag] || repo.tags['latest'];
var clip = new ZeroClipboard($('#copyClipboard'), { 'moviePath': 'static/lib/ZeroClipboard.swf' });
clip.on('complete', function() {
// Resets the animation.
var elem = $('#clipboardCopied')[0];
elem.style.display = 'none';
var clip = new ZeroClipboard($('#copyClipboard'), { 'moviePath': 'static/lib/ZeroClipboard.swf' });
clip.on('complete', function() {
// Resets the animation.
var elem = $('#clipboardCopied')[0];
elem.style.display = 'none';
// Show the notification.
setTimeout(function() {
elem.style.display = 'block';
}, 1);
});
// Show the notification.
setTimeout(function() {
elem.style.display = 'block';
}, 1);
});
$scope.loading = false;
}, function() {
$scope.repo = null;
$scope.loading = false;
$rootScope.title = 'Unknown Repository';
});
}
@ -189,7 +200,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
var namespace = $routeParams.namespace;
var name = $routeParams.name;
$('#userSearch').typeahead({
$('#userSearch').typeahead({
name: 'users',
remote: {
url: '/api/users/%QUERY',
@ -311,11 +322,19 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
$('#cannotchangeModal').modal({});
});
};
$('.spin').spin();
$scope.loading = true;
// Fetch the repository information.
var repositoryFetch = Restangular.one('repository/' + namespace + '/' + name);
repositoryFetch.get().then(function(repo) {
$scope.repo = repo;
$scope.loading = !($scope.permissions && $scope.repo);
}, function() {
$scope.permissions = null;
$rootScope.title = 'Unknown Repository';
$scope.loading = false;
});
// Fetch the permissions.
@ -323,8 +342,10 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
permissionsFetch.get().then(function(resp) {
$rootScope.title = 'Settings - ' + namespace + '/' + name;
$scope.permissions = resp.permissions;
$scope.loading = !($scope.permissions && $scope.repo);
}, function() {
$scope.permissions = null;
$rootScope.title = 'Unknown Repository';
$scope.loading = false;
});
}