Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add isPlatformBrowser check and proper window object checking #427

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add isPlatformBrowser check and proper window object checking #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/custom-event-polyfill.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

41 changes: 21 additions & 20 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
};
}
100 changes: 58 additions & 42 deletions src/materialize-directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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<void>();
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<string|MaterializeAction>) {
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<string | MaterializeAction>) {
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()
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
Expand All @@ -200,7 +216,7 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
picker.val(jqueryPickerElement.val());
}
jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((<any>CustomEvent("input"))));
});
});
}

if (this.isChips()) {
Expand Down