feat(ripple): option to specify global ripple options

* Adds a new DI token that can be used to specify global ripple options.
* The `RippleRef` options are not related to the `MD_DISABLE_RIPPLES` DI token (for API convenience)

Closes #3454

Author: devversion

src/lib/core/ripple/ripple.spec.ts

@@ -2,8 +2,9 @@ import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/
 import {Component, ViewChild} from '@angular/core';
 import {MdRipple, MdRippleModule, MD_DISABLE_RIPPLES, RippleState} from './index';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
-import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
+import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION, RippleConfig} from './ripple-renderer';
 import {dispatchMouseEvent} from '../testing/dispatch-events';
+import {MD_RIPPLES_CONFIG} from './ripple';
 
 /** Extracts the numeric value of a pixel size string like '123px'.  */
 const pxStringToFloat = (s: string) => {
@@ -390,6 +391,54 @@ describe('MdRipple', () => {
 
   });
 
+  describe('with a global config', () => {
+    let rippleDirective: MdRipple;
+
+    function createTestComponent(rippleConfig: RippleConfig) {
+      // Reset the previously configured testing module to be able set new providers.
+      // The testing module has been initialized in the root describe group for the ripples.
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [MdRippleModule],
+        declarations: [BasicRippleContainer],
+        providers: [{ provide: MD_RIPPLES_CONFIG, useValue: rippleConfig }]
+      });
+
+      fixture = TestBed.createComponent(BasicRippleContainer);
+      fixture.detectChanges();
+
+      rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
+      rippleDirective = fixture.componentInstance.ripple;
+    }
+
+    it('should be able to overwrite the speedFactor', fakeAsync(() => {
+      createTestComponent({ speedFactor: 0.5 });
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      // Calculates the duration for fading-in and fading-out the ripple.
+      tick(RIPPLE_FADE_IN_DURATION * 2 + RIPPLE_FADE_OUT_DURATION);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    }));
+
+    it('should be able to overwrite the color', () => {
+      createTestComponent({ color: 'red' });
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      let rippleElement = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
+
+      expect(rippleElement).toBeTruthy();
+      expect(rippleElement.style.backgroundColor).toBe('red');
+    });
+
+  });
+
   describe('configuring behavior', () => {
     let controller: RippleContainerWithInputBindings;
     let rippleComponent: MdRipple;

src/lib/core/ripple/ripple.ts

@@ -13,10 +13,14 @@ import {
 import {RippleConfig, RippleRenderer} from './ripple-renderer';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RippleRef} from './ripple-ref';
+import {extendObject} from '../util/object-extend';
 
 /** OpaqueToken that can be used to globally disable all ripples. Except programmatic ones. */
 export const MD_DISABLE_RIPPLES = new OpaqueToken('md-disable-ripples');
 
+/** OpaqueToken that can be used to specify a global ripple configuration. */
+export const MD_RIPPLES_CONFIG = new OpaqueToken('md-ripples-config');
+
 @Directive({
   selector: '[md-ripple], [mat-ripple]',
   exportAs: 'mdRipple',
@@ -71,7 +75,8 @@ export class MdRipple implements OnChanges, OnDestroy {
   private _rippleRenderer: RippleRenderer;
 
   constructor(elementRef: ElementRef, ngZone: NgZone, ruler: ViewportRuler,
-              @Optional() @Inject(MD_DISABLE_RIPPLES) private _forceDisableRipples: boolean) {
+              @Optional() @Inject(MD_DISABLE_RIPPLES) private _forceDisableRipples: boolean,
+              @Optional() @Inject(MD_RIPPLES_CONFIG) private _globalRippleConfig: RippleConfig) {
 
     this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler);
   }
@@ -102,11 +107,11 @@ export class MdRipple implements OnChanges, OnDestroy {
 
   /** Ripple configuration from the directive's input values. */
   get rippleConfig(): RippleConfig {
-    return {
+    return extendObject({
       centered: this.centered,
       speedFactor: this.speedFactor,
       radius: this.radius,
       color: this.color
-    };
+    }, this._globalRippleConfig);
   }
 }