UNPKG

@ngx-gallery/gallerize

Version:

Angular gallery directive that hooks the lightbox with the images automatically.

2 lines 3.41 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("rxjs"),require("rxjs/operators"),require("@angular/core"),require("@ngx-gallery/core"),require("@ngx-gallery/lightbox")):"function"==typeof define&&define.amd?define("@ngx-gallery/gallerize",["exports","@angular/common","rxjs","rxjs/operators","@angular/core","@ngx-gallery/core","@ngx-gallery/lightbox"],t):t((e["ngx-gallery"]=e["ngx-gallery"]||{},e["ngx-gallery"].gallerize={}),e.ng.common,e.rxjs,e.rxjs.operators,e.ng.core,e.core$1,e.lightbox)}(this,function(e,a,n,i,t,l,r){"use strict";var o=function(){function e(e,t,r,o,n,i,l,s){this._zone=e,this._el=t,this._gallery=r,this._lightbox=o,this._renderer=n,this._document=l,this._galleryCmp=s,this._galleryId="lightbox",this.selector="img",a.isPlatformBrowser(i)&&(this._mode=s?"gallery":"detector")}return e.prototype.ngOnInit=function(){var t=this;this._zone.runOutsideAngular(function(){t._galleryId=t.gallerize||t._galleryId;var e=t._gallery.ref(t._galleryId);switch(t._mode){case"detector":t.detectorMode(e);break;case"gallery":t.galleryMode(e)}})},e.prototype.ngOnDestroy=function(){switch(this._mode){case"detector":this._detector$.complete(),this._observer$.disconnect();break;case"gallery":this._itemClick$.unsubscribe(),this._itemChange$.unsubscribe()}},e.prototype.galleryMode=function(t){var r=this;this._itemClick$=this._galleryCmp.galleryRef.itemClick.subscribe(function(e){return r._lightbox.open(e,r._galleryId)}),this._itemChange$=this._galleryCmp.galleryRef.itemsChanged.subscribe(function(e){return t.load(e.items)})},e.prototype.detectorMode=function(r){var o=this;this._detector$=new n.Subject,this._detector$.pipe(i.debounceTime(300),i.switchMap(function(){var e=o._el.nativeElement.querySelectorAll(o.selector);if(e&&e.length){var t=[];return n.from(e).pipe(i.map(function(e,t){if(o._renderer.setStyle(e,"cursor","pointer"),o._renderer.setProperty(e,"onclick",function(){return o._zone.run(function(){return o._lightbox.open(t,o._galleryId)})}),e instanceof HTMLImageElement)return{src:e.getAttribute("imageSrc")||e.src,thumb:e.getAttribute("thumbSrc")||e.src};var r=(e.currentStyle||o._document.defaultView.getComputedStyle(e,null)).backgroundImage.slice(4,-1).replace(/"/g,"");return{src:e.getAttribute("imageSrc")||r,thumb:e.getAttribute("thumbSrc")||r}}),i.tap(function(e){return t.push(new l.ImageItem(e))}),i.finalize(function(){return r.load(t)}))}return n.EMPTY})).subscribe(),this._observer$=new MutationObserver(function(){return o._detector$.next()}),this._observer$.observe(this._el.nativeElement,{childList:!0,subtree:!0})},e.decorators=[{type:t.Directive,args:[{selector:"[gallerize]"}]}],e.ctorParameters=function(){return[{type:t.NgZone},{type:t.ElementRef},{type:l.Gallery},{type:r.Lightbox},{type:t.Renderer2},{type:Object,decorators:[{type:t.Inject,args:[t.PLATFORM_ID]}]},{type:undefined,decorators:[{type:t.Inject,args:[a.DOCUMENT]}]},{type:l.GalleryComponent,decorators:[{type:t.Host},{type:t.Self},{type:t.Optional}]}]},e.propDecorators={gallerize:[{type:t.Input}],selector:[{type:t.Input}]},e}(),s=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[l.GalleryModule,r.LightboxModule],declarations:[o],exports:[o]}]}],e}();e.GallerizeDirective=o,e.GallerizeModule=s,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-gallery-gallerize.umd.min.js.map