From 95a50fe4ddd8fa9ab293857fbfb14dc98b04344e Mon Sep 17 00:00:00 2001 From: Tiago Resende Date: Fri, 14 Aug 2015 16:30:32 -0300 Subject: [PATCH 1/4] Update setParent to accept string parameter and use as ID selector --- build/ngprogress.js | 296 ++++++++++++++++---------------- build/ngprogress.min.js | 4 +- readme.md | 4 + src/provider.js | 294 +++++++++++++++---------------- tests/ngProgressProviderSpec.js | 11 ++ 5 files changed, 318 insertions(+), 291 deletions(-) diff --git a/build/ngprogress.js b/build/ngprogress.js index 1527a4b..106d36c 100644 --- a/build/ngprogress.js +++ b/build/ngprogress.js @@ -3,19 +3,19 @@ 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 +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..999e595 100644 --- a/build/ngprogress.min.js +++ b/build/ngprogress.min.js @@ -3,6 +3,6 @@ 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 +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/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 () { From 99a3f13f326d55609b020f05c88c7c39039c5c70 Mon Sep 17 00:00:00 2001 From: Tiago Resende Date: Fri, 14 Aug 2015 16:38:43 -0300 Subject: [PATCH 2/4] Adjust main reference in bower.json --- bower.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 409ffa5..a7b0569 100644 --- a/bower.json +++ b/bower.json @@ -2,8 +2,8 @@ "name": "ngprogress", "version": "1.1.2", "main": [ - "build/ngProgress.js", - "ngProgress.css" + "build/ngprogress.js", + "ngprogress.css" ], "ignore": [ "**/.*", From bf74b57b91468e03b336a1212d1ba26fc9f67abc Mon Sep 17 00:00:00 2001 From: Tiago Resende Date: Fri, 14 Aug 2015 16:52:54 -0300 Subject: [PATCH 3/4] Update version --- bower.json | 2 +- build/ngprogress.js | 2 +- build/ngprogress.min.js | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index a7b0569..fa3f214 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ngprogress", - "version": "1.1.2", + "version": "1.1.3", "main": [ "build/ngprogress.js", "ngprogress.css" diff --git a/build/ngprogress.js b/build/ngprogress.js index 106d36c..73eb307 100644 --- a/build/ngprogress.js +++ b/build/ngprogress.js @@ -1,5 +1,5 @@ /* -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 diff --git a/build/ngprogress.min.js b/build/ngprogress.min.js index 999e595..3137aad 100644 --- a/build/ngprogress.min.js +++ b/build/ngprogress.min.js @@ -1,5 +1,5 @@ /* -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 diff --git a/package.json b/package.json index 2a24759..416357e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngprogress", - "version": "1.1.2", + "version": "1.1.3", "description": "slim, site-wide progressbar for AngularJS", "main": "ngProgress.js", "repository": { From 8a64a0ea9286ceb45e2fea437cab2779d83f77c8 Mon Sep 17 00:00:00 2001 From: Tiago Resende Date: Fri, 14 Aug 2015 17:56:57 -0300 Subject: [PATCH 4/4] Update CSS reference --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index fa3f214..174b394 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,7 @@ "version": "1.1.3", "main": [ "build/ngprogress.js", - "ngprogress.css" + "ngProgress.css" ], "ignore": [ "**/.*", diff --git a/package.json b/package.json index 416357e..955e1cb 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "ngprogress", "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"