feat(ObservableMedia): use ObservableMedia class as provider token (#158)

ThomasBurleson · tinayuangao · commit dad69feee8b3 · 2017-02-08T02:35:35.000+08:00
* Refactor BreakPoint-related classes. * Refactor implementations of Providers * Improve DI and replace `ObservableMediaService` opaque token with **`ObservableMedia`** class BREAKING CHANGE: Deprecated use of `ObservableMediaService` opaque token. Developers now simply use the ObservableMedia class to inject the service. *before* ```js constructor( @Inject(ObserverableMediaService) private media:any ) { ... } ``` **after** ```js constructor(private media:ObservableMedia) { ... } ```
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts
@@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
 import 'rxjs/add/operator/filter';
 
 import {MediaChange} from "../../../lib/media-query/media-change";
-import {ObservableMediaService} from "../../../lib/media-query/observable-media-service";
+import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
 
 @Component({
   selector: 'demo-responsive-flex-directive',
@@ -32,7 +32,7 @@ export class DemoResponsiveFlexDirectives implements OnInit, OnDestroy {
   private _watcher : Subscription;
   public activeMediaQuery = "";
 
-  constructor(@Inject(ObservableMediaService)  private _media$) { }
+  constructor(private _media$:ObservableMedia) { }
 
   ngOnInit() {
     this._watcher = this.watchMQChanges();
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts
@@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
 import 'rxjs/add/operator/filter';
 
 import {MediaChange} from "../../../lib/media-query/media-change";
-import {ObservableMediaService} from "../../../lib/media-query/observable-media-service";
+import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
 
 @Component({
   selector: 'demo-responsive-flex-order',
@@ -44,7 +44,7 @@ export class DemoResponsiveFlexOrder implements OnInit, OnDestroy {
   public activeMediaQuery = "";
   private _watcher : Subscription;
 
-  constructor(@Inject(ObservableMediaService)  private _media$) { }
+  constructor(private _media$:ObservableMedia) { }
 
   ngOnInit() {
     this._watcher = this.watchMQChanges();
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts
@@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
 import 'rxjs/add/operator/filter';
 
 import {MediaChange} from "../../../lib/media-query/media-change";
-import {ObservableMediaService} from "../../../lib/media-query/observable-media-service";
+import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
 
 @Component({
   selector: 'demo-responsive-row-column',
@@ -64,7 +64,7 @@ export class DemoResponsiveRows implements OnDestroy {
 
   isVisible = true;
 
-  constructor(@Inject(ObservableMediaService) private _media$) {
+  constructor(private _media$ : ObservableMedia ) {
     this._watcher = this._media$
         .subscribe((e:MediaChange) => {
           this._activeMQC = e;
diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts
@@ -9,10 +9,10 @@ import {Component, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
-import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {FlexLayoutModule} from '../_module';
 
 import {__platform_browser_private__} from '@angular/platform-browser';
diff --git a/src/lib/flexbox/api/hide.spec.ts b/src/lib/flexbox/api/hide.spec.ts
@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {
-  Component, OnInit, Inject
+  Component, OnInit
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
-import {ObservableMediaService} from '../../media-query/observable-media-service';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
-import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
+import {ObservableMedia} from '../../media-query/observable-media-service';
 
 import {customMatchers, expect, NgMatchers} from '../../utils/testing/custom-matchers';
 import {
@@ -290,7 +290,7 @@ export class TestHideComponent implements OnInit {
   isHidden = true;
   menuHidden = true;
 
-  constructor(@Inject(ObservableMediaService) private media) {
+  constructor(private media: ObservableMedia) {
   }
 
   toggleMenu() {
diff --git a/src/lib/flexbox/api/layout-align.spec.ts b/src/lib/flexbox/api/layout-align.spec.ts
@@ -9,10 +9,11 @@ import {Component, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
+
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
-import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {FlexLayoutModule} from '../_module';
 
 import {extendObject} from '../../utils/object-extend';
diff --git a/src/lib/flexbox/api/layout-gap.spec.ts b/src/lib/flexbox/api/layout-gap.spec.ts
@@ -9,10 +9,10 @@ import {Component, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {TestBed, ComponentFixture} from '@angular/core/testing';
 
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
-import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {FlexLayoutModule} from '../_module';
 
 import {customMatchers, expect} from '../../utils/testing/custom-matchers';
diff --git a/src/lib/flexbox/api/layout.spec.ts b/src/lib/flexbox/api/layout.spec.ts
@@ -9,10 +9,10 @@ import {Component, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
-import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {FlexLayoutModule} from '../_module';
 
 import {customMatchers} from '../../utils/testing/custom-matchers';
diff --git a/src/lib/flexbox/api/show.spec.ts b/src/lib/flexbox/api/show.spec.ts
@@ -5,15 +5,15 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
+import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 import {MatchMedia} from '../../media-query/match-media';
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
-import {ObservableMediaService} from '../../media-query/observable-media-service';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
-import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
+import {ObservableMedia} from '../../media-query/observable-media-service';
 import {FlexLayoutModule} from '../_module';
 
 import {customMatchers} from '../../utils/testing/custom-matchers';
@@ -234,7 +234,7 @@ export class TestShowComponent implements OnInit {
   isHidden = false;
   menuOpen: boolean = true;
 
-  constructor(@Inject(ObservableMediaService) private media) {
+  constructor(private media: ObservableMedia) {
   }
 
   toggleMenu() {
diff --git a/src/lib/flexbox/responsive/responsive-activation.spec.ts b/src/lib/flexbox/responsive/responsive-activation.spec.ts
@@ -13,9 +13,10 @@ import 'rxjs/add/operator/map';
 
 import {TestBed, inject} from '@angular/core/testing';
 
-import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
+import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
 import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
-import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
+
+import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
 import {MatchMedia} from '../../media-query/match-media';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {ResponsiveActivation, KeyOptions} from './responsive-activation';
diff --git a/src/lib/media-query/_module.ts b/src/lib/media-query/_module.ts
@@ -7,13 +7,13 @@
  */
 import {NgModule, ModuleWithProviders} from '@angular/core';
 
+import {MatchMedia} from './match-media';
+import {MediaMonitor} from './media-monitor';
+import {ObservableMediaProvider} from './observable-media-service';
+import {BreakPointsProvider} from './breakpoints/break-points';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
-import {BreakPointsProvider} from "./providers/break-points-provider";
 
 
-import {MatchMedia} from './match-media';
-import {MediaMonitor} from './media-monitor';
-import {ObservableMediaServiceProvider} from './providers/observable-media-service-provider';
 
 /**
  * *****************************************************************
@@ -23,11 +23,11 @@ import {ObservableMediaServiceProvider} from './providers/observable-media-servi
 
 @NgModule({
   providers: [
-    MatchMedia,                   // Low-level service to publish observables w/ window.matchMedia()
-    MediaMonitor,                 // MediaQuery monitor service observes all known breakpoints
-    BreakPointRegistry,           // Registry of known/used BreakPoint(s)
-    BreakPointsProvider,           // Supports developer overrides of list of known breakpoints
-    ObservableMediaServiceProvider  // easy subscription injectable `media$` matchMedia observable
+    MatchMedia,              // Low-level service to publish observables w/ window.matchMedia()
+    MediaMonitor,            // MediaQuery monitor service observes all known breakpoints
+    BreakPointRegistry,      // Registry of known/used BreakPoint(s)
+    BreakPointsProvider,     // Supports developer overrides of list of known breakpoints
+    ObservableMediaProvider  // easy subscription injectable `media$` matchMedia observable
   ]
 })
 export class MediaQueriesModule {
@@ -37,3 +37,5 @@ export class MediaQueriesModule {
     };
   }
 }
+
+
diff --git a/src/lib/media-query/breakpoints/break-point-registry.spec.ts b/src/lib/media-query/breakpoints/break-point-registry.spec.ts
@@ -7,10 +7,9 @@
  */
 import {TestBed, inject, async} from '@angular/core/testing';
 
-import {BreakPointRegistry} from './break-point-registry';
-import {BREAKPOINTS} from '../providers/break-points-provider';
-import {RAW_DEFAULTS} from "../providers/break-points-provider";
 import {BreakPoint} from './break-point';
+import {BreakPointRegistry} from './break-point-registry';
+import {BREAKPOINTS, RAW_DEFAULTS} from './break-points';
 
 describe('break-points', () => {
   let breakPoints: BreakPointRegistry;
diff --git a/src/lib/media-query/breakpoints/break-point-registry.ts b/src/lib/media-query/breakpoints/break-point-registry.ts
@@ -6,9 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Injectable, Inject} from '@angular/core';
+import {OpaqueToken} from '@angular/core';  // tslint:disable-line:no-unused-variable
 
 import {BreakPoint} from './break-point';
-import {BREAKPOINTS} from "../providers/break-points-provider";
+import {BREAKPOINTS} from "./break-points";
+
 
 /**
  * Registry of 1..n MediaQuery breakpoint ranges
diff --git a/src/lib/media-query/breakpoints/break-points.spec.ts b/src/lib/media-query/breakpoints/break-points.spec.ts
@@ -14,7 +14,7 @@ import 'rxjs/add/operator/map';
 import {TestBed, inject, async} from '@angular/core/testing';
 
 import {BreakPoint} from '../breakpoints/break-point';
-import {BREAKPOINTS, RAW_DEFAULTS} from '../providers/break-points-provider';
+import {BREAKPOINTS, RAW_DEFAULTS} from './break-points';
 
 describe('break-point-provider', () => {
   let breakPoints: BreakPoint[ ];
diff --git a/src/lib/media-query/breakpoints/break-points.ts b/src/lib/media-query/breakpoints/break-points.ts
diff --git a/src/lib/media-query/index.ts b/src/lib/media-query/index.ts
@@ -5,11 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+export * from './breakpoints/break-point';
 export * from './breakpoints/break-point-registry';
-export * from './providers/break-points-provider';
-export * from './providers/observable-media-service-provider';
+export * from './breakpoints/break-points';
+export * from './observable-media-service';
 export * from './match-media';
 export * from './media-change';
 export * from './media-monitor';
-export * from './observable-media-service';
 export * from './_module';
diff --git a/src/lib/media-query/match-media.spec.ts b/src/lib/media-query/match-media.spec.ts
@@ -16,11 +16,10 @@ import {TestBed, inject, async} from '@angular/core/testing';
 import {MediaChange} from './media-change';
 import {BreakPoint} from './breakpoints/break-point';
 import {MockMatchMedia} from './mock/mock-match-media';
+import {BreakPointsProvider} from './breakpoints/break-points';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
-import {BreakPointsProvider} from './providers/break-points-provider';
 import {MatchMedia} from './match-media';
-import {ObservableMediaService} from './observable-media-service';
-import {ObservableMediaServiceProvider} from './providers/observable-media-service-provider';
+import {ObservableMedia, ObservableMediaProvider} from './observable-media-service';
 
 describe('match-media', () => {
   let matchMedia: MockMatchMedia;
@@ -130,15 +129,15 @@ describe('match-media-observable', () => {
       providers: [
         BreakPointsProvider,  // Supports developer overrides of list of known breakpoints
         BreakPointRegistry,   // Registry of known/used BreakPoint(s)
-        {provide: MatchMedia, useClass: MockMatchMedia},
-        ObservableMediaServiceProvider  // injectable `media$` matchMedia observable
+        ObservableMediaProvider,  // injectable `media$` matchMedia observable
+        {provide: MatchMedia, useClass: MockMatchMedia}
       ]
     });
   });
 
   // Single async inject to save references; which are used in all tests below
   beforeEach(async(inject(
-      [ObservableMediaService, MatchMedia, BreakPointRegistry],
+      [ObservableMedia, MatchMedia, BreakPointRegistry],
       (_media$_, _matchMedia_, _breakPoints_) => {
         matchMedia = _matchMedia_;      // inject only to manually activate mediaQuery ranges
         breakPoints = _breakPoints_;
@@ -205,7 +204,7 @@ describe('match-media-observable', () => {
   });
 
   /**
-   * Only the ObservableMediaService ignores de-activations;
+   * Only the ObservableMedia ignores de-activations;
    * MediaMonitor and MatchMedia report both activations and de-activations!
    */
   it('ignores mediaQuery de-activations', () => {
diff --git a/src/lib/media-query/media-monitor.spec.ts b/src/lib/media-query/media-monitor.spec.ts
@@ -12,11 +12,11 @@ import 'rxjs/add/operator/map';
 
 import {TestBed, inject, async} from '@angular/core/testing';
 
-import {RAW_DEFAULTS} from './providers/break-points-provider';
+import {RAW_DEFAULTS} from './breakpoints/break-points';
 import {MediaChange} from './media-change';
 import {MockMatchMedia} from './mock/mock-match-media';
+import {BreakPointsProvider} from './breakpoints/break-points';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
-import {BreakPointsProvider} from './providers/break-points-provider';
 import {MatchMedia} from './match-media';
 import {MediaMonitor} from './media-monitor';
 
diff --git a/src/lib/media-query/mock/mock-match-media.spec.ts b/src/lib/media-query/mock/mock-match-media.spec.ts
@@ -16,8 +16,8 @@ import {TestBed, inject, async} from '@angular/core/testing';
 import {MediaChange} from '../media-change';
 import {BreakPoint} from '../breakpoints/break-point';
 import {MockMatchMedia} from './mock-match-media';
+import {BreakPointsProvider} from '../breakpoints/break-points';
 import {BreakPointRegistry} from '../breakpoints/break-point-registry';
-import {BreakPointsProvider} from '../providers/break-points-provider';
 
 describe('mock-match-media', () => {
   let breakPoints: BreakPointRegistry;
diff --git a/src/lib/media-query/observable-media-service.spec.ts b/src/lib/media-query/observable-media-service.spec.ts
diff --git a/src/lib/media-query/observable-media-service.ts b/src/lib/media-query/observable-media-service.ts
diff --git a/src/lib/media-query/providers/observable-media-service-provider.ts b/src/lib/media-query/providers/observable-media-service-provider.ts
