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