From b31320ad213d3bfc4337d360a4be5113baf89deb Mon Sep 17 00:00:00 2001 From: Joshua Chan Mun Wei Date: Mon, 7 May 2018 01:43:34 +0800 Subject: [PATCH] added isPlatformBrowser check and proper window object checking --- src/custom-event-polyfill.ts | 2 +- src/index.ts | 41 +++++++------- src/materialize-directive.ts | 100 ++++++++++++++++++++--------------- 3 files changed, 80 insertions(+), 63 deletions(-) diff --git a/src/custom-event-polyfill.ts b/src/custom-event-polyfill.ts index 627884e..c9cf70d 100644 --- a/src/custom-event-polyfill.ts +++ b/src/custom-event-polyfill.ts @@ -3,7 +3,7 @@ export function CustomEvent ( type, detail = undefined, params = { bubbles: fals event.initCustomEvent( type, params.bubbles, params.cancelable, detail ); return event; } -if ("Event" in window) { +if ("undefined"!=typeof window && "Event" in window) { CustomEvent.prototype = (window as any).Event.prototype; } diff --git a/src/index.ts b/src/index.ts index 1230d66..31f134d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,27 +1,28 @@ -export {MaterializeDirective,MaterializeAction} from "./materialize-directive"; -export {MaterializeModule} from "./materialize-module"; +export { MaterializeDirective, MaterializeAction } from "./materialize-directive"; +export { MaterializeModule } from "./materialize-module"; -if (!("Materialize" in window)) { - throw new Error("Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize."); -} -if (!("Waves" in window)) { - throw new Error("Couldn't find Waves object on window. It is supposed to be created by the materialize-css library. Please import materialize-css before importing angular2-materialize."); -} +declare var Waves: any; +declare var Materialize: any; -declare var Waves:any; -Waves.displayEffect(); +if ("undefined" != typeof window) { + if (!("Materialize" in window)) { + throw new Error("Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize."); + } + if (!("Waves" in window)) { + throw new Error("Couldn't find Waves object on window. It is supposed to be created by the materialize-css library. Please import materialize-css before importing angular2-materialize."); + } -declare var Materialize:any; + Waves.displayEffect(); + // polyfill remove any elem in DOM - https://github.com/InfomediaLtd/angular2-materialize/issues/377 (IE) + if (!Element.prototype.remove) { + Element.prototype.remove = function remove() { + if (this.parentNode) { + this.parentNode.removeChild(this); + } + }; + } +} export function toast(...args) { Materialize.toast(...args); -} - -// polyfill remove any elem in DOM - https://github.com/InfomediaLtd/angular2-materialize/issues/377 (IE) -if (!Element.prototype.remove) { - Element.prototype.remove = function remove() { - if (this.parentNode) { - this.parentNode.removeChild(this); - } - }; } \ No newline at end of file diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts index 68365e6..d94de8e 100644 --- a/src/materialize-directive.ts +++ b/src/materialize-directive.ts @@ -7,9 +7,12 @@ import { OnChanges, OnDestroy, AfterViewInit, - EventEmitter + EventEmitter, + PLATFORM_ID, + Inject } from '@angular/core'; -import {CustomEvent} from './custom-event-polyfill'; +import { CustomEvent } from './custom-event-polyfill'; +import { isPlatformBrowser } from '@angular/common'; declare var $: any; declare var Materialize: any; @@ -35,39 +38,44 @@ export interface MaterializeAction { @Directive({ selector: '[materialize]' }) -export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnDestroy { +export class MaterializeDirective implements AfterViewInit, DoCheck, OnChanges, OnDestroy { private _params: [any] = null; private _functionName: string = null; private previousValue = null; private previousDisabled = false; private _waitFunction: any = {}; + private isBrowser: boolean = isPlatformBrowser(this.platformId); private changeListenerShouldBeAdded = true; @Output() public init = new EventEmitter(); private initialized = false; - constructor(private _el: ElementRef) { + constructor(@Inject(PLATFORM_ID) private platformId: Object, private _el: ElementRef) { } @Input() public set materializeParams(params: any) { - this._params = params; - this.performElementUpdates(); + if (this.isBrowser) { + this._params = params; + this.performElementUpdates(); + } } @Input() - public set materializeActions(actions: EventEmitter) { - actions.subscribe((action: string|MaterializeAction) => { - window.setTimeout(()=> { - if (typeof action === "string") { - this.performLocalElementUpdates(action); - } else { - this.performLocalElementUpdates(action.action, action.params); - } - },1); - }) + public set materializeActions(actions: EventEmitter) { + if (this.isBrowser) { + actions.subscribe((action: string | MaterializeAction) => { + window.setTimeout(() => { + if (typeof action === "string") { + this.performLocalElementUpdates(action); + } else { + this.performLocalElementUpdates(action.action, action.params); + } + }, 1); + }) + } } @Input() @@ -84,40 +92,48 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD @Input() ngModel; public ngAfterViewInit() { - this.performElementUpdates(); + if (this.isBrowser) { + this.performElementUpdates(); + } } public ngOnChanges(_unused?) { - if (this.isSelect()) { - setTimeout(() => this.performLocalElementUpdates(), 10); + if (this.isBrowser) { + if (this.isSelect()) { + setTimeout(() => this.performLocalElementUpdates(), 10); + } } } public ngOnDestroy() { - this.performElementRemotion(); + if (this.isBrowser) { + this.performElementRemotion(); + } } public ngDoCheck() { - const nativeElement = this._el.nativeElement; - const jQueryElement = $(nativeElement); - if (this.isSelect()) { - let shouldUpdate = false; - if (nativeElement.disabled != this.previousDisabled) { - this.previousDisabled = nativeElement.disabled; - shouldUpdate = true; - } - if (!jQueryElement.attr("multiple") && nativeElement.value != this.previousValue) { - // handle select changes of the model - this.previousValue = nativeElement.value; - shouldUpdate = true; - } - if (shouldUpdate) { - this.performLocalElementUpdates(); - } - } else if (this.isTextarea()) { - if (nativeElement.value != this.previousValue) { - this.previousValue = nativeElement.value; - this.performElementUpdates(); + if (this.isBrowser) { + const nativeElement = this._el.nativeElement; + const jQueryElement = $(nativeElement); + if (this.isSelect()) { + let shouldUpdate = false; + if (nativeElement.disabled != this.previousDisabled) { + this.previousDisabled = nativeElement.disabled; + shouldUpdate = true; + } + if (!jQueryElement.attr("multiple") && nativeElement.value != this.previousValue) { + // handle select changes of the model + this.previousValue = nativeElement.value; + shouldUpdate = true; + } + if (shouldUpdate) { + this.performLocalElementUpdates(); + } + } else if (this.isTextarea()) { + if (nativeElement.value != this.previousValue) { + this.previousValue = nativeElement.value; + this.performElementUpdates(); + } } } return false; @@ -179,7 +195,7 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD picker.set('select', this.ngModel); } else { const value = jqueryPickerElement.val(); - if (value && value.length>0) { + if (value && value.length > 0) { picker.set('select', value); } } @@ -200,7 +216,7 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD picker.val(jqueryPickerElement.val()); } jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((CustomEvent("input")))); - }); + }); } if (this.isChips()) {