ngm-masonry
Version:
Angular Module for displaying a feed of items in a masonry layout using https://github.com/glebmlk/ngx-masonry
329 lines (320 loc) • 12.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ngm-masonry', ['exports', '@angular/common', '@angular/core'], factory) :
(factory((global['ngm-masonry'] = {}),global.ng.common,global.ng.core));
}(this, (function (exports,common,core) { 'use strict';
/**
* @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 core.EventEmitter();
this.removeComplete = new core.EventEmitter();
}
/**
* @return {?}
*/
NgmMasonryComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
if (_this.useImagesLoaded && imagesLoaded === undefined) {
imagesLoaded = require('imagesloaded');
}
if (common.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 (common.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: core.Component, args: [{
selector: '[ngm-masonry], ngm-masonry',
template: '<ng-content></ng-content>',
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: ["\n :host {\n display: block;\n }\n "]
}] }
];
/** @nocollapse */
NgmMasonryComponent.ctorParameters = function () {
return [
{ type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
{ type: core.ElementRef },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef }
];
};
NgmMasonryComponent.propDecorators = {
options: [{ type: core.Input }],
useImagesLoaded: [{ type: core.Input }],
updateLayout: [{ type: core.Input }],
layoutComplete: [{ type: core.Output }],
removeComplete: [{ type: core.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 (common.isPlatformBrowser(this.platformId)) {
this._parent.add(this._element.nativeElement);
this.watchForHtmlChanges();
}
};
/**
* @return {?}
*/
NgmMasonryDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (common.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: core.Directive, args: [{
selector: '[ngmMasonryItem], ngmMasonryItem',
},] }
];
/** @nocollapse */
NgmMasonryDirective.ctorParameters = function () {
return [
{ type: core.ElementRef },
{ type: NgmMasonryComponent, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return NgmMasonryComponent; }),] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] }
];
};
return NgmMasonryDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgmMasonryModule = /** @class */ (function () {
function NgmMasonryModule() {
}
NgmMasonryModule.decorators = [
{ type: core.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
*/
exports.NgmMasonryComponent = NgmMasonryComponent;
exports.NgmMasonryDirective = NgmMasonryDirective;
exports.NgmMasonryModule = NgmMasonryModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngm-masonry.umd.js.map