Skip to content

Added observer when a brick element changes their size - we can trige… #47

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

Open
dbartumeu wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added observer when a brick element changes their size - we can trige… #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3424b6
Added observer when a brick element changes their size - we can trige…
Apr 24, 2017
1beea40
Upgrading package.json
Apr 24, 2017
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ npm-debug.log*

# Visual studio config
.vscode/
.idea

# OS generated files
Thumbs.db
Expand Down
11 changes: 6 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
13 changes: 10 additions & 3 deletions src/brick.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
} from '@angular/core';

import { AngularMasonry } from './masonry';
import elementResizeDetectorMaker from 'element-resize-detector';

@Directive({
selector: '[masonry-brick], masonry-brick'
Expand All @@ -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();
})

}
}