From 5f458bf84d5dead2ca0df88674b6bc16ff18b05e Mon Sep 17 00:00:00 2001 From: symfou Date: Sun, 2 Oct 2016 06:20:35 +0200 Subject: [PATCH] allows custom class to base element --- build/ngprogress.js | 16 +++++++++++++--- build/ngprogress.min.js | 6 +++--- readme.md | 6 ++++++ src/provider.js | 12 +++++++++++- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/build/ngprogress.js b/build/ngprogress.js index 1527a4b..fe510bb 100644 --- a/build/ngprogress.js +++ b/build/ngprogress.js @@ -1,9 +1,9 @@ /* -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: 2016-10-02 */ angular.module('ngProgress.provider', ['ngProgress.directive']) .service('ngProgress', function () { @@ -11,7 +11,7 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) return ['$document', '$window', '$compile', '$rootScope', '$timeout', function($document, $window, $compile, $rootScope, $timeout) { this.autoStyle = true; this.count = 0; - this.height = '2px'; + this.height = '2px'; this.$scope = $rootScope.$new(); this.color = 'firebrick'; this.parent = $document.find('body')[0]; @@ -41,6 +41,7 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) // TODO Use requestAnimationFrame instead of setInterval // https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame this.show(); + this.progressbarEl.addClass(this.progressElementClass); var self = this; clearInterval(this.intervalCounterId); this.intervalCounterId = setInterval(function () { @@ -84,6 +85,14 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) } } return this.color; + }; + // Add custome CLASS (juste while progress) to progressbarEl element (like as background..). Use any valid HTML (fix problems with timeout...) + // css + this.addProgressElementClass = function(new_class) { + if (new_class !== undefined) { + this.progressElementClass = new_class; + this.progressbarEl.addClass(new_class); + } }; this.hide = function() { this.progressbarEl.children().css('opacity', '0'); @@ -94,6 +103,7 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) self.show(); }, 500); }, 500); + this.progressbarEl.removeClass(this.progressElementClass) //remove added class }; this.show = function () { var self = this; diff --git a/build/ngprogress.min.js b/build/ngprogress.min.js index 177e552..49684fb 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: 2016-10-02 */ -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(),this.progressbarEl.addClass(this.progressElementClass);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.addProgressElementClass=function(a){void 0!==a&&(this.progressElementClass=a,this.progressbarEl.addClass(a))},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.progressbarEl.removeClass(this.progressElementClass)},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 diff --git a/readme.md b/readme.md index acc0590..14a52ce 100644 --- a/readme.md +++ b/readme.md @@ -71,6 +71,12 @@ ngProgress.setHeight('10px'); ngProgress.setColor('#fff'); ``` +* **addProgressElementClass** - Adds custom class to base element, while it's progressing (#ngProgress-container) + +```javascript +ngProgress.addProgressElementClass('my-class'); +``` + * **status** - Returns on how many percent the progressbar is at. Should'nt be needed ```javascript diff --git a/src/provider.js b/src/provider.js index 726f3b3..b35bc66 100644 --- a/src/provider.js +++ b/src/provider.js @@ -5,7 +5,7 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) return ['$document', '$window', '$compile', '$rootScope', '$timeout', function($document, $window, $compile, $rootScope, $timeout) { this.autoStyle = true; this.count = 0; - this.height = '2px'; + this.height = '2px'; this.$scope = $rootScope.$new(); this.color = 'firebrick'; this.parent = $document.find('body')[0]; @@ -35,6 +35,7 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) // TODO Use requestAnimationFrame instead of setInterval // https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame this.show(); + this.progressbarEl.addClass(this.progressElementClass); var self = this; clearInterval(this.intervalCounterId); this.intervalCounterId = setInterval(function () { @@ -78,6 +79,14 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) } } return this.color; + }; + // Add custome CLASS (juste while progress) to progressbarEl element (like as background..). Use any valid HTML (fix problems with timeout...) + // css + this.addProgressElementClass = function(new_class) { + if (new_class !== undefined) { + this.progressElementClass = new_class; + this.progressbarEl.addClass(new_class); + } }; this.hide = function() { this.progressbarEl.children().css('opacity', '0'); @@ -88,6 +97,7 @@ angular.module('ngProgress.provider', ['ngProgress.directive']) self.show(); }, 500); }, 500); + this.progressbarEl.removeClass(this.progressElementClass) //remove added class }; this.show = function () { var self = this;