ngx-crystal-gallery
Version:
Responsive gallery with support for masonry layout and lightbox.
101 lines (98 loc) • 6.6 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';
export class GalleryComponent {
/**
* @param {?} lightbox
* @param {?} elementRef
*/
constructor(lightbox, elementRef) {
this.lightbox = lightbox;
this.elementRef = elementRef;
this.config = {};
}
/**
* @return {?}
*/
get isNgContent() {
return this.contentWrapper.nativeElement.children.length > 0;
}
/**
* @return {?}
*/
get masonryState() {
return this.config.masonry;
}
/**
* @return {?}
*/
get masonryMaxHeight() {
return this.config.masonryMaxHeight;
}
/**
* @return {?}
*/
get masonryGutter() {
return this.config.masonryGutter;
}
/**
* @param {?} images
* @param {?} i
* @return {?}
*/
showLightbox(images, i) {
this.config.index = i;
this.lightbox.open(images, this.config);
}
/**
* @param {?} event
* @return {?}
*/
handleMasonryLayoutEvents(event) {
this.showLightbox(this.images, event.index);
}
}
GalleryComponent.decorators = [
{ type: Component, args: [{
selector: 'crystal-gallery',
template: `<div #contentWrapper [hidden]="isNgContent">
<ng-content></ng-content>
</div>
<masonry-layout
class="cg-wrapper"
*ngIf="!isNgContent"
[max-height]="masonryMaxHeight"
[gutter]="masonryGutter"
[masonry]="masonryState"
[class-name]="'cg-image'"
[images]="images"
(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 = () => [
{ type: CrystalLightbox },
{ type: ElementRef }
];
GalleryComponent.propDecorators = {
images: [{ type: Input, args: ['images',] }],
config: [{ type: Input, args: ['config',] }],
contentWrapper: [{ type: ViewChild, args: ['contentWrapper',] }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2FsbGVyeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtY3J5c3RhbC1nYWxsZXJ5LyIsInNvdXJjZXMiOlsibGliL2dhbGxlcnkuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBSyxlQUFlLENBQUE7QUFvQjlDLE1BQU07Ozs7O0lBdUJMLFlBQ1MsVUFDQTtRQURBLGFBQVEsR0FBUixRQUFRO1FBQ1IsZUFBVSxHQUFWLFVBQVU7c0JBdEJlLEVBQUU7S0F1QmhDOzs7O0lBbkJELElBQUksV0FBVztRQUNYLE1BQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztLQUNoRTs7OztJQUVELElBQUksWUFBWTtRQUNaLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQztLQUM5Qjs7OztJQUVELElBQUksZ0JBQWdCO1FBQ25CLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDO0tBQ3BDOzs7O0lBRUQsSUFBSSxhQUFhO1FBQ2hCLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQztLQUNqQzs7Ozs7O0lBT0osWUFBWSxDQUFDLE1BQVcsRUFBRSxDQUFTO1FBQzVCLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztRQUM1QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0tBQ3hDOzs7OztJQUVFLHlCQUF5QixDQUFDLEtBQUs7UUFDM0IsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztLQUMvQzs7O1lBckRKLFNBQVMsU0FBQztnQkFDVixRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7bUVBYXdEO2dCQUMvRCxNQUFNLEVBQUUsQ0FBQyxnTkFBZ04sQ0FBQzthQUM3Tjs7OztZQW5CUSxlQUFlO1lBRFcsVUFBVTs7O3FCQXVCeEMsS0FBSyxTQUFDLFFBQVE7cUJBQ2QsS0FBSyxTQUFDLFFBQVE7NkJBRWQsU0FBUyxTQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgRWxlbWVudFJlZiwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDcnlzdGFsTGlnaHRib3ggfSBmcm9tJy4vZG9tLnNlcnZpY2UnXG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ2NyeXN0YWwtZ2FsbGVyeScsIFxuXHR0ZW1wbGF0ZTogYDxkaXYgI2NvbnRlbnRXcmFwcGVyIFtoaWRkZW5dPVwiaXNOZ0NvbnRlbnRcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cblxuPG1hc29ucnktbGF5b3V0IFxuICAgIGNsYXNzPVwiY2ctd3JhcHBlclwiXG4gICAgKm5nSWY9XCIhaXNOZ0NvbnRlbnRcIiBcblxuICAgIFttYXgtaGVpZ2h0XT1cIm1hc29ucnlNYXhIZWlnaHRcIiBcbiAgICBbZ3V0dGVyXT1cIm1hc29ucnlHdXR0ZXJcIlxuICAgIFttYXNvbnJ5XT1cIm1hc29ucnlTdGF0ZVwiXG4gICAgW2NsYXNzLW5hbWVdPVwiJ2NnLWltYWdlJ1wiXG4gICAgW2ltYWdlc109XCJpbWFnZXNcIlxuICAgIChldmVudHMpPVwiaGFuZGxlTWFzb25yeUxheW91dEV2ZW50cygkZXZlbnQpXCI+PC9tYXNvbnJ5LWxheW91dD5gLFxuICAgIHN0eWxlczogW2A6aG9zdHtkaXNwbGF5OmJsb2NrO3dpZHRoOjEwMCV9Omhvc3QgLmNnLXdyYXBwZXJ7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO292ZXJmbG93OmhpZGRlbn06aG9zdCAuY2ctd3JhcHBlci5jZy1zaG93e2hlaWdodDphdXRvO3Bvc2l0aW9uOnJlbGF0aXZlO2Rpc3BsYXk6dGFibGV9Omhvc3QgLmNnLWltYWdlIGltZ3tjdXJzb3I6cG9pbnRlcjt3aWR0aDoxMDAlfWBdLFxufSlcbmV4cG9ydCBjbGFzcyBHYWxsZXJ5Q29tcG9uZW50IHtcblxuICAgIEBJbnB1dCgnaW1hZ2VzJykgaW1hZ2VzOiBhbnk7XG4gICAgQElucHV0KCdjb25maWcnKSBjb25maWc6IGFueSA9IHt9O1xuXG4gICAgQFZpZXdDaGlsZCgnY29udGVudFdyYXBwZXInKSBjb250ZW50V3JhcHBlcjogRWxlbWVudFJlZjtcblxuICAgIGdldCBpc05nQ29udGVudCgpe1xuICAgICAgICByZXR1cm4gdGhpcy5jb250ZW50V3JhcHBlci5uYXRpdmVFbGVtZW50LmNoaWxkcmVuLmxlbmd0aCA+IDA7XG4gICAgfVxuXG4gICAgZ2V0IG1hc29ucnlTdGF0ZSgpe1xuICAgICAgICByZXR1cm4gdGhpcy5jb25maWcubWFzb25yeTtcbiAgICB9XG5cbiAgICBnZXQgbWFzb25yeU1heEhlaWdodCgpe1xuICAgIFx0cmV0dXJuIHRoaXMuY29uZmlnLm1hc29ucnlNYXhIZWlnaHQ7XG4gICAgfVxuXG4gICAgZ2V0IG1hc29ucnlHdXR0ZXIoKXtcbiAgICBcdHJldHVybiB0aGlzLmNvbmZpZy5tYXNvbnJ5R3V0dGVyO1xuICAgIH1cblxuXHRjb25zdHJ1Y3Rvcihcblx0XHRwcml2YXRlIGxpZ2h0Ym94OiBDcnlzdGFsTGlnaHRib3gsXG5cdFx0cHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmXG5cdCkge31cblxuXHRzaG93TGlnaHRib3goaW1hZ2VzOiBhbnksIGk6IG51bWJlcil7XG4gICAgICAgIHRoaXMuY29uZmlnLmluZGV4ID0gaTtcblx0XHR0aGlzLmxpZ2h0Ym94Lm9wZW4oaW1hZ2VzLCB0aGlzLmNvbmZpZyk7XG5cdH1cblxuICAgIGhhbmRsZU1hc29ucnlMYXlvdXRFdmVudHMoZXZlbnQpe1xuICAgICAgICB0aGlzLnNob3dMaWdodGJveCh0aGlzLmltYWdlcywgZXZlbnQuaW5kZXgpO1xuICAgIH1cbn0iXX0=