Use viewport ruler

Author: tinayuangao

src/lib/button/button.spec.ts

@@ -2,6 +2,7 @@ import {async, TestBed, ComponentFixture} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdButtonModule} from './button';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 describe('MdButton', () => {
@@ -10,6 +11,9 @@ describe('MdButton', () => {
     TestBed.configureTestingModule({
       imports: [MdButtonModule.forRoot()],
       declarations: [TestApp],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -210,3 +214,15 @@ class TestApp {
     this.clickCount++;
   }
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/checkbox/checkbox.spec.ts

@@ -12,6 +12,7 @@ import {
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './checkbox';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
@@ -32,6 +33,9 @@ describe('MdCheckbox', () => {
         CheckboxWithNameAttribute,
         CheckboxWithChangeEvent,
       ],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -660,3 +664,15 @@ class CheckboxWithNameAttribute {}
 class CheckboxWithChangeEvent {
   lastEvent: MdCheckboxChange;
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

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

@@ -190,13 +190,14 @@ describe('MdRipple', () => {
       let top = 75;
 
       // Add a very large element to make the page scroll
-      let veryLargeElement: HTMLElement = document.createElement('div');
+      let veryLargeElement = document.createElement('div');
       veryLargeElement.style.width = '4000px';
       veryLargeElement.style.height = '4000px';
       document.body.appendChild(veryLargeElement);
       document.body.scrollTop = pageScrollTop;
       document.body.scrollLeft = pageScrollLeft;
 
+      rippleElement.style.position = 'absolute';
       rippleElement.style.left = `${elementLeft}px`;
       rippleElement.style.top = `${elementTop}px`;
 

src/lib/core/ripple/ripple.ts

@@ -15,6 +15,7 @@ import {
   ForegroundRipple,
   ForegroundRippleState,
 } from './ripple-renderer';
+import {ViewportRuler} from "../overlay/position/viewport-ruler";
 
 
 @Directive({
@@ -60,14 +61,16 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
   @HostBinding('class.md-ripple-unbounded') @Input('md-ripple-unbounded') unbounded: boolean;
 
   private _rippleRenderer: RippleRenderer;
+  _ruler: ViewportRuler;
 
-  constructor(_elementRef: ElementRef) {
+  constructor(_elementRef: ElementRef, _ruler: ViewportRuler) {
     // These event handlers are attached to the element that triggers the ripple animations.
     const eventHandlers = new Map<string, (e: Event) => void>();
     eventHandlers.set('mousedown', (event: MouseEvent) => this._mouseDown(event));
     eventHandlers.set('click', (event: MouseEvent) => this._click(event));
     eventHandlers.set('mouseleave', (event: MouseEvent) => this._mouseLeave(event));
     this._rippleRenderer = new RippleRenderer(_elementRef, eventHandlers);
+    this._ruler = _ruler;
   }
 
   /** TODO: internal */
@@ -161,11 +164,10 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
       // FIXME: This fails on IE11, which still sets pageX/Y and screenX/Y on keyboard clicks.
       const isKeyEvent =
           (event.screenX === 0 && event.screenY === 0 && event.pageX === 0 && event.pageY === 0);
-      var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
-          document.body.scrollTop || 0;
-      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft ||
-          document.body.scrollLeft || 0;
-      this.end(event.pageX - scrollLeft, event.pageY - scrollTop, isKeyEvent);
+
+      this.end(event.pageX - this._ruler.getViewportScrollPosition().left,
+        event.pageY - this._ruler.getViewportScrollPosition().top,
+        isKeyEvent);
     }
   }
 
@@ -189,7 +191,7 @@ export class MdRippleModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdRippleModule,
-      providers: []
+      providers: [ViewportRuler]
     };
   }
 }

src/lib/radio/radio.spec.ts

@@ -3,6 +3,7 @@ import {NgControl, FormsModule} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdRadioGroup, MdRadioButton, MdRadioChange, MdRadioModule} from './radio';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 describe('MdRadio', () => {
@@ -15,6 +16,9 @@ describe('MdRadio', () => {
         RadioGroupWithNgModel,
         StandaloneRadioButtons,
       ],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -593,3 +597,15 @@ function dispatchEvent(eventName: string, element: HTMLElement): void {
   event.initEvent(eventName, true, true);
   element.dispatchEvent(event);
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/tabs/tab-group.spec.ts

@@ -7,6 +7,7 @@ import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {Observable} from 'rxjs/Observable';
 import {LayoutDirection, Dir} from '../core/rtl/dir';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 describe('MdTabGroup', () => {
@@ -24,7 +25,8 @@ describe('MdTabGroup', () => {
       providers: [
         {provide: Dir, useFactory: () => {
           return {value: dir};
-        }}
+        }},
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
       ]
     });
 
@@ -493,3 +495,15 @@ class TabGroupWithSimpleApi {
   otherContent = 'Apples, grapes';
   @ViewChild('legumes') legumes: any;
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -2,6 +2,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MdTabsModule} from '../tabs';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 
 
 describe('MdTabNavBar', () => {
@@ -12,6 +13,9 @@ describe('MdTabNavBar', () => {
       declarations: [
         SimpleTabNavBarTestApp
       ],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -53,3 +57,15 @@ describe('MdTabNavBar', () => {
 class SimpleTabNavBarTestApp {
   activeIndex = 0;
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -1,6 +1,7 @@
 import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/ripple';
+import {ViewportRuler} from "../../core/overlay/position/viewport-ruler";
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -51,7 +52,7 @@ export class MdTabLink {
   selector: '[md-tab-link]',
 })
 export class MdTabLinkRipple extends MdRipple {
-  constructor(private _element: ElementRef) {
-    super(_element);
+  constructor(private _element: ElementRef, _ruler: ViewportRuler) {
+    super(_element, _ruler);
   }
 }