chore: move sanity checks to common module (#4987)

* chore: move sanity checks to common module

Moves the sanity checks to the `MdCommonModule`.

Fixes #4979.

* chore: re-export sanity checks
This commit is contained in:
Kristiyan Kostadinov
2017-06-08 23:56:51 +02:00
committed by Andrew Seguin
parent 8fa7726814
commit 549d62251e
3 changed files with 55 additions and 63 deletions
+52 -2
View File
@@ -1,7 +1,12 @@
import {NgModule} from '@angular/core';
import {NgModule, InjectionToken, Optional, Inject, isDevMode} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';
import {CompatibilityModule} from '../compatibility/compatibility';
/** Injection token that configures whether the Material sanity checks are enabled. */
export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');
/**
* Module that captures anything that should be loaded and/or run for *all* Angular Material
* components. This includes Bidi, compatibility mode, etc.
@@ -11,5 +16,50 @@ import {CompatibilityModule} from '../compatibility/compatibility';
@NgModule({
imports: [CompatibilityModule],
exports: [CompatibilityModule],
providers: [{
provide: MATERIAL_SANITY_CHECKS, useValue: true,
}],
})
export class MdCommonModule { }
export class MdCommonModule {
/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
private _hasDoneGlobalChecks = false;
constructor(
@Optional() @Inject(DOCUMENT) private _document: any,
@Optional() @Inject(MATERIAL_SANITY_CHECKS) _sanityChecksEnabled: boolean) {
if (_sanityChecksEnabled && !this._hasDoneGlobalChecks && _document && isDevMode()) {
this._checkDoctype();
this._checkTheme();
this._hasDoneGlobalChecks = true;
}
}
private _checkDoctype(): void {
if (!this._document.doctype) {
console.warn(
'Current document does not have a doctype. This may cause ' +
'some Angular Material components not to behave as expected.'
);
}
}
private _checkTheme(): void {
if (typeof getComputedStyle === 'function') {
const testElement = this._document.createElement('div');
testElement.classList.add('mat-theme-loaded-marker');
this._document.body.appendChild(testElement);
if (getComputedStyle(testElement).display !== 'none') {
console.warn(
'Could not find Angular Material core theme. Most Material ' +
'components may not work as expected. For more info refer ' +
'to the theming guide: https://material.angular.io/guide/theming'
);
}
this._document.body.removeChild(testElement);
}
}
}
+2 -60
View File
@@ -1,19 +1,7 @@
import {
NgModule,
Directive,
Inject,
Optional,
isDevMode,
ElementRef,
InjectionToken,
} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';
import {NgModule, Directive, Inject, Optional, ElementRef, InjectionToken} from '@angular/core';
export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');
/** Injection token that configures whether the Material sanity checks are enabled. */
export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');
/**
* Returns an exception to be thrown if the consumer has used
* an invalid Material prefix on a component.
@@ -183,54 +171,8 @@ export class MdPrefixRejector {
@NgModule({
declarations: [MatPrefixRejector, MdPrefixRejector],
exports: [MatPrefixRejector, MdPrefixRejector],
providers: [{
provide: MATERIAL_SANITY_CHECKS, useValue: true,
}],
})
export class CompatibilityModule {
/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
private _hasDoneGlobalChecks = false;
constructor(
@Optional() @Inject(DOCUMENT) private _document: any,
@Optional() @Inject(MATERIAL_SANITY_CHECKS) _sanityChecksEnabled: boolean) {
if (_sanityChecksEnabled && !this._hasDoneGlobalChecks && _document && isDevMode()) {
// Delay running the check to allow more time for the user's styles to load.
this._checkDoctype();
this._checkTheme();
this._hasDoneGlobalChecks = true;
}
}
private _checkDoctype(): void {
if (!this._document.doctype) {
console.warn(
'Current document does not have a doctype. This may cause ' +
'some Angular Material components not to behave as expected.'
);
}
}
private _checkTheme(): void {
if (typeof getComputedStyle === 'function') {
const testElement = this._document.createElement('div');
testElement.classList.add('mat-theme-loaded-marker');
this._document.body.appendChild(testElement);
if (getComputedStyle(testElement).display !== 'none') {
console.warn(
'Could not find Angular Material core theme. Most Material ' +
'components may not work as expected. For more info refer ' +
'to the theming guide: https://material.angular.io/guide/theming'
);
}
this._document.body.removeChild(testElement);
}
}
}
export class CompatibilityModule {}
/**
+1 -1
View File
@@ -98,7 +98,7 @@ export {coerceNumberProperty} from './coercion/number-property';
export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibility/compatibility';
// Common material module
export {MdCommonModule} from './common-behaviors/common-module';
export {MdCommonModule, MATERIAL_SANITY_CHECKS} from './common-behaviors/common-module';
// Datetime
export * from './datetime/index';