@fnxone/ngx-photoswipe
Version:
[](https://www.npmjs.com/package/@fnxone/ngx-photoswipe) [](https://www.npmjs.com/package/@fnxone/n
53 lines • 7.67 kB
JavaScript
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import * as PhotoSwipe from 'photoswipe';
import * as PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
import { NgxPhotoswipeService } from '../../services/ngx-photoswipe.service';
import { LightboxAdapter } from '../../adpters/lightbox-adapter';
import { GridGap } from '../../models/grid-gap.enum';
export class GalleryComponent {
constructor(ngxPhotoswipeService, adapter) {
this.ngxPhotoswipeService = ngxPhotoswipeService;
this.adapter = adapter;
this.gridGap = GridGap.GAP1;
}
onClickImage(data, index) {
data.id = index;
this.openPhotoSwipe(data);
return false;
}
openPhotoSwipe(image) {
this.adapter.galleryUID = Number(this.galleryElement.nativeElement.getAttribute('data-pswp-uid'));
this.adapter.index = image.id;
const PSWP = this.ngxPhotoswipeService.lightboxElement
.nativeElement;
this.pswp = new PhotoSwipe(PSWP, PhotoSwipeUI_Default, this.getImagesAsPhotoSwipe(), this.adapter);
this.pswp.init();
return false;
}
getImagesAsPhotoSwipe() {
return this.images.map((image) => ({
src: image.img,
w: image.width != null ? image.width : 4934,
h: image.height != null ? image.height : 3296,
pid: image.id,
title: image.description,
}));
}
}
GalleryComponent.decorators = [
{ type: Component, args: [{
selector: 'ngxps-gallery',
template: "<div class=\"d-grid ngx-gallery\" [ngClass]=\"'gap-'+gridGap\" #ngxpsGallery>\n <figure class=\"m-0 p-0\" *ngFor=\"let image of images; let idx = index\">\n <a [href]=\"image.img\" data-size=\"4934x3296\" (click)=\"onClickImage(image, idx)\">\n <img class=\"img-fluid rounded-1\" [src]=\"image.thumb\" [alt]=\"image.description\">\n </a>\n </figure>\n\n <ng-content></ng-content>\n</div>\n",
styles: [".ngx-gallery{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.ngx-gallery figure img{cursor:zoom-in;transition:opacity .4s ease-in-out}.ngx-gallery figure img:hover{opacity:.8}\n"]
},] }
];
GalleryComponent.ctorParameters = () => [
{ type: NgxPhotoswipeService },
{ type: LightboxAdapter }
];
GalleryComponent.propDecorators = {
galleryElement: [{ type: ViewChild, args: ['ngxpsGallery', { static: true },] }],
images: [{ type: Input }],
gridGap: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2FsbGVyeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcGhvdG9zd2lwZS9zcmMvbGliL2NvbXBvbmVudHMvZ2FsbGVyeS9nYWxsZXJ5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3hFLE9BQU8sS0FBSyxVQUFVLE1BQU0sWUFBWSxDQUFDO0FBQ3pDLE9BQU8sS0FBSyxvQkFBb0IsTUFBTSx1Q0FBdUMsQ0FBQztBQUU5RSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUM3RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDakUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBT3JELE1BQU0sT0FBTyxnQkFBZ0I7SUFPekIsWUFDYyxvQkFBMEMsRUFDMUMsT0FBd0I7UUFEeEIseUJBQW9CLEdBQXBCLG9CQUFvQixDQUFzQjtRQUMxQyxZQUFPLEdBQVAsT0FBTyxDQUFpQjtRQU43QixZQUFPLEdBQVksT0FBTyxDQUFDLElBQUksQ0FBQztJQU90QyxDQUFDO0lBRUosWUFBWSxDQUFDLElBQVcsRUFBRSxLQUFhO1FBQ25DLElBQUksQ0FBQyxFQUFFLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDMUIsT0FBTyxLQUFLLENBQUM7SUFDakIsQ0FBQztJQUVTLGNBQWMsQ0FBQyxLQUFZO1FBQ2pDLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxHQUFHLE1BQU0sQ0FDNUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLGVBQWUsQ0FBQyxDQUNsRSxDQUFDO1FBQ0YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQztRQUU5QixNQUFNLElBQUksR0FBZ0IsSUFBSSxDQUFDLG9CQUFvQixDQUFDLGVBQWU7YUFDOUQsYUFBNEIsQ0FBQztRQUNsQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksVUFBVSxDQUN0QixJQUFJLEVBQ0osb0JBQW9CLEVBQ3BCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxFQUM1QixJQUFJLENBQUMsT0FBTyxDQUNmLENBQUM7UUFFRixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2pCLE9BQU8sS0FBSyxDQUFDO0lBQ2pCLENBQUM7SUFFUyxxQkFBcUI7UUFDM0IsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQztZQUMvQixHQUFHLEVBQUUsS0FBSyxDQUFDLEdBQUc7WUFDZCxDQUFDLEVBQUUsS0FBSyxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUk7WUFDM0MsQ0FBQyxFQUFFLEtBQUssQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJO1lBQzdDLEdBQUcsRUFBRSxLQUFLLENBQUMsRUFBRTtZQUNiLEtBQUssRUFBRSxLQUFLLENBQUMsV0FBVztTQUMzQixDQUFDLENBQUMsQ0FBQztJQUNSLENBQUM7OztZQWxESixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLGVBQWU7Z0JBQ3pCLHViQUF1Qzs7YUFFMUM7OztZQVJRLG9CQUFvQjtZQUNwQixlQUFlOzs7NkJBU25CLFNBQVMsU0FBQyxjQUFjLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO3FCQUMxQyxLQUFLO3NCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIFBob3RvU3dpcGUgZnJvbSAncGhvdG9zd2lwZSc7XG5pbXBvcnQgKiBhcyBQaG90b1N3aXBlVUlfRGVmYXVsdCBmcm9tICdwaG90b3N3aXBlL2Rpc3QvcGhvdG9zd2lwZS11aS1kZWZhdWx0JztcbmltcG9ydCB7IEltYWdlIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2ltYWdlLm1vZGVsJztcbmltcG9ydCB7IE5neFBob3Rvc3dpcGVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvbmd4LXBob3Rvc3dpcGUuc2VydmljZSc7XG5pbXBvcnQgeyBMaWdodGJveEFkYXB0ZXIgfSBmcm9tICcuLi8uLi9hZHB0ZXJzL2xpZ2h0Ym94LWFkYXB0ZXInO1xuaW1wb3J0IHsgR3JpZEdhcCB9IGZyb20gJy4uLy4uL21vZGVscy9ncmlkLWdhcC5lbnVtJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3hwcy1nYWxsZXJ5JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZ2FsbGVyeS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZ2FsbGVyeS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBHYWxsZXJ5Q29tcG9uZW50IHtcbiAgICBAVmlld0NoaWxkKCduZ3hwc0dhbGxlcnknLCB7IHN0YXRpYzogdHJ1ZSB9KSBnYWxsZXJ5RWxlbWVudDogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG4gICAgQElucHV0KCkgaW1hZ2VzOiBJbWFnZVtdO1xuICAgIEBJbnB1dCgpIGdyaWRHYXA6IEdyaWRHYXAgPSBHcmlkR2FwLkdBUDE7XG5cbiAgICBwc3dwOiBQaG90b1N3aXBlPGFueT47XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJvdGVjdGVkIG5neFBob3Rvc3dpcGVTZXJ2aWNlOiBOZ3hQaG90b3N3aXBlU2VydmljZSxcbiAgICAgICAgcHJvdGVjdGVkIGFkYXB0ZXI6IExpZ2h0Ym94QWRhcHRlclxuICAgICkge31cblxuICAgIG9uQ2xpY2tJbWFnZShkYXRhOiBJbWFnZSwgaW5kZXg6IG51bWJlcikge1xuICAgICAgICBkYXRhLmlkID0gaW5kZXg7XG4gICAgICAgIHRoaXMub3BlblBob3RvU3dpcGUoZGF0YSk7XG4gICAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgb3BlblBob3RvU3dpcGUoaW1hZ2U6IEltYWdlKTogYm9vbGVhbiB7XG4gICAgICAgIHRoaXMuYWRhcHRlci5nYWxsZXJ5VUlEID0gTnVtYmVyKFxuICAgICAgICAgICAgdGhpcy5nYWxsZXJ5RWxlbWVudC5uYXRpdmVFbGVtZW50LmdldEF0dHJpYnV0ZSgnZGF0YS1wc3dwLXVpZCcpXG4gICAgICAgICk7XG4gICAgICAgIHRoaXMuYWRhcHRlci5pbmRleCA9IGltYWdlLmlkO1xuXG4gICAgICAgIGNvbnN0IFBTV1A6IEhUTUxFbGVtZW50ID0gdGhpcy5uZ3hQaG90b3N3aXBlU2VydmljZS5saWdodGJveEVsZW1lbnRcbiAgICAgICAgICAgIC5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50O1xuICAgICAgICB0aGlzLnBzd3AgPSBuZXcgUGhvdG9Td2lwZShcbiAgICAgICAgICAgIFBTV1AsXG4gICAgICAgICAgICBQaG90b1N3aXBlVUlfRGVmYXVsdCxcbiAgICAgICAgICAgIHRoaXMuZ2V0SW1hZ2VzQXNQaG90b1N3aXBlKCksXG4gICAgICAgICAgICB0aGlzLmFkYXB0ZXJcbiAgICAgICAgKTtcblxuICAgICAgICB0aGlzLnBzd3AuaW5pdCgpO1xuICAgICAgICByZXR1cm4gZmFsc2U7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldEltYWdlc0FzUGhvdG9Td2lwZSgpOiBhbnlbXSB7XG4gICAgICAgIHJldHVybiB0aGlzLmltYWdlcy5tYXAoKGltYWdlKSA9PiAoe1xuICAgICAgICAgICAgc3JjOiBpbWFnZS5pbWcsXG4gICAgICAgICAgICB3OiBpbWFnZS53aWR0aCAhPSBudWxsID8gaW1hZ2Uud2lkdGggOiA0OTM0LFxuICAgICAgICAgICAgaDogaW1hZ2UuaGVpZ2h0ICE9IG51bGwgPyBpbWFnZS5oZWlnaHQgOiAzMjk2LFxuICAgICAgICAgICAgcGlkOiBpbWFnZS5pZCxcbiAgICAgICAgICAgIHRpdGxlOiBpbWFnZS5kZXNjcmlwdGlvbixcbiAgICAgICAgfSkpO1xuICAgIH1cbn1cbiJdfQ==