Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 91ec2bf

Browse files
EladBezalelThomasBurleson
EladBezalel
authored and
ThomasBurleson
committed
fix(progress-linear): changed default behavior of invalid mode
- Changed default mode to be `indeterminate` - Removed `ng-hide` class appliance - Fixed progress-circular demo related to #7454 Closes #7470
1 parent a56591d commit 91ec2bf

File tree

7 files changed

+39
-37
lines changed

7 files changed

+39
-37
lines changed

‎src/components/progressCircular/demoBasicUsage/index.html

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ <h4>Theming</h4>
2727
</p>
2828

2929
<div layout="row" layout-sm="column" layout-align="space-around">
30-
<md-progress-circular class="md-hue-2" md-mode="{{vm.modes[0]}}" md-diameter="20px"></md-progress-circular>
31-
<md-progress-circular class="md-accent" md-mode="{{vm.modes[1]}}" md-diameter="40"></md-progress-circular>
32-
<md-progress-circular class="md-accent md-hue-1" md-mode="{{vm.modes[2]}}" md-diameter="60"></md-progress-circular>
33-
<md-progress-circular class="md-warn md-hue-3" md-mode="{{vm.modes[3]}}" md-diameter="70"></md-progress-circular>
34-
<md-progress-circular md-mode="{{vm.modes[4]}}" md-diameter="96"></md-progress-circular>
30+
<md-progress-circular class="md-hue-2" ng-show="vm.showList[0]" md-diameter="20px"></md-progress-circular>
31+
<md-progress-circular class="md-accent" ng-show="vm.showList[1]" md-diameter="40"></md-progress-circular>
32+
<md-progress-circular class="md-accent md-hue-1" ng-show="vm.showList[2]" md-diameter="60"></md-progress-circular>
33+
<md-progress-circular class="md-warn md-hue-3" ng-show="vm.showList[3]" md-diameter="70"></md-progress-circular>
34+
<md-progress-circular ng-show="vm.showList[4]" md-diameter="96"></md-progress-circular>
3535
</div>
3636

3737
<hr ng-class="{'visible' : vm.activated}">
@@ -48,10 +48,4 @@ <h5>On</h5>
4848
</md-switch>
4949
</div>
5050

51-
<p class="small">
52-
Note: With above switch -- that simply clears the md-mode in each <code>&lt;md-progress-linear md-mode=""&gt;</code>
53-
element --
54-
developers can easily disable the animations and hide their progress indicators.
55-
</p>
56-
5751
</div>

‎src/components/progressCircular/demoBasicUsage/script.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ angular
44
function($scope, $interval) {
55
var self = this, j= 0, counter = 0;
66

7-
self.modes = [ ];
7+
self.showList = [ ];
88
self.activated = true;
99
self.determinateValue = 30;
1010

1111
/**
1212
* Turn off or on the 5 themed loaders
1313
*/
1414
self.toggleActivation = function() {
15-
if ( !self.activated ) self.modes = [ ];
15+
if ( !self.activated ) self.showList = [ ];
1616
if ( self.activated ) j = counter = 0;
1717
};
1818

@@ -29,8 +29,8 @@ angular
2929
// Incrementally start animation the five (5) Indeterminate,
3030
// themed progress circular bars
3131

32-
if ( (j < 5) && !self.modes[j] && self.activated ) {
33-
self.modes[j] = 'indeterminate';
32+
if ( (j < 5) && !self.showList[j] && self.activated ) {
33+
self.showList[j] = true;
3434
}
3535
if ( counter++ % 4 === 0 ) j++;
3636

‎src/components/progressCircular/js/progressCircularDirective.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
*
1919
* @param {string} md-mode Select from one of two modes: **'determinate'** and **'indeterminate'**.
2020
*
21-
* Note: if the `md-mode` value is set as undefined or specified as not 1 of the two (2) valid modes, then `.ng-hide`
22-
* will be auto-applied as a style to the component.
21+
* Note: if the `md-mode` value is set as undefined or specified as not 1 of the two (2) valid modes, then **'indeterminate'**
22+
* will be auto-applied as the mode.
2323
*
2424
* Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute.
2525
* If `value=""` is also specified, however, then `md-mode="determinate"` would be auto-injected instead.

‎src/components/progressLinear/demoBasicUsage/index.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ <h4 class="md-title">Buffer</h4>
2424
For operations where the user wants to indicate some activity or loading from the server,
2525
use the <b>buffer</b> indicator:
2626
</p>
27-
<md-progress-linear class="md-warn" md-mode="{{vm.modes[0]}}" value="{{vm.determinateValue}}"
28-
md-buffer-value="{{vm.determinateValue2}}"></md-progress-linear>
27+
<md-progress-linear class="md-warn" md-mode="buffer" value="{{vm.determinateValue}}"
28+
md-buffer-value="{{vm.determinateValue2}}"
29+
ng-show="vm.showList[0]"></md-progress-linear>
2930

3031
<h4 class="md-title">Query</h4>
3132

@@ -35,7 +36,7 @@ <h4 class="md-title">Query</h4>
3536
</p>
3637

3738
<div class="container" ng-class="{'visible' : !vm.activated}">
38-
<md-progress-linear md-mode="{{vm.modes[1]}}"></md-progress-linear>
39+
<md-progress-linear md-mode="query" ng-show="vm.showList[1]"></md-progress-linear>
3940
<div class="bottom-block">
4041
<span>Loading application libraries...</span>
4142
</div>
@@ -55,10 +56,4 @@ <h5>Off</h5>
5556
<h5>On</h5>
5657
</md-switch>
5758
</div>
58-
59-
<p class="small">
60-
Note: With the above switch -- which simply clears the md-mode in each <code>&lt;md-progress-linear
61-
md-mode=""&gt;</code> element --
62-
developers now easily disable the animations and hide their progress indicators.</p>
63-
6459
</div>

‎src/components/progressLinear/demoBasicUsage/script.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ angular.module('progressLinearDemo1', ['ngMaterial'])
99
self.determinateValue = 30;
1010
self.determinateValue2 = 30;
1111

12-
self.modes = [ ];
12+
self.showList = [ ];
1313

1414
/**
1515
* Turn off or on the 5 themed loaders
1616
*/
1717
self.toggleActivation = function() {
18-
if ( !self.activated ) self.modes = [ ];
18+
if ( !self.activated ) self.showList = [ ];
1919
if ( self.activated ) {
2020
j = counter = 0;
2121
self.determinateValue = 30;
@@ -33,8 +33,8 @@ angular.module('progressLinearDemo1', ['ngMaterial'])
3333
// Incrementally start animation the five (5) Indeterminate,
3434
// themed progress circular bars
3535

36-
if ( (j < 2) && !self.modes[j] && self.activated ) {
37-
self.modes[j] = (j==0) ? 'buffer' : 'query';
36+
if ( (j < 2) && !self.showList[j] && self.activated ) {
37+
self.showList[j] = true;
3838
}
3939
if ( counter++ % 4 == 0 ) j++;
4040

‎src/components/progressLinear/progress-linear.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ angular.module('material.components.progressLinear', [
3535
*
3636
* @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
3737
*
38-
* Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `.ng-hide`
39-
* will be auto-applied as a style to the component.
38+
* Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `indeterminate`
39+
* will be auto-applied as the mode.
4040
*
4141
* Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute. If `value=""` is also specified, however,
4242
* then `md-mode="determinate"` would be auto-injected instead.
@@ -108,18 +108,17 @@ function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
108108
});
109109

110110
attr.$observe('mdMode',function(mode){
111+
if (lastMode) container.removeClass( lastMode );
112+
111113
switch( mode ) {
112114
case MODE_QUERY:
113115
case MODE_BUFFER:
114116
case MODE_DETERMINATE:
115117
case MODE_INDETERMINATE:
116-
container.removeClass( 'ng-hide' + ' ' + lastMode );
117118
container.addClass( lastMode = "_md-mode-" + mode );
118119
break;
119120
default:
120-
if (lastMode) container.removeClass( lastMode );
121-
container.addClass('ng-hide');
122-
lastMode = undefined;
121+
container.addClass( lastMode = "_md-mode-" + MODE_INDETERMINATE );
123122
break;
124123
}
125124
});
@@ -154,7 +153,7 @@ function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
154153
case MODE_QUERY:
155154
break;
156155
default:
157-
value = undefined;
156+
value = MODE_INDETERMINATE;
158157
break;
159158
}
160159
}

‎src/components/progressLinear/progress-linear.spec.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,20 @@ describe('mdProgressLinear', function() {
1616
expect(progress.attr('md-mode')).toEqual('indeterminate');
1717
}));
1818

19+
it('should auto-set the md-mode to "indeterminate" if specified a not valid mode', inject(function($compile, $rootScope, $mdConstant) {
20+
var element = $compile('<div>' +
21+
'<md-progress-linear md-mode="test"></md-progress-linear>' +
22+
'</div>')($rootScope);
23+
24+
$rootScope.$apply(function() {
25+
$rootScope.progress = 50;
26+
$rootScope.mode = "";
27+
});
28+
29+
var progress = element.find('md-progress-linear');
30+
expect(progress.attr('md-mode')).toEqual('indeterminate');
31+
}));
32+
1933
it('should trim the md-mode value', inject(function($compile, $rootScope, $mdConstant) {
2034
element = $compile('<div>' +
2135
'<md-progress-linear md-mode=" indeterminate"></md-progress-linear>' +

0 commit comments

Comments
 (0)