diff --git a/README.md b/README.md index d7d6ec8..06730cb 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: @@ -214,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) - diff --git a/package.json b/package.json index cdb4555..28ebf47 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { - "name": "angular2-materialize", + "name": "@samuelberthe/angular2-materialize", "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" }, + "version": "1.0.0-rc.2", "keywords": [ "angular", "angular2", @@ -19,9 +20,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": { @@ -32,8 +33,8 @@ "postsemantic-release": "semantic-release post" }, "peerDependencies": { - "materialize-css": "^0.100.1", - "@angular/common": "^5.0.0" + "materialize-css": "1.0.0-rc.2", + "@angular/common": ">=4.0.0" }, "config": { "commitizen": { @@ -62,7 +63,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", 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", 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) { 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..d726475 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,27 +1,29 @@ -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; -Waves.displayEffect(); +declare var Waves: any; +declare var M: any; + +if ("undefined" != typeof 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)) { + 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); + 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/src/materialize-directive.ts b/src/materialize-directive.ts index 68365e6..4d8ef32 100644 --- a/src/materialize-directive.ts +++ b/src/materialize-directive.ts @@ -7,12 +7,15 @@ 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; +declare var M: any; // export type MaterializeOptions = // "collapsible" | @@ -25,49 +28,54 @@ declare var Materialize: any; // "sideNav" | // "modal"; -// +// export interface MaterializeAction { action: string; - params: [any]; + params: any[]; } @Directive({ selector: '[materialize]' }) -export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnDestroy { +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; 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,55 @@ 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()) { + 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); + } + } } } 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; @@ -136,8 +159,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 @@ -179,7 +202,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 +223,7 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD picker.val(jqueryPickerElement.val()); } jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((CustomEvent("input")))); - }); + }); } if (this.isChips()) { @@ -246,15 +269,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.");