From b93c26dad7ca2484583d1e1b611359a9c79077a3 Mon Sep 17 00:00:00 2001 From: harshitgoel96 Date: Fri, 7 Aug 2015 07:53:15 +0100 Subject: [PATCH 1/3] updated directive to add a text to show below svg --- angular-progress-arc.js | 16 ++++++++++++---- angular-progress-arc.min.js | 3 +-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/angular-progress-arc.js b/angular-progress-arc.js index 5213e77..7d36f2a 100644 --- a/angular-progress-arc.js +++ b/angular-progress-arc.js @@ -10,7 +10,8 @@ size: 200, strokeWidth: 20, stroke: 'black', - background: null + background: null, + textval: '' }; this.setDefault = function (name, value) { @@ -20,9 +21,11 @@ this.$get = function () { return function (attr) { - angular.forEach(defaults, function (value, key) { + angular.forEach(defaults, function (value, key) { + if (!attr[key]) { attr[key] = value; + } }); }; @@ -38,7 +41,9 @@ stroke: '@', // Color/appearance of stroke. counterClockwise: '@', // Boolean value indicating complete: '&', // Expression evaluating to float [0.0, 1.0] - background: '@' // Color of the background ring. Defaults to null. + background: '@', // Color of the background ring. Defaults to null. + textval: '@' //text to be displayed below the arc + }, compile: function (element, attr) { @@ -55,6 +60,7 @@ }; scope.$watchCollection('[size, strokeWidth]', updateRadius); updateRadius(); + }; }, template: @@ -79,7 +85,9 @@ '{{ (counterClockwise && counterClockwise != \'false\') ? \' translate(0, \' + size + \') scale(1, -1)\' : \'\' }}"' + '/>' + '' + + + '
' }; }]); -})(window.angular); +})(window.angular); \ No newline at end of file diff --git a/angular-progress-arc.min.js b/angular-progress-arc.min.js index 4ee6724..3395798 100644 --- a/angular-progress-arc.min.js +++ b/angular-progress-arc.min.js @@ -1,2 +1 @@ -/*! angular-progress-arc - v1.0.0 (http://mathewbyrne.github.io/angular-progress-arc/) */ -!function(a){"use strict";var b=a.module("angular-progress-arc",[]);b.provider("progressArcDefaults",function(){var b={size:200,strokeWidth:20,stroke:"black",background:null};this.setDefault=function(a,c){return b[a]=c,this},this.$get=function(){return function(c){a.forEach(b,function(a,b){c[b]||(c[b]=a)})}}}),b.directive("progressArc",["progressArcDefaults",function(a){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@"},compile:function(b,c){return a(c),function(a){a.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var b=function(){a.strokeWidthCapped=Math.min(a.strokeWidth,a.size/2-1),a.radius=Math.max((a.size-a.strokeWidthCapped)/2-1,0),a.circumference=2*Math.PI*a.radius};a.$watchCollection("[size, strokeWidth]",b),b()}},template:'"}}])}(window.angular); \ No newline at end of file +!function(t){"use strict";var e=t.module("angular-progress-arc",[]);e.provider("progressArcDefaults",function(){var e={size:200,strokeWidth:20,stroke:"black",background:null,textval:""};this.setDefault=function(t,r){return e[t]=r,this},this.$get=function(){return function(r){t.forEach(e,function(t,e){r[e]||(r[e]=t)})}}}),e.directive("progressArc",["progressArcDefaults",function(t){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@",textval:"@"},compile:function(e,r){return t(r),function(t){t.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var e=function(){t.strokeWidthCapped=Math.min(t.strokeWidth,t.size/2-1),t.radius=Math.max((t.size-t.strokeWidthCapped)/2-1,0),t.circumference=2*Math.PI*t.radius};t.$watchCollection("[size, strokeWidth]",e),e()}},template:'
"}}])}(window.angular); \ No newline at end of file From 5e92cee25acb84aa4535253695a90735eed1d449 Mon Sep 17 00:00:00 2001 From: harshitgoel96 Date: Fri, 7 Aug 2015 08:23:23 +0100 Subject: [PATCH 2/3] corrected indenting of text and arc, both now cetered properly --- README.md | 8 ++++++-- angular-progress-arc.js | 9 +++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e6b5071..62fcee6 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ Features - Utilises SVG for rendering. - Adjustable dimensions, color and thickness. - No additional dependencies outside of AngularJS. +- Now add text that will be displaying below the progress arc Installation ============ @@ -44,7 +45,10 @@ Add a `progress-arc` element to your application as required. stroke-width="{integer}" complete="{expression}" counter-clockwise="{string}" - background="{string}"> + background="{string}" + textval="{string}" + > + ``` @@ -57,7 +61,7 @@ Attributes - `complete` is an expression that should evaluate to a float value between 0.0 and 1.0; where 0.0 is an empty progress arc, and 1.0 is a full ring. - `counter-clockwise` is a boolean value that will render the progress arc in a counter-clockwise direction. Any value Javascript would recognise as true will be treated as such, with the exception of the literal string __false__ which will be treated as a boolean `false`. - `background` defines the color of the ring background. If not defined, no background is rendered. - +- `textval` defines the text that needs to be displayed below the progress arc Styling ======= diff --git a/angular-progress-arc.js b/angular-progress-arc.js index 7d36f2a..2b1fafa 100644 --- a/angular-progress-arc.js +++ b/angular-progress-arc.js @@ -11,7 +11,7 @@ strokeWidth: 20, stroke: 'black', background: null, - textval: '' + textval: null }; this.setDefault = function (name, value) { @@ -64,7 +64,8 @@ }; }, template: - '' + + '
'+ + '' + '' + - '' + ''+'
' + - '
' + '
' }; }]); From 1722811744c618d8005ae19ef4df90a5990f3d09 Mon Sep 17 00:00:00 2001 From: harshitgoel96 Date: Fri, 7 Aug 2015 08:27:00 +0100 Subject: [PATCH 3/3] corrected indenting of text and arc, both now cetered properly --- README.md | 8 +------- angular-progress-arc.min.js | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 62fcee6..da7f6f5 100644 --- a/README.md +++ b/README.md @@ -19,13 +19,7 @@ Features Installation ============ -This module can be installed using bower: - -```shell -bower install angular-progress-arc --save -``` - -Otherwise, simply add the `angular-progress-arc.min.js` file to your project. +Simply download add the `angular-progress-arc.min.js` file to your project. Usage ===== diff --git a/angular-progress-arc.min.js b/angular-progress-arc.min.js index 3395798..746a7e9 100644 --- a/angular-progress-arc.min.js +++ b/angular-progress-arc.min.js @@ -1 +1 @@ -!function(t){"use strict";var e=t.module("angular-progress-arc",[]);e.provider("progressArcDefaults",function(){var e={size:200,strokeWidth:20,stroke:"black",background:null,textval:""};this.setDefault=function(t,r){return e[t]=r,this},this.$get=function(){return function(r){t.forEach(e,function(t,e){r[e]||(r[e]=t)})}}}),e.directive("progressArc",["progressArcDefaults",function(t){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@",textval:"@"},compile:function(e,r){return t(r),function(t){t.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var e=function(){t.strokeWidthCapped=Math.min(t.strokeWidth,t.size/2-1),t.radius=Math.max((t.size-t.strokeWidthCapped)/2-1,0),t.circumference=2*Math.PI*t.radius};t.$watchCollection("[size, strokeWidth]",e),e()}},template:'
"}}])}(window.angular); \ No newline at end of file +!function(t){"use strict";var e=t.module("angular-progress-arc",[]);e.provider("progressArcDefaults",function(){var e={size:200,strokeWidth:20,stroke:"black",background:null,textval:null};this.setDefault=function(t,r){return e[t]=r,this},this.$get=function(){return function(r){t.forEach(e,function(t,e){r[e]||(r[e]=t)})}}}),e.directive("progressArc",["progressArcDefaults",function(t){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@",textval:"@"},compile:function(e,r){return t(r),function(t){t.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var e=function(){t.strokeWidthCapped=Math.min(t.strokeWidth,t.size/2-1),t.radius=Math.max((t.size-t.strokeWidthCapped)/2-1,0),t.circumference=2*Math.PI*t.radius};t.$watchCollection("[size, strokeWidth]",e),e()}},template:'
'}}])}(window.angular); \ No newline at end of file