feat(ripple): Call layout on each activation (#2567)

Author: kfranqueiro

packages/mdc-ripple/foundation.js

@@ -209,8 +209,9 @@ class MDCRippleFoundation extends MDCFoundation {
       this.adapter_.addClass(ROOT);
       if (this.adapter_.isUnbounded()) {
         this.adapter_.addClass(UNBOUNDED);
+        // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
+        this.layoutInternal_();
       }
-      this.layoutInternal_();
     });
   }
 
@@ -244,7 +245,10 @@ class MDCRippleFoundation extends MDCFoundation {
     });
     this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
     this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
-    this.adapter_.registerResizeHandler(this.resizeHandler_);
+
+    if (this.adapter_.isUnbounded()) {
+      this.adapter_.registerResizeHandler(this.resizeHandler_);
+    }
   }
 
   /**
@@ -268,7 +272,10 @@ class MDCRippleFoundation extends MDCFoundation {
     });
     this.adapter_.deregisterInteractionHandler('focus', this.focusHandler_);
     this.adapter_.deregisterInteractionHandler('blur', this.blurHandler_);
-    this.adapter_.deregisterResizeHandler(this.resizeHandler_);
+
+    if (this.adapter_.isUnbounded()) {
+      this.adapter_.deregisterResizeHandler(this.resizeHandler_);
+    }
   }
 
   /** @private */
@@ -380,6 +387,8 @@ class MDCRippleFoundation extends MDCFoundation {
     const {FG_DEACTIVATION, FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
     const {DEACTIVATION_TIMEOUT_MS} = MDCRippleFoundation.numbers;
 
+    this.layoutInternal_();
+
     let translateStart = '';
     let translateEnd = '';
 

test/unit/mdc-ripple/foundation-general-events.test.js

@@ -23,7 +23,8 @@ import {cssClasses, strings} from '../../../packages/mdc-ripple/constants';
 
 suite('MDCRippleFoundation - General Events');
 
-testFoundation('re-lays out the component on resize event', ({foundation, adapter, mockRaf}) => {
+testFoundation('re-lays out the component on resize event for unbounded ripple', ({foundation, adapter, mockRaf}) => {
+  td.when(adapter.isUnbounded()).thenReturn(true);
   td.when(adapter.computeBoundingRect()).thenReturn({
     width: 100,
     height: 200,
@@ -54,6 +55,7 @@ testFoundation('re-lays out the component on resize event', ({foundation, adapte
 });
 
 testFoundation('debounces layout within the same frame on resize', ({foundation, adapter, mockRaf}) => {
+  td.when(adapter.isUnbounded()).thenReturn(true);
   td.when(adapter.computeBoundingRect()).thenReturn({
     width: 100,
     height: 200,

test/unit/mdc-ripple/foundation.test.js

@@ -78,47 +78,26 @@ testFoundation('#init gracefully exits when css variables are not supported', fa
     td.verify(adapter.addClass(cssClasses.ROOT), {times: 0});
   });
 
-testFoundation(`#init sets ${strings.VAR_FG_SIZE} to the circumscribing circle's diameter`,
-  ({foundation, adapter, mockRaf}) => {
-    const size = 200;
-    td.when(adapter.computeBoundingRect()).thenReturn({width: size, height: size / 2});
-    foundation.init();
-    mockRaf.flush();
-    const initialSize = size * numbers.INITIAL_ORIGIN_SCALE;
-
-    td.verify(adapter.updateCssVariable(strings.VAR_FG_SIZE, `${initialSize}px`));
-  });
-
-testFoundation(`#init centers via ${strings.VAR_LEFT} and ${strings.VAR_TOP} when unbounded`,
-  ({foundation, adapter, mockRaf}) => {
-    const width = 200;
-    const height = 100;
-    const maxSize = Math.max(width, height);
-    const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;
-
-    td.when(adapter.computeBoundingRect()).thenReturn({width, height});
-    td.when(adapter.isUnbounded()).thenReturn(true);
-    foundation.init();
-    mockRaf.flush();
-
-    td.verify(adapter.updateCssVariable(strings.VAR_LEFT,
-      `${Math.round((width / 2) - (initialSize / 2))}px`));
-    td.verify(adapter.updateCssVariable(strings.VAR_TOP,
-      `${Math.round((height / 2) - (initialSize / 2))}px`));
-  });
-
 testFoundation('#init registers events for interactions on root element', ({foundation, adapter}) => {
   foundation.init();
 
   td.verify(adapter.registerInteractionHandler(td.matchers.isA(String), td.matchers.isA(Function)));
 });
 
-testFoundation('#init registers an event for when a resize occurs', ({foundation, adapter}) => {
+testFoundation('#init registers a resize handler for unbounded ripple', ({foundation, adapter}) => {
+  td.when(adapter.isUnbounded()).thenReturn(true);
   foundation.init();
 
   td.verify(adapter.registerResizeHandler(td.matchers.isA(Function)));
 });
 
+testFoundation('#init does not register a resize handler for bounded ripple', ({foundation, adapter}) => {
+  td.when(adapter.isUnbounded()).thenReturn(false);
+  foundation.init();
+
+  td.verify(adapter.registerResizeHandler(td.matchers.isA(Function)), {times: 0});
+});
+
 testFoundation('#init does not register events if CSS custom properties not supported', ({foundation, adapter}) => {
   td.when(adapter.browserSupportsCssVars()).thenReturn(false);
   foundation.init();
@@ -144,8 +123,9 @@ testFoundation('#destroy unregisters all bound interaction handlers', ({foundati
   td.verify(adapter.deregisterDocumentInteractionHandler(td.matchers.isA(String), td.matchers.isA(Function)));
 });
 
-testFoundation('#destroy unregisters the resize handler', ({foundation, adapter}) => {
+testFoundation('#destroy unregisters the resize handler for unbounded ripple', ({foundation, adapter}) => {
   let resizeHandler;
+  td.when(adapter.isUnbounded()).thenReturn(true);
   td.when(adapter.registerResizeHandler(td.matchers.isA(Function))).thenDo((handler) => {
     resizeHandler = handler;
   });
@@ -155,6 +135,14 @@ testFoundation('#destroy unregisters the resize handler', ({foundation, adapter}
   td.verify(adapter.deregisterResizeHandler(resizeHandler));
 });
 
+testFoundation('#destroy does not unregister resize handler for bounded ripple', ({foundation, adapter}) => {
+  td.when(adapter.isUnbounded()).thenReturn(false);
+  foundation.init();
+  foundation.destroy();
+
+  td.verify(adapter.deregisterResizeHandler(td.matchers.isA(Function)), {times: 0});
+});
+
 testFoundation(`#destroy removes ${cssClasses.ROOT}`, ({foundation, adapter, mockRaf}) => {
   foundation.destroy();
   mockRaf.flush();