fix(progressbar): use max value on stacked progress bar

Fixes angular-ui#3618
groupsky · Jun 17, 2015 · 09ba4df · 09ba4df
1 parent 49e73a8
commit 09ba4df
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 4 deletions.
diff --git a/src/progressbar/progressbar.js b/src/progressbar/progressbar.js
@@ -19,10 +19,16 @@ angular.module('ui.bootstrap.progressbar', [])
 
         this.bars.push(bar);
 
+        bar.max = $scope.max;
+
         bar.$watch('value', function( value ) {
-            bar.percent = +(100 * value / $scope.max).toFixed(2);
+            bar.recalculatePercentage();
         });
 
+        bar.recalculatePercentage = function() {
+            bar.percent = +(100 * bar.value / bar.max).toFixed(2);
+        };
+
         bar.$on('$destroy', function() {
             element = null;
             self.removeBar(bar);
@@ -32,6 +38,14 @@ angular.module('ui.bootstrap.progressbar', [])
     this.removeBar = function(bar) {
         this.bars.splice(this.bars.indexOf(bar), 1);
     };
+
+    $scope.$watch('max', (function(self){
+        return function(max) {
+            self.bars.forEach(function (bar) {
+                bar.max = $scope.max;
+                bar.recalculatePercentage();
+            });
+        }})(this));
 }])
 
 .directive('progress', function() {
@@ -41,7 +55,9 @@ angular.module('ui.bootstrap.progressbar', [])
         transclude: true,
         controller: 'ProgressController',
         require: 'progress',
-        scope: {},
+        scope: {
+          max: '=?'
+        },
         templateUrl: 'template/progressbar/progress.html'
     };
 })
@@ -54,7 +70,6 @@ angular.module('ui.bootstrap.progressbar', [])
         require: '^progress',
         scope: {
             value: '=',
-            max: '=?',
             type: '@'
         },
         templateUrl: 'template/progressbar/bar.html',

diff --git a/src/progressbar/test/progressbar.spec.js b/src/progressbar/test/progressbar.spec.js
@@ -116,7 +116,7 @@ describe('progressbar directive', function () {
     it('transcludes "bar" text', function() {
       expect(getBar(0).text()).toBe('22/200');
     });
-    
+
     it('adjusts the valuemax when it changes', function() {
       expect(getBar(0).attr('aria-valuemax')).toBe('200');
       $rootScope.max = 300;
@@ -215,5 +215,49 @@ describe('progressbar directive', function () {
       expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-success');
       expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-warning');
     });
+
+    describe('"max" attribute', function() {
+      beforeEach(inject(function() {
+        $rootScope.max = 200;
+        element = $compile('<progress max="max" animate="false"><bar ng-repeat="o in objects" value="o.value">{{o.value}}/{{max}}</bar></progress>')($rootScope);
+        $rootScope.$digest();
+      }));
+
+      it('has the appropriate aria markup', function() {
+        expect(getBar(0).attr('aria-valuemax')).toBe('200');
+      });
+
+      it('adjusts the "bar" width when it changes', function() {
+        expect(getBar(0).css('width')).toBe('5%');
+        $rootScope.max = 250;
+        $rootScope.$digest();
+        expect(getBar(0).css('width')).toBe('4%');
+      });
+
+      it('adjusts the "bar" width when value changes', function() {
+        $rootScope.objects[0].value = 60;
+        $rootScope.$digest();
+        expect(getBar(0).css('width')).toBe('30%');
+
+        $rootScope.objects[0].value += 12;
+        $rootScope.$digest();
+        expect(getBar(0).css('width')).toBe('36%');
+
+        $rootScope.objects[0].value = 0;
+        $rootScope.$digest();
+        expect(getBar(0).css('width')).toBe('0%');
+      });
+
+      it('transcludes "bar" text', function() {
+        expect(getBar(0).text()).toBe('10/200');
+      });
+
+      it('adjusts the valuemax when it changes', function() {
+        expect(getBar(0).attr('aria-valuemax')).toBe('200');
+        $rootScope.max = 300;
+        $rootScope.$digest();
+        expect(getBar(0).attr('aria-valuemax')).toBe('300');
+      });
+    });
   });
 });