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 { MDCFoundation } from '@material/base/foundation';
|
25 | import { cssClasses, numbers, strings } from './constants';
|
26 | import { getNormalizedEventCoords } from './util';
|
27 |
|
28 | var ACTIVATION_EVENT_TYPES = [
|
29 | 'touchstart', 'pointerdown', 'mousedown', 'keydown',
|
30 | ];
|
31 |
|
32 | var POINTER_DEACTIVATION_EVENT_TYPES = [
|
33 | 'touchend', 'pointerup', 'mouseup', 'contextmenu',
|
34 | ];
|
35 |
|
36 | var activatedTargets = [];
|
37 | var MDCRippleFoundation = (function (_super) {
|
38 | __extends(MDCRippleFoundation, _super);
|
39 | function MDCRippleFoundation(adapter) {
|
40 | var _this = _super.call(this, __assign(__assign({}, MDCRippleFoundation.defaultAdapter), adapter)) || this;
|
41 | _this.activationAnimationHasEnded = false;
|
42 | _this.activationTimer = 0;
|
43 | _this.fgDeactivationRemovalTimer = 0;
|
44 | _this.fgScale = '0';
|
45 | _this.frame = { width: 0, height: 0 };
|
46 | _this.initialSize = 0;
|
47 | _this.layoutFrame = 0;
|
48 | _this.maxRadius = 0;
|
49 | _this.unboundedCoords = { left: 0, top: 0 };
|
50 | _this.activationState = _this.defaultActivationState();
|
51 | _this.activationTimerCallback = function () {
|
52 | _this.activationAnimationHasEnded = true;
|
53 | _this.runDeactivationUXLogicIfReady();
|
54 | };
|
55 | _this.activateHandler = function (e) {
|
56 | _this.activateImpl(e);
|
57 | };
|
58 | _this.deactivateHandler = function () {
|
59 | _this.deactivateImpl();
|
60 | };
|
61 | _this.focusHandler = function () {
|
62 | _this.handleFocus();
|
63 | };
|
64 | _this.blurHandler = function () {
|
65 | _this.handleBlur();
|
66 | };
|
67 | _this.resizeHandler = function () {
|
68 | _this.layout();
|
69 | };
|
70 | return _this;
|
71 | }
|
72 | Object.defineProperty(MDCRippleFoundation, "cssClasses", {
|
73 | get: function () {
|
74 | return cssClasses;
|
75 | },
|
76 | enumerable: false,
|
77 | configurable: true
|
78 | });
|
79 | Object.defineProperty(MDCRippleFoundation, "strings", {
|
80 | get: function () {
|
81 | return strings;
|
82 | },
|
83 | enumerable: false,
|
84 | configurable: true
|
85 | });
|
86 | Object.defineProperty(MDCRippleFoundation, "numbers", {
|
87 | get: function () {
|
88 | return numbers;
|
89 | },
|
90 | enumerable: false,
|
91 | configurable: true
|
92 | });
|
93 | Object.defineProperty(MDCRippleFoundation, "defaultAdapter", {
|
94 | get: function () {
|
95 | return {
|
96 | addClass: function () { return undefined; },
|
97 | browserSupportsCssVars: function () { return true; },
|
98 | computeBoundingRect: function () {
|
99 | return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
|
100 | },
|
101 | containsEventTarget: function () { return true; },
|
102 | deregisterDocumentInteractionHandler: function () { return undefined; },
|
103 | deregisterInteractionHandler: function () { return undefined; },
|
104 | deregisterResizeHandler: function () { return undefined; },
|
105 | getWindowPageOffset: function () { return ({ x: 0, y: 0 }); },
|
106 | isSurfaceActive: function () { return true; },
|
107 | isSurfaceDisabled: function () { return true; },
|
108 | isUnbounded: function () { return true; },
|
109 | registerDocumentInteractionHandler: function () { return undefined; },
|
110 | registerInteractionHandler: function () { return undefined; },
|
111 | registerResizeHandler: function () { return undefined; },
|
112 | removeClass: function () { return undefined; },
|
113 | updateCssVariable: function () { return undefined; },
|
114 | };
|
115 | },
|
116 | enumerable: false,
|
117 | configurable: true
|
118 | });
|
119 | MDCRippleFoundation.prototype.init = function () {
|
120 | var _this = this;
|
121 | var supportsPressRipple = this.supportsPressRipple();
|
122 | this.registerRootHandlers(supportsPressRipple);
|
123 | if (supportsPressRipple) {
|
124 | var _a = MDCRippleFoundation.cssClasses, ROOT_1 = _a.ROOT, UNBOUNDED_1 = _a.UNBOUNDED;
|
125 | requestAnimationFrame(function () {
|
126 | _this.adapter.addClass(ROOT_1);
|
127 | if (_this.adapter.isUnbounded()) {
|
128 | _this.adapter.addClass(UNBOUNDED_1);
|
129 |
|
130 | _this.layoutInternal();
|
131 | }
|
132 | });
|
133 | }
|
134 | };
|
135 | MDCRippleFoundation.prototype.destroy = function () {
|
136 | var _this = this;
|
137 | if (this.supportsPressRipple()) {
|
138 | if (this.activationTimer) {
|
139 | clearTimeout(this.activationTimer);
|
140 | this.activationTimer = 0;
|
141 | this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
|
142 | }
|
143 | if (this.fgDeactivationRemovalTimer) {
|
144 | clearTimeout(this.fgDeactivationRemovalTimer);
|
145 | this.fgDeactivationRemovalTimer = 0;
|
146 | this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
|
147 | }
|
148 | var _a = MDCRippleFoundation.cssClasses, ROOT_2 = _a.ROOT, UNBOUNDED_2 = _a.UNBOUNDED;
|
149 | requestAnimationFrame(function () {
|
150 | _this.adapter.removeClass(ROOT_2);
|
151 | _this.adapter.removeClass(UNBOUNDED_2);
|
152 | _this.removeCssVars();
|
153 | });
|
154 | }
|
155 | this.deregisterRootHandlers();
|
156 | this.deregisterDeactivationHandlers();
|
157 | };
|
158 | |
159 |
|
160 |
|
161 | MDCRippleFoundation.prototype.activate = function (evt) {
|
162 | this.activateImpl(evt);
|
163 | };
|
164 | MDCRippleFoundation.prototype.deactivate = function () {
|
165 | this.deactivateImpl();
|
166 | };
|
167 | MDCRippleFoundation.prototype.layout = function () {
|
168 | var _this = this;
|
169 | if (this.layoutFrame) {
|
170 | cancelAnimationFrame(this.layoutFrame);
|
171 | }
|
172 | this.layoutFrame = requestAnimationFrame(function () {
|
173 | _this.layoutInternal();
|
174 | _this.layoutFrame = 0;
|
175 | });
|
176 | };
|
177 | MDCRippleFoundation.prototype.setUnbounded = function (unbounded) {
|
178 | var UNBOUNDED = MDCRippleFoundation.cssClasses.UNBOUNDED;
|
179 | if (unbounded) {
|
180 | this.adapter.addClass(UNBOUNDED);
|
181 | }
|
182 | else {
|
183 | this.adapter.removeClass(UNBOUNDED);
|
184 | }
|
185 | };
|
186 | MDCRippleFoundation.prototype.handleFocus = function () {
|
187 | var _this = this;
|
188 | requestAnimationFrame(function () { return _this.adapter.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED); });
|
189 | };
|
190 | MDCRippleFoundation.prototype.handleBlur = function () {
|
191 | var _this = this;
|
192 | requestAnimationFrame(function () { return _this.adapter.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED); });
|
193 | };
|
194 | |
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 | MDCRippleFoundation.prototype.supportsPressRipple = function () {
|
201 | return this.adapter.browserSupportsCssVars();
|
202 | };
|
203 | MDCRippleFoundation.prototype.defaultActivationState = function () {
|
204 | return {
|
205 | activationEvent: undefined,
|
206 | hasDeactivationUXRun: false,
|
207 | isActivated: false,
|
208 | isProgrammatic: false,
|
209 | wasActivatedByPointer: false,
|
210 | wasElementMadeActive: false,
|
211 | };
|
212 | };
|
213 | |
214 |
|
215 |
|
216 | MDCRippleFoundation.prototype.registerRootHandlers = function (supportsPressRipple) {
|
217 | var e_1, _a;
|
218 | if (supportsPressRipple) {
|
219 | try {
|
220 | for (var ACTIVATION_EVENT_TYPES_1 = __values(ACTIVATION_EVENT_TYPES), ACTIVATION_EVENT_TYPES_1_1 = ACTIVATION_EVENT_TYPES_1.next(); !ACTIVATION_EVENT_TYPES_1_1.done; ACTIVATION_EVENT_TYPES_1_1 = ACTIVATION_EVENT_TYPES_1.next()) {
|
221 | var evtType = ACTIVATION_EVENT_TYPES_1_1.value;
|
222 | this.adapter.registerInteractionHandler(evtType, this.activateHandler);
|
223 | }
|
224 | }
|
225 | catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
226 | finally {
|
227 | try {
|
228 | if (ACTIVATION_EVENT_TYPES_1_1 && !ACTIVATION_EVENT_TYPES_1_1.done && (_a = ACTIVATION_EVENT_TYPES_1.return)) _a.call(ACTIVATION_EVENT_TYPES_1);
|
229 | }
|
230 | finally { if (e_1) throw e_1.error; }
|
231 | }
|
232 | if (this.adapter.isUnbounded()) {
|
233 | this.adapter.registerResizeHandler(this.resizeHandler);
|
234 | }
|
235 | }
|
236 | this.adapter.registerInteractionHandler('focus', this.focusHandler);
|
237 | this.adapter.registerInteractionHandler('blur', this.blurHandler);
|
238 | };
|
239 | MDCRippleFoundation.prototype.registerDeactivationHandlers = function (evt) {
|
240 | var e_2, _a;
|
241 | if (evt.type === 'keydown') {
|
242 | this.adapter.registerInteractionHandler('keyup', this.deactivateHandler);
|
243 | }
|
244 | else {
|
245 | try {
|
246 | for (var POINTER_DEACTIVATION_EVENT_TYPES_1 = __values(POINTER_DEACTIVATION_EVENT_TYPES), POINTER_DEACTIVATION_EVENT_TYPES_1_1 = POINTER_DEACTIVATION_EVENT_TYPES_1.next(); !POINTER_DEACTIVATION_EVENT_TYPES_1_1.done; POINTER_DEACTIVATION_EVENT_TYPES_1_1 = POINTER_DEACTIVATION_EVENT_TYPES_1.next()) {
|
247 | var evtType = POINTER_DEACTIVATION_EVENT_TYPES_1_1.value;
|
248 | this.adapter.registerDocumentInteractionHandler(evtType, this.deactivateHandler);
|
249 | }
|
250 | }
|
251 | catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
252 | finally {
|
253 | try {
|
254 | if (POINTER_DEACTIVATION_EVENT_TYPES_1_1 && !POINTER_DEACTIVATION_EVENT_TYPES_1_1.done && (_a = POINTER_DEACTIVATION_EVENT_TYPES_1.return)) _a.call(POINTER_DEACTIVATION_EVENT_TYPES_1);
|
255 | }
|
256 | finally { if (e_2) throw e_2.error; }
|
257 | }
|
258 | }
|
259 | };
|
260 | MDCRippleFoundation.prototype.deregisterRootHandlers = function () {
|
261 | var e_3, _a;
|
262 | try {
|
263 | for (var ACTIVATION_EVENT_TYPES_2 = __values(ACTIVATION_EVENT_TYPES), ACTIVATION_EVENT_TYPES_2_1 = ACTIVATION_EVENT_TYPES_2.next(); !ACTIVATION_EVENT_TYPES_2_1.done; ACTIVATION_EVENT_TYPES_2_1 = ACTIVATION_EVENT_TYPES_2.next()) {
|
264 | var evtType = ACTIVATION_EVENT_TYPES_2_1.value;
|
265 | this.adapter.deregisterInteractionHandler(evtType, this.activateHandler);
|
266 | }
|
267 | }
|
268 | catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
269 | finally {
|
270 | try {
|
271 | if (ACTIVATION_EVENT_TYPES_2_1 && !ACTIVATION_EVENT_TYPES_2_1.done && (_a = ACTIVATION_EVENT_TYPES_2.return)) _a.call(ACTIVATION_EVENT_TYPES_2);
|
272 | }
|
273 | finally { if (e_3) throw e_3.error; }
|
274 | }
|
275 | this.adapter.deregisterInteractionHandler('focus', this.focusHandler);
|
276 | this.adapter.deregisterInteractionHandler('blur', this.blurHandler);
|
277 | if (this.adapter.isUnbounded()) {
|
278 | this.adapter.deregisterResizeHandler(this.resizeHandler);
|
279 | }
|
280 | };
|
281 | MDCRippleFoundation.prototype.deregisterDeactivationHandlers = function () {
|
282 | var e_4, _a;
|
283 | this.adapter.deregisterInteractionHandler('keyup', this.deactivateHandler);
|
284 | try {
|
285 | for (var POINTER_DEACTIVATION_EVENT_TYPES_2 = __values(POINTER_DEACTIVATION_EVENT_TYPES), POINTER_DEACTIVATION_EVENT_TYPES_2_1 = POINTER_DEACTIVATION_EVENT_TYPES_2.next(); !POINTER_DEACTIVATION_EVENT_TYPES_2_1.done; POINTER_DEACTIVATION_EVENT_TYPES_2_1 = POINTER_DEACTIVATION_EVENT_TYPES_2.next()) {
|
286 | var evtType = POINTER_DEACTIVATION_EVENT_TYPES_2_1.value;
|
287 | this.adapter.deregisterDocumentInteractionHandler(evtType, this.deactivateHandler);
|
288 | }
|
289 | }
|
290 | catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
291 | finally {
|
292 | try {
|
293 | if (POINTER_DEACTIVATION_EVENT_TYPES_2_1 && !POINTER_DEACTIVATION_EVENT_TYPES_2_1.done && (_a = POINTER_DEACTIVATION_EVENT_TYPES_2.return)) _a.call(POINTER_DEACTIVATION_EVENT_TYPES_2);
|
294 | }
|
295 | finally { if (e_4) throw e_4.error; }
|
296 | }
|
297 | };
|
298 | MDCRippleFoundation.prototype.removeCssVars = function () {
|
299 | var _this = this;
|
300 | var rippleStrings = MDCRippleFoundation.strings;
|
301 | var keys = Object.keys(rippleStrings);
|
302 | keys.forEach(function (key) {
|
303 | if (key.indexOf('VAR_') === 0) {
|
304 | _this.adapter.updateCssVariable(rippleStrings[key], null);
|
305 | }
|
306 | });
|
307 | };
|
308 | MDCRippleFoundation.prototype.activateImpl = function (evt) {
|
309 | var _this = this;
|
310 | if (this.adapter.isSurfaceDisabled()) {
|
311 | return;
|
312 | }
|
313 | var activationState = this.activationState;
|
314 | if (activationState.isActivated) {
|
315 | return;
|
316 | }
|
317 |
|
318 | var previousActivationEvent = this.previousActivationEvent;
|
319 | var isSameInteraction = previousActivationEvent && evt !== undefined && previousActivationEvent.type !== evt.type;
|
320 | if (isSameInteraction) {
|
321 | return;
|
322 | }
|
323 | activationState.isActivated = true;
|
324 | activationState.isProgrammatic = evt === undefined;
|
325 | activationState.activationEvent = evt;
|
326 | activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : evt !== undefined && (evt.type === 'mousedown' || evt.type === 'touchstart' || evt.type === 'pointerdown');
|
327 | var hasActivatedChild = evt !== undefined &&
|
328 | activatedTargets.length > 0 &&
|
329 | activatedTargets.some(function (target) { return _this.adapter.containsEventTarget(target); });
|
330 | if (hasActivatedChild) {
|
331 |
|
332 | this.resetActivationState();
|
333 | return;
|
334 | }
|
335 | if (evt !== undefined) {
|
336 | activatedTargets.push(evt.target);
|
337 | this.registerDeactivationHandlers(evt);
|
338 | }
|
339 | activationState.wasElementMadeActive = this.checkElementMadeActive(evt);
|
340 | if (activationState.wasElementMadeActive) {
|
341 | this.animateActivation();
|
342 | }
|
343 | requestAnimationFrame(function () {
|
344 |
|
345 | activatedTargets = [];
|
346 | if (!activationState.wasElementMadeActive
|
347 | && evt !== undefined
|
348 | && (evt.key === ' ' || evt.keyCode === 32)) {
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 | activationState.wasElementMadeActive = _this.checkElementMadeActive(evt);
|
356 | if (activationState.wasElementMadeActive) {
|
357 | _this.animateActivation();
|
358 | }
|
359 | }
|
360 | if (!activationState.wasElementMadeActive) {
|
361 |
|
362 | _this.activationState = _this.defaultActivationState();
|
363 | }
|
364 | });
|
365 | };
|
366 | MDCRippleFoundation.prototype.checkElementMadeActive = function (evt) {
|
367 | return (evt !== undefined && evt.type === 'keydown') ?
|
368 | this.adapter.isSurfaceActive() :
|
369 | true;
|
370 | };
|
371 | MDCRippleFoundation.prototype.animateActivation = function () {
|
372 | var _this = this;
|
373 | var _a = MDCRippleFoundation.strings, VAR_FG_TRANSLATE_START = _a.VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END = _a.VAR_FG_TRANSLATE_END;
|
374 | var _b = MDCRippleFoundation.cssClasses, FG_DEACTIVATION = _b.FG_DEACTIVATION, FG_ACTIVATION = _b.FG_ACTIVATION;
|
375 | var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
|
376 | this.layoutInternal();
|
377 | var translateStart = '';
|
378 | var translateEnd = '';
|
379 | if (!this.adapter.isUnbounded()) {
|
380 | var _c = this.getFgTranslationCoordinates(), startPoint = _c.startPoint, endPoint = _c.endPoint;
|
381 | translateStart = startPoint.x + "px, " + startPoint.y + "px";
|
382 | translateEnd = endPoint.x + "px, " + endPoint.y + "px";
|
383 | }
|
384 | this.adapter.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
|
385 | this.adapter.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
|
386 |
|
387 | clearTimeout(this.activationTimer);
|
388 | clearTimeout(this.fgDeactivationRemovalTimer);
|
389 | this.rmBoundedActivationClasses();
|
390 | this.adapter.removeClass(FG_DEACTIVATION);
|
391 |
|
392 | this.adapter.computeBoundingRect();
|
393 | this.adapter.addClass(FG_ACTIVATION);
|
394 | this.activationTimer = setTimeout(function () {
|
395 | _this.activationTimerCallback();
|
396 | }, DEACTIVATION_TIMEOUT_MS);
|
397 | };
|
398 | MDCRippleFoundation.prototype.getFgTranslationCoordinates = function () {
|
399 | var _a = this.activationState, activationEvent = _a.activationEvent, wasActivatedByPointer = _a.wasActivatedByPointer;
|
400 | var startPoint;
|
401 | if (wasActivatedByPointer) {
|
402 | startPoint = getNormalizedEventCoords(activationEvent, this.adapter.getWindowPageOffset(), this.adapter.computeBoundingRect());
|
403 | }
|
404 | else {
|
405 | startPoint = {
|
406 | x: this.frame.width / 2,
|
407 | y: this.frame.height / 2,
|
408 | };
|
409 | }
|
410 |
|
411 | startPoint = {
|
412 | x: startPoint.x - (this.initialSize / 2),
|
413 | y: startPoint.y - (this.initialSize / 2),
|
414 | };
|
415 | var endPoint = {
|
416 | x: (this.frame.width / 2) - (this.initialSize / 2),
|
417 | y: (this.frame.height / 2) - (this.initialSize / 2),
|
418 | };
|
419 | return { startPoint: startPoint, endPoint: endPoint };
|
420 | };
|
421 | MDCRippleFoundation.prototype.runDeactivationUXLogicIfReady = function () {
|
422 | var _this = this;
|
423 |
|
424 |
|
425 | var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
|
426 | var _a = this.activationState, hasDeactivationUXRun = _a.hasDeactivationUXRun, isActivated = _a.isActivated;
|
427 | var activationHasEnded = hasDeactivationUXRun || !isActivated;
|
428 | if (activationHasEnded && this.activationAnimationHasEnded) {
|
429 | this.rmBoundedActivationClasses();
|
430 | this.adapter.addClass(FG_DEACTIVATION);
|
431 | this.fgDeactivationRemovalTimer = setTimeout(function () {
|
432 | _this.adapter.removeClass(FG_DEACTIVATION);
|
433 | }, numbers.FG_DEACTIVATION_MS);
|
434 | }
|
435 | };
|
436 | MDCRippleFoundation.prototype.rmBoundedActivationClasses = function () {
|
437 | var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
|
438 | this.adapter.removeClass(FG_ACTIVATION);
|
439 | this.activationAnimationHasEnded = false;
|
440 | this.adapter.computeBoundingRect();
|
441 | };
|
442 | MDCRippleFoundation.prototype.resetActivationState = function () {
|
443 | var _this = this;
|
444 | this.previousActivationEvent = this.activationState.activationEvent;
|
445 | this.activationState = this.defaultActivationState();
|
446 |
|
447 |
|
448 | setTimeout(function () { return _this.previousActivationEvent = undefined; }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
|
449 | };
|
450 | MDCRippleFoundation.prototype.deactivateImpl = function () {
|
451 | var _this = this;
|
452 | var activationState = this.activationState;
|
453 |
|
454 | if (!activationState.isActivated) {
|
455 | return;
|
456 | }
|
457 | var state = __assign({}, activationState);
|
458 | if (activationState.isProgrammatic) {
|
459 | requestAnimationFrame(function () {
|
460 | _this.animateDeactivation(state);
|
461 | });
|
462 | this.resetActivationState();
|
463 | }
|
464 | else {
|
465 | this.deregisterDeactivationHandlers();
|
466 | requestAnimationFrame(function () {
|
467 | _this.activationState.hasDeactivationUXRun = true;
|
468 | _this.animateDeactivation(state);
|
469 | _this.resetActivationState();
|
470 | });
|
471 | }
|
472 | };
|
473 | MDCRippleFoundation.prototype.animateDeactivation = function (_a) {
|
474 | var wasActivatedByPointer = _a.wasActivatedByPointer, wasElementMadeActive = _a.wasElementMadeActive;
|
475 | if (wasActivatedByPointer || wasElementMadeActive) {
|
476 | this.runDeactivationUXLogicIfReady();
|
477 | }
|
478 | };
|
479 | MDCRippleFoundation.prototype.layoutInternal = function () {
|
480 | var _this = this;
|
481 | this.frame = this.adapter.computeBoundingRect();
|
482 | var maxDim = Math.max(this.frame.height, this.frame.width);
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 | var getBoundedRadius = function () {
|
490 | var hypotenuse = Math.sqrt(Math.pow(_this.frame.width, 2) + Math.pow(_this.frame.height, 2));
|
491 | return hypotenuse + MDCRippleFoundation.numbers.PADDING;
|
492 | };
|
493 | this.maxRadius = this.adapter.isUnbounded() ? maxDim : getBoundedRadius();
|
494 |
|
495 | var initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
|
496 |
|
497 | if (this.adapter.isUnbounded() && initialSize % 2 !== 0) {
|
498 | this.initialSize = initialSize - 1;
|
499 | }
|
500 | else {
|
501 | this.initialSize = initialSize;
|
502 | }
|
503 | this.fgScale = "" + this.maxRadius / this.initialSize;
|
504 | this.updateLayoutCssVars();
|
505 | };
|
506 | MDCRippleFoundation.prototype.updateLayoutCssVars = function () {
|
507 | var _a = MDCRippleFoundation.strings, VAR_FG_SIZE = _a.VAR_FG_SIZE, VAR_LEFT = _a.VAR_LEFT, VAR_TOP = _a.VAR_TOP, VAR_FG_SCALE = _a.VAR_FG_SCALE;
|
508 | this.adapter.updateCssVariable(VAR_FG_SIZE, this.initialSize + "px");
|
509 | this.adapter.updateCssVariable(VAR_FG_SCALE, this.fgScale);
|
510 | if (this.adapter.isUnbounded()) {
|
511 | this.unboundedCoords = {
|
512 | left: Math.round((this.frame.width / 2) - (this.initialSize / 2)),
|
513 | top: Math.round((this.frame.height / 2) - (this.initialSize / 2)),
|
514 | };
|
515 | this.adapter.updateCssVariable(VAR_LEFT, this.unboundedCoords.left + "px");
|
516 | this.adapter.updateCssVariable(VAR_TOP, this.unboundedCoords.top + "px");
|
517 | }
|
518 | };
|
519 | return MDCRippleFoundation;
|
520 | }(MDCFoundation));
|
521 | export { MDCRippleFoundation };
|
522 |
|
523 | export default MDCRippleFoundation;
|
524 |
|
\ | No newline at end of file |