From 703add02ad4a30467b84bb6f3aa8358d4e01364d Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Sat, 6 Jan 2018 20:58:45 -0500 Subject: [PATCH] refactor(lib): remove private Angular 'getDom()' APIs * Remove private API references to getDom() * Add PLATFORM_ID to all components * Fix Demo-App runtime - add router to system-config Closes #553. Fixes #402, Fixes #547. --- src/demo-app/system-config.ts | 1 + src/lib/api/core/base-adapter.spec.ts | 2 +- src/lib/api/core/base-adapter.ts | 7 +- src/lib/api/core/base.ts | 20 +++- src/lib/api/ext/class.ts | 12 +- src/lib/api/ext/img-src.ts | 11 +- src/lib/api/ext/show-hide.ts | 9 +- src/lib/api/ext/style.ts | 12 +- src/lib/api/flexbox/flex-align.ts | 9 +- src/lib/api/flexbox/flex-fill.ts | 9 +- src/lib/api/flexbox/flex-offset.ts | 9 +- src/lib/api/flexbox/flex-order.ts | 9 +- src/lib/api/flexbox/flex.ts | 9 +- src/lib/api/flexbox/layout-align.ts | 10 +- src/lib/api/flexbox/layout-gap.ts | 7 +- src/lib/api/flexbox/layout-wrap.ts | 11 +- src/lib/api/flexbox/layout.ts | 9 +- src/lib/media-query/match-media.ts | 108 +++++++++++------- src/lib/media-query/mock/mock-match-media.ts | 10 +- src/lib/utils/style-utils.ts | 23 ++-- .../app/splitter/split.directive.ts | 18 ++- src/universal-app/app/util/helper.ts | 5 - 22 files changed, 204 insertions(+), 116 deletions(-) delete mode 100644 src/universal-app/app/util/helper.ts diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts index 2b8942ea3..062a8a6c3 100644 --- a/src/demo-app/system-config.ts +++ b/src/demo-app/system-config.ts @@ -36,6 +36,7 @@ System.config({ 'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/platform-browser-dynamic/testing': 'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', + '@angular/router': 'node:@angular/router/bundles/router.umd.js', '@angular/material': 'node:@angular/material/bundles/material.umd.js', '@angular/cdk': 'node:@angular/cdk/bundles/cdk.umd.js', diff --git a/src/lib/api/core/base-adapter.spec.ts b/src/lib/api/core/base-adapter.spec.ts index e8c11d490..c7fcdd425 100644 --- a/src/lib/api/core/base-adapter.spec.ts +++ b/src/lib/api/core/base-adapter.spec.ts @@ -21,7 +21,7 @@ export class MockElementRef extends ElementRef { describe('BaseFxDirectiveAdapter class', () => { let component; beforeEach(() => { - component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2); // tslint:disable-line:max-line-length + component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2, {}); // tslint:disable-line:max-line-length }); describe('cacheInput', () => { it('should call _cacheInputArray when source is an array', () => { diff --git a/src/lib/api/core/base-adapter.ts b/src/lib/api/core/base-adapter.ts index 38f498d7e..82ca37698 100644 --- a/src/lib/api/core/base-adapter.ts +++ b/src/lib/api/core/base-adapter.ts @@ -5,7 +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 {ElementRef, Renderer2} from '@angular/core'; +import {ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core'; import {BaseFxDirective} from './base'; import {ResponsiveActivation} from './responsive-activation'; @@ -48,8 +48,9 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective { constructor(protected _baseKey: string, // non-responsive @Input property name protected _mediaMonitor: MediaMonitor, protected _elementRef: ElementRef, - protected _renderer: Renderer2) { - super(_mediaMonitor, _elementRef, _renderer); + protected _renderer: Renderer2, + @Inject(PLATFORM_ID) protected _platformId: Object) { + super(_mediaMonitor, _elementRef, _renderer, _platformId); } /** diff --git a/src/lib/api/core/base.ts b/src/lib/api/core/base.ts index ef5e899ae..396403067 100644 --- a/src/lib/api/core/base.ts +++ b/src/lib/api/core/base.ts @@ -6,8 +6,14 @@ * found in the LICENSE file at https://angular.io/license */ import { - ElementRef, OnDestroy, SimpleChanges, OnChanges, - SimpleChange, Renderer2 + ElementRef, + OnDestroy, + SimpleChanges, + OnChanges, + SimpleChange, + Renderer2, + Inject, + PLATFORM_ID, } from '@angular/core'; import {buildLayoutCSS} from '../../utils/layout-validator'; @@ -16,7 +22,8 @@ import { lookupStyle, lookupInlineStyle, applyStyleToElement, - applyStyleToElements, lookupAttributeValue + applyStyleToElements, + lookupAttributeValue, } from '../../utils/style-utils'; import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation'; @@ -63,7 +70,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges { */ constructor(protected _mediaMonitor: MediaMonitor, protected _elementRef: ElementRef, - protected _renderer: Renderer2) { + protected _renderer: Renderer2, + @Inject(PLATFORM_ID) protected _platformId: Object) { } // ********************************************* @@ -133,7 +141,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges { * and optional restore it when the mediaQueries deactivate */ protected _getDisplayStyle(source: HTMLElement = this.nativeElement): string { - return lookupStyle(source || this.nativeElement, 'display'); + return lookupStyle(this._platformId, source || this.nativeElement, 'display'); } /** @@ -154,7 +162,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges { let value = 'row'; if (target) { - value = lookupStyle(target, 'flex-direction') || 'row'; + value = lookupStyle(this._platformId, target, 'flex-direction') || 'row'; let hasInlineValue = lookupInlineStyle(target, 'flex-direction'); if (!hasInlineValue && addIfMissing) { diff --git a/src/lib/api/ext/class.ts b/src/lib/api/ext/class.ts index ae1cac2ca..c07636a14 100644 --- a/src/lib/api/ext/class.ts +++ b/src/lib/api/ext/class.ts @@ -17,7 +17,10 @@ import { Optional, Renderer2, SimpleChanges, - Self, OnInit + Self, + OnInit, + Inject, + PLATFORM_ID, } from '@angular/core'; import {NgClass} from '@angular/common'; @@ -91,8 +94,9 @@ export class ClassDirective extends BaseFxDirective protected _keyValueDiffers: KeyValueDiffers, protected _ngEl: ElementRef, protected _renderer: Renderer2, - @Optional() @Self() private _ngClassInstance: NgClass ) { - super(monitor, _ngEl, _renderer); + @Optional() @Self() private _ngClassInstance: NgClass, + @Inject(PLATFORM_ID) protected _platformId: Object) { + super(monitor, _ngEl, _renderer, _platformId); this._configureAdapters(); } @@ -135,7 +139,7 @@ export class ClassDirective extends BaseFxDirective */ protected _configureAdapters() { this._base = new BaseFxDirectiveAdapter( - 'ngClass', this.monitor, this._ngEl, this._renderer + 'ngClass', this.monitor, this._ngEl, this._renderer, this._platformId ); if (!this._ngClassInstance) { // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on diff --git a/src/lib/api/ext/img-src.ts b/src/lib/api/ext/img-src.ts index c9cfb8f3c..b821bb3b4 100644 --- a/src/lib/api/ext/img-src.ts +++ b/src/lib/api/ext/img-src.ts @@ -11,7 +11,9 @@ import { Input, OnInit, OnChanges, - Renderer2 + Renderer2, + Inject, + PLATFORM_ID, } from '@angular/core'; import {BaseFxDirective} from '../core/base'; @@ -55,8 +57,11 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange @Input('src.gt-lg') set srcGtLg(val) { this._cacheInput('srcGtLg', val); } /* tslint:enable */ - constructor(elRef: ElementRef, renderer: Renderer2, monitor: MediaMonitor) { - super(monitor, elRef, renderer); + constructor(elRef: ElementRef, + renderer: Renderer2, + monitor: MediaMonitor, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); this._cacheInput('src', elRef.nativeElement.getAttribute('src') || ''); } diff --git a/src/lib/api/ext/show-hide.ts b/src/lib/api/ext/show-hide.ts index 1ed4cfb8e..ca9ea65f9 100644 --- a/src/lib/api/ext/show-hide.ts +++ b/src/lib/api/ext/show-hide.ts @@ -15,7 +15,9 @@ import { Renderer2, SimpleChanges, Self, - Optional + Optional, + Inject, + PLATFORM_ID, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; @@ -104,9 +106,10 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan constructor(monitor: MediaMonitor, @Optional() @Self() protected _layout: LayoutDirective, protected elRef: ElementRef, - protected renderer: Renderer2) { + protected renderer: Renderer2, + @Inject(PLATFORM_ID) protected platformId: Object) { - super(monitor, elRef, renderer); + super(monitor, elRef, renderer, platformId); if (_layout) { /** diff --git a/src/lib/api/ext/style.ts b/src/lib/api/ext/style.ts index ee48a5ec0..e9c36dd23 100644 --- a/src/lib/api/ext/style.ts +++ b/src/lib/api/ext/style.ts @@ -17,7 +17,10 @@ import { Renderer2, SecurityContext, Self, - SimpleChanges, OnInit, + SimpleChanges, + OnInit, + Inject, + PLATFORM_ID, } from '@angular/core'; import {NgStyle} from '@angular/common'; @@ -89,9 +92,10 @@ export class StyleDirective extends BaseFxDirective protected _ngEl: ElementRef, protected _renderer: Renderer2, protected _differs: KeyValueDiffers, - @Optional() @Self() private _ngStyleInstance: NgStyle) { + @Optional() @Self() private _ngStyleInstance: NgStyle, + @Inject(PLATFORM_ID) protected _platformId: Object) { - super(monitor, _ngEl, _renderer); + super(monitor, _ngEl, _renderer, _platformId); this._configureAdapters(); } @@ -134,7 +138,7 @@ export class StyleDirective extends BaseFxDirective */ protected _configureAdapters() { this._base = new BaseFxDirectiveAdapter( - 'ngStyle', this.monitor, this._ngEl, this._renderer + 'ngStyle', this.monitor, this._ngEl, this._renderer, this._platformId ); if ( !this._ngStyleInstance ) { // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been diff --git a/src/lib/api/flexbox/flex-align.ts b/src/lib/api/flexbox/flex-align.ts index 701256ba9..ff4f30e69 100644 --- a/src/lib/api/flexbox/flex-align.ts +++ b/src/lib/api/flexbox/flex-align.ts @@ -14,6 +14,8 @@ import { OnDestroy, Renderer2, SimpleChanges, + Inject, + PLATFORM_ID, } from '@angular/core'; import {BaseFxDirective} from '../core/base'; @@ -54,8 +56,11 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha @Input('fxFlexAlign.gt-lg') set alignGtLg(val) { this._cacheInput('alignGtLg', val); }; /* tslint:enable */ - constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) { - super(monitor, elRef, renderer); + constructor(monitor: MediaMonitor, + elRef: ElementRef, + renderer: Renderer2, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); } diff --git a/src/lib/api/flexbox/flex-fill.ts b/src/lib/api/flexbox/flex-fill.ts index 5d1f955e8..8e73334df 100644 --- a/src/lib/api/flexbox/flex-fill.ts +++ b/src/lib/api/flexbox/flex-fill.ts @@ -5,7 +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 {Directive, ElementRef, Renderer2} from '@angular/core'; +import {Directive, ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core'; import {MediaMonitor} from '../../media-query/media-monitor'; import {BaseFxDirective} from '../core/base'; @@ -29,8 +29,11 @@ const FLEX_FILL_CSS = { [fxFlexFill] `}) export class FlexFillDirective extends BaseFxDirective { - constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer2) { - super(monitor, elRef, renderer); + constructor(monitor: MediaMonitor, + public elRef: ElementRef, + public renderer: Renderer2, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); this._applyStyleToElement(FLEX_FILL_CSS); } } diff --git a/src/lib/api/flexbox/flex-offset.ts b/src/lib/api/flexbox/flex-offset.ts index b90917aa6..a97f8992e 100644 --- a/src/lib/api/flexbox/flex-offset.ts +++ b/src/lib/api/flexbox/flex-offset.ts @@ -15,7 +15,9 @@ import { Optional, Renderer2, SimpleChanges, - SkipSelf + SkipSelf, + Inject, + PLATFORM_ID, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; @@ -60,8 +62,9 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2, - @Optional() @SkipSelf() protected _container: LayoutDirective ) { - super(monitor, elRef, renderer); + @Optional() @SkipSelf() protected _container: LayoutDirective, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); this.watchParentFlow(); diff --git a/src/lib/api/flexbox/flex-order.ts b/src/lib/api/flexbox/flex-order.ts index e3e49654a..8c3953554 100644 --- a/src/lib/api/flexbox/flex-order.ts +++ b/src/lib/api/flexbox/flex-order.ts @@ -14,6 +14,8 @@ import { OnDestroy, Renderer2, SimpleChanges, + Inject, + PLATFORM_ID, } from '@angular/core'; import {BaseFxDirective} from '../core/base'; @@ -52,8 +54,11 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha @Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); }; /* tslint:enable */ - constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) { - super(monitor, elRef, renderer); + constructor(monitor: MediaMonitor, + elRef: ElementRef, + renderer: Renderer2, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); } // ********************************************* diff --git a/src/lib/api/flexbox/flex.ts b/src/lib/api/flexbox/flex.ts index 410df3844..1ad8cf475 100644 --- a/src/lib/api/flexbox/flex.ts +++ b/src/lib/api/flexbox/flex.ts @@ -5,14 +5,16 @@ * 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 { +import { Directive, ElementRef, + Inject, Input, OnChanges, OnDestroy, OnInit, Optional, + PLATFORM_ID, Renderer2, SimpleChanges, SkipSelf, @@ -86,9 +88,10 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, elRef: ElementRef, renderer: Renderer2, @Optional() @SkipSelf() protected _container: LayoutDirective, - @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) { + @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective, + @Inject(PLATFORM_ID) platformId: Object) { - super(monitor, elRef, renderer); + super(monitor, elRef, renderer, platformId); this._cacheInput('flex', ''); this._cacheInput('shrink', 1); diff --git a/src/lib/api/flexbox/layout-align.ts b/src/lib/api/flexbox/layout-align.ts index c46e8fb15..cd18aacc0 100644 --- a/src/lib/api/flexbox/layout-align.ts +++ b/src/lib/api/flexbox/layout-align.ts @@ -14,7 +14,10 @@ import { OnInit, Optional, Renderer2, - SimpleChanges, Self, + SimpleChanges, + Self, + Inject, + PLATFORM_ID, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; import {extendObject} from '../../utils/object-extend'; @@ -68,8 +71,9 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC constructor( monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2, - @Optional() @Self() container: LayoutDirective) { - super(monitor, elRef, renderer); + @Optional() @Self() container: LayoutDirective, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); if (container) { // Subscribe to layout direction changes this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this)); diff --git a/src/lib/api/flexbox/layout-gap.ts b/src/lib/api/flexbox/layout-gap.ts index 19a5b04b7..7626ebe58 100644 --- a/src/lib/api/flexbox/layout-gap.ts +++ b/src/lib/api/flexbox/layout-gap.ts @@ -17,6 +17,8 @@ import { Optional, OnDestroy, NgZone, + Inject, + PLATFORM_ID, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; @@ -67,8 +69,9 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI elRef: ElementRef, renderer: Renderer2, @Optional() @Self() container: LayoutDirective, - private _zone: NgZone) { - super(monitor, elRef, renderer); + private _zone: NgZone, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); if (container) { // Subscribe to layout direction changes this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this)); diff --git a/src/lib/api/flexbox/layout-wrap.ts b/src/lib/api/flexbox/layout-wrap.ts index ed4cfa489..991021a12 100644 --- a/src/lib/api/flexbox/layout-wrap.ts +++ b/src/lib/api/flexbox/layout-wrap.ts @@ -13,7 +13,11 @@ import { OnDestroy, OnInit, Renderer2, - SimpleChanges, Self, Optional, + SimpleChanges, + Self, + Optional, + Inject, + PLATFORM_ID, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; @@ -65,9 +69,10 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2, - @Optional() @Self() container: LayoutDirective) { + @Optional() @Self() container: LayoutDirective, + @Inject(PLATFORM_ID) platformId: Object) { - super(monitor, elRef, renderer); + super(monitor, elRef, renderer, platformId); if (container) { // Subscribe to layout direction changes this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this)); diff --git a/src/lib/api/flexbox/layout.ts b/src/lib/api/flexbox/layout.ts index c3aa688b2..62d6d5ae5 100644 --- a/src/lib/api/flexbox/layout.ts +++ b/src/lib/api/flexbox/layout.ts @@ -14,6 +14,8 @@ import { OnDestroy, Renderer2, SimpleChanges, + Inject, + PLATFORM_ID, } from '@angular/core'; import {Observable} from 'rxjs/Observable'; @@ -71,8 +73,11 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange /** * */ - constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) { - super(monitor, elRef, renderer); + constructor(monitor: MediaMonitor, + elRef: ElementRef, + renderer: Renderer2, + @Inject(PLATFORM_ID) platformId: Object) { + super(monitor, elRef, renderer, platformId); this._announcer = new ReplaySubject(1); this.layout$ = this._announcer.asObservable(); } diff --git a/src/lib/media-query/match-media.ts b/src/lib/media-query/match-media.ts index d9dbf4d40..14378a55c 100644 --- a/src/lib/media-query/match-media.ts +++ b/src/lib/media-query/match-media.ts @@ -5,9 +5,16 @@ * 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 {Inject, Injectable, NgZone} from '@angular/core'; -import {ɵgetDOM as getDom} from '@angular/platform-browser'; -import {DOCUMENT} from '@angular/common'; +import { + Inject, + Injectable, + NgZone, + PLATFORM_ID, + RendererFactory2, + RendererType2, + ViewEncapsulation, +} from '@angular/core'; +import {DOCUMENT, isPlatformBrowser} from '@angular/common'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; import {filter} from 'rxjs/operators/filter'; @@ -48,7 +55,10 @@ export class MatchMedia { protected _source: BehaviorSubject; protected _observable$: Observable; - constructor(protected _zone: NgZone, @Inject(DOCUMENT) protected _document: any) { + constructor(protected _zone: NgZone, + protected _rendererFactory: RendererFactory2, + @Inject(DOCUMENT) protected _document: any, + @Inject(PLATFORM_ID) protected _platformId: Object) { this._registry = new Map(); this._source = new BehaviorSubject(new MediaChange(true)); this._observable$ = this._source.asObservable(); @@ -90,7 +100,7 @@ export class MatchMedia { let list = normalizeQuery(mediaQuery); if (list.length > 0) { - prepareQueryCSS(list, this._document); + this._prepareQueryCSS(list, this._document); list.forEach(query => { let mql = this._registry.get(query); @@ -119,7 +129,8 @@ export class MatchMedia { * supports 0..n listeners for activation/deactivation */ protected _buildMQL(query: string): MediaQueryList { - let canListen = isBrowser() && !!(window).matchMedia('all').addListener; + let canListen = isPlatformBrowser(this._platformId) && + !!(window).matchMedia('all').addListener; return canListen ? (window).matchMedia(query) : { matches: query === 'all' || query === '', @@ -130,57 +141,66 @@ export class MatchMedia { } }; } -} - -/** - * Determine if SSR or Browser rendering. - */ -export function isBrowser() { - return getDom().supportsDOMEvents(); -} - -/** - * Private global registry for all dynamically-created, injected style tags - * @see prepare(query) - */ -const ALL_STYLES = {}; -/** - * For Webkit engines that only trigger the MediaQueryList Listener - * when there is at least one CSS selector for the respective media query. - * - * @param query string The mediaQuery used to create a faux CSS selector - * - */ -function prepareQueryCSS(mediaQueries: string[], _document: any) { - let list = mediaQueries.filter(it => !ALL_STYLES[it]); - if (list.length > 0) { - let query = list.join(', '); + /** + * For Webkit engines that only trigger the MediaQueryList Listener + * when there is at least one CSS selector for the respective media query. + * + * @param query string The mediaQuery used to create a faux CSS selector + * + */ + protected _prepareQueryCSS(mediaQueries: string[], _document: any) { + let list = mediaQueries.filter(it => !ALL_STYLES[it]); + if (list.length > 0) { + let query = list.join(', '); - try { - let styleEl = getDom().createElement('style'); + try { + const renderer = this._rendererFactory.createRenderer(_document, RENDERER_TYPE); + let styleEl = renderer.createElement('style'); - getDom().setAttribute(styleEl, 'type', 'text/css'); - if (!styleEl['styleSheet']) { - let cssText = `/* + renderer.setAttribute(styleEl, 'type', 'text/css'); + if (!styleEl['styleSheet']) { + let cssText = ` +/* @angular/flex-layout - workaround for possible browser quirk with mediaQuery listeners see http://bit.ly/2sd4HMP */ -@media ${query} {.fx-query-test{ }}`; - getDom().appendChild(styleEl, getDom().createTextNode(cssText)); - } +@media ${query} {.fx-query-test{ }} +` ; + renderer.appendChild(styleEl, renderer.createText(cssText)); + } - getDom().appendChild(_document.head, styleEl); + renderer.appendChild(_document.head, styleEl); - // Store in private global registry - list.forEach(mq => ALL_STYLES[mq] = styleEl); + // Store in private global registry + list.forEach(mq => ALL_STYLES[mq] = styleEl); - } catch (e) { - console.error(e); + } catch (e) { + console.error(e); + } } } } +/** + * Since `getDom()` is no longer supported, + * we will use a RendererFactory build and instance + * of a renderer for an element. Then the renderer will + * build the stylesheet(s) + */ +const RENDERER_TYPE: RendererType2 = { + id: '-1', + styles: [ ], + data: { }, + encapsulation: ViewEncapsulation.None +}; + +/** + * Private global registry for all dynamically-created, injected style tags + * @see prepare(query) + */ +const ALL_STYLES = {}; + /** * Always convert to unique list of queries; for iteration in ::registerQuery() */ diff --git a/src/lib/media-query/mock/mock-match-media.ts b/src/lib/media-query/mock/mock-match-media.ts index acb8a4e9e..0eec97986 100644 --- a/src/lib/media-query/mock/mock-match-media.ts +++ b/src/lib/media-query/mock/mock-match-media.ts @@ -5,8 +5,8 @@ * 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 {Inject, Injectable, NgZone} from '@angular/core'; -import {DOCUMENT} from '@angular/platform-browser'; +import {Inject, Injectable, NgZone, PLATFORM_ID, RendererFactory2} from '@angular/core'; +import {DOCUMENT} from '@angular/common'; import {MatchMedia} from '../match-media'; import {BreakPointRegistry} from '../breakpoints/break-point-registry'; @@ -31,9 +31,11 @@ export class MockMatchMedia extends MatchMedia { useOverlaps = false; constructor(_zone: NgZone, + _rendererFactory: RendererFactory2, @Inject(DOCUMENT) _document: any, - private _breakpoints: BreakPointRegistry) { - super(_zone, _document); + private _breakpoints: BreakPointRegistry, + @Inject(PLATFORM_ID) _platformId: Object) { + super(_zone, _rendererFactory, _document, _platformId); this._actives = []; } diff --git a/src/lib/utils/style-utils.ts b/src/lib/utils/style-utils.ts index 744c66e34..37049296b 100644 --- a/src/lib/utils/style-utils.ts +++ b/src/lib/utils/style-utils.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ import {Renderer2} from '@angular/core'; -import {ɵgetDOM as getDom} from '@angular/platform-browser'; import {applyCssPrefixes} from './auto-prefixer'; +import {isPlatformBrowser} from '@angular/common'; /** * Definition of a css style. Either a property name (e.g. "flex-basis") or an object @@ -66,28 +66,29 @@ export function applyMultiValueStyleToElement(styles: {}, element: any, renderer * Find the DOM element's raw attribute value (if any) */ export function lookupAttributeValue(element: HTMLElement, attribute: string): string { - return getDom().getAttribute(element, attribute) || ''; + return element.getAttribute(attribute) || ''; } /** * Find the DOM element's inline style value (if any) */ export function lookupInlineStyle(element: HTMLElement, styleName: string): string { - return getDom().getStyle(element, styleName); + return element.style[styleName]; } /** * Determine the inline or inherited CSS style + * @TODO(CaerusKaru): platform-server has no implementation for getComputedStyle */ -export function lookupStyle(element: HTMLElement, styleName: string, inlineOnly = false): string { +export function lookupStyle(_platformId: Object, + element: HTMLElement, + styleName: string, + inlineOnly = false): string { let value = ''; if (element) { - try { - let immediateValue = value = lookupInlineStyle(element, styleName); - if ( !inlineOnly ) { - value = immediateValue || getDom().getComputedStyle(element).getPropertyValue(styleName); - } - } catch (e) { - // TODO: platform-server throws an exception for getComputedStyle, will be fixed by PR 18362 + let immediateValue = value = lookupInlineStyle(element, styleName); + if (!inlineOnly) { + value = immediateValue || (isPlatformBrowser(_platformId) && + getComputedStyle(element).getPropertyValue(styleName)) || ''; } } diff --git a/src/universal-app/app/splitter/split.directive.ts b/src/universal-app/app/splitter/split.directive.ts index e4d766bdb..fecbc7e44 100644 --- a/src/universal-app/app/splitter/split.directive.ts +++ b/src/universal-app/app/splitter/split.directive.ts @@ -1,6 +1,14 @@ import { - Directive, Input, ContentChild, - ContentChildren, AfterContentInit, QueryList, ElementRef, OnDestroy + Directive, + Input, + ContentChild, + ContentChildren, + AfterContentInit, + QueryList, + ElementRef, + OnDestroy, + Inject, + PLATFORM_ID, } from '@angular/core'; import {SplitAreaDirective} from './split-area.directive'; @@ -8,7 +16,7 @@ import {SplitHandleDirective} from './split-handle.directive'; import {FlexDirective} from '@angular/flex-layout'; import {Subscription} from 'rxjs/Subscription'; -import { isBrowser } from '../util/helper'; +import {isPlatformBrowser} from '@angular/common'; @Directive({ selector: '[ngxSplit]', @@ -25,11 +33,11 @@ export class SplitDirective implements AfterContentInit, OnDestroy { @ContentChild(SplitHandleDirective) handle: SplitHandleDirective; @ContentChildren(SplitAreaDirective) areas: QueryList; - constructor(private elementRef: ElementRef) { + constructor(private elementRef: ElementRef, @Inject(PLATFORM_ID) private _platformId: Object) { } ngAfterContentInit(): void { - if (isBrowser()) { + if (isPlatformBrowser(this._platformId)) { this.watcher = this.handle.drag.subscribe(pos => this.onDrag(pos)); } } diff --git a/src/universal-app/app/util/helper.ts b/src/universal-app/app/util/helper.ts deleted file mode 100644 index e8e9c29ef..000000000 --- a/src/universal-app/app/util/helper.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {ɵgetDOM as getDom} from '@angular/platform-browser'; - -export function isBrowser() { - return getDom().supportsDOMEvents(); -}