ngm-masonry
Version:
Angular Module for displaying a feed of items in a masonry layout using https://github.com/glebmlk/ngx-masonry
321 lines (313 loc) • 10.6 kB
JavaScript
import { isPlatformBrowser } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgZone, Output, PLATFORM_ID, Directive, forwardRef, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var imagesLoaded;
/** @type {?} */
var masonryConstructor;
var NgmMasonryComponent = /** @class */ (function () {
function NgmMasonryComponent(platformId, element, ngZone, changeDetectorRef) {
this.platformId = platformId;
this.element = element;
this.ngZone = ngZone;
this.changeDetectorRef = changeDetectorRef;
// Inputs
this.options = {};
this.useImagesLoaded = false;
this.updateLayout = false;
// Outputs
this.layoutComplete = new EventEmitter();
this.removeComplete = new EventEmitter();
}
/**
* @return {?}
*/
NgmMasonryComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
if (_this.useImagesLoaded && imagesLoaded === undefined) {
imagesLoaded = require('imagesloaded');
}
if (isPlatformBrowser(_this.platformId) && masonryConstructor === undefined) {
masonryConstructor = require('masonry-layout');
}
// Create masonry options object
if (!_this.options) {
_this.options = {};
}
// Set default itemSelector
if (!_this.options.itemSelector) {
_this.options.itemSelector = '[ngmMasonryItem], ngmMasonryItem';
}
if (isPlatformBrowser(_this.platformId)) {
// Initialize Masonry
_this._msnry = new masonryConstructor(_this.element.nativeElement, _this.options);
// Bind to events
_this._msnry.on('layoutComplete', function (items) {
_this.layoutComplete.emit(items);
_this.changeDetectorRef.markForCheck();
});
_this._msnry.on('removeComplete', function (items) {
_this.removeComplete.emit(items);
_this.changeDetectorRef.markForCheck();
});
}
});
};
/**
* @param {?} changes
* @return {?}
*/
NgmMasonryComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
// only update layout if it's not the first change
if (changes.updateLayout) {
if (!changes.updateLayout.firstChange) {
this.layout();
}
}
};
/**
* @return {?}
*/
NgmMasonryComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._msnry) {
this._msnry.destroy();
}
};
/**
* @return {?}
*/
NgmMasonryComponent.prototype.layout = /**
* @return {?}
*/
function () {
var _this = this;
requestAnimationFrame(function () {
_this._msnry.layout();
_this.changeDetectorRef.markForCheck();
});
};
/**
* @return {?}
*/
NgmMasonryComponent.prototype.reloadItems = /**
* @return {?}
*/
function () {
var _this = this;
requestAnimationFrame(function () {
_this._msnry.reloadItems();
_this.changeDetectorRef.markForCheck();
});
};
// public add(element: HTMLElement, prepend: boolean = false) {
// public add(element: HTMLElement, prepend: boolean = false) {
/**
* @param {?} element
* @return {?}
*/
NgmMasonryComponent.prototype.add =
// public add(element: HTMLElement, prepend: boolean = false) {
/**
* @param {?} element
* @return {?}
*/
function (element) {
var _this = this;
this.ngZone.runOutsideAngular(function () {
/** @type {?} */
var isFirstItem = false;
// Check if first item
if (_this._msnry.items.length === 0) {
isFirstItem = true;
}
if (_this.useImagesLoaded) {
imagesLoaded(element, function (instance) {
_this.element.nativeElement.appendChild(element);
// Tell Masonry that a child element has been added
setTimeout(function () {
_this._msnry.appended(element);
_this.changeDetectorRef.markForCheck();
});
// layout if first item
if (isFirstItem) {
_this.layout();
}
});
_this.element.nativeElement.removeChild(element);
}
else {
// Tell Masonry that a child element has been added
setTimeout(function () {
_this._msnry.appended(element);
_this.changeDetectorRef.markForCheck();
});
// layout if first item
if (isFirstItem) {
_this.layout();
}
}
});
};
/**
* @param {?} element
* @return {?}
*/
NgmMasonryComponent.prototype.remove = /**
* @param {?} element
* @return {?}
*/
function (element) {
// Tell Masonry that a child element has been removed
this._msnry.remove(element);
// Layout items
this.layout();
};
NgmMasonryComponent.decorators = [
{ type: Component, args: [{
selector: '[ngm-masonry], ngm-masonry',
template: '<ng-content></ng-content>',
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["\n :host {\n display: block;\n }\n "]
}] }
];
/** @nocollapse */
NgmMasonryComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
{ type: ElementRef },
{ type: NgZone },
{ type: ChangeDetectorRef }
]; };
NgmMasonryComponent.propDecorators = {
options: [{ type: Input }],
useImagesLoaded: [{ type: Input }],
updateLayout: [{ type: Input }],
layoutComplete: [{ type: Output }],
removeComplete: [{ type: Output }]
};
return NgmMasonryComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgmMasonryDirective = /** @class */ (function () {
function NgmMasonryDirective(_element, _parent, platformId) {
this._element = _element;
this._parent = _parent;
this.platformId = platformId;
}
/**
* @return {?}
*/
NgmMasonryDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (isPlatformBrowser(this.platformId)) {
this._parent.add(this._element.nativeElement);
this.watchForHtmlChanges();
}
};
/**
* @return {?}
*/
NgmMasonryDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (isPlatformBrowser(this.platformId)) {
this._parent.remove(this._element.nativeElement);
if (!!this._observer) {
this._observer.disconnect();
}
}
};
/** When HTML in brick changes dynamically, observe that and change layout */
/**
* When HTML in brick changes dynamically, observe that and change layout
* @private
* @return {?}
*/
NgmMasonryDirective.prototype.watchForHtmlChanges = /**
* When HTML in brick changes dynamically, observe that and change layout
* @private
* @return {?}
*/
function () {
var _this = this;
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
this._observer = new MutationObserver(function () {
requestAnimationFrame(function () {
_this._parent.layout();
});
});
}
if (!!this._observer) {
// define what element should be observed by the observer
// and what types of mutations trigger the callback
this._observer.observe(this._element.nativeElement, {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ['src'],
});
}
};
NgmMasonryDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngmMasonryItem], ngmMasonryItem',
},] }
];
/** @nocollapse */
NgmMasonryDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgmMasonryComponent, decorators: [{ type: Inject, args: [forwardRef(function () { return NgmMasonryComponent; }),] }] },
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
]; };
return NgmMasonryDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgmMasonryModule = /** @class */ (function () {
function NgmMasonryModule() {
}
NgmMasonryModule.decorators = [
{ type: NgModule, args: [{
imports: [],
declarations: [NgmMasonryComponent, NgmMasonryDirective],
exports: [NgmMasonryComponent, NgmMasonryDirective],
},] }
];
return NgmMasonryModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgmMasonryComponent, NgmMasonryDirective, NgmMasonryModule };
//# sourceMappingURL=ngm-masonry.js.map