ngx-crystal-gallery
Version:
Responsive gallery with support for masonry layout and lightbox.
111 lines (110 loc) • 7.71 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import { CrystalLightbox } from './dom.service';
var GalleryComponent = /** @class */ (function () {
function GalleryComponent(lightbox, elementRef) {
this.lightbox = lightbox;
this.elementRef = elementRef;
this.config = {};
}
Object.defineProperty(GalleryComponent.prototype, "isNgContent", {
get: /**
* @return {?}
*/
function () {
return this.contentWrapper.nativeElement.children.length > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryComponent.prototype, "masonryState", {
get: /**
* @return {?}
*/
function () {
return this.config.masonry;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryComponent.prototype, "masonryMaxHeight", {
get: /**
* @return {?}
*/
function () {
return this.config.masonryMaxHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryComponent.prototype, "masonryGutter", {
get: /**
* @return {?}
*/
function () {
return this.config.masonryGutter;
},
enumerable: true,
configurable: true
});
/**
* @param {?} images
* @param {?} i
* @return {?}
*/
GalleryComponent.prototype.showLightbox = /**
* @param {?} images
* @param {?} i
* @return {?}
*/
function (images, i) {
this.config.index = i;
this.lightbox.open(images, this.config);
};
/**
* @param {?} event
* @return {?}
*/
GalleryComponent.prototype.handleMasonryLayoutEvents = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.showLightbox(this.images, event.index);
};
GalleryComponent.decorators = [
{ type: Component, args: [{
selector: 'crystal-gallery',
template: "<div #contentWrapper [hidden]=\"isNgContent\">\n <ng-content></ng-content>\n</div>\n\n<masonry-layout \n class=\"cg-wrapper\"\n *ngIf=\"!isNgContent\" \n\n [max-height]=\"masonryMaxHeight\" \n [gutter]=\"masonryGutter\"\n [masonry]=\"masonryState\"\n [class-name]=\"'cg-image'\"\n [images]=\"images\"\n (events)=\"handleMasonryLayoutEvents($event)\"></masonry-layout>",
styles: [":host{display:block;width:100%}:host .cg-wrapper{display:block;width:100%;overflow:hidden}:host .cg-wrapper.cg-show{height:auto;position:relative;display:table}:host .cg-image img{cursor:pointer;width:100%}"],
},] },
];
/** @nocollapse */
GalleryComponent.ctorParameters = function () { return [
{ type: CrystalLightbox },
{ type: ElementRef }
]; };
GalleryComponent.propDecorators = {
images: [{ type: Input, args: ['images',] }],
config: [{ type: Input, args: ['config',] }],
contentWrapper: [{ type: ViewChild, args: ['contentWrapper',] }]
};
return GalleryComponent;
}());
export { GalleryComponent };
if (false) {
/** @type {?} */
GalleryComponent.prototype.images;
/** @type {?} */
GalleryComponent.prototype.config;
/** @type {?} */
GalleryComponent.prototype.contentWrapper;
/** @type {?} */
GalleryComponent.prototype.lightbox;
/** @type {?} */
GalleryComponent.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2FsbGVyeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtY3J5c3RhbC1nYWxsZXJ5LyIsInNvdXJjZXMiOlsibGliL2dhbGxlcnkuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBSyxlQUFlLENBQUE7O0lBMkM3QywwQkFDUyxVQUNBO1FBREEsYUFBUSxHQUFSLFFBQVE7UUFDUixlQUFVLEdBQVYsVUFBVTtzQkF0QmUsRUFBRTtLQXVCaEM7SUFuQkQsc0JBQUkseUNBQVc7Ozs7UUFBZjtZQUNJLE1BQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztTQUNoRTs7O09BQUE7SUFFRCxzQkFBSSwwQ0FBWTs7OztRQUFoQjtZQUNJLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQztTQUM5Qjs7O09BQUE7SUFFRCxzQkFBSSw4Q0FBZ0I7Ozs7UUFBcEI7WUFDQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQztTQUNwQzs7O09BQUE7SUFFRCxzQkFBSSwyQ0FBYTs7OztRQUFqQjtZQUNDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQztTQUNqQzs7O09BQUE7Ozs7OztJQU9KLHVDQUFZOzs7OztJQUFaLFVBQWEsTUFBVyxFQUFFLENBQVM7UUFDNUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQzVCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7S0FDeEM7Ozs7O0lBRUUsb0RBQXlCOzs7O0lBQXpCLFVBQTBCLEtBQUs7UUFDM0IsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztLQUMvQzs7Z0JBckRKLFNBQVMsU0FBQztvQkFDVixRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixRQUFRLEVBQUUsNFlBYXdEO29CQUMvRCxNQUFNLEVBQUUsQ0FBQyxnTkFBZ04sQ0FBQztpQkFDN047Ozs7Z0JBbkJRLGVBQWU7Z0JBRFcsVUFBVTs7O3lCQXVCeEMsS0FBSyxTQUFDLFFBQVE7eUJBQ2QsS0FBSyxTQUFDLFFBQVE7aUNBRWQsU0FBUyxTQUFDLGdCQUFnQjs7MkJBMUIvQjs7U0FxQmEsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBFbGVtZW50UmVmLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENyeXN0YWxMaWdodGJveCB9IGZyb20nLi9kb20uc2VydmljZSdcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnY3J5c3RhbC1nYWxsZXJ5JywgXG5cdHRlbXBsYXRlOiBgPGRpdiAjY29udGVudFdyYXBwZXIgW2hpZGRlbl09XCJpc05nQ29udGVudFwiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuXG48bWFzb25yeS1sYXlvdXQgXG4gICAgY2xhc3M9XCJjZy13cmFwcGVyXCJcbiAgICAqbmdJZj1cIiFpc05nQ29udGVudFwiIFxuXG4gICAgW21heC1oZWlnaHRdPVwibWFzb25yeU1heEhlaWdodFwiIFxuICAgIFtndXR0ZXJdPVwibWFzb25yeUd1dHRlclwiXG4gICAgW21hc29ucnldPVwibWFzb25yeVN0YXRlXCJcbiAgICBbY2xhc3MtbmFtZV09XCInY2ctaW1hZ2UnXCJcbiAgICBbaW1hZ2VzXT1cImltYWdlc1wiXG4gICAgKGV2ZW50cyk9XCJoYW5kbGVNYXNvbnJ5TGF5b3V0RXZlbnRzKCRldmVudClcIj48L21hc29ucnktbGF5b3V0PmAsXG4gICAgc3R5bGVzOiBbYDpob3N0e2Rpc3BsYXk6YmxvY2s7d2lkdGg6MTAwJX06aG9zdCAuY2ctd3JhcHBlcntkaXNwbGF5OmJsb2NrO3dpZHRoOjEwMCU7b3ZlcmZsb3c6aGlkZGVufTpob3N0IC5jZy13cmFwcGVyLmNnLXNob3d7aGVpZ2h0OmF1dG87cG9zaXRpb246cmVsYXRpdmU7ZGlzcGxheTp0YWJsZX06aG9zdCAuY2ctaW1hZ2UgaW1ne2N1cnNvcjpwb2ludGVyO3dpZHRoOjEwMCV9YF0sXG59KVxuZXhwb3J0IGNsYXNzIEdhbGxlcnlDb21wb25lbnQge1xuXG4gICAgQElucHV0KCdpbWFnZXMnKSBpbWFnZXM6IGFueTtcbiAgICBASW5wdXQoJ2NvbmZpZycpIGNvbmZpZzogYW55ID0ge307XG5cbiAgICBAVmlld0NoaWxkKCdjb250ZW50V3JhcHBlcicpIGNvbnRlbnRXcmFwcGVyOiBFbGVtZW50UmVmO1xuXG4gICAgZ2V0IGlzTmdDb250ZW50KCl7XG4gICAgICAgIHJldHVybiB0aGlzLmNvbnRlbnRXcmFwcGVyLm5hdGl2ZUVsZW1lbnQuY2hpbGRyZW4ubGVuZ3RoID4gMDtcbiAgICB9XG5cbiAgICBnZXQgbWFzb25yeVN0YXRlKCl7XG4gICAgICAgIHJldHVybiB0aGlzLmNvbmZpZy5tYXNvbnJ5O1xuICAgIH1cblxuICAgIGdldCBtYXNvbnJ5TWF4SGVpZ2h0KCl7XG4gICAgXHRyZXR1cm4gdGhpcy5jb25maWcubWFzb25yeU1heEhlaWdodDtcbiAgICB9XG5cbiAgICBnZXQgbWFzb25yeUd1dHRlcigpe1xuICAgIFx0cmV0dXJuIHRoaXMuY29uZmlnLm1hc29ucnlHdXR0ZXI7XG4gICAgfVxuXG5cdGNvbnN0cnVjdG9yKFxuXHRcdHByaXZhdGUgbGlnaHRib3g6IENyeXN0YWxMaWdodGJveCxcblx0XHRwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWZcblx0KSB7fVxuXG5cdHNob3dMaWdodGJveChpbWFnZXM6IGFueSwgaTogbnVtYmVyKXtcbiAgICAgICAgdGhpcy5jb25maWcuaW5kZXggPSBpO1xuXHRcdHRoaXMubGlnaHRib3gub3BlbihpbWFnZXMsIHRoaXMuY29uZmlnKTtcblx0fVxuXG4gICAgaGFuZGxlTWFzb25yeUxheW91dEV2ZW50cyhldmVudCl7XG4gICAgICAgIHRoaXMuc2hvd0xpZ2h0Ym94KHRoaXMuaW1hZ2VzLCBldmVudC5pbmRleCk7XG4gICAgfVxufSJdfQ==