From 4b1ee6d81f59894320d7a146a1c09b239902cb74 Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Sun, 5 Feb 2017 12:24:11 -0600 Subject: [PATCH] feat(ObservableMedia): use ObservableMedia class as provider token * 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) { ... } ``` --- .../responsiveFlexDirective.demo.ts | 4 +- .../responsiveFlexOrder.demo.ts | 4 +- .../responsiveRowColumns.demo.ts | 4 +- src/lib/flexbox/api/flex.spec.ts | 4 +- src/lib/flexbox/api/hide.spec.ts | 10 ++-- src/lib/flexbox/api/layout-align.spec.ts | 5 +- src/lib/flexbox/api/layout-gap.spec.ts | 4 +- src/lib/flexbox/api/layout.spec.ts | 4 +- src/lib/flexbox/api/show.spec.ts | 10 ++-- .../responsive/responsive-activation.spec.ts | 5 +- src/lib/media-query/_module.ts | 20 ++++--- .../breakpoints/break-point-registry.spec.ts | 5 +- .../breakpoints/break-point-registry.ts | 4 +- .../break-points.spec.ts} | 2 +- .../break-points.ts} | 0 src/lib/media-query/index.ts | 6 +- src/lib/media-query/match-media.spec.ts | 13 ++--- src/lib/media-query/media-monitor.spec.ts | 4 +- .../media-query/mock/mock-match-media.spec.ts | 2 +- ...ec.ts => observable-media-service.spec.ts} | 29 +++++----- .../media-query/observable-media-service.ts | 56 ++++++++++++------- .../observable-media-service-provider.ts | 22 -------- 22 files changed, 110 insertions(+), 107 deletions(-) rename src/lib/media-query/{providers/break-point-provider.spec.ts => breakpoints/break-points.spec.ts} (96%) rename src/lib/media-query/{providers/break-points-provider.ts => breakpoints/break-points.ts} (100%) rename src/lib/media-query/{providers/observable-media-service-provider.spec.ts => observable-media-service.spec.ts} (83%) delete mode 100644 src/lib/media-query/providers/observable-media-service-provider.ts diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts index bab889aad..0c6a24490 100644 --- 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 index 17475bc28..6bdf6df01 100644 --- 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 index 467cc8880..d4f8c6b82 100644 --- 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 index fa5ff8d56..3f991df1d 100644 --- 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 index 94beafb0c..cb3befd74 100644 --- 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 index 21f76475b..e6cfa0a93 100644 --- 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 index 3918f650f..ddbff551d 100644 --- 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 index 3eec60132..674907e9c 100644 --- 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 index 1d48b4b68..e56475f73 100644 --- 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 index 19478da16..701a0c9b1 100644 --- 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 index 8168e9ea5..d02d1576d 100644 --- 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 index aace94fe3..69becd37a 100644 --- 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 index 7f2d9fb23..180f42fa5 100644 --- 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/providers/break-point-provider.spec.ts b/src/lib/media-query/breakpoints/break-points.spec.ts similarity index 96% rename from src/lib/media-query/providers/break-point-provider.spec.ts rename to src/lib/media-query/breakpoints/break-points.spec.ts index a8cb4ff4e..082c8d6ea 100644 --- a/src/lib/media-query/providers/break-point-provider.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/providers/break-points-provider.ts b/src/lib/media-query/breakpoints/break-points.ts similarity index 100% rename from src/lib/media-query/providers/break-points-provider.ts rename to src/lib/media-query/breakpoints/break-points.ts diff --git a/src/lib/media-query/index.ts b/src/lib/media-query/index.ts index 6cb16f271..ab9d7403a 100644 --- 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 index ed85cb6e2..12a1a00be 100644 --- 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 index 39dace06d..7ab4a546f 100644 --- 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 index 645de1a46..1dd5cc46e 100644 --- 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/providers/observable-media-service-provider.spec.ts b/src/lib/media-query/observable-media-service.spec.ts similarity index 83% rename from src/lib/media-query/providers/observable-media-service-provider.spec.ts rename to src/lib/media-query/observable-media-service.spec.ts index b9eda0f10..fcc8904f0 100644 --- a/src/lib/media-query/providers/observable-media-service-provider.spec.ts +++ b/src/lib/media-query/observable-media-service.spec.ts @@ -13,13 +13,12 @@ import 'rxjs/add/operator/map'; 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 {MatchMedia} from '../match-media'; -import {ObservableMediaServiceProvider} from './observable-media-service-provider'; -import {ObservableMediaService} from '../observable-media-service'; -import {BreakPointsProvider, RAW_DEFAULTS} from './break-points-provider'; +import {BreakPointRegistry} from './breakpoints/break-point-registry'; +import {MediaChange} from './media-change'; +import {MockMatchMedia} from './mock/mock-match-media'; +import {MatchMedia} from './match-media'; +import {ObservableMedia, MediaService} from './observable-media-service'; +import {BREAKPOINTS, RAW_DEFAULTS} from './breakpoints/break-points'; describe('match-media-observable-provider', () => { let findMediaQuery = (alias) => { @@ -36,15 +35,19 @@ describe('match-media-observable-provider', () => { TestBed.configureTestingModule({ providers: [ BreakPointRegistry, // Registry of known/used BreakPoint(s) - BreakPointsProvider, // Supports developer overrides of list of known breakpoints + {provide: BREAKPOINTS, useValue: RAW_DEFAULTS}, {provide: MatchMedia, useClass: MockMatchMedia}, - ObservableMediaServiceProvider + { + provide: ObservableMedia, + useClass: MediaService, + deps: [MatchMedia, BreakPointRegistry] + } ] }); }); it('can supports the `.isActive()` API', async(inject( - [ObservableMediaService, MatchMedia], + [ObservableMedia, MatchMedia], (media, matchMedia) => { expect(media).toBeDefined(); @@ -59,7 +62,7 @@ describe('match-media-observable-provider', () => { }))); it('can supports RxJS operators', inject( - [ObservableMediaService, MatchMedia], + [ObservableMedia, MatchMedia], (mediaService, matchMedia) => { let count = 0, subscription = mediaService @@ -92,7 +95,7 @@ describe('match-media-observable-provider', () => { })); it('can can subscribe to built-in mediaQueries', async(inject( - [ObservableMediaService, MatchMedia], + [ObservableMedia, MatchMedia], (media$, matchMedia) => { let current: MediaChange; @@ -127,7 +130,7 @@ describe('match-media-observable-provider', () => { }))); it('can `.unsubscribe()` properly', async(inject( - [ObservableMediaService, MatchMedia], + [ObservableMedia, MatchMedia], (media, matchMedia) => { let current: MediaChange; let subscription = media.subscribe((change: MediaChange) => { diff --git a/src/lib/media-query/observable-media-service.ts b/src/lib/media-query/observable-media-service.ts index f2ccd9660..6c6966d06 100644 --- a/src/lib/media-query/observable-media-service.ts +++ b/src/lib/media-query/observable-media-service.ts @@ -5,8 +5,7 @@ * 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 {OpaqueToken} from '@angular/core'; // tslint:disable-line:no-unused-variable +import {Injectable} from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; import {Observable, Subscribable} from "rxjs/Observable"; @@ -20,17 +19,16 @@ import {MatchMedia} from './match-media'; import {mergeAlias} from './../utils/add-alias'; import {BreakPoint} from './breakpoints/break-point'; - /** - * Opaque Token unique to the flex-layout library. - * Note: Developers must use this token when building their own custom - * `ObservableMediaServiceProvider` provider. - * - * @see ./providers/match-media-observable-provider.ts + * Base class for MediaService and pseudo-token for */ -// tslint:disable-next-line:variable-name -export const ObservableMediaService: OpaqueToken = new OpaqueToken('flex-layout-media-service'); - +export abstract class ObservableMedia implements Subscribable { + abstract isActive(query: string): boolean; + abstract asObservable(): Observable; + abstract subscribe(next?: (value: MediaChange) => void, + error?: (error: any) => void, + complete?: () => void): Subscription; +} /** * Class internalizes a MatchMedia service and exposes an Subscribable and Observable interface. @@ -39,7 +37,7 @@ export const ObservableMediaService: OpaqueToken = new OpaqueToken('flex-layout- * changes and a validator method (`isActive()`) to test if a mediaQuery (or alias) is * currently active. * - * !! Only mediaChange activations (not de-activations) are announced by the ObservableMediaService + * !! Only mediaChange activations (not de-activations) are announced by the ObservableMedia * * This class uses the BreakPoint Registry to inject alias information into the raw MediaChange * notification. For custom mediaQuery notifications, alias information will not be injected and @@ -52,20 +50,30 @@ export const ObservableMediaService: OpaqueToken = new OpaqueToken('flex-layout- * @usage * * // RxJS - * import 'rxjs/add/operator/map'; + * import 'rxjs/add/operator/filter'; + * import { ObservableMedia } from '@angular/flex-layout'; * * @Component({ ... }) * export class AppComponent { - * constructor( @Inject(ObservableMediaService) media) { + * status : string = ''; + * + * constructor( media:ObservableMedia ) { + * let onChange = (change:MediaChange) => { + * this.status = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""; + * }; + * + * // Subscribe directly or access observable to use filter/map operators + * // e.g. + * // media.subscribe(onChange); + * * media.asObservable() - * .map( (change:MediaChange) => change.mqAlias == 'md' ) - * .subscribe((change:MediaChange) => { - * console.log( change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "" ); - * }); + * .filter((change:MediaChange) => true) // silly noop filter + * .subscribe(onChange); * } * } */ -export class MediaService implements Subscribable { +@Injectable() +export class MediaService implements ObservableMedia { private observable$: Observable; constructor(private mediaWatcher: MatchMedia, @@ -155,3 +163,13 @@ export class MediaService implements Subscribable { }; } + +/** + * Provider to return observable to ALL MediaQuery events + * Developers should build custom providers to override this default MediaQuery Observable + */ +export const ObservableMediaProvider = { // tslint:disable-line:variable-name + provide: ObservableMedia, + useClass: MediaService, + deps: [MatchMedia, BreakPointRegistry] +}; diff --git a/src/lib/media-query/providers/observable-media-service-provider.ts b/src/lib/media-query/providers/observable-media-service-provider.ts deleted file mode 100644 index f909e88f3..000000000 --- a/src/lib/media-query/providers/observable-media-service-provider.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * 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 {MediaService, ObservableMediaService} from '../observable-media-service'; -import {BreakPointRegistry} from '../breakpoints/break-point-registry'; -import {MatchMedia} from '../match-media'; - -import {OpaqueToken} from '@angular/core'; // tslint:disable-line:no-unused-variable - -/** - * Provider to return observable to ALL MediaQuery events - * Developers should build custom providers to override this default MediaQuery Observable - */ -export const ObservableMediaServiceProvider = { // tslint:disable-line:variable-name - provide: ObservableMediaService, - useClass: MediaService, - deps: [MatchMedia, BreakPointRegistry] -};