Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
fix(progressbar): allow fractional values for bar width
Browse files Browse the repository at this point in the history
 * Fractions are limited to two decimals, and are not included in aria values.

Closes #1761
  • Loading branch information
tjgrathwell authored and bekos committed Feb 8, 2014
1 parent 101c43a commit 0daa7a7
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/progressbar/progressbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ angular.module('ui.bootstrap.progressbar', [])
this.bars.push(bar);

bar.$watch('value', function( value ) {
bar.percent = Math.round(100 * value / $scope.max);
bar.percent = +(100 * value / $scope.max).toFixed(2);
});

bar.$on('$destroy', function() {
Expand Down
21 changes: 21 additions & 0 deletions src/progressbar/test/progressbar.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,27 @@ describe('progressbar directive', function () {
expect(bar.attr('aria-valuetext')).toBe('60%');
});

it('allows fractional "bar" width values, rounded to two places', function () {
$rootScope.value = 5.625;
$rootScope.$digest();
expect(getBar(0).css('width')).toBe('5.63%');

$rootScope.value = 1.3;
$rootScope.$digest();
expect(getBar(0).css('width')).toBe('1.3%');
});

it('does not include decimals in aria values', function () {
$rootScope.value = 50.34;
$rootScope.$digest();

var bar = getBar(0);
expect(bar.css('width')).toBe('50.34%');

expect(bar.attr('aria-valuenow')).toBe('50');
expect(bar.attr('aria-valuetext')).toBe('50%');
});

describe('"max" attribute', function () {
beforeEach(inject(function() {
$rootScope.max = 200;
Expand Down
2 changes: 1 addition & 1 deletion template/progressbar/progressbar.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="progress">
<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: percent + '%'}" aria-valuetext="{{percent}}%" ng-transclude></div>
<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value | number:0}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: percent + '%'}" aria-valuetext="{{percent | number:0}}%" ng-transclude></div>
</div>

0 comments on commit 0daa7a7

Please sign in to comment.