Address comments

Author: devversion

src/demo-app/ripple/ripple-demo.ts

@@ -23,7 +23,7 @@ export class RippleDemo {
 
   doManualRipple() {
     if (this.ripple) {
-      this.ripple.createRipple(0, 0, { centered: true });
+      this.ripple.launch(0, 0, { centered: true });
     }
   }
 

src/lib/core/ripple/ripple-renderer.ts

@@ -31,16 +31,16 @@ export type RippleConfig = {
 export class RippleRenderer {
 
   /** Element where the ripples are being added to. */
-  private _targetElement: HTMLElement;
+  private _containerElement: HTMLElement;
 
   /** Element which triggers the ripple elements on mouse events. */
   private _triggerElement: HTMLElement;
 
   /** Whether the mouse is currently down or not. */
   private _isMousedown: boolean = false;
 
-  /** Currently showing ripples that will be closed on mouseup. */
-  private _showingRipples: HTMLElement[] = [];
+  /** Currently active ripples that will be closed on mouseup. */
+  private _activeRipples: HTMLElement[] = [];
 
   /** Events to be registered on the trigger element. */
   private _triggerEvents = new Map<string, any>();
@@ -52,24 +52,24 @@ export class RippleRenderer {
   rippleDisabled: boolean = false;
 
   constructor(_elementRef: ElementRef, private _ngZone: NgZone, private _ruler: ViewportRuler) {
-    this._targetElement = _elementRef.nativeElement;
+    this._containerElement = _elementRef.nativeElement;
 
     // Specify events which need to be registered on the trigger.
     this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
     this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
     this._triggerEvents.set('mouseleave', this.onMouseLeave.bind(this));
 
     // By default use the host element as trigger element.
-    this.setTriggerElement(this._targetElement);
+    this.setTriggerElement(this._containerElement);
   }
 
   /** Fades in a ripple at the given coordinates. */
   fadeInRipple(pageX: number, pageY: number, config: RippleConfig = {}) {
-    let targetRect = this._targetElement.getBoundingClientRect();
+    let containerRect = this._containerElement.getBoundingClientRect();
 
     if (config.centered) {
-      pageX = targetRect.left + targetRect.width / 2;
-      pageY = targetRect.top + targetRect.height / 2;
+      pageX = containerRect.left + containerRect.width / 2;
+      pageY = containerRect.top + containerRect.height / 2;
     } else {
       // Subtract scroll values from the coordinates because calculations below
       // are always relative to the viewport rectangle.
@@ -78,10 +78,10 @@ export class RippleRenderer {
       pageY -= scrollPosition.top;
     }
 
-    let radius = config.radius || distanceToFurthestCorner(pageX, pageY, targetRect);
+    let radius = config.radius || distanceToFurthestCorner(pageX, pageY, containerRect);
     let duration = 1 / (config.speedFactor || 1) * (radius / RIPPLE_SPEED_PX_PER_SECOND);
-    let offsetX = pageX - targetRect.left;
-    let offsetY = pageY - targetRect.top;
+    let offsetX = pageX - containerRect.left;
+    let offsetY = pageY - containerRect.top;
 
     let ripple = document.createElement('div');
     ripple.classList.add('md-ripple-element');
@@ -95,7 +95,7 @@ export class RippleRenderer {
     ripple.style.backgroundColor = config.color;
     ripple.style.transitionDuration = `${duration}s`;
 
-    this._targetElement.appendChild(ripple);
+    this._containerElement.appendChild(ripple);
 
     // By default the browser does not recalculate the styles of dynamically created
     // ripple elements. This is critical because then the `scale` would not animate properly.
@@ -108,7 +108,7 @@ export class RippleRenderer {
     // Wait for the ripple to be faded in. Once faded in the ripple can be hided if the mouse is
     // released.
     this.runTimeoutOutsideZone(() => {
-      this._isMousedown ? this._showingRipples.push(ripple) : this.fadeOutRipple(ripple);
+      this._isMousedown ? this._activeRipples.push(ripple) : this.fadeOutRipple(ripple);
     }, duration * 1000);
   }
 
@@ -151,8 +151,8 @@ export class RippleRenderer {
   /** Listener being called on mouseup event. */
   private onMouseup() {
     this._isMousedown = false;
-    this._showingRipples.forEach(ripple => this.fadeOutRipple(ripple));
-    this._showingRipples = [];
+    this._activeRipples.forEach(ripple => this.fadeOutRipple(ripple));
+    this._activeRipples = [];
   }
 
   /** Listener being called on mouseleave event. */

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

@@ -118,7 +118,7 @@ describe('MdRipple', () => {
 
       expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(0);
 
-      rippleComponent.createRipple(0, 0);
+      rippleComponent.launch(0, 0);
 
       expect(rippleTarget.querySelectorAll('.md-ripple-element').length).toBe(1);
     });

src/lib/core/ripple/ripple.ts

@@ -27,7 +27,9 @@ export class MdRipple implements OnChanges, OnDestroy {
    * The element that triggers the ripple when click events are received. Defaults to the
    * directive's host element.
    */
-  @Input('mdRippleTrigger') trigger: any;
+  // Prevent TS metadata emit from referencing HTMLElement in ripple.js
+  // Otherwise running this code in a Node environment (e.g Universal) will not work.
+  @Input('mdRippleTrigger') trigger: HTMLElement|HTMLElement;
 
   /**
    * Whether the ripple always originates from the center of the host element's bounds, rather
@@ -81,8 +83,8 @@ export class MdRipple implements OnChanges, OnDestroy {
     this._rippleRenderer.setTriggerElement(null);
   }
 
-  /** Creates a manual ripple at the specified position. */
-  createRipple(pageX: number, pageY: number, config?: RippleConfig) {
+  /** Launches a manual ripple at the specified position. */
+  launch(pageX: number, pageY: number, config?: RippleConfig) {
     this._rippleRenderer.fadeInRipple(pageX, pageY, config);
   }