feat(progressbar): add progressbar directive

Closes #187

Author: bekos

src/progressbar/docs/demo.html

@@ -0,0 +1,27 @@
+<div ng-controller="ProgressDemoCtrl" class="well">
+    <h2>Static</h2>
+    <div class="row-fluid">
+        <div class="span4"><progress value="55"></progress></div>
+        <div class="span4"><progress value="22" class="progress-warning progress-striped"></progress></div>
+        <div class="span4"><progress value="88" class="progress-danger progress-striped active"></div>
+    </div>
+    
+    <h2>Dynamic <button class="btn btn-primary" type="button" ng-click="random()">Randomize</button></h2>
+    <pre>Value: {{dynamic}}</pre>
+    <progress value="dynamic"></progress>
+    
+    <small><em>No animation</em></small>
+    <progress value="dynamic" class="progress-success" animate="false"></progress>
+
+    <small><em>Object (changes type based on value)</em></small>
+    <progress value="dynamicObject" class="progress-striped active"></progress>
+    
+    <h2>Stacked <button class="btn btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h2>
+    <small><em>Array values with automatic types</em></small>
+    <pre>Value: {{stackedArray}}</pre>
+    <progress value="stackedArray" auto-type="true"></progress>
+    
+    <small><em>Objects</em></small>
+    <pre>Value: {{stacked}}</pre>
+    <progress value="stacked"></progress>
+</div>

src/progressbar/docs/demo.js

@@ -0,0 +1,44 @@
+var ProgressDemoCtrl = function ($scope) {
+   
+  $scope.random = function() {
+    var value = Math.floor((Math.random()*100)+1);
+    var type;
+
+    if (value < 25) {
+      type = 'success';
+    } else if (value < 50) {
+      type = 'info';
+    } else if (value < 75) {
+      type = 'warning';
+    } else {
+      type = 'danger';
+    }
+
+    $scope.dynamic = value;
+    $scope.dynamicObject = {
+      value: value,
+      type: type
+    };
+  };
+  $scope.random();
+  
+  var types = ['success', 'info', 'warning', 'danger'];
+  $scope.randomStacked = function() {
+    $scope.stackedArray = [];
+    $scope.stacked = [];
+    
+    var n = Math.floor((Math.random()*4)+1);
+
+    for (var i=0; i < n; i++) {
+        var value = Math.floor((Math.random()*30)+1);
+        $scope.stackedArray.push(value);
+        
+        var index = Math.floor((Math.random()*4));
+        $scope.stacked.push({
+          value: value,
+          type: types[index]
+        });
+    }
+  };
+  $scope.randomStacked();
+};

src/progressbar/docs/readme.md

@@ -0,0 +1,3 @@
+A lightweight progress bar directive that is focused on providing progress visualization! 
+
+The progress bar directive supports multiple (stacked) bars into the same element, optional transition animation, event handler for full & empty state and many more.

src/progressbar/progressbar.js

@@ -0,0 +1,106 @@
+angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition'])
+
+.constant('progressConfig', {
+  animate: true,
+  autoType: false,
+  stackedTypes: ['success', 'info', 'warning', 'danger']
+})
+
+.controller('ProgressBarController', ['$scope', '$attrs', 'progressConfig', function($scope, $attrs, progressConfig) {
+
+    // Whether bar transitions should be animated
+    var animate = angular.isDefined($attrs.animate) ? $scope.$eval($attrs.animate) : progressConfig.animate;
+    var autoType = angular.isDefined($attrs.autoType) ? $scope.$eval($attrs.autoType) : progressConfig.autoType;
+    var stackedTypes = angular.isDefined($attrs.stackedTypes) ? $scope.$eval('[' + $attrs.stackedTypes + ']') : progressConfig.stackedTypes;
+
+    // Create bar object
+    this.makeBar = function(newBar, oldBar, index) {
+        var newValue = (angular.isObject(newBar)) ? newBar.value : (newBar || 0);
+        var oldValue =  (angular.isObject(oldBar)) ? oldBar.value : (oldBar || 0);
+        var type = (angular.isObject(newBar) && angular.isDefined(newBar.type)) ? newBar.type : (autoType) ? getStackedType(index || 0) : null;
+
+        return {
+            from: oldValue,
+            to: newValue,
+            type: type,
+            animate: animate
+        };
+    };
+
+    function getStackedType(index) {
+        return stackedTypes[index];
+    }
+
+    this.addBar = function(bar) {
+        $scope.bars.push(bar);
+        $scope.totalPercent += bar.to;
+    };
+
+    this.clearBars = function() {
+        $scope.bars = [];
+        $scope.totalPercent = 0;
+    };
+    this.clearBars();
+}])
+
+.directive('progress', function() {
+    return {
+        restrict: 'EA',
+        replace: true,
+        controller: 'ProgressBarController',
+        scope: {
+            value: '=',
+            onFull: '&',
+            onEmpty: '&'
+        },
+        templateUrl: 'template/progressbar/progress.html',
+        link: function(scope, element, attrs, controller) {
+            scope.$watch('value', function(newValue, oldValue) {
+                controller.clearBars();
+
+                if (angular.isArray(newValue)) {
+                    // Stacked progress bar
+                    for (var i=0, n=newValue.length; i < n; i++) {
+                        controller.addBar(controller.makeBar(newValue[i], oldValue[i], i));
+                    }
+                } else {
+                    // Simple bar
+                    controller.addBar(controller.makeBar(newValue, oldValue));
+                }
+            }, true);
+
+            // Total percent listeners
+            scope.$watch('totalPercent', function(value) {
+              if (value >= 100) {
+                scope.onFull();
+              } else if (value <= 0) {
+                scope.onEmpty();
+              }
+            }, true);
+        }
+    };
+})
+
+.directive('progressbar', ['$transition', function($transition) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        scope: {
+            width: '=',
+            old: '=',
+            type: '=',
+            animate: '='
+        },
+        templateUrl: 'template/progressbar/bar.html',
+        link: function(scope, element) {
+            scope.$watch('width', function(value) {
+                if (scope.animate) {
+                    element.css('width', scope.old + '%');
+                    $transition(element, {width: value + '%'});
+                } else {
+                    element.css('width', value + '%');
+                }
+            });
+        }
+    };
+}]);