1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | import { __assign, __extends, __values } from "tslib";
|
24 | import { getCorrectPropertyName } from '@material/animation/util';
|
25 | import { MDCFoundation } from '@material/base/foundation';
|
26 | import { animationDimensionPercentages as percents, cssClasses, strings } from './constants';
|
27 | var MDCLinearProgressFoundation = (function (_super) {
|
28 | __extends(MDCLinearProgressFoundation, _super);
|
29 | function MDCLinearProgressFoundation(adapter) {
|
30 | var _this = _super.call(this, __assign(__assign({}, MDCLinearProgressFoundation.defaultAdapter), adapter)) || this;
|
31 | _this.observer = null;
|
32 | return _this;
|
33 | }
|
34 | Object.defineProperty(MDCLinearProgressFoundation, "cssClasses", {
|
35 | get: function () {
|
36 | return cssClasses;
|
37 | },
|
38 | enumerable: false,
|
39 | configurable: true
|
40 | });
|
41 | Object.defineProperty(MDCLinearProgressFoundation, "strings", {
|
42 | get: function () {
|
43 | return strings;
|
44 | },
|
45 | enumerable: false,
|
46 | configurable: true
|
47 | });
|
48 | Object.defineProperty(MDCLinearProgressFoundation, "defaultAdapter", {
|
49 | get: function () {
|
50 | return {
|
51 | addClass: function () { return undefined; },
|
52 | attachResizeObserver: function () { return null; },
|
53 | forceLayout: function () { return undefined; },
|
54 | getWidth: function () { return 0; },
|
55 | hasClass: function () { return false; },
|
56 | setBufferBarStyle: function () { return null; },
|
57 | setPrimaryBarStyle: function () { return null; },
|
58 | setStyle: function () { return undefined; },
|
59 | removeAttribute: function () { return undefined; },
|
60 | removeClass: function () { return undefined; },
|
61 | setAttribute: function () { return undefined; },
|
62 | };
|
63 | },
|
64 | enumerable: false,
|
65 | configurable: true
|
66 | });
|
67 | MDCLinearProgressFoundation.prototype.init = function () {
|
68 | var _this = this;
|
69 | this.determinate = !this.adapter.hasClass(cssClasses.INDETERMINATE_CLASS);
|
70 | this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);
|
71 | this.progress = 0;
|
72 | this.buffer = 1;
|
73 | this.observer = this.adapter.attachResizeObserver(function (entries) {
|
74 | var e_1, _a;
|
75 | if (_this.determinate) {
|
76 | return;
|
77 | }
|
78 | try {
|
79 | for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
|
80 | var entry = entries_1_1.value;
|
81 | if (entry.contentRect) {
|
82 | _this.calculateAndSetDimensions(entry.contentRect.width);
|
83 | }
|
84 | }
|
85 | }
|
86 | catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
87 | finally {
|
88 | try {
|
89 | if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
|
90 | }
|
91 | finally { if (e_1) throw e_1.error; }
|
92 | }
|
93 | });
|
94 | if (!this.determinate && this.observer) {
|
95 | this.calculateAndSetDimensions(this.adapter.getWidth());
|
96 | }
|
97 | };
|
98 | MDCLinearProgressFoundation.prototype.setDeterminate = function (isDeterminate) {
|
99 | this.determinate = isDeterminate;
|
100 | if (this.determinate) {
|
101 | this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);
|
102 | this.adapter.setAttribute(strings.ARIA_VALUENOW, this.progress.toString());
|
103 | this.adapter.setAttribute(strings.ARIA_VALUEMAX, '1');
|
104 | this.adapter.setAttribute(strings.ARIA_VALUEMIN, '0');
|
105 | this.setPrimaryBarProgress(this.progress);
|
106 | this.setBufferBarProgress(this.buffer);
|
107 | return;
|
108 | }
|
109 | if (this.observer) {
|
110 | this.calculateAndSetDimensions(this.adapter.getWidth());
|
111 | }
|
112 | this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);
|
113 | this.adapter.removeAttribute(strings.ARIA_VALUENOW);
|
114 | this.adapter.removeAttribute(strings.ARIA_VALUEMAX);
|
115 | this.adapter.removeAttribute(strings.ARIA_VALUEMIN);
|
116 | this.setPrimaryBarProgress(1);
|
117 | this.setBufferBarProgress(1);
|
118 | };
|
119 | MDCLinearProgressFoundation.prototype.isDeterminate = function () {
|
120 | return this.determinate;
|
121 | };
|
122 | MDCLinearProgressFoundation.prototype.setProgress = function (value) {
|
123 | this.progress = value;
|
124 | if (this.determinate) {
|
125 | this.setPrimaryBarProgress(value);
|
126 | this.adapter.setAttribute(strings.ARIA_VALUENOW, value.toString());
|
127 | }
|
128 | };
|
129 | MDCLinearProgressFoundation.prototype.getProgress = function () {
|
130 | return this.progress;
|
131 | };
|
132 | MDCLinearProgressFoundation.prototype.setBuffer = function (value) {
|
133 | this.buffer = value;
|
134 | if (this.determinate) {
|
135 | this.setBufferBarProgress(value);
|
136 | }
|
137 | };
|
138 | MDCLinearProgressFoundation.prototype.getBuffer = function () {
|
139 | return this.buffer;
|
140 | };
|
141 | MDCLinearProgressFoundation.prototype.open = function () {
|
142 | this.adapter.removeClass(cssClasses.CLOSED_CLASS);
|
143 | this.adapter.removeClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);
|
144 | this.adapter.removeAttribute(strings.ARIA_HIDDEN);
|
145 | };
|
146 | MDCLinearProgressFoundation.prototype.close = function () {
|
147 | this.adapter.addClass(cssClasses.CLOSED_CLASS);
|
148 | this.adapter.setAttribute(strings.ARIA_HIDDEN, 'true');
|
149 | };
|
150 | MDCLinearProgressFoundation.prototype.isClosed = function () {
|
151 | return this.adapter.hasClass(cssClasses.CLOSED_CLASS);
|
152 | };
|
153 | |
154 |
|
155 |
|
156 |
|
157 |
|
158 | MDCLinearProgressFoundation.prototype.handleTransitionEnd = function () {
|
159 | if (this.adapter.hasClass(cssClasses.CLOSED_CLASS)) {
|
160 | this.adapter.addClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);
|
161 | }
|
162 | };
|
163 | MDCLinearProgressFoundation.prototype.destroy = function () {
|
164 | _super.prototype.destroy.call(this);
|
165 | if (this.observer) {
|
166 | this.observer.disconnect();
|
167 | }
|
168 | };
|
169 | MDCLinearProgressFoundation.prototype.restartAnimation = function () {
|
170 | this.adapter.removeClass(cssClasses.ANIMATION_READY_CLASS);
|
171 | this.adapter.forceLayout();
|
172 | this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);
|
173 | };
|
174 | MDCLinearProgressFoundation.prototype.setPrimaryBarProgress = function (progressValue) {
|
175 | var value = "scaleX(" + progressValue + ")";
|
176 |
|
177 |
|
178 | var transformProp = typeof window !== 'undefined' ?
|
179 | getCorrectPropertyName(window, 'transform') :
|
180 | 'transform';
|
181 | this.adapter.setPrimaryBarStyle(transformProp, value);
|
182 | };
|
183 | MDCLinearProgressFoundation.prototype.setBufferBarProgress = function (progressValue) {
|
184 | var value = progressValue * 100 + "%";
|
185 | this.adapter.setBufferBarStyle(strings.FLEX_BASIS, value);
|
186 | };
|
187 | MDCLinearProgressFoundation.prototype.calculateAndSetDimensions = function (width) {
|
188 | var primaryHalf = width * percents.PRIMARY_HALF;
|
189 | var primaryFull = width * percents.PRIMARY_FULL;
|
190 | var secondaryQuarter = width * percents.SECONDARY_QUARTER;
|
191 | var secondaryHalf = width * percents.SECONDARY_HALF;
|
192 | var secondaryFull = width * percents.SECONDARY_FULL;
|
193 | this.adapter.setStyle('--mdc-linear-progress-primary-half', primaryHalf + "px");
|
194 | this.adapter.setStyle('--mdc-linear-progress-primary-half-neg', -primaryHalf + "px");
|
195 | this.adapter.setStyle('--mdc-linear-progress-primary-full', primaryFull + "px");
|
196 | this.adapter.setStyle('--mdc-linear-progress-primary-full-neg', -primaryFull + "px");
|
197 | this.adapter.setStyle('--mdc-linear-progress-secondary-quarter', secondaryQuarter + "px");
|
198 | this.adapter.setStyle('--mdc-linear-progress-secondary-quarter-neg', -secondaryQuarter + "px");
|
199 | this.adapter.setStyle('--mdc-linear-progress-secondary-half', secondaryHalf + "px");
|
200 | this.adapter.setStyle('--mdc-linear-progress-secondary-half-neg', -secondaryHalf + "px");
|
201 | this.adapter.setStyle('--mdc-linear-progress-secondary-full', secondaryFull + "px");
|
202 | this.adapter.setStyle('--mdc-linear-progress-secondary-full-neg', -secondaryFull + "px");
|
203 |
|
204 | this.restartAnimation();
|
205 | };
|
206 | return MDCLinearProgressFoundation;
|
207 | }(MDCFoundation));
|
208 | export { MDCLinearProgressFoundation };
|
209 |
|
210 | export default MDCLinearProgressFoundation;
|
211 |
|
\ | No newline at end of file |