ngm-masonry
Version:
Angular Module for displaying a feed of items in a masonry layout using https://github.com/glebmlk/ngx-masonry
2 lines • 4.08 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core")):"function"==typeof define&&define.amd?define("ngm-masonry",["exports","@angular/common","@angular/core"],t):t(e["ngm-masonry"]={},e.ng.common,e.ng.core)}(this,function(e,n,r){"use strict";var s,o,t=(a.prototype.ngOnInit=function(){var t=this;this.ngZone.runOutsideAngular(function(){t.useImagesLoaded&&s===undefined&&(s=require("imagesloaded")),n.isPlatformBrowser(t.platformId)&&o===undefined&&(o=require("masonry-layout")),t.options||(t.options={}),t.options.itemSelector||(t.options.itemSelector="[ngmMasonryItem], ngmMasonryItem"),n.isPlatformBrowser(t.platformId)&&(t._msnry=new o(t.element.nativeElement,t.options),t._msnry.on("layoutComplete",function(e){t.layoutComplete.emit(e),t.changeDetectorRef.markForCheck()}),t._msnry.on("removeComplete",function(e){t.removeComplete.emit(e),t.changeDetectorRef.markForCheck()}))})},a.prototype.ngOnChanges=function(e){e.updateLayout&&(e.updateLayout.firstChange||this.layout())},a.prototype.ngOnDestroy=function(){this._msnry&&this._msnry.destroy()},a.prototype.layout=function(){var e=this;requestAnimationFrame(function(){e._msnry.layout(),e.changeDetectorRef.markForCheck()})},a.prototype.reloadItems=function(){var e=this;requestAnimationFrame(function(){e._msnry.reloadItems(),e.changeDetectorRef.markForCheck()})},a.prototype.add=function(n){var o=this;this.ngZone.runOutsideAngular(function(){var t=!1;0===o._msnry.items.length&&(t=!0),o.useImagesLoaded?(s(n,function(e){o.element.nativeElement.appendChild(n),setTimeout(function(){o._msnry.appended(n),o.changeDetectorRef.markForCheck()}),t&&o.layout()}),o.element.nativeElement.removeChild(n)):(setTimeout(function(){o._msnry.appended(n),o.changeDetectorRef.markForCheck()}),t&&o.layout())})},a.prototype.remove=function(e){this._msnry.remove(e),this.layout()},a.decorators=[{type:r.Component,args:[{selector:"[ngm-masonry], ngm-masonry",template:"<ng-content></ng-content>",changeDetection:r.ChangeDetectionStrategy.OnPush,styles:["\n :host {\n display: block;\n }\n "]}]}],a.ctorParameters=function(){return[{type:undefined,decorators:[{type:r.Inject,args:[r.PLATFORM_ID]}]},{type:r.ElementRef},{type:r.NgZone},{type:r.ChangeDetectorRef}]},a.propDecorators={options:[{type:r.Input}],useImagesLoaded:[{type:r.Input}],updateLayout:[{type:r.Input}],layoutComplete:[{type:r.Output}],removeComplete:[{type:r.Output}]},a);function a(e,t,n,o){this.platformId=e,this.element=t,this.ngZone=n,this.changeDetectorRef=o,this.options={},this.useImagesLoaded=!1,this.updateLayout=!1,this.layoutComplete=new r.EventEmitter,this.removeComplete=new r.EventEmitter}var i=(m.prototype.ngAfterViewInit=function(){n.isPlatformBrowser(this.platformId)&&(this._parent.add(this._element.nativeElement),this.watchForHtmlChanges())},m.prototype.ngOnDestroy=function(){n.isPlatformBrowser(this.platformId)&&(this._parent.remove(this._element.nativeElement),this._observer&&this._observer.disconnect())},m.prototype.watchForHtmlChanges=function(){var e=this;MutationObserver=window.MutationObserver||window.WebKitMutationObserver,MutationObserver&&(this._observer=new MutationObserver(function(){requestAnimationFrame(function(){e._parent.layout()})})),this._observer&&this._observer.observe(this._element.nativeElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["src"]})},m.decorators=[{type:r.Directive,args:[{selector:"[ngmMasonryItem], ngmMasonryItem"}]}],m.ctorParameters=function(){return[{type:r.ElementRef},{type:t,decorators:[{type:r.Inject,args:[r.forwardRef(function(){return t})]}]},{type:undefined,decorators:[{type:r.Inject,args:[r.PLATFORM_ID]}]}]},m);function m(e,t,n){this._element=e,this._parent=t,this.platformId=n}var u=(p.decorators=[{type:r.NgModule,args:[{imports:[],declarations:[t,i],exports:[t,i]}]}],p);function p(){}e.NgmMasonryComponent=t,e.NgmMasonryDirective=i,e.NgmMasonryModule=u,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngm-masonry.umd.min.js.map