From b26df47f487b4f3476a7bea9fad94b262e49d067 Mon Sep 17 00:00:00 2001 From: Michael Fichtinger Date: Mon, 18 Dec 2017 06:25:51 +0100 Subject: [PATCH 01/14] fix unexpected closing of multiselect dropdown --- src/materialize-directive.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts index 68365e6..3c256b7 100644 --- a/src/materialize-directive.ts +++ b/src/materialize-directive.ts @@ -89,7 +89,14 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD public ngOnChanges(_unused?) { if (this.isSelect()) { - setTimeout(() => this.performLocalElementUpdates(), 10); + const nativeElement = this._el.nativeElement; + const jQueryElement = $(nativeElement); + + // run performLocalElementUpdates() only if dropdown closed + // otherwise the dropdown closes unexpected + if (!jQueryElement.attr("multiple") || jQueryElement.parent().find("input.active").length === 0) { + setTimeout(() => this.performLocalElementUpdates(), 10); + } } } From 63f9ec86aa73927c000001629325cc29bdd58175 Mon Sep 17 00:00:00 2001 From: Nicolas Brouet Date: Wed, 14 Feb 2018 14:21:18 +0100 Subject: [PATCH 02/14] In MaterializeAction replace [any] by any[] [any] only has 1 element in its array. any[] can has multiple elements. It allows things like this.tabsActions.emit({action: "tabs", params: ['select_tab', page]}); that several persons were looking for, and it's compatible with previous version. --- src/materialize-directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts index 68365e6..7374a26 100644 --- a/src/materialize-directive.ts +++ b/src/materialize-directive.ts @@ -29,7 +29,7 @@ declare var Materialize: any; export interface MaterializeAction { action: string; - params: [any]; + params: any[]; } @Directive({ From f0f645957c39fcca5415a39e83bf778806bf7793 Mon Sep 17 00:00:00 2001 From: Nicolas Brouet Date: Fri, 16 Feb 2018 11:13:38 +0100 Subject: [PATCH 03/14] Fix for coherency [any] to any[] --- src/materialize-directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts index 7374a26..80acfba 100644 --- a/src/materialize-directive.ts +++ b/src/materialize-directive.ts @@ -37,7 +37,7 @@ export interface MaterializeAction { }) export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnDestroy { - private _params: [any] = null; + private _params: any[] = null; private _functionName: string = null; private previousValue = null; private previousDisabled = false; 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 04/14] 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()) { From ad22aa52b2355ae13e96ad98eabca24523553c84 Mon Sep 17 00:00:00 2001 From: metinko <40485388+metinko@users.noreply.github.com> Date: Fri, 22 Jun 2018 09:03:47 +0200 Subject: [PATCH 05/14] Add files via upload Changes the Namespace from 'Materialize' to 'M' to support materializecss v1.0.0 --- index.ts | 27 ++++ materialize-directive.ts | 309 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 336 insertions(+) create mode 100644 index.ts create mode 100644 materialize-directive.ts diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..269ace5 --- /dev/null +++ b/index.ts @@ -0,0 +1,27 @@ +export {MaterializeDirective,MaterializeAction} from "./materialize-directive"; +export {MaterializeModule} from "./materialize-module"; + +if (!("M" 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; +Waves.displayEffect(); + +declare var M:any; + +export function toast(...args) { + M.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/materialize-directive.ts b/materialize-directive.ts new file mode 100644 index 0000000..8348116 --- /dev/null +++ b/materialize-directive.ts @@ -0,0 +1,309 @@ +import { + Directive, + ElementRef, + Input, + Output, + DoCheck, + OnChanges, + OnDestroy, + AfterViewInit, + EventEmitter +} from '@angular/core'; +import {CustomEvent} from './custom-event-polyfill'; + +declare var $: any; +declare var M: any; + +// export type MaterializeOptions = +// "collapsible" | +// "dropdown" | +// "materialbox" | +// "tabs" | +// "tooltip" | +// "characterCounter" | +// "material_select" | +// "sideNav" | +// "modal"; + +// + +export interface MaterializeAction { + action: string; + params: [any]; +} + +@Directive({ + selector: '[materialize]' +}) +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 changeListenerShouldBeAdded = true; + + @Output() public init = new EventEmitter(); + private initialized = false; + + constructor(private _el: ElementRef) { + } + + @Input() + public set materializeParams(params: any) { + 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); + }) + } + + @Input() + public set materialize(functionName: string) { + this._functionName = functionName; + } + + // this is here to trigger change detection for select elements + @Input() + public set materializeSelectOptions(options: any) { + } + + //used for the datepicker at the moment + @Input() ngModel; + + public ngAfterViewInit() { + this.performElementUpdates(); + } + + public ngOnChanges(_unused?) { + if (this.isSelect()) { + setTimeout(() => this.performLocalElementUpdates(), 10); + } + } + + public ngOnDestroy() { + 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(); + } + } + return false; + } + + private performElementRemotion() { + if (this.isTooltip()) { + const nativeElement = this._el.nativeElement; + const jQueryElement = $(nativeElement); + const tooltipId = jQueryElement.attr('data-tooltip-id'); + if (tooltipId) { + $('#' + tooltipId).remove(); + } + } + } + + private performElementUpdates() { + // it should have been created by now, but confirm anyway + if (M && M.updateTextFields) { + M.updateTextFields(); + } + + // handle select changes from the HTML + if (this.isSelect() && this.changeListenerShouldBeAdded) { + const nativeElement = this._el.nativeElement; + const jQueryElement = $(nativeElement); + jQueryElement.on("change", e => { + if (!e.originalEvent || !e.originalEvent.internalToMaterialize) { + const event: any = document.createEvent("CustomEvent"); + //if (jQueryElement.attr("multiple")) { + //event.initCustomEvent("input",false,false,undefined); + //} + //else { + event.initCustomEvent("change", false, false, undefined); + //} + + event.internalToMaterialize = true; + nativeElement.dispatchEvent(event); + } + }); + this.changeListenerShouldBeAdded = false; + } + + if (this.isAutocomplete()) { + const nativeElement = this._el.nativeElement; + const jQueryElement = $(nativeElement); + + jQueryElement.on("change", e => nativeElement.dispatchEvent((CustomEvent("input")))); + } + + if (this.isDatePicker()) { + const nativeElement = this._el.nativeElement; + const jqueryPickerElement = $(nativeElement); + + const datePicker = jqueryPickerElement[this._functionName](...this._params); + const picker = datePicker.pickadate('picker'); + setTimeout(() => { + if (this.ngModel) { // PR 292 - 1 + picker.set('select', this.ngModel); + } else { + const value = jqueryPickerElement.val(); + if (value && value.length>0) { + picker.set('select', value); + } + } + jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((CustomEvent("input")))); + }); + } + + if (this.isTimePicker()) { + const nativeElement = this._el.nativeElement; + const jqueryPickerElement = $(nativeElement); + + const timePicker = jqueryPickerElement[this._functionName](...this._params); + const picker = timePicker.pickatime('picker'); + setTimeout(() => { + if (this.ngModel) { + picker.val(this.ngModel); + } else { + picker.val(jqueryPickerElement.val()); + } + jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((CustomEvent("input")))); + }); + } + + if (this.isChips()) { + const nativeElement = this._el.nativeElement; + const jQueryElement = $(nativeElement); + jQueryElement.on("chip.add", (e, chip) => nativeElement.dispatchEvent((CustomEvent("chip.add", chip)))); + jQueryElement.on("chip.delete", (e, chip) => nativeElement.dispatchEvent((CustomEvent("chip.delete", chip)))); + jQueryElement.on("chip.select", (e, chip) => nativeElement.dispatchEvent((CustomEvent("chip.select", chip)))); + } + + if (this.isTextarea()) { + this._el.nativeElement.dispatchEvent((CustomEvent("autoresize", { + bubbles: true, + cancelable: false, + detail: undefined + }))); + } + + this.performLocalElementUpdates(); + } + + private performLocalElementUpdates(functionName = this._functionName, params = this._params) { + if (this._waitFunction[functionName]) { + return; + } + + this._waitFunction[functionName] = true; + + $(document).ready(() => { + this._waitFunction[functionName] = false; + + if (functionName) { + const jQueryElement = $(this._el.nativeElement); + if (jQueryElement[functionName]) { + if (params) { + if (params instanceof Array) { + jQueryElement[functionName](...params); + } else { + throw new Error("Params has to be an array."); + } + } else { + jQueryElement[functionName](); + } + } else { + // fallback to running this function on the global Materialize object + if (M[functionName]) { + if (params) { + if (params instanceof Array) { + M[functionName](...params); + } else { + throw new Error("Params has to be an array."); + } + } else { + M[functionName](); + } + } else { + throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object."); + } + } + + if (!this.initialized) { + this.initialized = true; + this.init.emit(); + } + + } + + }); + } + + private isTooltip() { + return (this._functionName && this._functionName === "tooltip"); + } + + private isSelect() { + return (this._functionName && this._functionName === "material_select"); + } + + private isDatePicker() { + return (this._functionName && this._functionName === "pickadate"); + } + + private isTimePicker() { + return (this._functionName && this._functionName === "pickatime"); + } + + private isChips() { + return (this._functionName && this._functionName === "material_chip"); + } + + private isAutocomplete() { + return (this._functionName && this._functionName === "autocomplete"); + } + + private isTextarea() { + return this._el.nativeElement.nodeName == "TEXTAREA"; + } + + private enableDPButtons() { + $('.picker__clear').removeAttr("disabled"); + $('.picker__today').removeAttr("disabled"); + $('.picker__close').removeAttr("disabled"); + $('.picker__select--year').removeAttr("disabled"); + $('.picker__select--month').removeAttr("disabled"); + } +} From 7af4bedfb53ace1594bdaf434a42589e7950d58c Mon Sep 17 00:00:00 2001 From: Metin Kocaman Date: Fri, 22 Jun 2018 09:15:51 +0200 Subject: [PATCH 06/14] Moved the files in the correct folder Moved the files in the correct folder --- index.ts | 27 --- materialize-directive.ts | 309 ----------------------------------- src/index.ts | 6 +- src/materialize-directive.ts | 12 +- 4 files changed, 9 insertions(+), 345 deletions(-) delete mode 100644 index.ts delete mode 100644 materialize-directive.ts diff --git a/index.ts b/index.ts deleted file mode 100644 index 269ace5..0000000 --- a/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -export {MaterializeDirective,MaterializeAction} from "./materialize-directive"; -export {MaterializeModule} from "./materialize-module"; - -if (!("M" 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; -Waves.displayEffect(); - -declare var M:any; - -export function toast(...args) { - M.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/materialize-directive.ts b/materialize-directive.ts deleted file mode 100644 index 8348116..0000000 --- a/materialize-directive.ts +++ /dev/null @@ -1,309 +0,0 @@ -import { - Directive, - ElementRef, - Input, - Output, - DoCheck, - OnChanges, - OnDestroy, - AfterViewInit, - EventEmitter -} from '@angular/core'; -import {CustomEvent} from './custom-event-polyfill'; - -declare var $: any; -declare var M: any; - -// export type MaterializeOptions = -// "collapsible" | -// "dropdown" | -// "materialbox" | -// "tabs" | -// "tooltip" | -// "characterCounter" | -// "material_select" | -// "sideNav" | -// "modal"; - -// - -export interface MaterializeAction { - action: string; - params: [any]; -} - -@Directive({ - selector: '[materialize]' -}) -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 changeListenerShouldBeAdded = true; - - @Output() public init = new EventEmitter(); - private initialized = false; - - constructor(private _el: ElementRef) { - } - - @Input() - public set materializeParams(params: any) { - 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); - }) - } - - @Input() - public set materialize(functionName: string) { - this._functionName = functionName; - } - - // this is here to trigger change detection for select elements - @Input() - public set materializeSelectOptions(options: any) { - } - - //used for the datepicker at the moment - @Input() ngModel; - - public ngAfterViewInit() { - this.performElementUpdates(); - } - - public ngOnChanges(_unused?) { - if (this.isSelect()) { - setTimeout(() => this.performLocalElementUpdates(), 10); - } - } - - public ngOnDestroy() { - 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(); - } - } - return false; - } - - private performElementRemotion() { - if (this.isTooltip()) { - const nativeElement = this._el.nativeElement; - const jQueryElement = $(nativeElement); - const tooltipId = jQueryElement.attr('data-tooltip-id'); - if (tooltipId) { - $('#' + tooltipId).remove(); - } - } - } - - private performElementUpdates() { - // it should have been created by now, but confirm anyway - if (M && M.updateTextFields) { - M.updateTextFields(); - } - - // handle select changes from the HTML - if (this.isSelect() && this.changeListenerShouldBeAdded) { - const nativeElement = this._el.nativeElement; - const jQueryElement = $(nativeElement); - jQueryElement.on("change", e => { - if (!e.originalEvent || !e.originalEvent.internalToMaterialize) { - const event: any = document.createEvent("CustomEvent"); - //if (jQueryElement.attr("multiple")) { - //event.initCustomEvent("input",false,false,undefined); - //} - //else { - event.initCustomEvent("change", false, false, undefined); - //} - - event.internalToMaterialize = true; - nativeElement.dispatchEvent(event); - } - }); - this.changeListenerShouldBeAdded = false; - } - - if (this.isAutocomplete()) { - const nativeElement = this._el.nativeElement; - const jQueryElement = $(nativeElement); - - jQueryElement.on("change", e => nativeElement.dispatchEvent((CustomEvent("input")))); - } - - if (this.isDatePicker()) { - const nativeElement = this._el.nativeElement; - const jqueryPickerElement = $(nativeElement); - - const datePicker = jqueryPickerElement[this._functionName](...this._params); - const picker = datePicker.pickadate('picker'); - setTimeout(() => { - if (this.ngModel) { // PR 292 - 1 - picker.set('select', this.ngModel); - } else { - const value = jqueryPickerElement.val(); - if (value && value.length>0) { - picker.set('select', value); - } - } - jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((CustomEvent("input")))); - }); - } - - if (this.isTimePicker()) { - const nativeElement = this._el.nativeElement; - const jqueryPickerElement = $(nativeElement); - - const timePicker = jqueryPickerElement[this._functionName](...this._params); - const picker = timePicker.pickatime('picker'); - setTimeout(() => { - if (this.ngModel) { - picker.val(this.ngModel); - } else { - picker.val(jqueryPickerElement.val()); - } - jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((CustomEvent("input")))); - }); - } - - if (this.isChips()) { - const nativeElement = this._el.nativeElement; - const jQueryElement = $(nativeElement); - jQueryElement.on("chip.add", (e, chip) => nativeElement.dispatchEvent((CustomEvent("chip.add", chip)))); - jQueryElement.on("chip.delete", (e, chip) => nativeElement.dispatchEvent((CustomEvent("chip.delete", chip)))); - jQueryElement.on("chip.select", (e, chip) => nativeElement.dispatchEvent((CustomEvent("chip.select", chip)))); - } - - if (this.isTextarea()) { - this._el.nativeElement.dispatchEvent((CustomEvent("autoresize", { - bubbles: true, - cancelable: false, - detail: undefined - }))); - } - - this.performLocalElementUpdates(); - } - - private performLocalElementUpdates(functionName = this._functionName, params = this._params) { - if (this._waitFunction[functionName]) { - return; - } - - this._waitFunction[functionName] = true; - - $(document).ready(() => { - this._waitFunction[functionName] = false; - - if (functionName) { - const jQueryElement = $(this._el.nativeElement); - if (jQueryElement[functionName]) { - if (params) { - if (params instanceof Array) { - jQueryElement[functionName](...params); - } else { - throw new Error("Params has to be an array."); - } - } else { - jQueryElement[functionName](); - } - } else { - // fallback to running this function on the global Materialize object - if (M[functionName]) { - if (params) { - if (params instanceof Array) { - M[functionName](...params); - } else { - throw new Error("Params has to be an array."); - } - } else { - M[functionName](); - } - } else { - throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object."); - } - } - - if (!this.initialized) { - this.initialized = true; - this.init.emit(); - } - - } - - }); - } - - private isTooltip() { - return (this._functionName && this._functionName === "tooltip"); - } - - private isSelect() { - return (this._functionName && this._functionName === "material_select"); - } - - private isDatePicker() { - return (this._functionName && this._functionName === "pickadate"); - } - - private isTimePicker() { - return (this._functionName && this._functionName === "pickatime"); - } - - private isChips() { - return (this._functionName && this._functionName === "material_chip"); - } - - private isAutocomplete() { - return (this._functionName && this._functionName === "autocomplete"); - } - - private isTextarea() { - return this._el.nativeElement.nodeName == "TEXTAREA"; - } - - private enableDPButtons() { - $('.picker__clear').removeAttr("disabled"); - $('.picker__today').removeAttr("disabled"); - $('.picker__close').removeAttr("disabled"); - $('.picker__select--year').removeAttr("disabled"); - $('.picker__select--month').removeAttr("disabled"); - } -} diff --git a/src/index.ts b/src/index.ts index 1230d66..269ace5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ export {MaterializeDirective,MaterializeAction} from "./materialize-directive"; export {MaterializeModule} from "./materialize-module"; -if (!("Materialize" in window)) { +if (!("M" 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)) { @@ -11,10 +11,10 @@ if (!("Waves" in window)) { declare var Waves:any; Waves.displayEffect(); -declare var Materialize:any; +declare var M:any; export function toast(...args) { - Materialize.toast(...args); + M.toast(...args); } // polyfill remove any elem in DOM - https://github.com/InfomediaLtd/angular2-materialize/issues/377 (IE) diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts index 68365e6..8348116 100644 --- a/src/materialize-directive.ts +++ b/src/materialize-directive.ts @@ -12,7 +12,7 @@ import { import {CustomEvent} from './custom-event-polyfill'; declare var $: any; -declare var Materialize: any; +declare var M: any; // export type MaterializeOptions = // "collapsible" | @@ -136,8 +136,8 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD private performElementUpdates() { // it should have been created by now, but confirm anyway - if (Materialize && Materialize.updateTextFields) { - Materialize.updateTextFields(); + if (M && M.updateTextFields) { + M.updateTextFields(); } // handle select changes from the HTML @@ -246,15 +246,15 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD } } else { // fallback to running this function on the global Materialize object - if (Materialize[functionName]) { + if (M[functionName]) { if (params) { if (params instanceof Array) { - Materialize[functionName](...params); + M[functionName](...params); } else { throw new Error("Params has to be an array."); } } else { - Materialize[functionName](); + M[functionName](); } } else { throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object."); From fa96d17e717b24169d457256477bc0325319d750 Mon Sep 17 00:00:00 2001 From: Metin Kocaman Date: Fri, 22 Jun 2018 10:14:12 +0200 Subject: [PATCH 07/14] package.json updated --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7f510c4..26a7f6f 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "postsemantic-release": "semantic-release post" }, "peerDependencies": { - "materialize-css": "^0.100.1", + "materialize-css": "1.0.0-rc.1", "@angular/common": "^4.0.0" }, "config": { @@ -61,7 +61,7 @@ "gulp-typescript": "3.1.6", "hammerjs": "^2.0.8", "jquery": "^2.2.4", - "materialize-css": "^0.100.1", + "materialize-css": "1.0.0-rc.1", "rollup": "^0.41.6", "run-sequence": "1.2.2", "rxjs": "^5.1.0", From eff99a79da56ac4f394b9a3639e190bc37ced1e5 Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:05:37 +0200 Subject: [PATCH 08/14] npmjs release --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 032b0db..685a236 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "Angular 2 support for Materialize CSS framework", "repository": { "type": "git", - "url": "https://github.com/InfomediaLtd/angular2-materialize.git" + "url": "https://github.com/samber/angular2-materialize.git" }, "keywords": [ "angular", @@ -19,9 +19,9 @@ "author": "Ruby Boyarski ", "license": "MIT", "bugs": { - "url": "https://github.com/InfomediaLtd/angular2-materialize/issues" + "url": "https://github.com/samber/angular2-materialize/issues" }, - "homepage": "https://github.com/InfomediaLtd/angular2-materialize#readme", + "homepage": "https://github.com/samber/angular2-materialize#readme", "main": "dist/index.js", "types": "./dist/index.d.ts", "scripts": { From 56623daaf783ca5d12264097f4ebd36932e25b61 Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:08:03 +0200 Subject: [PATCH 09/14] npmjs release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 685a236..2dddeb6 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "angular2-materialize", + "name": "@samber/angular2-materialize", "description": "Angular 2 support for Materialize CSS framework", "repository": { "type": "git", From 1e56b154ec1202dae71c4a47163d2c23ff12ec10 Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:15:08 +0200 Subject: [PATCH 10/14] npmjs release --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2dddeb6..28ebf47 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { - "name": "@samber/angular2-materialize", + "name": "@samuelberthe/angular2-materialize", "description": "Angular 2 support for Materialize CSS framework", "repository": { "type": "git", "url": "https://github.com/samber/angular2-materialize.git" }, + "version": "1.0.0-rc.2", "keywords": [ "angular", "angular2", From 6f75f4a1a9a056d40eaa6e289166a15c3070af39 Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:19:46 +0200 Subject: [PATCH 11/14] readme --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index d7d6ec8..6b8297d 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,17 @@ # Angular2 Materialize -[![travis build](https://img.shields.io/travis/InfomediaLtd/angular2-materialize.svg?style=flat-square)](https://travis-ci.org/InfomediaLtd/angular2-materialize) -[![version](https://img.shields.io/npm/v/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/angular2-materialize) -[![downloads](https://img.shields.io/npm/dm/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/angular2-materialize) -[![MIT Licence](https://img.shields.io/npm/l/angular2-materialize.svg?style=flat-square)](https://opensource.org/licenses/MIT) +**This repo is a fork from [InfomediaLtd/angular2-materialize](https://github.com/InfomediaLtd/angular2-materialize) that is not maintained on a regular basis.** + +[![travis build](https://img.shields.io/travis/samber/angular2-materialize.svg?style=flat-square)](https://travis-ci.org/samber/angular2-materialize) +[![version](https://img.shields.io/npm/v/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize) +[![downloads](https://img.shields.io/npm/dm/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize) +[![MIT Licence](https://img.shields.io/npm/l/@samuelberthe/angular2-materialize.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/prs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![NPM](https://nodei.co/npm/angular2-materialize.png?downloads=true)](https://www.npmjs.com/package/angular2-materialize) -[![NPM](https://nodei.co/npm-dl/angular2-materialize.png?height=2&months=12)](https://www.npmjs.com/package/angular2-materialize) +[![NPM](https://nodei.co/npm/@samuelberthe/angular2-materialize.png?downloads=true)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize) +[![NPM](https://nodei.co/npm-dl/@samuelberthe/angular2-materialize.png?height=2&months=12)](https://www.npmjs.com/package/@samuelberthe/angular2-materialize) Angular 2 support for Materialize CSS framework [http://materializecss.com/](http://materializecss.com/) @@ -70,14 +72,14 @@ Apply an empty [MaterializeDirective](https://github.com/InfomediaLtd/angular2-m ``` -The [MaterializeDirective](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive (**materialize**) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip, dropdown, tabs, material_select, sideNav, etc. +The [MaterializeDirective](https://github.com/@samuelberthe/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive (**materialize**) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip, dropdown, tabs, material_select, sideNav, etc. For example, to apply tooltip: ```html Hover me! ``` -The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML. +The [Materialize](https://github.com/@samuelberthe/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML. Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a "string" type action (Materialize function call) or a structure with action and parameters: From 0c938d874908f1e08954e06a6e76c03ae4991672 Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:25:30 +0200 Subject: [PATCH 12/14] trigger ci --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 6b8297d..06730cb 100644 --- a/README.md +++ b/README.md @@ -216,4 +216,3 @@ Another thing you would need to confirm is being able to load web fonts properly Notice that the url-loader is required for this to work (npm install it). The following example project is a fork of the angular2-webpack-starter with the addition of angular2-materialize: [InfomediaLtd/angular2-webpack-starter](https://github.com/InfomediaLtd/angular2-webpack-starter) - From 6d1fce534b8d7ada81c0ce1e401f99402aad78e0 Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:43:31 +0200 Subject: [PATCH 13/14] fixing tests --- sample/src/app/buttons/buttons.component.html | 3 +-- sample/src/app/buttons/buttons.component.ts | 4 ++-- sample/src/app/components/datepicker.ts | 16 ++++++++-------- sample/src/app/components/dialogs.ts | 4 ++-- .../components/model-bindings/model-bindings.ts | 6 +++--- 5 files changed, 16 insertions(+), 17 deletions(-) diff --git a/sample/src/app/buttons/buttons.component.html b/sample/src/app/buttons/buttons.component.html index efaf152..1aa48a8 100644 --- a/sample/src/app/buttons/buttons.component.html +++ b/sample/src/app/buttons/buttons.component.html @@ -10,7 +10,7 @@ send

-Call Materialize.updateTextFields() +Call M.updateTextFields()

@@ -40,4 +40,3 @@
Title

A bunch of text

- diff --git a/sample/src/app/buttons/buttons.component.ts b/sample/src/app/buttons/buttons.component.ts index 772e99b..eaf0637 100644 --- a/sample/src/app/buttons/buttons.component.ts +++ b/sample/src/app/buttons/buttons.component.ts @@ -2,7 +2,7 @@ import { Component, EventEmitter, OnInit } from '@angular/core'; import { Router } from "@angular/router"; import {MaterializeAction} from "angular2-materialize" -declare var Materialize:any; +declare var M:any; @Component({ selector: 'app-buttons', @@ -23,7 +23,7 @@ export class ButtonsComponent implements OnInit { } updateTextFields() { - Materialize.updateTextFields(); + M.updateTextFields(); console.log("updateTextFields called"); } diff --git a/sample/src/app/components/datepicker.ts b/sample/src/app/components/datepicker.ts index 119e555..75615a4 100644 --- a/sample/src/app/components/datepicker.ts +++ b/sample/src/app/components/datepicker.ts @@ -1,7 +1,7 @@ import {Component, EventEmitter} from '@angular/core'; import {MaterializeAction} from '../../../lib/materialize-directive'; import {FormBuilder, FormGroup, FormControl} from '@angular/forms'; -declare var Materialize: any; +declare var M: any; @Component({ selector: "datePicker", @@ -19,18 +19,18 @@ declare var Materialize: any;
- +
Open Date Picker
- +
Set Time to 01:15
@@ -38,16 +38,16 @@ declare var Materialize: any; Open Time Picker
- +
- +

Form Binding

- +
- +
- Toast 1! - Toast 2! + Toast 1! +Toast 2! ` }) export class Dialogs { diff --git a/sample/src/app/components/model-bindings/model-bindings.ts b/sample/src/app/components/model-bindings/model-bindings.ts index 9f64f86..4986441 100644 --- a/sample/src/app/components/model-bindings/model-bindings.ts +++ b/sample/src/app/components/model-bindings/model-bindings.ts @@ -3,7 +3,7 @@ import {Option} from "./option"; import {MaterialInput} from "./input"; import {MaterialSelect} from "./select"; import {MaterializeDirective} from "angular2-materialize"; -import * as Materialize from "angular2-materialize"; +import * as M from "angular2-materialize"; import "rxjs"; import {Observable} from "rxjs/Observable"; @@ -86,11 +86,11 @@ export class ModelBindings { } onInputValChange(val){ - Materialize.toast(`parent input: ${val}`, 500) + M.toast(`parent input: ${val}`, 500) } onSelectValChange(val){ - Materialize.toast(`parent select: ${val}`, 2000) + M.toast(`parent select: ${val}`, 2000) } onCountryChange(e) { From 49c0fafef8945186ce21b4b9eeb410a4750df01b Mon Sep 17 00:00:00 2001 From: Samuel Berthe Date: Mon, 13 Aug 2018 20:44:01 +0200 Subject: [PATCH 14/14] fixing tests --- sample/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/sample/package.json b/sample/package.json index f8b7bf4..0dbfd19 100644 --- a/sample/package.json +++ b/sample/package.json @@ -23,10 +23,10 @@ "hammerjs": "^2.0.8", "intl": "1.2.5", "jquery": "^2.2.4", - "materialize-css": "^0.100.1", - "rxjs": "^5.1.0", - "web-animations-js": "2.2.4", - "zone.js": "0.8.7" + "materialize-css": "^1.0.0-rc.2", + "rxjs": "^5.1.0", + "web-animations-js": "2.2.4", + "zone.js": "0.8.7" }, "devDependencies": { "@angular/cli": "1.0.3",