feat(ripple): Add optional event parameter to activate/deactivate (#321)

Author: trimox

src/demo-app/components/buttons/button-demo/button-demo.html

@@ -89,11 +89,7 @@ <h1 mdc-typography-display1>Buttons</h1>
   Icon
 <span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
-  <button mdc-button [raised]="true" [mdc-theme-dark]="true">Dark theme</button>
-<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
-  [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
-  [<span style="color:#e0c589">mdc-theme-dark</span>]=<span style="color:#65b042">"true"</span>></span>Dark theme<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-</pre>  <button mdc-button [primary]="true" [raised]="true" [disableRipple]="true">Ink ripple - Disabled</button>
+<button mdc-button [primary]="true" [raised]="true" [disableRipple]="true">Ink ripple - Disabled</button>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
   [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
   [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>

src/lib/button/button.ts

@@ -89,14 +89,15 @@ export class MdcButton implements AfterViewInit {
   constructor(
     public renderer: Renderer2,
     public elementRef: ElementRef,
-    public ripple: MdcRipple) {
-    this.ripple.init();
-  }
+    public ripple: MdcRipple) { }
 
   ngAfterViewInit() {
     if (this.buttonIcon) {
       this.renderer.addClass(this.buttonIcon.elementRef.nativeElement, 'mdc-button__icon');
     }
+    if (!this.disableRipple) {
+      this.ripple.init();
+    }
   }
 
   private handleClick_(event: Event) {

src/lib/core/ripple/ripple-adapter.d.ts src/lib/core/ripple/adapter.d.tssrc/lib/core/ripple/ripple-adapter.d.ts renamed to src/lib/core/ripple/adapter.d.ts

@@ -12,16 +12,16 @@ import { MdcRipple } from './ripple.service';
 })
 export class MdcSurfaceDirective {
   @Input('mdc-surface')
-  get mdcSurface() { return this.ripple_.active; }
+  get mdcSurface() { return this.ripple.active; }
   set mdcSurface(value: boolean) {
-    this.ripple_.active = toBoolean(value);
+    this.ripple.active = toBoolean(value);
   }
   @HostBinding('style.cursor') cursor:string = 'pointer';
   @HostBinding('class.mdc-ripple-surface') get classSurface(): string {
     return this.mdcSurface ? 'mdc-ripple-surface' : '';
   }
 
-  constructor(private ripple_: MdcRipple) { }
+  constructor(public ripple: MdcRipple) { }
 }
 
 @Directive({
@@ -30,15 +30,15 @@ export class MdcSurfaceDirective {
 })
 export class MdcRippleDirective {
   @Input('mdc-ripple')
-  get mdcRipple() { return this.ripple_.active; }
+  get mdcRipple() { return this.ripple.active; }
   set mdcRipple(value: boolean) {
-    this.ripple_.active = value;
+    this.ripple.active = value;
   }
   @HostBinding('class.mdc-ripple-surface') get classSurface(): string {
     return this.mdcRipple ? 'mdc-ripple-surface' : '';
   }
 
-  constructor(private ripple_: MdcRipple) {
-    this.ripple_.init();
+  constructor(public ripple: MdcRipple) {
+    this.ripple.init();
   }
 }

src/lib/core/ripple/ripple.directive.ts

@@ -6,25 +6,25 @@ import {
 } from '@angular/core';
 import { toBoolean, isBrowser } from '../../common';
 
-import { MDCRippleAdapter } from './ripple-adapter';
+import { MDCRippleAdapter } from './adapter';
 import { supportsCssVariables } from '@material/ripple/util';
 import { MDCRippleFoundation } from '@material/ripple';
 
 @Injectable()
 export class MdcRipple implements OnDestroy {
-  interactionListenerFn: () => void;
-  resizeListenerFn: () => void;
-  private disabled_: boolean;
+  private _interactionListenerFn: () => void;
+  private _resizeListenerFn: () => void;
+  private _disabled: boolean = false;
 
   unbounded: boolean;
   active: boolean;
-  get disabled() { return this.disabled_; }
+  get disabled() { return this._disabled; }
   set disabled(value) {
-    this.disabled_ = toBoolean(value);
-    if (this.disabled_) {
-      this._foundation.deactivate();
+    this._disabled = toBoolean(value);
+    if (this._disabled) {
+      this._foundation.destroy();
     } else {
-      this._foundation.activate();
+      this._foundation.init();
     }
   }
 
@@ -33,39 +33,37 @@ export class MdcRipple implements OnDestroy {
     isUnbounded: () => this.unbounded,
     isSurfaceActive: () => this.active,
     isSurfaceDisabled: () => {
-      return (this._root.nativeElement.attributes.getNamedItem('disabled') || this.disabled) ? true : false;
+      return (this.elementRef.nativeElement.attributes.getNamedItem('disabled') || this.disabled) ? true : false;
     },
     addClass: (className: string) => {
-      this._renderer.addClass(this._root.nativeElement, className);
+      this._renderer.addClass(this.elementRef.nativeElement, className);
     },
     removeClass: (className: string) => {
-      this._renderer.removeClass(this._root.nativeElement, className);
+      this._renderer.removeClass(this.elementRef.nativeElement, className);
     },
     registerInteractionHandler: (evtType: string, handler: EventListener) => {
-      this.resizeListenerFn = this._renderer.listen(this._root.nativeElement, evtType, handler);
+      this._resizeListenerFn = this._renderer.listen(this.elementRef.nativeElement, evtType, handler);
     },
     deregisterInteractionHandler: (evtType: string, handler: EventListener) => {
-      if (this.interactionListenerFn) {
-        this.interactionListenerFn();
+      if (this._interactionListenerFn) {
+        this._interactionListenerFn();
       }
     },
     registerResizeHandler: (handler: EventListener) => {
       if (isBrowser()) {
-        this.resizeListenerFn = this._renderer.listen(window, 'resize', handler);
+        this._resizeListenerFn = this._renderer.listen(window, 'resize', handler);
       }
     },
     deregisterResizeHandler: (handler: EventListener) => {
-      if (isBrowser() && this.resizeListenerFn) {
-        this.resizeListenerFn();
+      if (isBrowser() && this._resizeListenerFn) {
+        this._resizeListenerFn();
       }
     },
     updateCssVariable: (varName: string, value: string) => {
-      if (this._root) {
-        this._root.nativeElement.style.setProperty(varName, value);
-      }
+      this.elementRef.nativeElement.style.setProperty(varName, value);
     },
     computeBoundingRect: () => {
-      const { left, top, height, width } = this._root.nativeElement.getBoundingClientRect();
+      const { left, top, height, width } = this.elementRef.nativeElement.getBoundingClientRect();
       return {
         top,
         left,
@@ -93,7 +91,7 @@ export class MdcRipple implements OnDestroy {
 
   constructor(
     private _renderer: Renderer2,
-    private _root: ElementRef) {
+    public elementRef: ElementRef) {
   }
 
   ngOnDestroy() {
@@ -105,15 +103,23 @@ export class MdcRipple implements OnDestroy {
     this.unbounded = unbounded;
   }
 
-  activate(): void {
-    this._foundation.activate();
+  activate(event?: Event): void {
+    this._foundation.activate(event);
   }
 
-  deactivate(): void {
-    this._foundation.deactivate();
+  deactivate(event?: Event): void {
+    this._foundation.deactivate(event);
   }
 
   layout(): void {
     this._foundation.layout();
   }
+
+  isSurfaceDisabled(): boolean {
+    return this._mdcAdapter.isSurfaceDisabled();
+  }
+
+  isSurfaceActive(): boolean {
+    return this._mdcAdapter.isSurfaceActive();
+  }
 }

src/lib/core/ripple/ripple.service.ts

@@ -199,7 +199,7 @@ export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy {
     this._foundation.init();
     this._registry.listen_(this._renderer, "click", (evt) => {
       if (this.closeOnClick) {
-        this._foundation.close()
+        this._foundation.close();
       }
     }, this.drawerElement);
   }

src/lib/drawer/temporary/drawer-temporary.component.ts

@@ -101,6 +101,29 @@ describe('MdcButton', () => {
       fixture.detectChanges();
       expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be disabled');
     });
+
+    it('#ripple should be deactivated', () => {
+      buttonInstance.ripple.deactivate();
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.classList.contains('mdc-ripple-surface')).toBe(false);
+    });
+
+    it('#ripple surface should be removed', () => {
+      buttonInstance.ripple.active = false;
+      fixture.detectChanges();
+      expect(buttonInstance.ripple.isSurfaceActive()).toBe(false);
+    });
+
+    it('#ripple should be disabled', () => {
+      buttonInstance.ripple.disabled = true;
+      fixture.detectChanges();
+      expect(buttonInstance.ripple.isSurfaceDisabled()).toBe(true);
+    });
+
+    it('#ripple should be updated', () => {
+      buttonInstance.ripple.layout();
+      fixture.detectChanges();
+    });
   });
 
   // Anchor button tests

test/unit/button/button.test.ts

@@ -18,14 +18,13 @@ describe('MdcRippleDirective', () => {
       ],
       declarations: [
         SimpleRipple,
-      ]
+      ],
     });
     TestBed.compileComponents();
   }));
 
   describe('basic behaviors', () => {
     let testDebugElement: DebugElement;
-    let testNativeElement: HTMLElement;
     let testInstance: MdcRippleDirective;
     let testComponent: SimpleRipple;
 
@@ -34,7 +33,6 @@ describe('MdcRippleDirective', () => {
       fixture.detectChanges();
 
       testDebugElement = fixture.debugElement.query(By.directive(MdcRippleDirective));
-      testNativeElement = testDebugElement.nativeElement;
       testInstance = testDebugElement.componentInstance;
       testComponent = fixture.debugElement.componentInstance;
     });
@@ -69,7 +67,6 @@ describe('MdcSurfaceDirective', () => {
 
   describe('basic behaviors', () => {
     let testDebugElement: DebugElement;
-    let testNativeElement: HTMLElement;
     let testInstance: MdcSurfaceDirective;
     let testComponent: SimpleSurface;
 
@@ -78,7 +75,6 @@ describe('MdcSurfaceDirective', () => {
       fixture.detectChanges();
 
       testDebugElement = fixture.debugElement.query(By.directive(MdcSurfaceDirective));
-      testNativeElement = testDebugElement.nativeElement;
       testInstance = testDebugElement.componentInstance;
       testComponent = fixture.debugElement.componentInstance;
     });