ng-masonry-layout
Version:
Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry
304 lines (296 loc) • 9.41 kB
JavaScript
import { Component, Inject, PLATFORM_ID, ElementRef, Input, Output, EventEmitter, Directive, forwardRef, NgModule } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var masonryConstructor;
var NgxMasonryComponent = /** @class */ (function () {
function NgxMasonryComponent(platformId, _element) {
this.platformId = platformId;
this._element = _element;
this.useImagesLoaded = false;
this.updateLayout = false;
// Outputs
this.layoutComplete = new EventEmitter();
this.removeComplete = new EventEmitter();
}
/**
* @return {?}
*/
NgxMasonryComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// if (this.useImagesLoaded && imagesLoaded === undefined) {
// imagesLoaded = require('imagesloaded');
// }
var _this = this;
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 = '[ngxMasonryItem], ngxMasonryItem';
}
if (isPlatformBrowser(this.platformId)) {
// Initialize Masonry
this._msnry = new masonryConstructor(this._element.nativeElement, this.options);
// Bind to events
this._msnry.on('layoutComplete', (/**
* @param {?} items
* @return {?}
*/
function (items) {
_this.layoutComplete.emit(items);
}));
this._msnry.on('removeComplete', (/**
* @param {?} items
* @return {?}
*/
function (items) {
_this.removeComplete.emit(items);
}));
}
};
/**
* @param {?} changes
* @return {?}
*/
NgxMasonryComponent.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 {?}
*/
NgxMasonryComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._msnry) {
this._msnry.destroy();
}
};
/**
* @return {?}
*/
NgxMasonryComponent.prototype.layout = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
_this._msnry.layout();
}));
};
/**
* @return {?}
*/
NgxMasonryComponent.prototype.reloadItems = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
_this._msnry.reloadItems();
}));
};
// public add(element: HTMLElement, prepend: boolean = false) {
// public add(element: HTMLElement, prepend: boolean = false) {
/**
* @param {?} element
* @return {?}
*/
NgxMasonryComponent.prototype.add =
// public add(element: HTMLElement, prepend: boolean = false) {
/**
* @param {?} element
* @return {?}
*/
function (element) {
/** @type {?} */
var isFirstItem = false;
// Check if first item
if (this._msnry.items.length === 0) {
isFirstItem = true;
}
if (this.useImagesLoaded) ;
else {
// Tell Masonry that a child element has been added
this._msnry.appended(element);
// layout if first item
if (isFirstItem) {
this.layout();
}
}
};
/**
* @param {?} element
* @return {?}
*/
NgxMasonryComponent.prototype.remove = /**
* @param {?} element
* @return {?}
*/
function (element) {
// Tell Masonry that a child element has been removed
this._msnry.remove(element);
// Layout items
this.layout();
};
NgxMasonryComponent.decorators = [
{ type: Component, args: [{
selector: '[ngx-masonry], ngx-masonry',
template: '<ng-content></ng-content>',
styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]
}] }
];
/** @nocollapse */
NgxMasonryComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
{ type: ElementRef }
]; };
NgxMasonryComponent.propDecorators = {
options: [{ type: Input }],
useImagesLoaded: [{ type: Input }],
updateLayout: [{ type: Input }],
layoutComplete: [{ type: Output }],
removeComplete: [{ type: Output }]
};
return NgxMasonryComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxMasonryDirective = /** @class */ (function () {
function NgxMasonryDirective(_element, _parent, platformId) {
this._element = _element;
this._parent = _parent;
this.platformId = platformId;
}
/**
* @return {?}
*/
NgxMasonryDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (isPlatformBrowser(this.platformId)) {
this._parent.add(this._element.nativeElement);
this.watchForHtmlChanges();
}
};
/**
* @return {?}
*/
NgxMasonryDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (isPlatformBrowser(this.platformId)) {
this._parent.remove(this._element.nativeElement);
}
};
/** When HTML in brick changes dinamically, observe that and change layout */
/**
* When HTML in brick changes dinamically, observe that and change layout
* @private
* @return {?}
*/
NgxMasonryDirective.prototype.watchForHtmlChanges = /**
* When HTML in brick changes dinamically, observe that and change layout
* @private
* @return {?}
*/
function () {
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
/**
* Watch for any changes to subtree
* @type {?}
*/
var self_1 = this;
/** @type {?} */
var observer = new MutationObserver((/**
* @param {?} mutations
* @param {?} observerFromElement
* @return {?}
*/
function (mutations, observerFromElement) {
self_1._parent.layout();
}));
// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(this._element.nativeElement, {
subtree: true,
childList: true
});
}
};
NgxMasonryDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxMasonryItem], ngxMasonryItem'
},] }
];
/** @nocollapse */
NgxMasonryDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgxMasonryComponent, decorators: [{ type: Inject, args: [forwardRef((/**
* @return {?}
*/
function () { return NgxMasonryComponent; })),] }] },
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
]; };
return NgxMasonryDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxMasonryModule = /** @class */ (function () {
function NgxMasonryModule() {
}
NgxMasonryModule.decorators = [
{ type: NgModule, args: [{
imports: [],
declarations: [NgxMasonryComponent, NgxMasonryDirective],
exports: [NgxMasonryComponent, NgxMasonryDirective]
},] }
];
return NgxMasonryModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxMasonryComponent, NgxMasonryDirective, NgxMasonryModule };
//# sourceMappingURL=ng-masonry-layout.js.map