UNPKG

ng-masonry-layout

Version:

Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry

196 lines 14.2 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, Input, Output, ElementRef, EventEmitter, PLATFORM_ID, Inject } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; /** @type {?} */ let imagesLoaded; /** @type {?} */ let masonryConstructor; export class NgxMasonryComponent { /** * @param {?} platformId * @param {?} _element */ constructor(platformId, _element) { this.platformId = platformId; this._element = _element; this.useImagesLoaded = false; this.updateLayout = false; // Outputs this.layoutComplete = new EventEmitter(); this.removeComplete = new EventEmitter(); } /** * @return {?} */ ngOnInit() { // 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 = '[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 {?} */ (items) => { this.layoutComplete.emit(items); })); this._msnry.on('removeComplete', (/** * @param {?} items * @return {?} */ (items) => { this.removeComplete.emit(items); })); } } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { // only update layout if it's not the first change if (changes.updateLayout) { if (!changes.updateLayout.firstChange) { this.layout(); } } } /** * @return {?} */ ngOnDestroy() { if (this._msnry) { this._msnry.destroy(); } } /** * @return {?} */ layout() { setTimeout((/** * @return {?} */ () => { this._msnry.layout(); })); } /** * @return {?} */ reloadItems() { setTimeout((/** * @return {?} */ () => { this._msnry.reloadItems(); })); } // public add(element: HTMLElement, prepend: boolean = false) { /** * @param {?} element * @return {?} */ add(element) { /** @type {?} */ let isFirstItem = false; // Check if first item if (this._msnry.items.length === 0) { isFirstItem = true; } if (this.useImagesLoaded) { // imagesLoaded(element, (instance: any) => { // this._element.nativeElement.appendChild(element); // // Tell Masonry that a child element has been added // this._msnry.appended(element); // // layout if first item // if (isFirstItem) { // this.layout(); // } // }); // this._element.nativeElement.removeChild(element); } 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 {?} */ remove(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: [` :host { display: block; } `] }] } ]; /** @nocollapse */ NgxMasonryComponent.ctorParameters = () => [ { 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 }] }; if (false) { /** @type {?} */ NgxMasonryComponent.prototype._msnry; /** @type {?} */ NgxMasonryComponent.prototype.options; /** @type {?} */ NgxMasonryComponent.prototype.useImagesLoaded; /** @type {?} */ NgxMasonryComponent.prototype.updateLayout; /** @type {?} */ NgxMasonryComponent.prototype.layoutComplete; /** @type {?} */ NgxMasonryComponent.prototype.removeComplete; /** * @type {?} * @private */ NgxMasonryComponent.prototype.platformId; /** * @type {?} * @private */ NgxMasonryComponent.prototype._element; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1hc29ucnkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctbWFzb25yeS1sYXlvdXQvIiwic291cmNlcyI6WyJsaWIvbmd4LW1hc29ucnkuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUtULEtBQUssRUFDTCxNQUFNLEVBQ04sVUFBVSxFQUNWLFlBQVksRUFDWixXQUFXLEVBQ1gsTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztJQUdoRCxZQUFpQjs7SUFDakIsa0JBQXVCO0FBZTNCLE1BQU0sT0FBTyxtQkFBbUI7Ozs7O0lBQzlCLFlBQXlDLFVBQWUsRUFBVSxRQUFvQjtRQUE3QyxlQUFVLEdBQVYsVUFBVSxDQUFLO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBWTtRQU10RSxvQkFBZSxHQUFZLEtBQUssQ0FBQztRQUN4QyxpQkFBWSxHQUFZLEtBQUssQ0FBQzs7UUFHN0IsbUJBQWMsR0FBd0IsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUNoRSxtQkFBYyxHQUF3QixJQUFJLFlBQVksRUFBUyxDQUFDO0lBWGUsQ0FBQzs7OztJQWExRixRQUFRO1FBQ04sNERBQTREO1FBQzVELDRDQUE0QztRQUM1QyxJQUFJO1FBRUosSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksa0JBQWtCLEtBQUssU0FBUyxFQUFFO1lBQzFFLGtCQUFrQixHQUFHLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1NBQ2hEO1FBRUQsZ0NBQWdDO1FBQ2hDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO1NBQ25CO1FBRUQsMkJBQTJCO1FBQzNCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksRUFBRTtZQUM5QixJ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QVRQLHFDQUFtQjs7SUFHbkIsc0NBQTJDOztJQUMzQyw4Q0FBaUQ7O0lBQ2pELDJDQUF1Qzs7SUFHdkMsNkNBQTBFOztJQUMxRSw2Q0FBMEU7Ozs7O0lBWDlELHlDQUE0Qzs7Ozs7SUFBRSx1Q0FBNEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIE9uSW5pdCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgUExBVEZPUk1fSUQsXG4gIEluamVjdFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGlzUGxhdGZvcm1Ccm93c2VyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuZGVjbGFyZSB2YXIgcmVxdWlyZTogYW55O1xubGV0IGltYWdlc0xvYWRlZDogYW55O1xubGV0IG1hc29ucnlDb25zdHJ1Y3RvcjogYW55O1xuXG5pbXBvcnQgeyBOZ3hNYXNvbnJ5T3B0aW9ucyB9IGZyb20gJy4vbmd4LW1hc29ucnktb3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1tuZ3gtbWFzb25yeV0sIG5neC1tYXNvbnJ5JyxcbiAgdGVtcGxhdGU6ICc8bmctY29udGVudD48L25nLWNvbnRlbnQ+JyxcbiAgc3R5bGVzOiBbXG4gICAgYFxuXHRcdDpob3N0IHtcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdH1cblx0YFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE5neE1hc29ucnlDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgY29uc3RydWN0b3IoQEluamVjdChQTEFURk9STV9JRCkgcHJpdmF0ZSBwbGF0Zm9ybUlkOiBhbnksIHByaXZhdGUgX2VsZW1lbnQ6IEVsZW1lbnRSZWYpIHt9XG5cbiAgcHVibGljIF9tc25yeTogYW55O1xuXG4gIC8vIElucHV0c1xuICBASW5wdXQoKSBwdWJsaWMgb3B0aW9uczogTmd4TWFzb25yeU9wdGlvbnM7XG4gIEBJbnB1dCgpIHB1YmxpYyB1c2VJbWFnZXNMb2FkZWQ6IEJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgdXBkYXRlTGF5b3V0OiBCb29sZWFuID0gZmFsc2U7XG5cbiAgLy8gT3V0cHV0c1xuICBAT3V0cHV0KCkgbGF5b3V0Q29tcGxldGU6IEV2ZW50RW1pdHRlcjxhbnlbXT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueVtdPigpO1xuICBAT3V0cHV0KCkgcmVtb3ZlQ29tcGxldGU6IEV2ZW50RW1pdHRlcjxhbnlbXT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueVtdPigpO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIC8vIGlmICh0aGlzLnVzZUltYWdlc0xvYWRlZCAmJiBpbWFnZXNMb2FkZWQgPT09IHVuZGVmaW5lZCkge1xuICAgIC8vICAgaW1hZ2VzTG9hZGVkID0gcmVxdWlyZSgnaW1hZ2VzbG9hZGVkJyk7XG4gICAgLy8gfVxuXG4gICAgaWYgKGlzUGxhdGZvcm1Ccm93c2VyKHRoaXMucGxhdGZvcm1JZCkgJiYgbWFzb25yeUNvbnN0cnVjdG9yID09PSB1bmRlZmluZWQpIHtcbiAgICAgIG1hc29ucnlDb25zdHJ1Y3RvciA9IHJlcXVpcmUoJ21hc29ucnktbGF5b3V0Jyk7XG4gICAgfVxuXG4gICAgLy8gQ3JlYXRlIG1hc29ucnkgb3B0aW9ucyBvYmplY3RcbiAgICBpZiAoIXRoaXMub3B0aW9ucykge1xuICAgICAgdGhpcy5vcHRpb25zID0ge307XG4gICAgfVxuXG4gICAgLy8gU2V0IGRlZmF1bHQgaXRlbVNlbGVjdG9yXG4gICAgaWYgKCF0aGlzLm9wdGlvbnMuaXRlbVNlbGVjdG9yKSB7XG4gICAgICB0aGlzLm9wdGlvbnMuaXRlbVNlbGVjdG9yID0gJ1tuZ3hNYXNvbnJ5SXRlbV0sIG5neE1hc29ucnlJdGVtJztcbiAgICB9XG5cbiAgICBpZiAoaXNQbGF0Zm9ybUJyb3dzZXIodGhpcy5wbGF0Zm9ybUlkKSkge1xuICAgICAgLy8gSW5pdGlhbGl6ZSBNYXNvbnJ5XG4gICAgICB0aGlzLl9tc25yeSA9IG5ldyBtYXNvbnJ5Q29uc3RydWN0b3IodGhpcy5fZWxlbWVudC5uYXRpdmVFbGVtZW50LCB0aGlzLm9wdGlvbnMpO1xuXG4gICAgICAvLyBCaW5kIHRvIGV2ZW50c1xuICAgICAgdGhpcy5fbXNucnkub24oJ2xheW91dENvbXBsZXRlJywgKGl0ZW1zOiBhbnkpID0+IHtcbiAgICAgICAgdGhpcy5sYXlvdXRDb21wbGV0ZS5lbWl0KGl0ZW1zKTtcbiAgICAgIH0pO1xuICAgICAgdGhpcy5fbXNucnkub24oJ3JlbW92ZUNvbXBsZXRlJywgKGl0ZW1zOiBhbnkpID0+IHtcbiAgICAgICAgdGhpcy5yZW1vdmVDb21wbGV0ZS5lbWl0KGl0ZW1zKTtcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICAvLyBvbmx5IHVwZGF0ZSBsYXlvdXQgaWYgaXQncyBub3QgdGhlIGZpcnN0IGNoYW5nZVxuICAgIGlmIChjaGFuZ2VzLnVwZGF0ZUxheW91dCkge1xuICAgICAgaWYgKCFjaGFuZ2VzLnVwZGF0ZUxheW91dC5maXJzdENoYW5nZSkge1xuICAgICAgICB0aGlzLmxheW91dCgpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIGlmICh0aGlzLl9tc25yeSkge1xuICAgICAgdGhpcy5fbXNucnkuZGVzdHJveSgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBsYXlvdXQoKSB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl9tc25yeS5sYXlvdXQoKTtcbiAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyByZWxvYWRJdGVtcygpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuX21zbnJ5LnJlbG9hZEl0ZW1zKCk7XG4gICAgfSk7XG4gIH1cblxuICAvLyBwdWJsaWMgYWRkKGVsZW1lbnQ6IEhUTUxFbGVtZW50LCBwcmVwZW5kOiBib29sZWFuID0gZmFsc2UpIHtcbiAgcHVibGljIGFkZChlbGVtZW50OiBIVE1MRWxlbWVudCkge1xuICAgIGxldCBpc0ZpcnN0SXRlbSA9IGZhbHNlO1xuXG4gICAgLy8gQ2hlY2sgaWYgZmlyc3QgaXRlbVxuICAgIGlmICh0aGlzLl9tc25yeS5pdGVtcy5sZW5ndGggPT09IDApIHtcbiAgICAgIGlzRmlyc3RJdGVtID0gdHJ1ZTtcbiAgICB9XG5cbiAgICBpZiAodGhpcy51c2VJbWFnZXNMb2FkZWQpIHtcbiAgICAgIC8vIGltYWdlc0xvYWRlZChlbGVtZW50LCAoaW5zdGFuY2U6IGFueSkgPT4ge1xuICAgICAgLy8gICB0aGlzLl9lbGVtZW50Lm5hdGl2ZUVsZW1lbnQuYXBwZW5kQ2hpbGQoZWxlbWVudCk7XG5cbiAgICAgIC8vICAgLy8gVGVsbCBNYXNvbnJ5IHRoYXQgYSBjaGlsZCBlbGVtZW50IGhhcyBiZWVuIGFkZGVkXG4gICAgICAvLyAgIHRoaXMuX21zbnJ5LmFwcGVuZGVkKGVsZW1lbnQpO1xuXG4gICAgICAvLyAgIC8vIGxheW91dCBpZiBmaXJzdCBpdGVtXG4gICAgICAvLyAgIGlmIChpc0ZpcnN0SXRlbSkge1xuICAgICAgLy8gICAgIHRoaXMubGF5b3V0KCk7XG4gICAgICAvLyAgIH1cbiAgICAgIC8vIH0pO1xuXG4gICAgICAvLyB0aGlzLl9lbGVtZW50Lm5hdGl2ZUVsZW1lbnQucmVtb3ZlQ2hpbGQoZWxlbWVudCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIC8vIFRlbGwgTWFzb25yeSB0aGF0IGEgY2hpbGQgZWxlbWVudCBoYXMgYmVlbiBhZGRlZFxuICAgICAgdGhpcy5fbXNucnkuYXBwZW5kZWQoZWxlbWVudCk7XG5cbiAgICAgIC8vIGxheW91dCBpZiBmaXJzdCBpdGVtXG4gICAgICBpZiAoaXNGaXJzdEl0ZW0pIHtcbiAgICAgICAgdGhpcy5sYXlvdXQoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlKGVsZW1lbnQ6IEhUTUxFbGVtZW50KSB7XG4gICAgLy8gVGVsbCBNYXNvbnJ5IHRoYXQgYSBjaGlsZCBlbGVtZW50IGhhcyBiZWVuIHJlbW92ZWRcbiAgICB0aGlzLl9tc25yeS5yZW1vdmUoZWxlbWVudCk7XG5cbiAgICAvLyBMYXlvdXQgaXRlbXNcbiAgICB0aGlzLmxheW91dCgpO1xuICB9XG59XG4iXX0=