diff --git a/src/lib/media-query/_module.ts b/src/lib/media-query/_module.ts index acc00bb2a..33155f076 100644 --- a/src/lib/media-query/_module.ts +++ b/src/lib/media-query/_module.ts @@ -11,7 +11,7 @@ import {MediaMonitor} from './media-monitor'; import {OBSERVABLE_MEDIA_PROVIDER} from './observable-media-provider'; import {DEFAULT_BREAKPOINTS_PROVIDER} from './breakpoints/break-points-provider'; import {BreakPointRegistry} from './breakpoints/break-point-registry'; -import {MATCH_MEDIA_PROVIDER} from './match-media-provider'; +import {MatchMedia} from './match-media'; /** * ***************************************************************** @@ -23,7 +23,7 @@ import {MATCH_MEDIA_PROVIDER} from './match-media-provider'; providers: [ DEFAULT_BREAKPOINTS_PROVIDER, // Supports developer overrides of list of known breakpoints BreakPointRegistry, // Registry of known/used BreakPoint(s) - MATCH_MEDIA_PROVIDER, // Low-level service to publish observables w/ window.matchMedia() + MatchMedia, // Low-level service to publish observables w/ window.matchMedia() MediaMonitor, // MediaQuery monitor service observes all known breakpoints OBSERVABLE_MEDIA_PROVIDER // easy subscription injectable `media$` matchMedia observable ] diff --git a/src/lib/media-query/breakpoints/break-points-provider.ts b/src/lib/media-query/breakpoints/break-points-provider.ts index 1d8f71823..d1c0a9844 100644 --- a/src/lib/media-query/breakpoints/break-points-provider.ts +++ b/src/lib/media-query/breakpoints/break-points-provider.ts @@ -5,9 +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 { - InjectionToken, // tslint:disable-line:no-unused-variable -} from '@angular/core'; +import {InjectionToken} from '@angular/core'; import {BreakPoint} from './break-point'; import {BREAKPOINTS} from './break-points-token'; @@ -80,7 +78,7 @@ export const DEFAULT_BREAKPOINTS_PROVIDER = { // tslint:disable-line:variable-na export function CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(_custom?: BreakPoint[], options?: BreakPointProviderOptions) { return { - provide: BREAKPOINTS, + provide: >BREAKPOINTS, useFactory: buildMergedBreakPoints(_custom, options) }; } diff --git a/src/lib/media-query/breakpoints/break-points-token.ts b/src/lib/media-query/breakpoints/break-points-token.ts index 1ab698f00..f6dc2f006 100644 --- a/src/lib/media-query/breakpoints/break-points-token.ts +++ b/src/lib/media-query/breakpoints/break-points-token.ts @@ -6,8 +6,6 @@ * found in the LICENSE file at https://angular.io/license */ -// @TODO - remove after updating to TS v2.4 -// tslint:disable:no-unused-variable import {InjectionToken} from '@angular/core'; import {BreakPoint} from './break-point'; diff --git a/src/lib/media-query/index.ts b/src/lib/media-query/index.ts index d8439e3a3..0dce8a0d6 100644 --- a/src/lib/media-query/index.ts +++ b/src/lib/media-query/index.ts @@ -21,6 +21,5 @@ export * from './breakpoints/break-points-provider'; export * from './observable-media-provider'; export * from './media-monitor-provider'; export * from './server-match-media'; -export * from './match-media-provider'; export * from './_module'; diff --git a/src/lib/media-query/match-media-provider.ts b/src/lib/media-query/match-media-provider.ts deleted file mode 100644 index 9703dd0d6..000000000 --- a/src/lib/media-query/match-media-provider.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * Copyright Google LLC 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 { - NgZone, - PLATFORM_ID, - InjectionToken, // tslint:disable-line:no-unused-variable -} from '@angular/core'; -import {DOCUMENT, isPlatformServer} from '@angular/common'; - -import {MatchMedia} from './match-media'; -import {ServerMatchMedia} from './server-match-media'; - -/** - * Create a version of MatchMedia compatible with the current - * platform - */ -export function MEDIA_QUERY_LIST_FACTORY(platformId: Object, - zone: NgZone, - _document: Document) { - if (isPlatformServer(platformId)) { - return new ServerMatchMedia(zone, _document); - } else { - return new MatchMedia(zone, _document); - } -} - -/** - * Export provider that uses a global service factory (above) - */ -export const MATCH_MEDIA_PROVIDER = { - provide: MatchMedia, - useFactory: MEDIA_QUERY_LIST_FACTORY, - deps: [PLATFORM_ID, NgZone, DOCUMENT] -}; diff --git a/src/lib/media-query/mock/mock-match-media.ts b/src/lib/media-query/mock/mock-match-media.ts index 79a69e592..e27e20a1e 100644 --- a/src/lib/media-query/mock/mock-match-media.ts +++ b/src/lib/media-query/mock/mock-match-media.ts @@ -19,9 +19,7 @@ import {BreakPointRegistry} from '../breakpoints/break-point-registry'; @Injectable() export class MockMatchMedia extends MatchMedia { - /** - * Special flag used to test BreakPoint registrations with MatchMedia - */ + /** Special flag used to test BreakPoint registrations with MatchMedia */ autoRegisterQueries = true; /** @@ -37,9 +35,7 @@ export class MockMatchMedia extends MatchMedia { this._actives = []; } - /** - * Easy method to clear all listeners for all mediaQueries - */ + /** Easy method to clear all listeners for all mediaQueries */ clearAll() { this._registry.forEach((mql: MockMediaQueryList, _) => { mql.destroy(); @@ -48,9 +44,7 @@ export class MockMatchMedia extends MatchMedia { this.useOverlaps = false; } - /** - * Feature to support manual, simulated activation of a mediaQuery. - */ + /** Feature to support manual, simulated activation of a mediaQuery. */ activate(mediaQuery: string, useOverlaps = false): boolean { useOverlaps = useOverlaps || this.useOverlaps; mediaQuery = this._validateQuery(mediaQuery); @@ -65,9 +59,7 @@ export class MockMatchMedia extends MatchMedia { return this.hasActivated; } - /** - * Converts an optional mediaQuery alias to a specific, valid mediaQuery - */ + /** Converts an optional mediaQuery alias to a specific, valid mediaQuery */ _validateQuery(queryOrAlias) { let bp = this._breakpoints.findByAlias(queryOrAlias); if (bp) { @@ -147,9 +139,7 @@ export class MockMatchMedia extends MatchMedia { return this.hasActivated; } - /** - * Deactivate all current Mock MQLs - */ + /** Deactivate all current Mock MQLs */ private _deactivateAll() { if (this._actives.length) { // Deactivate all current MQLs and reset the buffer @@ -161,9 +151,7 @@ export class MockMatchMedia extends MatchMedia { return this; } - /** - * Insure the mediaQuery is registered with MatchMedia - */ + /** Insure the mediaQuery is registered with MatchMedia */ private _registerMediaQuery(mediaQuery) { if (!this._registry.has(mediaQuery) && this.autoRegisterQueries) { this.registerQuery(mediaQuery); @@ -192,7 +180,7 @@ export class MockMatchMedia extends MatchMedia { */ export class MockMediaQueryList implements MediaQueryList { private _isActive = false; - private _listeners: Array = []; + private _listeners: MediaQueryListListener[] = []; get matches(): boolean { return this._isActive; @@ -202,20 +190,18 @@ export class MockMediaQueryList implements MediaQueryList { return this._mediaQuery; } - constructor(private _mediaQuery: string) { - } + constructor(private _mediaQuery: string) {} /** - * + * Destroy the current list by deactivating the + * listeners and clearing the internal list */ destroy() { this.deactivate(); this._listeners = []; } - /** - * Notify all listeners that 'matches === TRUE' - */ + /** Notify all listeners that 'matches === TRUE' */ activate(): MockMediaQueryList { if (!this._isActive) { this._isActive = true; @@ -226,9 +212,7 @@ export class MockMediaQueryList implements MediaQueryList { return this; } - /** - * Notify all listeners that 'matches === false' - */ + /** Notify all listeners that 'matches === false' */ deactivate(): MockMediaQueryList { if (this._isActive) { this._isActive = false; @@ -239,9 +223,7 @@ export class MockMediaQueryList implements MediaQueryList { return this; } - /** - * - */ + /** Add a listener to our internal list to activate later */ addListener(listener: MediaQueryListListener) { if (this._listeners.indexOf(listener) === -1) { this._listeners.push(listener); @@ -251,6 +233,7 @@ export class MockMediaQueryList implements MediaQueryList { } } + /** Don't need to remove listeners in the testing environment */ removeListener(_: MediaQueryListListener) { } } diff --git a/src/lib/media-query/server-match-media.ts b/src/lib/media-query/server-match-media.ts index a74d19b3e..177f48d75 100644 --- a/src/lib/media-query/server-match-media.ts +++ b/src/lib/media-query/server-match-media.ts @@ -20,7 +20,7 @@ import {MatchMedia} from './match-media'; */ export class ServerMediaQueryList implements MediaQueryList { private _isActive = false; - private _listeners: Array = []; + private _listeners: MediaQueryListListener[] = []; get matches(): boolean { return this._isActive; @@ -41,9 +41,7 @@ export class ServerMediaQueryList implements MediaQueryList { this._listeners = []; } - /** - * Notify all listeners that 'matches === TRUE' - */ + /** Notify all listeners that 'matches === TRUE' */ activate(): ServerMediaQueryList { if (!this._isActive) { this._isActive = true; @@ -54,9 +52,7 @@ export class ServerMediaQueryList implements MediaQueryList { return this; } - /** - * Notify all listeners that 'matches === false' - */ + /** Notify all listeners that 'matches === false' */ deactivate(): ServerMediaQueryList { if (this._isActive) { this._isActive = false; @@ -67,9 +63,7 @@ export class ServerMediaQueryList implements MediaQueryList { return this; } - /** - * Add a listener to our internal list to activate later - */ + /** Add a listener to our internal list to activate later */ addListener(listener: MediaQueryListListener) { if (this._listeners.indexOf(listener) === -1) { this._listeners.push(listener); @@ -79,9 +73,7 @@ export class ServerMediaQueryList implements MediaQueryList { } } - /** - * Don't need to remove listeners in the server environment - */ + /** Don't need to remove listeners in the server environment */ removeListener(_: MediaQueryListListener) { } } @@ -106,9 +98,7 @@ export class ServerMatchMedia extends MatchMedia { this._observable$ = this._source.asObservable(); } - /** - * Activate the specified breakpoint if we're on the server, no-op otherwise - */ + /** Activate the specified breakpoint if we're on the server, no-op otherwise */ activateBreakpoint(bp: BreakPoint) { const lookupBreakpoint = this._registry.get(bp.mediaQuery); if (lookupBreakpoint) { @@ -116,9 +106,7 @@ export class ServerMatchMedia extends MatchMedia { } } - /** - * Deactivate the specified breakpoint if we're on the server, no-op otherwise - */ + /** Deactivate the specified breakpoint if we're on the server, no-op otherwise */ deactivateBreakpoint(bp: BreakPoint) { const lookupBreakpoint = this._registry.get(bp.mediaQuery); if (lookupBreakpoint) { diff --git a/src/lib/server/server-provider.ts b/src/lib/server/server-provider.ts index 407313f67..1134a5d03 100644 --- a/src/lib/server/server-provider.ts +++ b/src/lib/server/server-provider.ts @@ -5,10 +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 { - InjectionToken, // tslint:disable-line:no-unused-variable - ComponentRef, // tslint:disable-line:no-unused-variable -} from '@angular/core'; +import {InjectionToken} from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {BEFORE_APP_SERIALIZED} from '@angular/platform-server'; @@ -22,7 +19,7 @@ import { ServerMatchMedia } from '@angular/flex-layout'; -let UNIQUE_CLASS = 0; +let nextId = 0; const IS_DEBUG_MODE = false; /** @@ -42,7 +39,7 @@ function generateCss(stylesheet: Map>, stylesheet.forEach((styles, el) => { let className = classMap.get(el); if (!className) { - className = `${CLASS_NAME}${UNIQUE_CLASS++}`; + className = `${CLASS_NAME}${nextId++}`; classMap.set(el, className); } el.classList.add(className); @@ -123,7 +120,7 @@ export function FLEX_SSR_SERIALIZER_FACTORY(serverSheet: ServerStylesheet, */ export const SERVER_PROVIDERS = [ { - provide: BEFORE_APP_SERIALIZED, + provide: void>>BEFORE_APP_SERIALIZED, useFactory: FLEX_SSR_SERIALIZER_FACTORY, deps: [ ServerStylesheet, @@ -136,5 +133,9 @@ export const SERVER_PROVIDERS = [ { provide: SERVER_TOKEN, useValue: true + }, + { + provide: MatchMedia, + useClass: ServerMatchMedia } ]; diff --git a/src/lib/utils/styling/browser-provider.ts b/src/lib/utils/styling/browser-provider.ts index 04b67dad0..4d834c089 100644 --- a/src/lib/utils/styling/browser-provider.ts +++ b/src/lib/utils/styling/browser-provider.ts @@ -5,12 +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 { - APP_BOOTSTRAP_LISTENER, - PLATFORM_ID, - InjectionToken, // tslint:disable-line:no-unused-variable - ComponentRef, // tslint:disable-line:no-unused-variable -} from '@angular/core'; +import {APP_BOOTSTRAP_LISTENER, PLATFORM_ID, InjectionToken, ComponentRef} from '@angular/core'; import {DOCUMENT, isPlatformBrowser} from '@angular/common'; /** @@ -35,7 +30,7 @@ export function removeStyles(_document: Document, platformId: Object) { * Provider to remove SSR styles on the browser */ export const BROWSER_PROVIDER = { - provide: APP_BOOTSTRAP_LISTENER, + provide: ) => void)[]>>APP_BOOTSTRAP_LISTENER, useFactory: removeStyles, deps: [DOCUMENT, PLATFORM_ID], multi: true