├── .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 |
99 | 100 | 101 |
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 | --------------------------------------------------------------------------------