diff --git a/bower.json b/bower.json
index 409ffa5..174b394 100644
--- a/bower.json
+++ b/bower.json
@@ -1,8 +1,8 @@
{
"name": "ngprogress",
- "version": "1.1.2",
+ "version": "1.1.3",
"main": [
- "build/ngProgress.js",
+ "build/ngprogress.js",
"ngProgress.css"
],
"ignore": [
diff --git a/build/ngprogress.js b/build/ngprogress.js
index 1527a4b..73eb307 100644
--- a/build/ngprogress.js
+++ b/build/ngprogress.js
@@ -1,21 +1,21 @@
/*
-ngprogress 1.1.2 - slim, site-wide progressbar for AngularJS
+ngprogress 1.1.3 - slim, site-wide progressbar for AngularJS
(C) 2013 - Victor Bjelkholm
License: MIT
Source: https://github.com/VictorBjelkholm/ngProgress
-Date Compiled: 2015-07-27
+Date Compiled: 2015-08-14
*/
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;
+ 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 = 'firebrick';
- this.parent = $document.find('body')[0];
- this.count = 0;
+ this.$scope = $rootScope.$new();
+ this.color = 'firebrick';
+ this.parent = $document.find('body')[0];
+ this.count = 0;
// Compile the directive
this.progressbarEl = $compile('')(this.$scope);
@@ -34,152 +34,158 @@ angular.module('ngProgress.provider', ['ngProgress.directive'])
// 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();
+ // 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);
}
- };
- // 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();
- }
+ }, 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.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;
+ }
+ 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.progressbarEl.children().css('width', '0%');
- self.animate(function () {
- self.show();
- }, 500);
+ self.show();
}, 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);
+ }, 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.hide();
- $timeout(function () {
- self.count = 0;
- self.updateCount(self.count);
- }, 500);
- }, 1000);
- 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');
- }
+ self.count = 0;
+ self.updateCount(self.count);
+ }, 500);
+ }, 1000);
+ return this.count;
+ };
+ // Set the parent of the directive, sometimes body is not sufficient
+ this.setParent = function (newParent) {
+ if (typeof newParent === 'string') {
+ newParent = document.getElementById(newParent);
+ }
- if(this.parent !== null && this.parent !== undefined) {
- this.parent.removeChild(this.progressbarEl[0]);
- }
+ 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');
- };
- }];
+ 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;
-}]);
+ .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 = {
diff --git a/build/ngprogress.min.js b/build/ngprogress.min.js
index 177e552..3137aad 100644
--- a/build/ngprogress.min.js
+++ b/build/ngprogress.min.js
@@ -1,8 +1,8 @@
/*
-ngprogress 1.1.2 - slim, site-wide progressbar for AngularJS
+ngprogress 1.1.3 - slim, site-wide progressbar for AngularJS
(C) 2013 - Victor Bjelkholm
License: MIT
Source: https://github.com/VictorBjelkholm/ngProgress
-Date Compiled: 2015-07-27
+Date Compiled: 2015-08-14
*/
-angular.module("ngProgress.provider",["ngProgress.directive"]).service("ngProgress",function(){"use strict";return["$document","$window","$compile","$rootScope","$timeout",function(a,b,c,d,e){this.autoStyle=!0,this.count=0,this.height="2px",this.$scope=d.$new(),this.color="firebrick",this.parent=a.find("body")[0],this.count=0,this.progressbarEl=c("")(this.$scope),this.parent.appendChild(this.progressbarEl[0]),this.$scope.count=this.count,void 0!==this.height&&this.progressbarEl.eq(0).children().css("height",this.height),void 0!==this.color&&(this.progressbarEl.eq(0).children().css("background-color",this.color),this.progressbarEl.eq(0).children().css("color",this.color)),this.intervalCounterId=0,this.start=function(){this.show();var a=this;clearInterval(this.intervalCounterId),this.intervalCounterId=setInterval(function(){isNaN(a.count)?(clearInterval(a.intervalCounterId),a.count=0,a.hide()):(a.remaining=100-a.count,a.count=a.count+.15*Math.pow(1-Math.sqrt(a.remaining),2),a.updateCount(a.count))},200)},this.updateCount=function(a){this.$scope.count=a,this.$scope.$$phase||this.$scope.$apply()},this.setHeight=function(a){return void 0!==a&&(this.height=a,this.$scope.height=this.height,this.$scope.$$phase||this.$scope.$apply()),this.height},this.setColor=function(a){return void 0!==a&&(this.color=a,this.$scope.color=this.color,this.$scope.$$phase||this.$scope.$apply()),this.color},this.hide=function(){this.progressbarEl.children().css("opacity","0");var a=this;a.animate(function(){a.progressbarEl.children().css("width","0%"),a.animate(function(){a.show()},500)},500)},this.show=function(){var a=this;a.animate(function(){a.progressbarEl.children().css("opacity","1")},100)},this.animate=function(a,b){void 0!==this.animation&&e.cancel(this.animation),this.animation=e(a,b)},this.status=function(){return this.count},this.stop=function(){clearInterval(this.intervalCounterId)},this.set=function(a){return this.show(),this.updateCount(a),this.count=a,clearInterval(this.intervalCounterId),this.count},this.css=function(a){return this.progressbarEl.children().css(a)},this.reset=function(){return clearInterval(this.intervalCounterId),this.count=0,this.updateCount(this.count),0},this.complete=function(){this.count=100,this.updateCount(this.count);var a=this;return clearInterval(this.intervalCounterId),e(function(){a.hide(),e(function(){a.count=0,a.updateCount(a.count)},500)},1e3),this.count},this.setParent=function(a){if(null===a||void 0===a)throw new Error("Provide a valid parent of type HTMLElement");null!==this.parent&&void 0!==this.parent&&this.parent.removeChild(this.progressbarEl[0]),this.parent=a,this.parent.appendChild(this.progressbarEl[0])},this.getDomElement=function(){return this.progressbarEl},this.setAbsolute=function(){this.progressbarEl.css("position","absolute")}}]}).factory("ngProgressFactory",["$injector","ngProgress",function(a,b){var c={createInstance:function(){return a.instantiate(b)}};return c}]),angular.module("ngProgress.directive",[]).directive("ngProgress",["$window","$rootScope",function(a,b){var c={replace:!0,restrict:"E",link:function(a,b,c,d){a.$watch("count",function(c){(void 0!==c||null!==c)&&(a.counter=c,b.eq(0).children().css("width",c+"%"))}),a.$watch("color",function(c){(void 0!==c||null!==c)&&(a.color=c,b.eq(0).children().css("background-color",c),b.eq(0).children().css("color",c))}),a.$watch("height",function(c){(void 0!==c||null!==c)&&(a.height=c,b.eq(0).children().css("height",c))})},template:''};return c}]),angular.module("ngProgress",["ngProgress.directive","ngProgress.provider"]);
\ No newline at end of file
+angular.module("ngProgress.provider",["ngProgress.directive"]).service("ngProgress",function(){"use strict";return["$document","$window","$compile","$rootScope","$timeout",function(a,b,c,d,e){this.autoStyle=!0,this.count=0,this.height="2px",this.$scope=d.$new(),this.color="firebrick",this.parent=a.find("body")[0],this.count=0,this.progressbarEl=c("")(this.$scope),this.parent.appendChild(this.progressbarEl[0]),this.$scope.count=this.count,void 0!==this.height&&this.progressbarEl.eq(0).children().css("height",this.height),void 0!==this.color&&(this.progressbarEl.eq(0).children().css("background-color",this.color),this.progressbarEl.eq(0).children().css("color",this.color)),this.intervalCounterId=0,this.start=function(){this.show();var a=this;clearInterval(this.intervalCounterId),this.intervalCounterId=setInterval(function(){isNaN(a.count)?(clearInterval(a.intervalCounterId),a.count=0,a.hide()):(a.remaining=100-a.count,a.count=a.count+.15*Math.pow(1-Math.sqrt(a.remaining),2),a.updateCount(a.count))},200)},this.updateCount=function(a){this.$scope.count=a,this.$scope.$$phase||this.$scope.$apply()},this.setHeight=function(a){return void 0!==a&&(this.height=a,this.$scope.height=this.height,this.$scope.$$phase||this.$scope.$apply()),this.height},this.setColor=function(a){return void 0!==a&&(this.color=a,this.$scope.color=this.color,this.$scope.$$phase||this.$scope.$apply()),this.color},this.hide=function(){this.progressbarEl.children().css("opacity","0");var a=this;a.animate(function(){a.progressbarEl.children().css("width","0%"),a.animate(function(){a.show()},500)},500)},this.show=function(){var a=this;a.animate(function(){a.progressbarEl.children().css("opacity","1")},100)},this.animate=function(a,b){void 0!==this.animation&&e.cancel(this.animation),this.animation=e(a,b)},this.status=function(){return this.count},this.stop=function(){clearInterval(this.intervalCounterId)},this.set=function(a){return this.show(),this.updateCount(a),this.count=a,clearInterval(this.intervalCounterId),this.count},this.css=function(a){return this.progressbarEl.children().css(a)},this.reset=function(){return clearInterval(this.intervalCounterId),this.count=0,this.updateCount(this.count),0},this.complete=function(){this.count=100,this.updateCount(this.count);var a=this;return clearInterval(this.intervalCounterId),e(function(){a.hide(),e(function(){a.count=0,a.updateCount(a.count)},500)},1e3),this.count},this.setParent=function(a){if("string"==typeof a&&(a=document.getElementById(a)),null===a||void 0===a)throw new Error("Provide a valid parent of type HTMLElement");null!==this.parent&&void 0!==this.parent&&this.parent.removeChild(this.progressbarEl[0]),this.parent=a,this.parent.appendChild(this.progressbarEl[0])},this.getDomElement=function(){return this.progressbarEl},this.setAbsolute=function(){this.progressbarEl.css("position","absolute")}}]}).factory("ngProgressFactory",["$injector","ngProgress",function(a,b){var c={createInstance:function(){return a.instantiate(b)}};return c}]),angular.module("ngProgress.directive",[]).directive("ngProgress",["$window","$rootScope",function(a,b){var c={replace:!0,restrict:"E",link:function(a,b,c,d){a.$watch("count",function(c){(void 0!==c||null!==c)&&(a.counter=c,b.eq(0).children().css("width",c+"%"))}),a.$watch("color",function(c){(void 0!==c||null!==c)&&(a.color=c,b.eq(0).children().css("background-color",c),b.eq(0).children().css("color",c))}),a.$watch("height",function(c){(void 0!==c||null!==c)&&(a.height=c,b.eq(0).children().css("height",c))})},template:''};return c}]),angular.module("ngProgress",["ngProgress.directive","ngProgress.provider"]);
\ No newline at end of file
diff --git a/package.json b/package.json
index 2a24759..955e1cb 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "ngprogress",
- "version": "1.1.2",
+ "version": "1.1.3",
"description": "slim, site-wide progressbar for AngularJS",
- "main": "ngProgress.js",
+ "main": "ngprogress.js",
"repository": {
"type": "git",
"url": "git://github.com/VictorBjelkholm/ngProgress.git"
diff --git a/readme.md b/readme.md
index acc0590..e5586fa 100644
--- a/readme.md
+++ b/readme.md
@@ -104,7 +104,11 @@ ngProgress.complete();
* **setParent** - Changes the parent of the DOM element which visualizes the progress bar
```javascript
+// Change by HTML element
ngProgress.setParent(document.getElementById('container'));
+
+// Change by ID
+ngProgress.setParent('container');
```
* **getDomElement** - Gets the DOM element which visizualizes the progress bar. It is wrapped as a jqlite element - https://docs.angularjs.org/api/ng/function/angular.element
diff --git a/src/provider.js b/src/provider.js
index 726f3b3..69efec7 100644
--- a/src/provider.js
+++ b/src/provider.js
@@ -2,14 +2,14 @@
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;
+ 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 = 'firebrick';
- this.parent = $document.find('body')[0];
- this.count = 0;
+ this.$scope = $rootScope.$new();
+ this.color = 'firebrick';
+ this.parent = $document.find('body')[0];
+ this.count = 0;
// Compile the directive
this.progressbarEl = $compile('')(this.$scope);
@@ -28,149 +28,155 @@ angular.module('ngProgress.provider', ['ngProgress.directive'])
// 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();
+ // 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);
}
- };
- // 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();
- }
+ }, 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.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;
+ }
+ 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.progressbarEl.children().css('width', '0%');
- self.animate(function () {
- self.show();
- }, 500);
+ self.show();
}, 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);
+ }, 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.hide();
- $timeout(function () {
- self.count = 0;
- self.updateCount(self.count);
- }, 500);
- }, 1000);
- 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');
- }
+ self.count = 0;
+ self.updateCount(self.count);
+ }, 500);
+ }, 1000);
+ return this.count;
+ };
+ // Set the parent of the directive, sometimes body is not sufficient
+ this.setParent = function (newParent) {
+ if (typeof newParent === 'string') {
+ newParent = document.getElementById(newParent);
+ }
- if(this.parent !== null && this.parent !== undefined) {
- this.parent.removeChild(this.progressbarEl[0]);
- }
+ if (newParent === null || newParent === undefined) {
+ throw new Error('Provide a valid parent of type HTMLElement');
+ }
- 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');
- };
- }];
+ 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;
-}]);
\ No newline at end of file
+ .factory('ngProgressFactory', ['$injector', 'ngProgress', function ($injector, ngProgress) {
+ var service = {
+ createInstance: function () {
+ return $injector.instantiate(ngProgress);
+ }
+ };
+ return service;
+ }]);
\ No newline at end of file
diff --git a/tests/ngProgressProviderSpec.js b/tests/ngProgressProviderSpec.js
index cc8ebb4..7ec2afe 100644
--- a/tests/ngProgressProviderSpec.js
+++ b/tests/ngProgressProviderSpec.js
@@ -151,6 +151,17 @@ describe('How the provider should work', function () {
expect(domElement.parentNode).toEqual(div);
});
+ it('allow you to change the parent of the progressbar by an ID selector', function () {
+ var domElement = this.progressbar.getDomElement()[0];
+ expect(domElement.parentNode).toEqual(document.body);
+
+ var div = document.createElement('div');
+ div.id = 'container';
+ document.body.appendChild(div);
+ this.progressbar.setParent('container');
+ expect(domElement.parentNode).toEqual(div);
+ });
+
it('throws exception when invalid parent is set', function () {
var that = this;
expect(function () {