Closes #88: XHR line loader with ngProgress

This commit is contained in:
jendib 2016-03-22 22:35:42 +01:00
parent 6e6babd2e3
commit 5f84da61c8
5 changed files with 268 additions and 12 deletions

View File

@ -5,7 +5,7 @@
*/ */
angular.module('docs', angular.module('docs',
// Dependencies // Dependencies
['ui.router', 'ui.route', 'ui.bootstrap', 'ui.keypress', 'ui.validate', 'dialog', ['ui.router', 'ui.route', 'ui.bootstrap', 'ui.keypress', 'ui.validate', 'dialog', 'ngProgress',
'ui.sortable', 'restangular', 'ngSanitize', 'ngTouch', 'colorpicker.module', 'angularFileUpload'] 'ui.sortable', 'restangular', 'ngSanitize', 'ngTouch', 'colorpicker.module', 'angularFileUpload']
) )
@ -345,4 +345,21 @@ angular.module('docs',
$state.go(redirect, toParams); $state.go(redirect, toParams);
} }
}); });
})
/**
* Initialize ngProgress.
*/
.run(function($rootScope, ngProgressFactory, $http) {
$rootScope.ngProgress = ngProgressFactory.createInstance();
// Watch for the number of XHR running
$rootScope.$watch(function() {
return $http.pendingRequests.length > 0
}, function(count) {
if (count == 0) {
$rootScope.ngProgress.complete();
} else {
$rootScope.ngProgress.start();
}
});
}); });

View File

@ -56,11 +56,4 @@ angular.module('docs').controller('Navigation', function($scope, $http, $state,
}); });
$event.preventDefault(); $event.preventDefault();
}; };
/**
* Returns true if at least an asynchronous request is in progress.
*/
$scope.isLoading = function() {
return $http.pendingRequests.length > 0;
};
}); });

View File

@ -37,6 +37,7 @@
<script src="lib/angular.restangular.js" type="text/javascript"></script> <script src="lib/angular.restangular.js" type="text/javascript"></script>
<script src="lib/angular.colorpicker.js" type="text/javascript"></script> <script src="lib/angular.colorpicker.js" type="text/javascript"></script>
<script src="lib/angular.file-upload.js" type="text/javascript"></script> <script src="lib/angular.file-upload.js" type="text/javascript"></script>
<script src="lib/angular.ngprogress.js" type="text/javascript"></script>
<script src="app/docs/app.js" type="text/javascript"></script> <script src="app/docs/app.js" type="text/javascript"></script>
<script src="app/docs/controller/Main.js" type="text/javascript"></script> <script src="app/docs/controller/Main.js" type="text/javascript"></script>
<script src="app/docs/controller/Document.js" type="text/javascript"></script> <script src="app/docs/controller/Document.js" type="text/javascript"></script>
@ -92,10 +93,6 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<div class="navbar-brand loader" ng-class="{'loader-hide': !isLoading() }">
<img src="img/loader.gif" />
</div>
<div class="hidden-xs navbar-text navbar-logo"> <div class="hidden-xs navbar-text navbar-logo">
<img src="favicon.png" /> <img src="favicon.png" />
</div> </div>

View File

@ -0,0 +1,220 @@
/*
ngprogress 1.1.2 - slim, site-wide progressbar for AngularJS
(C) 2013 - Victor Bjelkholm
License: MIT
Source: https://github.com/VictorBjelkholm/ngProgress
Date Compiled: 2015-07-27
*/
angular.module('ngProgress.provider', ['ngProgress.directive'])
.service('ngProgress', function () {
'use strict';
return ['$document', '$window', '$compile', '$rootScope', '$timeout', function($document, $window, $compile, $rootScope, $timeout) {
this.autoStyle = true;
this.count = 0;
this.height = '2px';
this.$scope = $rootScope.$new();
this.color = 'white';
this.parent = $document.find('body')[0];
this.count = 0;
// Compile the directive
this.progressbarEl = $compile('<ng-progress></ng-progress>')(this.$scope);
// Add the element to body
this.parent.appendChild(this.progressbarEl[0]);
// Set the initial height
this.$scope.count = this.count;
// If height or color isn't undefined, set the height, background-color and color.
if (this.height !== undefined) {
this.progressbarEl.eq(0).children().css('height', this.height);
}
if (this.color !== undefined) {
this.progressbarEl.eq(0).children().css('background-color', this.color);
this.progressbarEl.eq(0).children().css('color', this.color);
}
// The ID for the interval controlling start()
this.intervalCounterId = 0;
// Starts the animation and adds between 0 - 5 percent to loading
// each 400 milliseconds. Should always be finished with progressbar.complete()
// to hide it
this.start = function () {
// TODO Use requestAnimationFrame instead of setInterval
// https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
this.show();
var self = this;
clearInterval(this.intervalCounterId);
this.intervalCounterId = setInterval(function () {
if (isNaN(self.count)) {
clearInterval(self.intervalCounterId);
self.count = 0;
self.hide();
} else {
self.remaining = 100 - self.count;
self.count = self.count + (0.15 * Math.pow(1 - Math.sqrt(self.remaining), 2));
self.updateCount(self.count);
}
}, 200);
};
this.updateCount = function (new_count) {
this.$scope.count = new_count;
if(!this.$scope.$$phase) {
this.$scope.$apply();
}
};
// Sets the height of the progressbar. Use any valid CSS value
// Eg '10px', '1em' or '1%'
this.setHeight = function (new_height) {
if (new_height !== undefined) {
this.height = new_height;
this.$scope.height = this.height;
if(!this.$scope.$$phase) {
this.$scope.$apply();
}
}
return this.height;
};
// Sets the color of the progressbar and it's shadow. Use any valid HTML
// color
this.setColor = function(new_color) {
if (new_color !== undefined) {
this.color = new_color;
this.$scope.color = this.color;
if(!this.$scope.$$phase) {
this.$scope.$apply();
}
}
return this.color;
};
this.hide = function() {
this.progressbarEl.children().css('opacity', '0');
var self = this;
self.animate(function () {
self.progressbarEl.children().css('width', '0%');
self.animate(function () {
self.show();
}, 500);
}, 500);
};
this.show = function () {
var self = this;
self.animate(function () {
self.progressbarEl.children().css('opacity', '1');
}, 100);
};
// Cancel any prior animations before running new ones.
// Multiple simultaneous animations just look weird.
this.animate = function(fn, time) {
if(this.animation !== undefined) { $timeout.cancel(this.animation); }
this.animation = $timeout(fn, time);
};
// Returns on how many percent the progressbar is at. Should'nt be needed
this.status = function () {
return this.count;
};
// Stops the progressbar at it's current location
this.stop = function () {
clearInterval(this.intervalCounterId);
};
// Set's the progressbar percentage. Use a number between 0 - 100.
// If 100 is provided, complete will be called.
this.set = function (new_count) {
this.show();
this.updateCount(new_count);
this.count = new_count;
clearInterval(this.intervalCounterId);
return this.count;
};
this.css = function (args) {
return this.progressbarEl.children().css(args);
};
// Resets the progressbar to percetage 0 and therefore will be hided after
// it's rollbacked
this.reset = function () {
clearInterval(this.intervalCounterId);
this.count = 0;
this.updateCount(this.count);
return 0;
};
// Jumps to 100% progress and fades away progressbar.
this.complete = function () {
this.count = 100;
this.updateCount(this.count);
var self = this;
clearInterval(this.intervalCounterId);
$timeout(function () {
self.hide();
$timeout(function () {
self.count = 0;
self.updateCount(self.count);
}, 200);
}, 500);
return this.count;
};
// Set the parent of the directive, sometimes body is not sufficient
this.setParent = function(newParent) {
if(newParent === null || newParent === undefined) {
throw new Error('Provide a valid parent of type HTMLElement');
}
if(this.parent !== null && this.parent !== undefined) {
this.parent.removeChild(this.progressbarEl[0]);
}
this.parent = newParent;
this.parent.appendChild(this.progressbarEl[0]);
};
// Gets the current element the progressbar is attached to
this.getDomElement = function () {
return this.progressbarEl;
};
this.setAbsolute = function() {
this.progressbarEl.css('position', 'absolute');
};
}];
})
.factory('ngProgressFactory', ['$injector', 'ngProgress', function($injector, ngProgress) {
var service = {
createInstance: function () {
return $injector.instantiate(ngProgress);
}
};
return service;
}]);
angular.module('ngProgress.directive', [])
.directive('ngProgress', ["$window", "$rootScope", function ($window, $rootScope) {
var directiveObj = {
// Replace the directive
replace: true,
// Only use as a element
restrict: 'E',
link: function ($scope, $element, $attrs, $controller) {
// Watch the count on the $rootScope. As soon as count changes to something that
// isn't undefined or null, change the counter on $scope and also the width of
// the progressbar. The same goes for color and height on the $rootScope
$scope.$watch('count', function (newVal) {
if (newVal !== undefined || newVal !== null) {
$scope.counter = newVal;
$element.eq(0).children().css('width', newVal + '%');
}
});
$scope.$watch('color', function (newVal) {
if (newVal !== undefined || newVal !== null) {
$scope.color = newVal;
$element.eq(0).children().css('background-color', newVal);
$element.eq(0).children().css('color', newVal);
}
});
$scope.$watch('height', function (newVal) {
if (newVal !== undefined || newVal !== null) {
$scope.height = newVal;
$element.eq(0).children().css('height', newVal);
}
});
},
// The actual html that will be used
template: '<div id="ngProgress-container"><div id="ngProgress"></div></div>'
};
return directiveObj;
}]);
angular.module('ngProgress', ['ngProgress.directive', 'ngProgress.provider']);

View File

@ -241,4 +241,33 @@ input[readonly].share-link {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
padding: 20px; padding: 20px;
border-radius: 4px border-radius: 4px
}
/* Styling for the ngProgress itself */
#ngProgress {
margin: 0;
padding: 0;
z-index: 99998;
background-color: green;
color: green;
box-shadow: 0 0 10px 0; /* Inherits the font color */
height: 2px;
opacity: 0;
/* Add CSS3 styles for transition smoothing */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* Styling for the ngProgress-container */
#ngProgress-container {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
z-index: 99999;
} }