fix(matchMediaObservable): expose observable for rxjs operators

* rename token to 'ObservableMediaService' * rename MatchMediaObservableProvider to ObservableMediaServiceProvider * add method `.asObservable()` to MediaService fixes #125.
angular · Jan 26, 2017 · 512007d · 512007d
1 parent 0ca7d07
commit 512007d
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 137 deletions.
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 {MatchMediaObservable} from "../../../lib/media-query/match-media";
+import {ObservableMediaService} from "../../../lib/media-query/match-media";
 
 @Component({
   selector: 'demo-responsive-flex-directive',
@@ -32,7 +32,7 @@ export class DemoResponsiveFlexDirectives implements OnInit, OnDestroy {
   private _watcher : Subscription;
   public activeMediaQuery = "";
 
-  constructor(@Inject(MatchMediaObservable)  private _media$) { }
+  constructor(@Inject(ObservableMediaService)  private _media$) { }
 
   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 {MatchMediaObservable} from "../../../lib/media-query/match-media";
+import {ObservableMediaService} from "../../../lib/media-query/match-media";
 
 @Component({
   selector: 'demo-responsive-flex-order',
@@ -44,7 +44,7 @@ export class DemoResponsiveFlexOrder implements OnInit, OnDestroy {
   public activeMediaQuery = "";
   private _watcher : Subscription;
 
-  constructor(@Inject(MatchMediaObservable)  private _media$) { }
+  constructor(@Inject(ObservableMediaService)  private _media$) { }
 
   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 {MatchMediaObservable} from "../../../lib/media-query/match-media";
+import {ObservableMediaService} from "../../../lib/media-query/match-media";
 
 @Component({
   selector: 'demo-responsive-row-column',
@@ -64,7 +64,7 @@ export class DemoResponsiveRows implements OnDestroy {
 
   isVisible = true;
 
-  constructor(@Inject(MatchMediaObservable) private _media$) {
+  constructor(@Inject(ObservableMediaService) private _media$) {
     this._watcher = this._media$
         .subscribe((e:MediaChange) => {
           this._activeMQC = e;

diff --git a/src/lib/flexbox/api/hide.spec.ts b/src/lib/flexbox/api/hide.spec.ts
@@ -12,7 +12,7 @@ import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
-import {MatchMedia, MatchMediaObservable} from '../../media-query/match-media';
+import {MatchMedia, ObservableMediaService} from '../../media-query/match-media';
 import {BreakPointsProvider} from '../../media-query/providers/break-points-provider';
 import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
 
@@ -258,7 +258,7 @@ export class TestHideComponent implements OnInit {
   isHidden = true;
   menuHidden = true;
 
-  constructor(@Inject(MatchMediaObservable) private media) {
+  constructor(@Inject(ObservableMediaService) private media) {
   }
 
   toggleMenu() {

diff --git a/src/lib/flexbox/api/show.spec.ts b/src/lib/flexbox/api/show.spec.ts
@@ -10,7 +10,7 @@ import {CommonModule} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
-import {MatchMedia, MatchMediaObservable} from '../../media-query/match-media';
+import {MatchMedia, ObservableMediaService} 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';
@@ -214,7 +214,7 @@ export class TestShowComponent implements OnInit {
   isHidden = false;
   menuOpen: boolean = true;
 
-  constructor(@Inject(MatchMediaObservable) private media) {
+  constructor(@Inject(ObservableMediaService) private media) {
   }
 
   toggleMenu() {

diff --git a/src/lib/media-query/_module.ts b/src/lib/media-query/_module.ts
@@ -13,7 +13,7 @@ import {BreakPointsProvider} from "./providers/break-points-provider";
 
 import {MatchMedia} from './match-media';
 import {MediaMonitor} from './media-monitor';
-import {MatchMediaObservableProvider} from './providers/match-media-observable-provider';
+import {ObservableMediaServiceProvider} from './providers/observable-media-service-provider';
 
 /**
  * *****************************************************************
@@ -27,7 +27,7 @@ import {MatchMediaObservableProvider} from './providers/match-media-observable-p
     MediaMonitor,                 // MediaQuery monitor service observes all known breakpoints
     BreakPointRegistry,           // Registry of known/used BreakPoint(s)
     BreakPointsProvider,           // Supports developer overrides of list of known breakpoints
-    MatchMediaObservableProvider  // easy subscription injectable `media$` matchMedia observable
+    ObservableMediaServiceProvider  // easy subscription injectable `media$` matchMedia observable
   ]
 })
 export class MediaQueriesModule {

diff --git a/src/lib/media-query/index.ts b/src/lib/media-query/index.ts
@@ -7,7 +7,7 @@
  */
 export * from './breakpoints/break-point-registry';
 export * from './providers/break-points-provider';
-export * from './providers/match-media-observable-provider';
+export * from './providers/observable-media-service-provider';
 export * from './match-media';
 export * from './media-change';
 export * from './media-monitor';

diff --git a/src/lib/media-query/match-media.spec.ts b/src/lib/media-query/match-media.spec.ts
@@ -18,8 +18,8 @@ import {BreakPoint} from './breakpoints/break-point';
 import {MockMatchMedia} from './mock/mock-match-media';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
 import {BreakPointsProvider} from './providers/break-points-provider';
-import {MatchMedia, MatchMediaObservable} from './match-media';
-import {MatchMediaObservableProvider} from './providers/match-media-observable-provider';
+import {MatchMedia, ObservableMediaService} from './match-media';
+import {ObservableMediaServiceProvider} from './providers/observable-media-service-provider';
 
 describe('match-media', () => {
   let matchMedia: MockMatchMedia;
@@ -130,14 +130,14 @@ describe('match-media-observable', () => {
         BreakPointsProvider,  // Supports developer overrides of list of known breakpoints
         BreakPointRegistry,   // Registry of known/used BreakPoint(s)
         {provide: MatchMedia, useClass: MockMatchMedia},
-        MatchMediaObservableProvider  // injectable `media$` matchMedia observable
+        ObservableMediaServiceProvider  // injectable `media$` matchMedia observable
       ]
     });
   });
 
   // Single async inject to save references; which are used in all tests below
   beforeEach(async(inject(
-      [MatchMediaObservable, MatchMedia, BreakPointRegistry],
+      [ObservableMediaService, MatchMedia, BreakPointRegistry],
       (_media$_, _matchMedia_, _breakPoints_) => {
         matchMedia = _matchMedia_;      // inject only to manually activate mediaQuery ranges
         breakPoints = _breakPoints_;
@@ -204,7 +204,7 @@ describe('match-media-observable', () => {
   });
 
   /**
-   * Only the MatchMediaObservable ignores de-activations;
+   * Only the ObservableMediaService ignores de-activations;
    * MediaMonitor and MatchMedia report both activations and de-activations!
    */
   it('ignores mediaQuery de-activations', () => {

diff --git a/src/lib/media-query/match-media.ts b/src/lib/media-query/match-media.ts
@@ -38,13 +38,12 @@ export interface MediaQueryList {
 /**
  *  Opaque Token unique to the flex-layout library.
  *  Note: Developers must use this token when building their own custom
- *  `MatchMediaObservableProvider` provider.
+ *  `ObservableMediaServiceProvider` provider.
  *
  *  @see ./providers/match-media-observable-provider.ts
  */
 // tslint:disable-next-line:variable-name
-export const MatchMediaObservable: OpaqueToken = new OpaqueToken('fxObservableMatchMedia');
-
+export const ObservableMediaService: OpaqueToken = new OpaqueToken('flex-layout-media-service');
 
 /**
  * MediaMonitor configures listeners to mediaQuery changes and publishes an Observable facade to

diff --git a/src/lib/media-query/providers/match-media-observable-provider.ts b/src/lib/media-query/providers/match-media-observable-provider.ts
diff --git a/...s/match-media-observable-provider.spec.ts → ...observable-media-service-provider.spec.ts b/...s/match-media-observable-provider.spec.ts → ...observable-media-service-provider.spec.ts
@@ -16,8 +16,8 @@ import {TestBed, inject, async} from '@angular/core/testing';
 import {BreakPointRegistry} from '../breakpoints/break-point-registry';
 import {MediaChange} from '../media-change';
 import {MockMatchMedia} from '../mock/mock-match-media';
-import {MatchMediaObservable, MatchMedia} from '../match-media';
-import {MatchMediaObservableProvider} from './match-media-observable-provider';
+import {MatchMedia, ObservableMediaService} from '../match-media';
+import {ObservableMediaServiceProvider} from './observable-media-service-provider';
 import {BreakPointsProvider, RAW_DEFAULTS} from './break-points-provider';
 
 describe('match-media-observable-provider', () => {
@@ -37,13 +37,13 @@ describe('match-media-observable-provider', () => {
         BreakPointRegistry,   // Registry of known/used BreakPoint(s)
         BreakPointsProvider,  // Supports developer overrides of list of known breakpoints
         {provide: MatchMedia, useClass: MockMatchMedia},
-        MatchMediaObservableProvider
+        ObservableMediaServiceProvider
       ]
     });
   });
 
   it('can supports the `.isActive()` API', async(inject(
-      [MatchMediaObservable, MatchMedia],
+      [ObservableMediaService, MatchMedia],
       (media, matchMedia) => {
         expect(media).toBeDefined();
 
@@ -57,8 +57,41 @@ describe('match-media-observable-provider', () => {
 
       })));
 
+  it('can supports RxJS operators', inject(
+      [ObservableMediaService, MatchMedia],
+      (mediaService, matchMedia) => {
+        let count = 0,
+            subscription = mediaService
+              .asObservable()
+              .filter(change => change.mqAlias == 'md' )
+              .map( change => change.mqAlias )
+              .subscribe((alias) => {
+                count += 1;
+              });
+
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('sm');
+        expect(count).toEqual(0);
+
+        matchMedia.activate('md');
+        expect(count).toEqual(1);
+
+        matchMedia.activate('lg');
+        expect(count).toEqual(1);
+
+        matchMedia.activate('md');
+        expect(count).toEqual(2);
+
+        matchMedia.activate('gt-md');
+        matchMedia.activate('gt-lg');
+        matchMedia.activate('invalid');
+        expect(count).toEqual(2);
+
+        subscription.unsubscribe();
+      }));
+
   it('can can subscribe to built-in mediaQueries', async(inject(
-      [MatchMediaObservable, MatchMedia],
+      [ObservableMediaService, MatchMedia],
       (media$, matchMedia) => {
         let current: MediaChange;
 
@@ -93,7 +126,7 @@ describe('match-media-observable-provider', () => {
       })));
 
   it('can `.unsubscribe()` properly', async(inject(
-      [MatchMediaObservable, MatchMedia],
+      [ObservableMediaService, MatchMedia],
       (media, matchMedia) => {
         let current: MediaChange;
         let subscription = media.subscribe((change: MediaChange) => {