diff --git a/.gitignore b/.gitignore index 2957ff1..0bb22f6 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ npm-debug.log* # Visual studio config .vscode/ +.idea # OS generated files Thumbs.db diff --git a/package.json b/package.json index 3978545..9073f80 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { - "name": "angular2-masonry", + "name": "angular-masonry-ts", "version": "0.4.0", "description": "Angular2 component for https://github.com/desandro/masonry", - "main": "angular2-masonry.js", + "main": "angular2-masonry.ts", "dependencies": { - "masonry-layout": "^4.1.1" + "masonry-layout": "^4.1.1", + "element-resize-detector": "^1.1.9" }, "devDependencies": { "@angular/core": "^2.1.0", @@ -22,7 +23,7 @@ "typings": "./index.d.ts", "repository": { "type": "git", - "url": "git+https://github.com/jelgblad/angular2-masonry.git" + "url": "git+https://github.com/dbartumeu/angular2-masonry.git" }, "keywords": [ "angular2", @@ -35,5 +36,5 @@ "bugs": { "url": "https://github.com/jelgblad/angular2-masonry/issues" }, - "homepage": "https://github.com/jelgblad/angular2-masonry#readme" + "homepage": "https://github.com/dbartumeu/angular2-masonry#readme" } diff --git a/src/brick.ts b/src/brick.ts index b5db20d..eea3af6 100644 --- a/src/brick.ts +++ b/src/brick.ts @@ -15,6 +15,7 @@ import { } from '@angular/core'; import { AngularMasonry } from './masonry'; +import elementResizeDetectorMaker from 'element-resize-detector'; @Directive({ selector: '[masonry-brick], masonry-brick' @@ -37,21 +38,27 @@ export class AngularMasonryBrick implements OnDestroy, AfterViewInit { /** When HTML in brick changes dinamically, observe that and change layout */ private watchForHtmlChanges(): void { + let self = this; MutationObserver = window.MutationObserver || window.WebKitMutationObserver; if (MutationObserver) { /** Watch for any changes to subtree */ - let self = this; - let observer = new MutationObserver(function(mutations, observerFromElement) { + let subtreeObserver = new MutationObserver(function(mutations, observerFromElement) { self._parent.layout(); }); // define what element should be observed by the observer // and what types of mutations trigger the callback - observer.observe(this._element.nativeElement, { + subtreeObserver.observe(this._element.nativeElement, { subtree: true, childList: true }); } + + let DimensionsObserver = elementResizeDetectorMaker(); + DimensionsObserver.listenTo( this._element.nativeElement, element => { + self._parent.layout(); + }) + } }