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 1/3] 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 2/3] 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 3/3] 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",