UNPKG

26 kBJavaScriptView Raw
1/**
2 * @license
3 * Copyright 2016 Google Inc.
4 *
5 * Permission is hereby granted, free of charge, to any person obtaining a copy
6 * of this software and associated documentation files (the "Software"), to deal
7 * in the Software without restriction, including without limitation the rights
8 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 * copies of the Software, and to permit persons to whom the Software is
10 * furnished to do so, subject to the following conditions:
11 *
12 * The above copyright notice and this permission notice shall be included in
13 * all copies or substantial portions of the Software.
14 *
15 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 * THE SOFTWARE.
22 */
23import { __assign, __extends, __values } from "tslib";
24import { MDCFoundation } from '@material/base/foundation';
25import { cssClasses, numbers, strings } from './constants';
26import { getNormalizedEventCoords } from './util';
27// Activation events registered on the root element of each instance for activation
28var ACTIVATION_EVENT_TYPES = [
29 'touchstart', 'pointerdown', 'mousedown', 'keydown',
30];
31// Deactivation events registered on documentElement when a pointer-related down event occurs
32var POINTER_DEACTIVATION_EVENT_TYPES = [
33 'touchend', 'pointerup', 'mouseup', 'contextmenu',
34];
35// simultaneous nested activations
36var activatedTargets = [];
37var MDCRippleFoundation = /** @class */ (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 // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
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 * @param evt Optional event containing position information.
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 * We compute this property so that we are not querying information about the client
196 * until the point in time where the foundation requests it. This prevents scenarios where
197 * client-side feature-detection may happen too early, such as when components are rendered on the server
198 * and then initialized at mount time on the client.
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 * supportsPressRipple Passed from init to save a redundant function call
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 // Avoid reacting to follow-on events fired by touch device after an already-processed user interaction
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 // Immediately reset activation state, while preserving logic that prevents touch follow-on events
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 // Reset array on next frame after the current event has had a chance to bubble to prevent ancestor ripples
345 activatedTargets = [];
346 if (!activationState.wasElementMadeActive
347 && evt !== undefined
348 && (evt.key === ' ' || evt.keyCode === 32)) {
349 // If space was pressed, try again within an rAF call to detect :active, because different UAs report
350 // active states inconsistently when they're called within event handling code:
351 // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971
352 // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
353 // We try first outside rAF to support Edge, which does not exhibit this problem, but will crash if a CSS
354 // variable is set within a rAF callback for a submit button interaction (#2241).
355 activationState.wasElementMadeActive = _this.checkElementMadeActive(evt);
356 if (activationState.wasElementMadeActive) {
357 _this.animateActivation();
358 }
359 }
360 if (!activationState.wasElementMadeActive) {
361 // Reset activation state immediately if element was not made active.
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 // Cancel any ongoing activation/deactivation animations
387 clearTimeout(this.activationTimer);
388 clearTimeout(this.fgDeactivationRemovalTimer);
389 this.rmBoundedActivationClasses();
390 this.adapter.removeClass(FG_DEACTIVATION);
391 // Force layout in order to re-trigger the animation.
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 // Center the element around the start point.
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 // This method is called both when a pointing device is released, and when the activation animation ends.
424 // The deactivation animation should only run after both of those occur.
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 // Touch devices may fire additional events for the same interaction within a short time.
447 // Store the previous event until it's safe to assume that subsequent events are for new interactions.
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 // This can happen in scenarios such as when you have a keyup event that blurs the element.
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 // Surface diameter is treated differently for unbounded vs. bounded ripples.
484 // Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
485 // to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
486 // square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
487 // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
488 // `overflow: hidden`.
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 // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
495 var initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
496 // Unbounded ripple size should always be even number to equally center align.
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));
521export { MDCRippleFoundation };
522// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
523export default MDCRippleFoundation;
524//# sourceMappingURL=foundation.js.map
\No newline at end of file