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

Commit f3369eb

Browse files
crisbetoThomasBurleson
crisbeto
authored and
ThomasBurleson
committed
fix(progress-linear): stop the CSS animations when the element is disabled
* Stops the progressbar's CSS animations if it's disabled. Until now they kept running in the background. * Cleans up the progressLinear testing setup. * Fixes a container in the demo being too tall. Fixes #8764. Closes #8776
1 parent 1814c12 commit f3369eb

File tree

3 files changed

+88
-109
lines changed

3 files changed

+88
-109
lines changed

‎src/components/progressLinear/demoBasicUsage/style.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ p.small > code {
5151
.container {
5252
display: block;
5353
position: relative;
54-
height: 100%;
5554
width: 100%;
5655
border: 2px solid rgb(170,209,249);
5756
transition: opacity 0.1s linear;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,15 +115,16 @@ function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
115115

116116
attr.$observe('disabled', function(value) {
117117
if (value === true || value === false) {
118-
isDisabled = value;
118+
isDisabled = !!value;
119119
} else {
120120
isDisabled = angular.isDefined(value);
121121
}
122122

123-
element.toggleClass(DISABLED_CLASS, !!isDisabled);
123+
element.toggleClass(DISABLED_CLASS, isDisabled);
124+
container.toggleClass(lastMode, !isDisabled);
124125
});
125126

126-
attr.$observe('mdMode',function(mode){
127+
attr.$observe('mdMode', function(mode) {
127128
if (lastMode) container.removeClass( lastMode );
128129

129130
switch( mode ) {
@@ -151,7 +152,7 @@ function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
151152

152153
//$log.debug( $mdUtil.supplant(info, [mode]) );
153154

154-
element.attr("md-mode",mode);
155+
element.attr("md-mode", mode);
155156
attr.mdMode = mode;
156157
}
157158
}

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

Lines changed: 83 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,129 @@
11
describe('mdProgressLinear', function() {
22

3-
beforeEach(module('material.components.progressLinear'));
4-
5-
it('should auto-set the md-mode to "indeterminate" if not specified', inject(function($compile, $rootScope, $mdConstant) {
6-
var element = $compile('<div>' +
7-
'<md-progress-linear></md-progress-linear>' +
8-
'</div>')($rootScope);
9-
10-
$rootScope.$apply(function() {
11-
$rootScope.progress = 50;
12-
$rootScope.mode = "";
3+
var element, $rootScope, $compile, $mdConstant;
4+
5+
function makeElement(attrs) {
6+
element = $compile(
7+
'<div>' +
8+
'<md-progress-linear ' + (attrs || '') + '></md-progress-linear>' +
9+
'</div>'
10+
)($rootScope);
11+
12+
$rootScope.$digest();
13+
return element;
14+
}
15+
16+
beforeEach(function() {
17+
module('material.components.progressLinear');
18+
19+
inject(function(_$compile_, _$rootScope_, _$mdConstant_) {
20+
$rootScope = _$rootScope_;
21+
$compile = _$compile_;
22+
$mdConstant = _$mdConstant_;
1323
});
24+
});
1425

15-
var progress = element.find('md-progress-linear');
16-
expect(progress.attr('md-mode')).toEqual('indeterminate');
17-
}));
18-
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-
});
26+
afterEach(function() {
27+
element && element.remove();
28+
});
2829

30+
it('should auto-set the md-mode to "indeterminate" if not specified', function() {
31+
var element = makeElement();
2932
var progress = element.find('md-progress-linear');
33+
3034
expect(progress.attr('md-mode')).toEqual('indeterminate');
31-
}));
35+
});
3236

33-
it('should trim the md-mode value', inject(function($compile, $rootScope, $mdConstant) {
34-
element = $compile('<div>' +
35-
'<md-progress-linear md-mode=" indeterminate"></md-progress-linear>' +
36-
'</div>')($rootScope);
37+
it('should auto-set the md-mode to "indeterminate" if specified a not valid mode', function() {
38+
var element = makeElement('md-mode="test"');
39+
var progress = element.find('md-progress-linear');
3740

38-
$rootScope.$apply(function() {
39-
});
41+
expect(progress.attr('md-mode')).toEqual('indeterminate');
42+
});
4043

44+
it('should trim the md-mode value', function() {
45+
var element = makeElement('md-mode=" indeterminate"');
4146
var progress = element.find('md-progress-linear');
47+
4248
expect(progress.attr('md-mode')).toEqual('indeterminate');
43-
}));
49+
});
4450

45-
it('should auto-set the md-mode to "determinate" if not specified but has value', inject(function($compile, $rootScope, $mdConstant) {
46-
var element = $compile('<div>' +
47-
'<md-progress-linear value="{{progress}}"></md-progress-linear>' +
48-
'</div>')($rootScope);
51+
it('should auto-set the md-mode to "determinate" if not specified but has value', function() {
52+
var element = makeElement('value="{{progress}}"');
53+
var progress = element.find('md-progress-linear');
4954

50-
$rootScope.$apply(function() {
51-
$rootScope.progress = 50;
52-
$rootScope.mode = "";
53-
});
55+
$rootScope.$apply('progress = 50');
5456

55-
var progress = element.find('md-progress-linear');
5657
expect(progress.attr('md-mode')).toEqual('determinate');
57-
}));
58+
});
5859

59-
it('should set not transform if mode is undefined', inject(function($compile, $rootScope, $mdConstant) {
60-
var element = $compile('<div>' +
61-
'<md-progress-linear value="{{progress}}" md-mode="{{mode}}">' +
62-
'</md-progress-linear>' +
63-
'</div>')($rootScope);
60+
it('should set not transform if mode is undefined', function() {
61+
var element = makeElement('value="{{progress}}" md-mode="{{mode}}"');
62+
var bar2 = element[0].querySelector('._md-bar2');
6463

6564
$rootScope.$apply(function() {
6665
$rootScope.progress = 50;
67-
$rootScope.mode = "";
66+
$rootScope.mode = '';
6867
});
6968

70-
var progress = element.find('md-progress-linear'),
71-
bar2 = angular.element(progress[0].querySelectorAll('._md-bar2'))[0];
72-
7369
expect(bar2.style[$mdConstant.CSS.TRANSFORM]).toEqual('');
74-
}));
75-
76-
it('should set transform based on value', inject(function($compile, $rootScope, $mdConstant) {
77-
var element = $compile('<div>' +
78-
'<md-progress-linear value="{{progress}}" md-mode="determinate">' +
79-
'</md-progress-linear>' +
80-
'</div>')($rootScope);
81-
82-
$rootScope.$apply(function() {
83-
$rootScope.progress = 50;
84-
});
70+
});
8571

86-
var progress = element.find('md-progress-linear'),
87-
bar2 = angular.element(progress[0].querySelectorAll('._md-bar2'))[0];
72+
it('should set transform based on value', function() {
73+
var element = makeElement('value="{{progress}}" md-mode="determinate"');
74+
var bar2 = element[0].querySelector('._md-bar2');
8875

76+
$rootScope.$apply('progress = 50');
8977
expect(bar2.style[$mdConstant.CSS.TRANSFORM]).toEqual('translateX(-25%) scale(0.5, 1)');
90-
}));
91-
92-
it('should update aria-valuenow', inject(function($compile, $rootScope) {
93-
var element = $compile('<div>' +
94-
'<md-progress-linear value="{{progress}}">' +
95-
'</md-progress-linear>' +
96-
'</div>')($rootScope);
97-
98-
$rootScope.$apply(function() {
99-
$rootScope.progress = 50;
100-
});
78+
});
10179

80+
it('should update aria-valuenow', function() {
81+
var element = makeElement('value="{{progress}}"');
10282
var progress = element.find('md-progress-linear');
10383

84+
$rootScope.$apply('progress = 50');
10485
expect(progress.eq(0).attr('aria-valuenow')).toEqual('50');
105-
}));
86+
});
10687

107-
it('should set transform based on buffer value', inject(function($compile, $rootScope, $mdConstant) {
108-
var element = $compile('<div>' +
109-
'<md-progress-linear value="{{progress}}" md-buffer-value="{{progress2}}" md-mode="buffer">' +
110-
'</md-progress-linear>' +
111-
'</div>')($rootScope);
88+
it('should set transform based on buffer value', function() {
89+
var element = makeElement('value="{{progress}}" md-buffer-value="{{progress2}}" md-mode="buffer"');
90+
var bar1 = element[0].querySelector('._md-bar1');
11291

11392
$rootScope.$apply(function() {
11493
$rootScope.progress = 50;
11594
$rootScope.progress2 = 75;
11695
});
11796

118-
var progress = element.find('md-progress-linear'),
119-
bar1 = angular.element(progress[0].querySelectorAll('._md-bar1'))[0];
120-
12197
expect(bar1.style[$mdConstant.CSS.TRANSFORM]).toEqual('translateX(-12.5%) scale(0.75, 1)');
122-
}));
98+
});
12399

124-
it('should not set transform in query mode', inject(function($compile, $rootScope, $mdConstant) {
125-
var element = $compile('<div>' +
126-
'<md-progress-linear md-mode="query" value="{{progress}}">' +
127-
'</md-progress-linear>' +
128-
'</div>')($rootScope);
100+
it('should not set transform in query mode', function() {
101+
var element = makeElement('md-mode="query" value="{{progress}}"');
102+
var bar2 = element[0].querySelector('._md-bar2');
129103

130-
$rootScope.$apply(function() {
131-
$rootScope.progress = 80;
104+
$rootScope.$apply('progress = 80');
105+
expect(bar2.style[$mdConstant.CSS.TRANSFORM]).toBeFalsy();
106+
});
107+
108+
describe('disabled mode', function() {
109+
it('should hide the element', function() {
110+
var element = makeElement('disabled');
111+
var progress = element.find('md-progress-linear').eq(0);
112+
expect(progress.hasClass('_md-progress-linear-disabled')).toBe(true);
132113
});
133114

134-
var progress = element.find('md-progress-linear'),
135-
bar2 = angular.element(progress[0].querySelectorAll('._md-bar2'))[0];
115+
it('should toggle the mode on the container', function() {
116+
var element = makeElement('md-mode="query" ng-disabled="isDisabled"');
117+
var container = angular.element(element[0].querySelector('._md-container'));
118+
var modeClass = '_md-mode-query';
136119

137-
expect(bar2.style[$mdConstant.CSS.TRANSFORM]).toBeFalsy();
138-
}));
120+
expect(container.hasClass(modeClass)).toBe(true);
139121

140-
it('should hide the element if it is disabled', inject(function($compile, $rootScope) {
141-
var element = $compile('<div>' +
142-
'<md-progress-linear value="25" disabled>' +
143-
'</md-progress-linear>' +
144-
'</div>')($rootScope);
122+
$rootScope.$apply('isDisabled = true');
123+
expect(container.hasClass(modeClass)).toBe(false);
145124

146-
var progress = element.find('md-progress-linear').eq(0);
147-
148-
expect(progress.hasClass('_md-progress-linear-disabled')).toBe(true);
149-
}));
125+
$rootScope.$apply('isDisabled = false');
126+
expect(container.hasClass(modeClass)).toBe(true);
127+
});
128+
});
150129
});

0 commit comments

Comments
 (0)