├── .gitignore
├── CONTRIBUTE.md
├── Gruntfile.js
├── README.md
├── angular-progressbar.js
├── bower.json
├── dist
├── angular-progressbar.js
├── angular-progressbar.min.js
└── angular-progressbar.min.js.map
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | *.sublime-project
2 | *.sublime-workspace
3 |
4 | bower_components
5 | node_modules
6 |
7 | .DS_Store
8 |
--------------------------------------------------------------------------------
/CONTRIBUTE.md:
--------------------------------------------------------------------------------
1 | In order to Contribute just git clone the repository and then run:
2 |
3 | ```
4 | npm install grunt-cli --global
5 | npm install
6 | grunt
7 | ```
8 |
9 | All changes must be done in angular-progressbar.js and then after running grunt all changes will be submited to dist/
10 |
11 | Please submit a Pull Request or create issues for anything you want :).
12 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 |
3 | module.exports = function (grunt) {
4 | grunt.initConfig({
5 | pkg: grunt.file.readJSON('bower.json'),
6 | concat: {
7 | options: {
8 | stripBanners: {
9 | 'block': true,
10 | 'line': true
11 | },
12 | banner: '/*\n<%= pkg.name %> <%= pkg.version %> - <%= pkg.description %> \nCopyright (C) 2014 - <%= pkg.authors %> and contributors \nLicense: <%= pkg.license %> \nSource: <%= pkg.homepage %> \nDate Compiled: <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
13 | },
14 | dist: {
15 | src: ['angular-progressbar.js'],
16 | dest: 'dist/angular-progressbar.js'
17 | }
18 | },
19 | uglify: {
20 | options: {
21 | banner: '/*\n<%= pkg.name %> <%= pkg.version %> - <%= pkg.description %> \nCopyright (C) 2014 - <%= pkg.authors %> and contributors \nLicense: <%= pkg.license %> \nSource: <%= pkg.homepage %> \nDate Compiled: <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n',
22 | sourceMap: true
23 | },
24 | build: {
25 | src: 'dist/<%= pkg.name %>.js',
26 | dest: 'dist/<%= pkg.name %>.min.js'
27 | }
28 | },
29 | jshint: {
30 | options: {
31 | browser: true
32 | },
33 | all: 'src/*.js'
34 | }
35 | });
36 |
37 | grunt.registerTask('version', function(file_version){
38 | var bower = grunt.file.readJSON('bower.json');
39 | var npm_package = grunt.file.readJSON('package.json');
40 |
41 | bower.version = file_version;
42 | npm_package.version = file_version;
43 |
44 | fs.writeFileSync('bower.json', JSON.stringify(bower, null, 4));
45 | fs.writeFileSync('package.json', JSON.stringify(npm_package, null, 4));
46 | })
47 |
48 | grunt.loadNpmTasks('grunt-contrib-uglify');
49 | grunt.loadNpmTasks('grunt-contrib-jshint');
50 | grunt.loadNpmTasks('grunt-contrib-concat');
51 | grunt.loadNpmTasks('grunt-karma');
52 | grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
53 | };
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | angular-progressbar
2 | ===================
3 |
4 | Progressbar.js support for AngularJS http://kimmobrunfeldt.github.io/progressbar.js/
5 |
6 | ## Setup JavaScript
7 |
8 | So far this is what I have found.
9 | On JavaScript, add the module as a dependency:
10 | ``` JavaScript
11 | angular.module('demo', ['angularProgressbar']);
12 | ```
13 |
14 | ## Setup HTML
15 |
16 | On HTML, add the corresponding directive tag e.g.:
17 | ``` HTML
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | ```
27 |
28 | The `progress-key` parameter is required
29 |
30 | ## Passing _options_ to directive
31 |
32 | So far, to pass options you do the flowing, on the controller set a variable in the $scope to use as the options. In my case I named it options so I set `$scope.options`. You can set, say, `$scope.circleOptions` if you wish.
33 |
34 | ```JavaScript
35 | angular.module('demo', ['angularProgressbar'])
36 | .controller('demoCtrl', ['$scope', '$pbService',
37 | function( $scope, $pbService ){
38 | $scope.options = {
39 | color: '#FCB03C',
40 | duration: 3000,
41 | easing: 'easeInOut'};
42 | $scope.circleOptions = {
43 | color: '#FCBB33',
44 | duration: 2000,
45 | easing: 'easeInOut'};
46 | }]);
47 | ```
48 |
49 | In the HTML you add an attribute called `options` and you put the scope variable as the value.
50 |
51 | ```HTML
52 |
53 | \
54 |
55 | ```
56 |
57 | ## `animate`, `set`, or `stop`
58 |
59 | Turns out that you can handle the animate, set or stop through the controller, e.g.:
60 |
61 | ### Javascript
62 |
63 | ```JavaScript
64 | angular.module('demo', ['angularProgressbar'])
65 | .controller('demoCtrl', ['$scope', '$pbService', '$timeout',
66 | function( $scope, $pbService, $timeout ){
67 | $scope.options = {
68 | color: '#FCB03C',
69 | duration: 3000,
70 | easing: 'easeInOut'
71 | };
72 | $scope.lineProgress = 0;
73 |
74 | $scope.animateLine = function(){
75 | $scope.lineProgress = $scope.lineProgress + .05;
76 | $pbService.animate('myLine', $scope.lineProgress, $scope.options);
77 | };
78 | $scope.setLine = function(){
79 | $scope.lineProgress = $scope.lineProgress + .05;
80 | $pbService.set('myCircle', $scope.lineProgress);
81 | };
82 | $timeout(function() {
83 | $scope.setLine();
84 | $scope.animateLine();
85 | console.log('update progress bar')
86 | }, 3000);
87 | }]);
88 | ```
89 |
90 | ### HTML
91 |
92 | ```html
93 |
94 |
95 |
angular-progressbar.js samples
96 |
97 |
Current progress value: {{lineProgress}}
98 |
102 |
103 |
104 | ```
105 |
106 | Fiddle coming soon...
107 |
--------------------------------------------------------------------------------
/angular-progressbar.js:
--------------------------------------------------------------------------------
1 | /*
2 | angular-progressbar 0.1.0 - Progressbar.js support for AngularJS http://kimmobrunfeldt.github.io/progressbar.js/
3 | Copyright (C) 2014 - Felipe Campos Clarke and contributors
4 | License: MIT
5 | Source: https://github.com/felipecamposclarke/angular-progressbar
6 | Date Compiled: 2014-10-28
7 | */
8 |
9 | (function (root) {
10 | 'use strict';
11 |
12 | function factory(angular, ProgressBar) {
13 |
14 | var angularProgressbar = angular.module('angularProgressbar', []),
15 | ProgressbarTypes = ['line', 'circle', 'square', 'path'];
16 |
17 | angularProgressbar.factory('$pbService', ['$rootScope', function ($rootScope) {
18 |
19 | var config = {};
20 |
21 | config.animate = function (key, progress, options, cb) {
22 | $rootScope.$broadcast('progressbar:animate', key, progress, options, cb);
23 | };
24 |
25 | config.stop = function (key) {
26 | $rootScope.$broadcast('progressbar:stop', key);
27 | };
28 |
29 | config.set = function (key, progress) {
30 | $rootScope.$broadcast('progressbar:stop', key, progress);
31 | };
32 |
33 | return config;
34 | }])
35 |
36 | angular.forEach(ProgressbarTypes, function(type){
37 | var name = type.charAt(0).toUpperCase() + type.slice(1);
38 | var directiveName = 'pb' + name;
39 |
40 | angularProgressbar.directive(directiveName, ['$window', '$timeout', function ($window, $timeout) {
41 | return {
42 | scope: {
43 | options: "="
44 | },
45 | link: function (scope, element, attr) {
46 |
47 | if(typeof scope.options !== 'object' && attr.options)
48 | throw new Error("the options aren't correct!");
49 |
50 | if(!angular.isDefined(attr.progressKey))
51 | throw new Error("the progress key is not defined");
52 |
53 | var ProgressBarConstructor = ProgressBar || $window.ProgressBar;
54 | var el = element[0];
55 |
56 | scope.progressbar = null;
57 | scope.key = attr.progressKey;
58 |
59 | scope.animate = function (progress, options, cb) {
60 | options = options || {};
61 | if (scope.progressbar)
62 | scope.progressbar.animate(progress, options, cb);
63 | };
64 |
65 | scope.stop = function () {
66 | scope.progressbar.stop();
67 | };
68 |
69 | scope.set = function (progress) {
70 | scope.progressbar.set(progress);
71 | };
72 |
73 | scope.$on('progressbar:animate', function (event, key, progress, options, cb) {
74 | if (key === scope.key)
75 | $timeout(function () {
76 | scope.animate(progress, options, cb);
77 | });
78 | });
79 |
80 | scope.$on('progressbar:stop', function (event, key) {
81 | if (key === scope.key)
82 | $timeout(function () {
83 | scope.stop();
84 | });
85 | });
86 |
87 | scope.$on('progressbar:set', function (event, key, progress) {
88 | if (key === scope.key)
89 | $timeout(function () {
90 | scope.set(progress);
91 | });
92 | });
93 |
94 | scope.$on('$destroy', function () {
95 | el.innerHTML = '';
96 | scope.progressbar = null;
97 | });
98 |
99 | scope.$watchCollection('options', function (options) {
100 | el.innerHTML = '';
101 | scope.progressbar = new ProgressBarConstructor[name](el, options);
102 | });
103 |
104 | }
105 | };
106 | }]);
107 | });
108 | }
109 |
110 | if (typeof define === 'function' && define.amd) {
111 | /* AMD module */
112 | define(['angular', 'progressbar'], factory);
113 | } else {
114 | /* Browser global */
115 | factory(root.angular);
116 | }
117 | }(window));
118 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-progressbar",
3 | "main": "angular-progressbar.js",
4 | "version": "0.1.0",
5 | "authors": [
6 | "Felipe Campos Clarke "
7 | ],
8 | "description": "Progressbar.js support for AngularJS http://kimmobrunfeldt.github.io/progressbar.js/",
9 | "license": "MIT",
10 | "homepage": "https://github.com/felipecamposclarke/angular-progressbar",
11 | "ignore": [
12 | "**/.*",
13 | "node_modules",
14 | "bower_components",
15 | "test",
16 | "tests"
17 | ],
18 | "dependencies": {
19 | "angular": ">=1.0.6",
20 | "progressbar.js": "~0.5.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/dist/angular-progressbar.js:
--------------------------------------------------------------------------------
1 | /*
2 | angular-progressbar 0.1.0 - Progressbar.js support for AngularJS http://kimmobrunfeldt.github.io/progressbar.js/
3 | Copyright (C) 2014 - Felipe Campos Clarke and contributors
4 | License: MIT
5 | Source: https://github.com/felipecamposclarke/angular-progressbar
6 | Date Compiled: 2014-10-28
7 | */
8 | (function (root) {
9 | 'use strict';
10 |
11 | function factory(angular, ProgressBar) {
12 |
13 | var angularProgressbar = angular.module('angularProgressbar', []),
14 | ProgressbarTypes = ['line', 'circle', 'square', 'path'];
15 |
16 | angularProgressbar.factory('$pbService', ['$rootScope', function ($rootScope) {
17 |
18 | var config = {};
19 |
20 | config.animate = function (key, progress, options, cb) {
21 | $rootScope.$broadcast('progressbar:animate', key, progress, options, cb);
22 | };
23 |
24 | config.stop = function (key) {
25 | $rootScope.$broadcast('progressbar:stop', key);
26 | };
27 |
28 | config.set = function (key, progress) {
29 | $rootScope.$broadcast('progressbar:stop', key, progress);
30 | };
31 |
32 | return config;
33 | }])
34 |
35 | angular.forEach(ProgressbarTypes, function(type){
36 | var name = type.charAt(0).toUpperCase() + type.slice(1);
37 | var directiveName = 'pb' + name;
38 |
39 | angularProgressbar.directive(directiveName, ['$window', '$timeout', function ($window, $timeout) {
40 | return {
41 | scope: {
42 | options: "="
43 | },
44 | link: function (scope, element, attr) {
45 |
46 | if(typeof scope.options !== 'object' && attr.options)
47 | throw new Error("the options aren't correct!");
48 |
49 | if(!angular.isDefined(attr.progressKey))
50 | throw new Error("the progress key is not defined");
51 |
52 | var ProgressBarConstructor = ProgressBar || $window.ProgressBar;
53 | var el = element[0];
54 |
55 | scope.progressbar = null;
56 | scope.key = attr.progressKey;
57 |
58 | scope.animate = function (progress, options, cb) {
59 | options = options || {};
60 | if (scope.progressbar)
61 | scope.progressbar.animate(progress, options, cb);
62 | };
63 |
64 | scope.stop = function () {
65 | scope.progressbar.stop();
66 | };
67 |
68 | scope.set = function (progress) {
69 | scope.progressbar.set(progress);
70 | };
71 |
72 | scope.$on('progressbar:animate', function (event, key, progress, options, cb) {
73 | if (key === scope.key)
74 | $timeout(function () {
75 | scope.animate(progress, options, cb);
76 | });
77 | });
78 |
79 | scope.$on('progressbar:stop', function (event, key) {
80 | if (key === scope.key)
81 | $timeout(function () {
82 | scope.stop();
83 | });
84 | });
85 |
86 | scope.$on('progressbar:set', function (event, key, progress) {
87 | if (key === scope.key)
88 | $timeout(function () {
89 | scope.set(progress);
90 | });
91 | });
92 |
93 | scope.$on('$destroy', function () {
94 | el.innerHTML = '';
95 | scope.progressbar = null;
96 | });
97 |
98 | scope.$watchCollection('options', function (options) {
99 | el.innerHTML = '';
100 | scope.progressbar = new ProgressBarConstructor[name](el, options);
101 | });
102 |
103 | }
104 | };
105 | }]);
106 | });
107 | }
108 |
109 | if (typeof define === 'function' && define.amd) {
110 | /* AMD module */
111 | define(['angular', 'progressbar'], factory);
112 | } else {
113 | /* Browser global */
114 | factory(root.angular);
115 | }
116 | }(window));
117 |
--------------------------------------------------------------------------------
/dist/angular-progressbar.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | angular-progressbar 0.1.0 - Progressbar.js support for AngularJS http://kimmobrunfeldt.github.io/progressbar.js/
3 | Copyright (C) 2014 - Felipe Campos Clarke and contributors
4 | License: MIT
5 | Source: https://github.com/felipecamposclarke/angular-progressbar
6 | Date Compiled: 2014-10-28
7 | */
8 |
9 | !function(a){"use strict";function b(a,b){var c=a.module("angularProgressbar",[]),d=["line","circle","square","path"];c.factory("$pbService",["$rootScope",function(a){var b={};return b.animate=function(b,c,d,e){a.$broadcast("progressbar:animate",b,c,d,e)},b.stop=function(b){a.$broadcast("progressbar:stop",b)},b.set=function(b,c){a.$broadcast("progressbar:stop",b,c)},b}]),a.forEach(d,function(d){var e=d.charAt(0).toUpperCase()+d.slice(1),f="pb"+e;c.directive(f,["$window","$timeout",function(c,d){return{scope:{options:"="},link:function(f,g,h){if("object"!=typeof f.options&&h.options)throw new Error("the options aren't correct!");if(!a.isDefined(h.progressKey))throw new Error("the progress key is not defined");var i=b||c.ProgressBar,j=g[0];f.progressbar=null,f.key=h.progressKey,f.animate=function(a,b,c){b=b||{},f.progressbar&&f.progressbar.animate(a,b,c)},f.stop=function(){f.progressbar.stop()},f.set=function(a){f.progressbar.set(a)},f.$on("progressbar:animate",function(a,b,c,e,g){b===f.key&&d(function(){f.animate(c,e,g)})}),f.$on("progressbar:stop",function(a,b){b===f.key&&d(function(){f.stop()})}),f.$on("progressbar:set",function(a,b,c){b===f.key&&d(function(){f.set(c)})}),f.$on("$destroy",function(){j.innerHTML="",f.progressbar=null}),f.$watchCollection("options",function(a){j.innerHTML="",f.progressbar=new i[e](j,a)})}}}])})}"function"==typeof define&&define.amd?define(["angular","progressbar"],b):b(a.angular)}(window);
10 | //# sourceMappingURL=angular-progressbar.min.js.map
--------------------------------------------------------------------------------
/dist/angular-progressbar.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"angular-progressbar.min.js","sources":["angular-progressbar.js"],"names":["root","factory","angular","ProgressBar","angularProgressbar","module","ProgressbarTypes","$rootScope","config","animate","key","progress","options","cb","$broadcast","stop","set","forEach","type","name","charAt","toUpperCase","slice","directiveName","directive","$window","$timeout","scope","link","element","attr","Error","isDefined","progressKey","ProgressBarConstructor","el","progressbar","$on","event","innerHTML","$watchCollection","define","amd","window"],"mappings":";;;;;;;;CAOC,SAAUA,GACT,YAEA,SAASC,GAAQC,EAASC,GAExB,GAAIC,GAAqBF,EAAQG,OAAO,yBAC3CC,GAAoB,OAAQ,SAAU,SAAU,OAE7CF,GAAmBH,QAAQ,cAAe,aAAc,SAAUM,GAEhE,GAAIC,KAcJ,OAZAA,GAAOC,QAAU,SAAUC,EAAKC,EAAUC,EAASC,GACxDN,EAAWO,WAAW,sBAAuBJ,EAAKC,EAAUC,EAASC,IAGhEL,EAAOO,KAAO,SAAUL,GAC7BH,EAAWO,WAAW,mBAAoBJ,IAGrCF,EAAOQ,IAAM,SAAUN,EAAKC,GACjCJ,EAAWO,WAAW,mBAAoBJ,EAAKC,IAGnCH,KAGTN,EAAQe,QAAQX,EAAkB,SAASY,GACzC,GAAIC,GAAOD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GACjDC,EAAgB,KAAOJ,CAE3Bf,GAAmBoB,UAAUD,GAAgB,UAAW,WAAY,SAAUE,EAASC,GAC5F,OACEC,OACEf,QAAS,KAEXgB,KAAM,SAAUD,EAAOE,EAASC,GAE9B,GAA4B,gBAAlBH,GAAMf,SAAwBkB,EAAKlB,QAC3C,KAAM,IAAImB,OAAM,8BAElB,KAAI7B,EAAQ8B,UAAUF,EAAKG,aACzB,KAAM,IAAIF,OAAM,kCAElB,IAAIG,GAAyB/B,GAAesB,EAAQtB,YAChDgC,EAAKN,EAAQ,EAEjBF,GAAMS,YAAc,KACpBT,EAAMjB,IAAMoB,EAAKG,YAEjBN,EAAMlB,QAAU,SAAUE,EAAUC,EAASC,GAC3CD,EAAUA,MACNe,EAAMS,aACfT,EAAMS,YAAY3B,QAAQE,EAAUC,EAASC,IAG1Cc,EAAMZ,KAAO,WACXY,EAAMS,YAAYrB,QAGpBY,EAAMX,IAAM,SAAUL,GACpBgB,EAAMS,YAAYpB,IAAIL,IAGxBgB,EAAMU,IAAI,sBAAuB,SAAUC,EAAO5B,EAAKC,EAAUC,EAASC,GACpEH,IAAQiB,EAAMjB,KACvBgB,EAAS,WACPC,EAAMlB,QAAQE,EAAUC,EAASC,OAIhCc,EAAMU,IAAI,mBAAoB,SAAUC,EAAO5B,GACzCA,IAAQiB,EAAMjB,KACvBgB,EAAS,WACPC,EAAMZ,WAILY,EAAMU,IAAI,kBAAmB,SAAUC,EAAO5B,EAAKC,GAC7CD,IAAQiB,EAAMjB,KACvBgB,EAAS,WACPC,EAAMX,IAAIL,OAITgB,EAAMU,IAAI,WAAY,WACpBF,EAAGI,UAAY,GACfZ,EAAMS,YAAc,OAGtBT,EAAMa,iBAAiB,UAAW,SAAU5B,GAC1CuB,EAAGI,UAAY,GACfZ,EAAMS,YAAc,GAAIF,GAAuBf,GAAMgB,EAAIvB,YAS1C,kBAAX6B,SAAyBA,OAAOC,IAEzCD,QAAQ,UAAW,eAAgBxC,GAGnCA,EAAQD,EAAKE,UAEbyC"}
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-progressbar",
3 | "version": "0.1.0",
4 | "description": "",
5 | "repository": {
6 | "type": "git",
7 | "url": "git://github.com/felipecamposclarke/angular-progressbar.git"
8 | },
9 | "devDependencies": {
10 | "grunt": "^0.4.5",
11 | "grunt-contrib-concat": "^0.5.0",
12 | "grunt-contrib-jshint": "^0.10.0",
13 | "grunt-contrib-uglify": "^0.6.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------