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

Commit

Permalink
fix(progressbar): user percent attribute instead of value.
Browse files Browse the repository at this point in the history
Closes #535. Problem with IE10.

BREAKING CHANGE: The 'value' is replaced by 'percent'.

  Before:

  <progress value="..."></progress>

  After:

  <progress percent="..."></progress>
  • Loading branch information
bekos authored and pkozlowski-opensource committed Jun 21, 2013
1 parent 25f6e55 commit 58efec8
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 15 deletions.
16 changes: 8 additions & 8 deletions src/progressbar/docs/demo.html
Original file line number Diff line number Diff line change
@@ -1,27 +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 class="span4"><progress percent="55"></progress></div>
<div class="span4"><progress percent="22" class="progress-warning progress-striped"></progress></div>
<div class="span4"><progress percent="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>
<progress percent="dynamic"></progress>

<small><em>No animation</em></small>
<progress value="dynamic" class="progress-success" animate="false"></progress>
<progress percent="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>
<progress percent="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>
<progress percent="stackedArray" auto-type="true"></progress>

<small><em>Objects</em></small>
<pre>Value: {{stacked}}</pre>
<progress value="stacked"></progress>
<progress percent="stacked"></progress>
</div>
2 changes: 1 addition & 1 deletion src/progressbar/progressbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition'])
replace: true,
controller: 'ProgressBarController',
scope: {
value: '=',
value: '=percent',
onFull: '&',
onEmpty: '&'
},
Expand Down
12 changes: 6 additions & 6 deletions src/progressbar/test/progressbar.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ describe('progressbar directive with no binding', function () {
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
element = $compile('<progress value="22" animate="false"></progress>')($rootScope);
element = $compile('<progress percent="22" animate="false"></progress>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -31,7 +31,7 @@ describe('progressbar directive with data-binding', function () {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootScope.percent = 33;
element = $compile('<progress value="percent" animate="false"></progress>')($rootScope);
element = $compile('<progress percent="percent" animate="false"></progress>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -90,7 +90,7 @@ describe('stacked progressbar directive', function () {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootScope.stacked = [12, 22, 33];
element = $compile('<progress value="stacked" animate="false"></progress>')($rootScope);
element = $compile('<progress percent="stacked" animate="false"></progress>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -205,7 +205,7 @@ describe('stacked progressbar directive handlers', function () {
$rootScope.stacked = [20, 30, 40]; // total: 90
$rootScope.fullHandler = jasmine.createSpy('fullHandler');
$rootScope.emptyHandler = jasmine.createSpy('emptyHandler');
element = $compile('<progress value="stacked" on-full="fullHandler()" on-empty="emptyHandler()" animate="false"></progress>')($rootScope);
element = $compile('<progress percent="stacked" on-full="fullHandler()" on-empty="emptyHandler()" animate="false"></progress>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -242,7 +242,7 @@ describe('stacked progressbar directive with auto-types', function () {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootScope.stacked = [12, 22, {value: 33}, {value: 5}, 11];
element = $compile('<progress value="stacked" animate="false" auto-type="true"></progress>')($rootScope);
element = $compile('<progress percent="stacked" animate="false" auto-type="true"></progress>')($rootScope);
$rootScope.$digest();

angular.extend(config, progressConfig);
Expand Down Expand Up @@ -311,7 +311,7 @@ describe('stacked progressbar directive with auto-types', function () {
});

it('can bypass default configuration for stacked classes from attribute', function() {
element = $compile('<progress value="stacked" stacked-types="\'danger\', \'warning\', \'success\'" auto-type="true" animate="false"></progress>')($rootScope);
element = $compile('<progress percent="stacked" stacked-types="\'danger\', \'warning\', \'success\'" auto-type="true" animate="false"></progress>')($rootScope);
$rootScope.$digest();

var stackedTypes = config.stackedTypes;
Expand Down

0 comments on commit 58efec8

Please sign in to comment.