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

Commit 8bf7a8b

Browse files
ThomasBurlesonThomasBurleson
committed
fix(progressLinear, progressCircular): sync logic, fix linear animations, perf upgrades
synchronize progressLinear with similar logic used in progressCircular. * improve animation performances * watch md-mode for changes * refactor animation SCSS * enable hiding and no-animations with undefined/empty md-mode attributes * for both indicators, use `display:inline-block;` * update demos with enable switch * fix query mode * update Select to use enhanced progressCircular component * fix autocomplete styling of progress-linear.md-mode-indeterminate * auto-inject md-mode attribute if missing * use 'determinate' if value attribute is defined * otherwise use 'indeterminate' * $log.debug() notify user (via $log.debug) of injection * add API doc details regarding md-mode auto-injection * fix tests BREAKING-CHANGES Before: ```css md-progress-linear { display: block; } md-progress-circular { // display not set // position not set } ``` ```css md-progress-linear { display: inline-block; position: relative; } md-progress-circular { display: inline-block; position: relative; } ``` Fixes #4421. Fixes #4409. Fixes #2540. Fixes #2364. Fixes #1926. Fixes #3802.
1 parent ffbcff3 commit 8bf7a8b

File tree

13 files changed

+600
-221
lines changed

13 files changed

+600
-221
lines changed

‎src/components/autocomplete/autocomplete.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,14 @@ md-autocomplete {
7171
&.md-menu-showing {
7272
z-index: $z-index-backdrop + 1;
7373
}
74-
md-progress-linear[md-mode=indeterminate] {
74+
md-progress-linear .md-mode-indeterminate {
7575
position: absolute;
76-
bottom: 0; left: 0; width: 100%;
76+
top: 20px; left: 0; width: 100%;
7777
height: 3px;
7878
transition: none;
7979

8080
.md-container {
8181
transition: none;
82-
top: auto;
8382
height: 3px;
8483
}
8584
&.ng-enter {

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,12 @@ <h4>Theming </h4>
2626
<md-progress-circular md-mode="{{vm.modes[4]}}" md-diameter="96"></md-progress-circular>
2727
</div>
2828

29+
30+
<hr ng-class="{'visible' : vm.activated}">
31+
2932
<div layout="row" id="loaders">
3033

31-
<p style="margin-right: 20px">Show Progress Circular Indicators: </p>
34+
<p>Progress Circular Indicators: </p>
3235

3336
<h5>Off</h5>
3437
<md-switch
@@ -39,5 +42,9 @@ <h5>On</h5>
3942
</md-switch>
4043
</div>
4144

45+
<p class="small">
46+
Note: With above switch -- that simply clears the md-mode in each <code>&lt;md-progress-linear md-mode=""&gt;</code> element --
47+
developers can easily disable the animations and hide their progress indicators.
48+
</p>
4249

4350
</div>

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

+26
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,29 @@ md-progress-circular {
2020
#loaders > h5 {
2121
padding-top: 8px;
2222
}
23+
24+
#loaders > p {
25+
margin-right: 20px;
26+
}
27+
28+
29+
p.small {
30+
font-size: 0.8em;
31+
margin-top: -18px;
32+
}
33+
34+
35+
hr {
36+
width: 100%;
37+
margin-top: 20px;
38+
border-color: rgba(221, 221, 177, 0.1);
39+
}
40+
41+
p.small > code {
42+
font-size: 0.8em;
43+
}
44+
45+
46+
.visible {
47+
border-color: rgba(221, 221, 177, 0);
48+
}

‎src/components/progressCircular/progress-circular.js

+82-32
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,13 @@ angular.module('material.components.progressCircular', [
2626
* not necessary to expose what's happening behind the scenes and how long it will take, use an
2727
* indeterminate indicator.
2828
*
29-
* @param {string} md-mode Select from one of two modes: **'determinate'** and **'indeterminate'**.<br/>
30-
* Note: if the `md-mode` value is undefined or not 1 of the two (2) valid modes, then `.ng-hide`
29+
* @param {string} md-mode Select from one of two modes: **'determinate'** and **'indeterminate'**.
30+
*
31+
* Note: if the `md-mode` value is set as undefined or specified as not 1 of the two (2) valid modes, then `.ng-hide`
3132
* will be auto-applied as a style to the component.
33+
*
34+
* Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute.
35+
* If `value=""` is also specified, however, then `md-mode="determinate"` would be auto-injected instead.
3236
* @param {number=} value In determinate mode, this number represents the percentage of the
3337
* circular progress. Default: 0
3438
* @param {number=} md-diameter This specifies the diamter of the circular progress. The value
@@ -46,7 +50,7 @@ angular.module('material.components.progressCircular', [
4650
* <md-progress-circular md-mode="indeterminate"></md-progress-circular>
4751
* </hljs>
4852
*/
49-
function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
53+
function MdProgressCircularDirective($mdTheming, $mdUtil, $log) {
5054
var DEFAULT_PROGRESS_SIZE = 100;
5155
var DEFAULT_SCALING = 0.5;
5256

@@ -87,43 +91,68 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
8791
function postLink(scope, element, attr) {
8892
$mdTheming(element);
8993

90-
var circle = element[0];
94+
var circle = element;
9195
var spinnerWrapper = angular.element(element.children()[0]);
92-
9396
var lastMode, toVendorCSS = $mdUtil.dom.animator.toCss;
9497

95-
// Update size/scaling of the progress indicator
96-
// Watch the "value" and "md-mode" attributes
98+
updateScale();
99+
validateMode();
100+
watchAttributes();
97101

98-
circle.style[$mdConstant.CSS.TRANSFORM] = 'scale(' + getDiameterRatio() + ')';
99-
100-
attr.$observe('value', function(value) {
101-
var percentValue = clamp(value);
102-
element.attr('aria-valuenow', percentValue);
103-
104-
if (attr.mdMode == "determinate") {
105-
animateIndicator(percentValue);
106-
}
107-
});
102+
/**
103+
* Watch the value and md-mode attributes
104+
*/
105+
function watchAttributes() {
106+
attr.$observe('value', function(value) {
107+
var percentValue = clamp(value);
108+
element.attr('aria-valuenow', percentValue);
109+
110+
if (mode() == MODE_DETERMINATE) {
111+
animateIndicator(percentValue);
112+
}
113+
});
114+
attr.$observe('mdMode',function(mode){
115+
switch( mode ) {
116+
case MODE_DETERMINATE:
117+
case MODE_INDETERMINATE:
118+
spinnerWrapper.removeClass('ng-hide');
119+
spinnerWrapper.removeClass( lastMode );
120+
spinnerWrapper.addClass( lastMode = "md-mode-" + mode );
121+
break;
122+
default:
123+
spinnerWrapper.removeClass( lastMode );
124+
spinnerWrapper.addClass('ng-hide');
125+
lastMode = undefined;
126+
break;
127+
}
128+
});
129+
}
108130

109-
attr.$observe('mdMode',function(mode){
110-
switch( mode ) {
111-
case MODE_DETERMINATE:
112-
case MODE_INDETERMINATE:
113-
spinnerWrapper.removeClass('ng-hide');
131+
/**
132+
* Update size/scaling of the progress indicator
133+
* Watch the "value" and "md-mode" attributes
134+
*/
135+
function updateScale() {
136+
circle.css(toVendorCSS({
137+
transform : $mdUtil.supplant('scale( {0} )',[getDiameterRatio()])
138+
}));
139+
}
114140

115-
// Inject class selector instead of attribute selector
116-
// (@see layout.js changes for IE performance issues)
141+
/**
142+
* Auto-defaults the mode to either `determinate` or `indeterminate` mode; if not specified
143+
*/
144+
function validateMode() {
145+
if ( angular.isUndefined(attr.mdMode) ) {
146+
var hasValue = angular.isDefined(attr.value);
147+
var mode = hasValue ? MODE_DETERMINATE : MODE_INDETERMINATE;
148+
var info = "Auto-adding the missing md-mode='{0}' to the ProgressCircular element";
117149

118-
if ( lastMode ) spinnerWrapper.removeClass( lastMode );
119-
lastMode = "md-mode-" + mode;
120-
if ( lastMode ) spinnerWrapper.addClass( lastMode );
150+
$log.debug( $mdUtil.supplant(info, [mode]) );
121151

122-
break;
123-
default:
124-
spinnerWrapper.addClass('ng-hide');
152+
element.attr("md-mode",mode);
153+
attr['mdMode'] = mode;
125154
}
126-
});
155+
}
127156

128157
var leftC, rightC, gap;
129158

@@ -136,6 +165,8 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
136165
* - use attribute selectors which had poor performances in IE
137166
*/
138167
function animateIndicator(value) {
168+
if ( !mode() ) return;
169+
139170
leftC = leftC || angular.element(element[0].querySelector('.md-left > .md-half-circle'));
140171
rightC = rightC || angular.element(element[0].querySelector('.md-right > .md-half-circle'));
141172
gap = gap || angular.element(element[0].querySelector('.md-gap'));
@@ -146,7 +177,7 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
146177
}),
147178
leftStyles = removeEmptyValues({
148179
transition: (value <= 50) ? "transform 0.1s linear" : "",
149-
transform: $mdUtil.supplant("rotate({0}deg)", [value <= 50 ? 135 : ((((value - 50) / 50) * 180) + 135)])
180+
transform: $mdUtil.supplant("rotate({0}deg)", [value <= 50 ? 135 : (((value - 50) / 50 * 180) + 135)])
150181
}),
151182
rightStyles = removeEmptyValues({
152183
transition: (value >= 50) ? "transform 0.1s linear" : "",
@@ -174,6 +205,25 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
174205
// should return ratio; DEFAULT_PROGRESS_SIZE === 100px is default size
175206
return (value > 1) ? value / DEFAULT_PROGRESS_SIZE : value;
176207
}
208+
209+
/**
210+
* Is the md-mode a valid option?
211+
*/
212+
function mode() {
213+
var value = attr.mdMode;
214+
if ( value ) {
215+
switch(value) {
216+
case MODE_DETERMINATE :
217+
case MODE_INDETERMINATE :
218+
break;
219+
default:
220+
value = undefined;
221+
break;
222+
}
223+
}
224+
return value;
225+
}
226+
177227
}
178228

179229
/**

‎src/components/progressCircular/progress-circular.scss

+58-49
Original file line numberDiff line numberDiff line change
@@ -7,63 +7,72 @@ $progress-border-width : 10px;
77
$progress-circular-size : 10 * $progress-border-width !default;
88

99
md-progress-circular {
10-
width: $progress-circular-size;
11-
height: $progress-circular-size;
1210
display: block;
1311
position: relative;
12+
13+
width: $progress-circular-size;
14+
height: $progress-circular-size;
15+
1416
padding-top: 0 !important;
1517
margin-bottom: 0 !important;
16-
overflow: hidden;
18+
1719
transform: scale(0.5);
1820

19-
.md-inner {
20-
width: $progress-circular-size;
21-
height: $progress-circular-size;
21+
.md-spinner-wrapper {
22+
display:block;
2223
position: relative;
23-
.md-gap {
24-
position: absolute;
25-
left: $progress-circular-size * 0.5 - 1;
26-
right: $progress-circular-size * 0.5 - 1;
27-
top: 0;
28-
bottom: 0;
29-
border-top-width: $progress-border-width;
30-
border-top-style: solid;
31-
box-sizing: border-box;
32-
}
33-
.md-left, .md-right {
34-
position: absolute;
35-
top: 0;
36-
height: $progress-circular-size;
37-
width: $progress-circular-size * 0.50;
38-
overflow: hidden;
39-
.md-half-circle {
40-
position: absolute;
41-
top: 0;
42-
width: $progress-circular-size;
43-
height: $progress-circular-size;
44-
box-sizing: border-box;
45-
border-width: $progress-border-width;
46-
border-style: solid;
47-
border-bottom-color: transparent;
48-
border-radius: 50%;
49-
}
50-
}
51-
.md-left {
52-
left: 0;
53-
.md-half-circle {
54-
left: 0;
55-
border-right-color: transparent;
56-
}
57-
}
58-
.md-right {
59-
right: 0;
60-
.md-half-circle {
61-
right: 0;
62-
border-left-color: transparent;
63-
}
64-
}
24+
overflow: hidden;
25+
26+
.md-inner {
27+
width: $progress-circular-size;
28+
height: $progress-circular-size;
29+
position: relative;
30+
.md-gap {
31+
position: absolute;
32+
left: $progress-circular-size * 0.5 - 1;
33+
right: $progress-circular-size * 0.5 - 1;
34+
top: 0;
35+
bottom: 0;
36+
border-top-width: $progress-border-width;
37+
border-top-style: solid;
38+
box-sizing: border-box;
39+
}
40+
.md-left, .md-right {
41+
position: absolute;
42+
top: 0;
43+
height: $progress-circular-size;
44+
width: $progress-circular-size * 0.50;
45+
overflow: hidden;
46+
.md-half-circle {
47+
position: absolute;
48+
top: 0;
49+
width: $progress-circular-size;
50+
height: $progress-circular-size;
51+
box-sizing: border-box;
52+
border-width: $progress-border-width;
53+
border-style: solid;
54+
border-bottom-color: transparent;
55+
border-radius: 50%;
56+
}
57+
}
58+
.md-left {
59+
left: 0;
60+
.md-half-circle {
61+
left: 0;
62+
border-right-color: transparent;
63+
}
64+
}
65+
.md-right {
66+
right: 0;
67+
.md-half-circle {
68+
right: 0;
69+
border-left-color: transparent;
70+
}
71+
}
72+
}
6573
}
6674

75+
6776
.md-spinner-wrapper.md-mode-indeterminate {
6877
animation: outer-rotate $progress-circular-outer-duration linear infinite;
6978
.md-inner {
@@ -88,7 +97,7 @@ md-progress-circular {
8897
}
8998
}
9099

91-
.ng-hide md-progress-circular, md-progress-circular.ng-hide {
100+
md-progress-circular.ng-hide {
92101
.md-spinner-wrapper {
93102
animation: none;
94103
.md-inner {

0 commit comments

Comments
 (0)