1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
/**
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.3
*/
goog.provide('ngmaterial.components.progressLinear');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.progressLinear
* @description Linear Progress module!
*/
MdProgressLinearDirective['$inject'] = ["$mdTheming", "$mdUtil", "$log"];
angular.module('material.components.progressLinear', [
'material.core'
])
.directive('mdProgressLinear', MdProgressLinearDirective);
/**
* @ngdoc directive
* @name mdProgressLinear
* @module material.components.progressLinear
* @restrict E
*
* @description
* The linear progress directive is used to make loading content
* in your app as delightful and painless as possible by minimizing
* the amount of visual change a user sees before they can view
* and interact with content.
*
* Each operation should only be represented by one activity indicator
* For example: one refresh operation should not display both a
* refresh bar and an activity circle.
*
* For operations where the percentage of the operation completed
* can be determined, use a determinate indicator. They give users
* a quick sense of how long an operation will take.
*
* For operations where the user is asked to wait a moment while
* something finishes up, and it’s not necessary to expose what's
* happening behind the scenes and how long it will take, use an
* indeterminate indicator.
*
* @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
*
* Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `indeterminate`
* will be auto-applied as the mode.
*
* Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute. If `value=""` is also specified, however,
* then `md-mode="determinate"` would be auto-injected instead.
* @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
* @param {number=} md-buffer-value In the buffer mode, this number represents the percentage of the secondary progress bar. Default: 0
* @param {boolean=} ng-disabled Determines whether to disable the progress element.
*
* @usage
* <hljs lang="html">
* <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
*
* <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
*
* <md-progress-linear md-mode="indeterminate"></md-progress-linear>
*
* <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
*
* <md-progress-linear md-mode="query"></md-progress-linear>
* </hljs>
*/
function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
var MODE_DETERMINATE = "determinate";
var MODE_INDETERMINATE = "indeterminate";
var MODE_BUFFER = "buffer";
var MODE_QUERY = "query";
var DISABLED_CLASS = "_md-progress-linear-disabled";
return {
restrict: 'E',
template: '<div class="md-container">' +
'<div class="md-dashed"></div>' +
'<div class="md-bar md-bar1"></div>' +
'<div class="md-bar md-bar2"></div>' +
'</div>',
compile: compile
};
function compile(tElement, tAttrs, transclude) {
tElement.attr('aria-valuemin', 0);
tElement.attr('aria-valuemax', 100);
tElement.attr('role', 'progressbar');
return postLink;
}
function postLink(scope, element, attr) {
$mdTheming(element);
var lastMode;
var isDisabled = attr.hasOwnProperty('disabled');
var toVendorCSS = $mdUtil.dom.animator.toCss;
var bar1 = angular.element(element[0].querySelector('.md-bar1'));
var bar2 = angular.element(element[0].querySelector('.md-bar2'));
var container = angular.element(element[0].querySelector('.md-container'));
element
.attr('md-mode', mode())
.toggleClass(DISABLED_CLASS, isDisabled);
validateMode();
watchAttributes();
/**
* Watch the value, md-buffer-value, and md-mode attributes
*/
function watchAttributes() {
attr.$observe('value', function(value) {
var percentValue = clamp(value);
element.attr('aria-valuenow', percentValue);
if (mode() != MODE_QUERY) animateIndicator(bar2, percentValue);
});
attr.$observe('mdBufferValue', function(value) {
animateIndicator(bar1, clamp(value));
});
attr.$observe('disabled', function(value) {
if (value === true || value === false) {
isDisabled = !!value;
} else {
isDisabled = angular.isDefined(value);
}
element.toggleClass(DISABLED_CLASS, isDisabled);
container.toggleClass(lastMode, !isDisabled);
});
attr.$observe('mdMode', function(mode) {
if (lastMode) container.removeClass( lastMode );
switch( mode ) {
case MODE_QUERY:
case MODE_BUFFER:
case MODE_DETERMINATE:
case MODE_INDETERMINATE:
container.addClass( lastMode = "md-mode-" + mode );
break;
default:
container.addClass( lastMode = "md-mode-" + MODE_INDETERMINATE );
break;
}
});
}
/**
* Auto-defaults the mode to either `determinate` or `indeterminate` mode; if not specified
*/
function validateMode() {
if ( angular.isUndefined(attr.mdMode) ) {
var hasValue = angular.isDefined(attr.value);
var mode = hasValue ? MODE_DETERMINATE : MODE_INDETERMINATE;
var info = "Auto-adding the missing md-mode='{0}' to the ProgressLinear element";
//$log.debug( $mdUtil.supplant(info, [mode]) );
element.attr("md-mode", mode);
attr.mdMode = mode;
}
}
/**
* Is the md-mode a valid option?
*/
function mode() {
var value = (attr.mdMode || "").trim();
if ( value ) {
switch(value) {
case MODE_DETERMINATE:
case MODE_INDETERMINATE:
case MODE_BUFFER:
case MODE_QUERY:
break;
default:
value = MODE_INDETERMINATE;
break;
}
}
return value;
}
/**
* Manually set CSS to animate the Determinate indicator based on the specified
* percentage value (0-100).
*/
function animateIndicator(target, value) {
if ( isDisabled || !mode() ) return;
var to = $mdUtil.supplant("translateX({0}%) scale({1},1)", [ (value-100)/2, value/100 ]);
var styles = toVendorCSS({ transform : to });
angular.element(target).css( styles );
}
}
/**
* Clamps the value to be between 0 and 100.
* @param {number} value The value to clamp.
* @returns {number}
*/
function clamp(value) {
return Math.max(0, Math.min(value || 0, 100));
}
}
ngmaterial.components.progressLinear = angular.module("material.components.progressLinear");
|
