refactor to use existing Platform class

Author: jelbourn

src/lib/button-toggle/index.ts

@@ -4,20 +4,20 @@ import {MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle} from '
 import {
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
   MdCommonModule,
-  FocusOriginMonitor,
+  StyleModule,
 } from '../core';
 
 
 @NgModule({
-  imports: [FormsModule, MdCommonModule],
+  imports: [FormsModule, MdCommonModule, StyleModule],
   exports: [
     MdButtonToggleGroup,
     MdButtonToggleGroupMultiple,
     MdButtonToggle,
     MdCommonModule,
   ],
   declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
-  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, FocusOriginMonitor]
+  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
 })
 export class MdButtonToggleModule {}
 

src/lib/button/button.ts

@@ -9,9 +9,8 @@ import {
   Renderer2,
   ViewEncapsulation
 } from '@angular/core';
-import {coerceBooleanProperty, FocusOriginMonitor} from '../core';
+import {coerceBooleanProperty, FocusOriginMonitor, Platform} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
-import {isBrowser} from '../core/platform/browser';
 
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -111,8 +110,11 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
   get disableRipple() { return this._disableRipple; }
   set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
 
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer2,
-              private _focusOriginMonitor: FocusOriginMonitor) {
+  constructor(
+      private _elementRef: ElementRef,
+      private _renderer: Renderer2,
+      private _platform: Platform,
+      private _focusOriginMonitor: FocusOriginMonitor) {
     super();
     this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
@@ -163,7 +165,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
     // If not on the browser, say that there are none of the attributes present.
     // Since these only affect how the ripple displays (and ripples only happen on the client),
     // detecting these attributes isn't necessary when not on the browser.
-    if (!isBrowser()) {
+    if (!this._platform.isBrowser) {
       return false;
     }
 
@@ -193,8 +195,12 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton {
-  constructor(elementRef: ElementRef, renderer: Renderer2, focusOriginMonitor: FocusOriginMonitor) {
-    super(elementRef, renderer, focusOriginMonitor);
+  constructor(
+      elementRef: ElementRef,
+      renderer: Renderer2,
+      platform: Platform,
+      focusOriginMonitor: FocusOriginMonitor) {
+    super(elementRef, renderer, platform, focusOriginMonitor);
   }
 
   /** @docs-private */

src/lib/core/a11y/live-announcer.spec.ts

@@ -2,6 +2,7 @@ import {inject, fakeAsync, tick, ComponentFixture, TestBed} from '@angular/core/
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {LiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer';
+import {A11yModule} from '../index';
 
 
 describe('LiveAnnouncer', () => {
@@ -11,8 +12,8 @@ describe('LiveAnnouncer', () => {
 
   describe('with default element', () => {
     beforeEach(() => TestBed.configureTestingModule({
+      imports: [A11yModule],
       declarations: [TestApp],
-      providers: [LiveAnnouncer]
     }));
 
     beforeEach(fakeAsync(inject([LiveAnnouncer], (la: LiveAnnouncer) => {
@@ -77,11 +78,9 @@ describe('LiveAnnouncer', () => {
       customLiveElement = document.createElement('div');
 
       return TestBed.configureTestingModule({
+        imports: [A11yModule],
         declarations: [TestApp],
-        providers: [
-          {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement},
-          LiveAnnouncer,
-        ],
+        providers: [{provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement}],
       });
     });
 

src/lib/core/a11y/live-announcer.ts

@@ -5,6 +5,8 @@ import {
   Inject,
   SkipSelf,
 } from '@angular/core';
+import {Platform} from '../platform/platform';
+
 
 export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken<HTMLElement>('liveAnnouncerElement');
 
@@ -16,12 +18,16 @@ export class LiveAnnouncer {
 
   private _liveElement: Element;
 
-  constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any) {
-
-    // We inject the live element as `any` because the constructor signature cannot reference
-    // browser globals (HTMLElement) on non-browser environments, since having a class decorator
-    // causes TypeScript to preserve the constructor signature types.
-    this._liveElement = elementToken || this._createLiveElement();
+  constructor(
+      @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
+      platform: Platform) {
+    // Only do anything if we're on the browser platform.
+    if (platform.isBrowser) {
+      // We inject the live element as `any` because the constructor signature cannot reference
+      // browser globals (HTMLElement) on non-browser environments, since having a class decorator
+      // causes TypeScript to preserve the constructor signature types.
+      this._liveElement = elementToken || this._createLiveElement();
+    }
   }
 
   /**
@@ -64,16 +70,18 @@ export class LiveAnnouncer {
 
 }
 
-export function LIVE_ANNOUNCER_PROVIDER_FACTORY(parentDispatcher: LiveAnnouncer, liveElement: any) {
-  return parentDispatcher || new LiveAnnouncer(liveElement);
+export function LIVE_ANNOUNCER_PROVIDER_FACTORY(
+    parentDispatcher: LiveAnnouncer, liveElement: any, platform: Platform) {
+  return parentDispatcher || new LiveAnnouncer(liveElement, platform);
 }
 
 export const LIVE_ANNOUNCER_PROVIDER = {
   // If there is already a LiveAnnouncer available, use that. Otherwise, provide a new one.
   provide: LiveAnnouncer,
   deps: [
     [new Optional(), new SkipSelf(), LiveAnnouncer],
-    [new Optional(), new Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN)]
+    [new Optional(), new Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN)],
+    Platform,
   ],
   useFactory: LIVE_ANNOUNCER_PROVIDER_FACTORY
 };

src/lib/core/overlay/overlay-directives.ts

@@ -29,6 +29,7 @@ import {coerceBooleanProperty} from '../coercion/boolean-property';
 import {ESCAPE} from '../keyboard/keycodes';
 import {ScrollDispatcher} from './scroll/scroll-dispatcher';
 import {Subscription} from 'rxjs/Subscription';
+import {ScrollDispatchModule} from './scroll/scroll-dispatcher';
 
 
 /** Default set of positions for the overlay. Follows the behavior of a dropdown. */
@@ -323,9 +324,9 @@ export class ConnectedOverlayDirective implements OnDestroy {
 
 
 @NgModule({
-  imports: [PortalModule],
-  exports: [ConnectedOverlayDirective, OverlayOrigin, Scrollable],
-  declarations: [ConnectedOverlayDirective, OverlayOrigin, Scrollable],
+  imports: [PortalModule, ScrollDispatchModule],
+  exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule],
+  declarations: [ConnectedOverlayDirective, OverlayOrigin],
   providers: [OVERLAY_PROVIDERS],
 })
 export class OverlayModule {}

src/lib/core/overlay/overlay.ts

@@ -12,7 +12,6 @@ import {OverlayRef} from './overlay-ref';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {VIEWPORT_RULER_PROVIDER} from './position/viewport-ruler';
 import {OverlayContainer, OVERLAY_CONTAINER_PROVIDER} from './overlay-container';
-import {SCROLL_DISPATCHER_PROVIDER} from './scroll/scroll-dispatcher';
 
 
 /** Next overlay unique ID. */
@@ -94,6 +93,5 @@ export const OVERLAY_PROVIDERS: Provider[] = [
   Overlay,
   OverlayPositionBuilder,
   VIEWPORT_RULER_PROVIDER,
-  SCROLL_DISPATCHER_PROVIDER,
   OVERLAY_CONTAINER_PROVIDER,
 ];

src/lib/core/overlay/position/connected-position-strategy.spec.ts

@@ -7,7 +7,7 @@ import {Scrollable} from '../scroll/scrollable';
 import {Subscription} from 'rxjs/Subscription';
 import {TestBed, inject} from '@angular/core/testing';
 import Spy = jasmine.Spy;
-import {SCROLL_DISPATCHER_PROVIDER} from '../scroll/scroll-dispatcher';
+import {ScrollDispatchModule} from '../scroll/scroll-dispatcher';
 
 
 // Default width and height of the overlay and origin panels throughout these tests.
@@ -23,7 +23,8 @@ describe('ConnectedPositionStrategy', () => {
   let viewportRuler: ViewportRuler;
 
   beforeEach(() => TestBed.configureTestingModule({
-    providers: [VIEWPORT_RULER_PROVIDER, SCROLL_DISPATCHER_PROVIDER]
+    imports: [ScrollDispatchModule],
+    providers: [VIEWPORT_RULER_PROVIDER]
   }));
 
   beforeEach(inject([ViewportRuler], (_ruler: ViewportRuler) => {

src/lib/core/overlay/position/viewport-ruler.spec.ts

@@ -1,6 +1,7 @@
 import {ViewportRuler, VIEWPORT_RULER_PROVIDER} from './viewport-ruler';
 import {TestBed, inject} from '@angular/core/testing';
-import {SCROLL_DISPATCHER_PROVIDER} from '../scroll/scroll-dispatcher';
+import {ScrollDispatchModule} from '../scroll/scroll-dispatcher';
+
 
 // For all tests, we assume the browser window is 1024x786 (outerWidth x outerHeight).
 // The karma config has been set to this for local tests, and it is the default size
@@ -22,7 +23,8 @@ describe('ViewportRuler', () => {
   veryLargeElement.style.height = '6000px';
 
   beforeEach(() => TestBed.configureTestingModule({
-    providers: [VIEWPORT_RULER_PROVIDER, SCROLL_DISPATCHER_PROVIDER]
+    imports: [ScrollDispatchModule],
+    providers: [VIEWPORT_RULER_PROVIDER]
   }));
 
   beforeEach(inject([ViewportRuler], (viewportRuler: ViewportRuler) => {

src/lib/core/overlay/scroll/scroll-dispatcher.ts

@@ -1,5 +1,5 @@
-import {ElementRef, Injectable, NgZone, Optional, SkipSelf} from '@angular/core';
-import {isBrowser} from '../../platform/browser';
+import {NgModule, ElementRef, Injectable, NgZone, Optional, SkipSelf} from '@angular/core';
+import {Platform, PlatformModule} from '../../platform/index';
 import {Scrollable} from './scrollable';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
@@ -18,7 +18,7 @@ export const DEFAULT_SCROLL_TIME = 20;
  */
 @Injectable()
 export class ScrollDispatcher {
-  constructor(private _ngZone: NgZone) { }
+  constructor(private _ngZone: NgZone, private _platform: Platform) { }
 
   /** Subject for notifying that a registered scrollable reference element has been scrolled. */
   _scrolled: Subject<void> = new Subject<void>();
@@ -63,7 +63,8 @@ export class ScrollDispatcher {
    * to override the default "throttle" time.
    */
   scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME, callback: () => any): Subscription {
-    if (!isBrowser()) {
+    // Scroll events can only happen on the browser, so do nothing if we're not on the browser.
+    if (!this._platform.isBrowser) {
       return Subscription.EMPTY;
     }
 
@@ -131,14 +132,23 @@ export class ScrollDispatcher {
   }
 }
 
-export function SCROLL_DISPATCHER_PROVIDER_FACTORY(parentDispatcher: ScrollDispatcher,
-                                                   ngZone: NgZone) {
-  return parentDispatcher || new ScrollDispatcher(ngZone);
+export function SCROLL_DISPATCHER_PROVIDER_FACTORY(
+    parentDispatcher: ScrollDispatcher, ngZone: NgZone, platform: Platform) {
+  return parentDispatcher || new ScrollDispatcher(ngZone, platform);
 }
 
 export const SCROLL_DISPATCHER_PROVIDER = {
   // If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.
   provide: ScrollDispatcher,
-  deps: [[new Optional(), new SkipSelf(), ScrollDispatcher], NgZone],
+  deps: [[new Optional(), new SkipSelf(), ScrollDispatcher], NgZone, Platform],
   useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY
 };
+
+
+@NgModule({
+  imports: [PlatformModule],
+  exports: [Scrollable],
+  declarations: [Scrollable],
+  providers: [SCROLL_DISPATCHER_PROVIDER],
+})
+export class ScrollDispatchModule { }

src/lib/core/platform/browser.ts

@@ -15,6 +15,8 @@ const hasV8BreakIterator = typeof(window) !== 'undefined' ?
  */
 @Injectable()
 export class Platform {
+  isBrowser: boolean = typeof document === 'object' && !!document;
+
   /** Layout Engines */
   EDGE = /(edge)/i.test(navigator.userAgent);
   TRIDENT = /(msie|trident)/i.test(navigator.userAgent);

src/lib/core/platform/platform.ts

@@ -2,16 +2,17 @@ import {NgModule} from '@angular/core';
 import {MdRipple} from './ripple';
 import {MdCommonModule} from '../common-behaviors/common-module';
 import {VIEWPORT_RULER_PROVIDER} from '../overlay/position/viewport-ruler';
-import {SCROLL_DISPATCHER_PROVIDER} from '../overlay/scroll/scroll-dispatcher';
+import {ScrollDispatchModule} from '../overlay/scroll/scroll-dispatcher';
+import {PlatformModule} from '../platform/index';
 
 export {MdRipple, RippleGlobalOptions, MD_RIPPLE_GLOBAL_OPTIONS} from './ripple';
 export {RippleRef, RippleState} from './ripple-ref';
 export {RippleConfig, RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from './ripple-renderer';
 
 @NgModule({
-  imports: [MdCommonModule],
+  imports: [MdCommonModule, PlatformModule, ScrollDispatchModule],
   exports: [MdRipple, MdCommonModule],
   declarations: [MdRipple],
-  providers: [VIEWPORT_RULER_PROVIDER, SCROLL_DISPATCHER_PROVIDER],
+  providers: [VIEWPORT_RULER_PROVIDER],
 })
 export class MdRippleModule {}

src/lib/core/ripple/index.ts

@@ -1,5 +1,5 @@
 import {ElementRef, NgZone} from '@angular/core';
-import {isBrowser} from '../platform/browser';
+import {Platform} from '../platform/platform';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RippleRef, RippleState} from './ripple-ref';
 
@@ -48,10 +48,14 @@ export class RippleRenderer {
   /** Whether mouse ripples should be created or not. */
   rippleDisabled: boolean = false;
 
-  constructor(_elementRef: ElementRef, private _ngZone: NgZone, private _ruler: ViewportRuler) {
+  constructor(
+      elementRef: ElementRef,
+      private _ngZone: NgZone,
+      private _ruler: ViewportRuler,
+      platform: Platform) {
     // Only do anything if we're on the browser.
-    if (isBrowser()) {
-      this._containerElement = _elementRef.nativeElement;
+    if (platform.isBrowser) {
+      this._containerElement = elementRef.nativeElement;
 
       // Specify events which need to be registered on the trigger.
       this._triggerEvents.set('mousedown', this.onMousedown.bind(this));

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

@@ -11,8 +11,9 @@ import {
   Optional,
 } from '@angular/core';
 import {RippleConfig, RippleRenderer} from './ripple-renderer';
-import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RippleRef} from './ripple-ref';
+import {ViewportRuler} from '../overlay/position/viewport-ruler';
+import {Platform} from '../platform/platform';
 
 export interface RippleGlobalOptions {
   disabled?: boolean;
@@ -27,7 +28,7 @@ export const MD_RIPPLE_GLOBAL_OPTIONS =
   selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]',
   exportAs: 'mdRipple',
   host: {
-    '[class.mat-ripple]': 'true',
+    'class': 'mat-ripple',
     '[class.mat-ripple-unbounded]': 'unbounded'
   }
 })
@@ -83,9 +84,10 @@ export class MdRipple implements OnChanges, OnDestroy {
     elementRef: ElementRef,
     ngZone: NgZone,
     ruler: ViewportRuler,
+    platform: Platform,
     @Optional() @Inject(MD_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions
   ) {
-    this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler);
+    this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler, platform);
     this._globalOptions = globalOptions ? globalOptions : {};
 
     this._updateRippleRenderer();