preview-gallery
Version:
Angular library for previewing photos before uploading
62 lines • 14.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@angular/common";
export class PreviewGalleryComponent {
constructor(cdr, sanitizer) {
this.cdr = cdr;
this.sanitizer = sanitizer;
this.images = new EventEmitter();
this.initialImages = [];
this.fileInput = new FormControl();
this.urls = [];
this.fullScreenImage = null;
}
ngOnInit() { }
onFileSelected(inputNode) {
if (!inputNode?.files?.length)
return;
const reader = new FileReader();
reader.readAsDataURL(inputNode.files[0]);
if (!inputNode.files[0].type.includes("image"))
return;
reader.onload = (e) => {
this.urls.push({
path: e.target.result,
id: Symbol("id")
});
this.cdr.detectChanges();
this.images.emit(this.urls);
};
}
delete(id) {
this.urls.forEach((item, index) => {
if (item.id === id) {
this.urls.splice(index, 1);
}
});
this.images.emit(this.urls);
}
setUrls(urls) {
this.urls = urls;
this.cdr.detectChanges();
}
trackByFn(index, item) {
return item.id;
}
getUrl(path) {
return this.sanitizer.bypassSecurityTrustStyle(`url(${path})`);
}
}
PreviewGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewGalleryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
PreviewGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: PreviewGalleryComponent, selector: "ngx-preview-gallery", inputs: { initialImages: "initialImages" }, outputs: { images: "images" }, ngImport: i0, template: "<div class=\"preview\">\n <input hidden (change)=\"onFileSelected(fileInput)\" class=\"fileInput\" #fileInput id=\"fileInput\" type=\"file\">\n <ul *ngIf=\"urls.length\" class=\"container\">\n <li *ngFor=\"let url of urls; trackBy: trackByFn\" (click)=\"fullScreenImage=url.path\" class=\"img-wrap\">\n <div (click)=\"delete(url.id)\" class=\"close\"></div>\n <div [style.background-image]=\"getUrl(url.path)\" class=\"img\"></div>\n </li>\n </ul>\n</div>\n\n<div class=\"full\" (click)=\"fullScreenImage=null\" *ngIf=\"fullScreenImage\">\n <img class=\"full__image\" src=\"{{fullScreenImage}}\" alt=\"img\">\n</div>\n", styles: [":host{display:block;height:15vw;width:20vw}:host *{box-sizing:border-box}li{list-style:none}.preview{border-radius:.7vw;width:100%;height:100%}.img-wrap{position:relative;width:32%;height:100%;margin-bottom:1vw;border-radius:.7vw;overflow:hidden}.img-wrap .img{width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover}.img-wrap:hover .close{opacity:1}.container{display:flex;justify-content:space-around;flex-wrap:wrap;width:100%;height:100%;padding:1vw;margin:0;overflow-y:scroll;background-color:transparent;border-radius:.7vw;border:1px solid #999}.close{position:absolute;opacity:0;width:1vw;height:1vw;background-size:2vw;top:2%;right:3%;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 %3F%3E%3C!DOCTYPE svg PUBLIC '-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN' 'http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd'%3E%3Csvg height%3D%22512px%22 id%3D%22Layer_1%22 style%3D%22enable-background%3Anew 0 0 512 512%3B%22 version%3D%221.1%22 viewBox%3D%220 0 512 512%22 width%3D%22512px%22 xml%3Aspace%3D%22preserve%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpath d%3D%22M437.5%2C386.6L306.9%2C256l130.6-130.6c14.1-14.1%2C14.1-36.8%2C0-50.9c-14.1-14.1-36.8-14.1-50.9%2C0L256%2C205.1L125.4%2C74.5 c-14.1-14.1-36.8-14.1-50.9%2C0c-14.1%2C14.1-14.1%2C36.8%2C0%2C50.9L205.1%2C256L74.5%2C386.6c-14.1%2C14.1-14.1%2C36.8%2C0%2C50.9 c14.1%2C14.1%2C36.8%2C14.1%2C50.9%2C0L256%2C306.9l130.6%2C130.6c14.1%2C14.1%2C36.8%2C14.1%2C50.9%2C0C451.5%2C423.4%2C451.5%2C400.6%2C437.5%2C386.6z%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center center;transition:opacity .3s}.close:hover{cursor:pointer}.full{z-index:1;position:fixed;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;padding:10vw;top:0;left:0;background-color:#e3d7d780}.full__image{max-width:100%;max-height:100%;border-radius:.5vw}::-webkit-scrollbar{height:4px;width:4px;border:1px solid #d5d5d5}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewGalleryComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-preview-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview\">\n <input hidden (change)=\"onFileSelected(fileInput)\" class=\"fileInput\" #fileInput id=\"fileInput\" type=\"file\">\n <ul *ngIf=\"urls.length\" class=\"container\">\n <li *ngFor=\"let url of urls; trackBy: trackByFn\" (click)=\"fullScreenImage=url.path\" class=\"img-wrap\">\n <div (click)=\"delete(url.id)\" class=\"close\"></div>\n <div [style.background-image]=\"getUrl(url.path)\" class=\"img\"></div>\n </li>\n </ul>\n</div>\n\n<div class=\"full\" (click)=\"fullScreenImage=null\" *ngIf=\"fullScreenImage\">\n <img class=\"full__image\" src=\"{{fullScreenImage}}\" alt=\"img\">\n</div>\n", styles: [":host{display:block;height:15vw;width:20vw}:host *{box-sizing:border-box}li{list-style:none}.preview{border-radius:.7vw;width:100%;height:100%}.img-wrap{position:relative;width:32%;height:100%;margin-bottom:1vw;border-radius:.7vw;overflow:hidden}.img-wrap .img{width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover}.img-wrap:hover .close{opacity:1}.container{display:flex;justify-content:space-around;flex-wrap:wrap;width:100%;height:100%;padding:1vw;margin:0;overflow-y:scroll;background-color:transparent;border-radius:.7vw;border:1px solid #999}.close{position:absolute;opacity:0;width:1vw;height:1vw;background-size:2vw;top:2%;right:3%;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 %3F%3E%3C!DOCTYPE svg PUBLIC '-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN' 'http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd'%3E%3Csvg height%3D%22512px%22 id%3D%22Layer_1%22 style%3D%22enable-background%3Anew 0 0 512 512%3B%22 version%3D%221.1%22 viewBox%3D%220 0 512 512%22 width%3D%22512px%22 xml%3Aspace%3D%22preserve%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpath d%3D%22M437.5%2C386.6L306.9%2C256l130.6-130.6c14.1-14.1%2C14.1-36.8%2C0-50.9c-14.1-14.1-36.8-14.1-50.9%2C0L256%2C205.1L125.4%2C74.5 c-14.1-14.1-36.8-14.1-50.9%2C0c-14.1%2C14.1-14.1%2C36.8%2C0%2C50.9L205.1%2C256L74.5%2C386.6c-14.1%2C14.1-14.1%2C36.8%2C0%2C50.9 c14.1%2C14.1%2C36.8%2C14.1%2C50.9%2C0L256%2C306.9l130.6%2C130.6c14.1%2C14.1%2C36.8%2C14.1%2C50.9%2C0C451.5%2C423.4%2C451.5%2C400.6%2C437.5%2C386.6z%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center center;transition:opacity .3s}.close:hover{cursor:pointer}.full{z-index:1;position:fixed;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;padding:10vw;top:0;left:0;background-color:#e3d7d780}.full__image{max-width:100%;max-height:100%;border-radius:.5vw}::-webkit-scrollbar{height:4px;width:4px;border:1px solid #d5d5d5}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }]; }, propDecorators: { images: [{
type: Output
}], initialImages: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJldmlldy1nYWxsZXJ5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3ByZXZpZXctZ2FsbGVyeS9zcmMvbGliL3ByZXZpZXctZ2FsbGVyeS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9wcmV2aWV3LWdhbGxlcnkvc3JjL2xpYi9wcmV2aWV3LWdhbGxlcnkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFxQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0gsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBYzdDLE1BQU0sT0FBTyx1QkFBdUI7SUFPbEMsWUFBb0IsR0FBc0IsRUFBVSxTQUF1QjtRQUF2RCxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUFVLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFOakUsV0FBTSxHQUFzQyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2hFLGtCQUFhLEdBQUcsRUFBRSxDQUFBO1FBQzNCLGNBQVMsR0FBZ0IsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQUMzQyxTQUFJLEdBQXdCLEVBQUUsQ0FBQztRQUMvQixvQkFBZSxHQUFrQixJQUFJLENBQUE7SUFFMEMsQ0FBQztJQUVoRixRQUFRLEtBQVUsQ0FBQztJQUVuQixjQUFjLENBQUMsU0FBMkI7UUFDeEMsSUFBRyxDQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTTtZQUFFLE9BQU07UUFDcEMsTUFBTSxNQUFNLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztRQUNoQyxNQUFNLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN6QyxJQUFHLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQztZQUFFLE9BQU07UUFDckQsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQU0sRUFBRSxFQUFFO1lBQ3pCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO2dCQUNiLElBQUksRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLE1BQU07Z0JBQ3JCLEVBQUUsRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDO2FBQ2pCLENBQUMsQ0FBQztZQUNILElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUE7WUFDeEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFBO1FBQzdCLENBQUMsQ0FBQztJQUNKLENBQUM7SUFFRCxNQUFNLENBQUMsRUFBbUI7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUU7WUFDaEMsSUFBRyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRTtnQkFDakIsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFBO2FBQzNCO1FBQ0gsQ0FBQyxDQUFDLENBQUE7UUFDRixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7SUFDN0IsQ0FBQztJQUVELE9BQU8sQ0FBQyxJQUF5QjtRQUMvQixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQTtRQUNoQixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFBO0lBQzFCLENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYSxFQUFFLElBQWtCO1FBQ3pDLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQTtJQUNoQixDQUFDO0lBRUQsTUFBTSxDQUFDLElBQVk7UUFDakIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHdCQUF3QixDQUFDLE9BQU8sSUFBSSxHQUFHLENBQUMsQ0FBQTtJQUNoRSxDQUFDOztvSEE5Q1UsdUJBQXVCO3dHQUF2Qix1QkFBdUIsc0lDZnBDLGdvQkFhQTsyRkRFYSx1QkFBdUI7a0JBTm5DLFNBQVM7K0JBQ0UscUJBQXFCLG1CQUdkLHVCQUF1QixDQUFDLE1BQU07bUlBR3JDLE1BQU07c0JBQWYsTUFBTTtnQkFDRSxhQUFhO3NCQUFyQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZVN0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJldmlld0ltYWdlIHtcbiAgcGF0aDogc3RyaW5nO1xuICBpZDogc3ltYm9sIHwgbnVtYmVyO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtcHJldmlldy1nYWxsZXJ5JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3ByZXZpZXctZ2FsbGVyeS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3ByZXZpZXctZ2FsbGVyeS5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBQcmV2aWV3R2FsbGVyeUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBPdXRwdXQoKSBpbWFnZXM6IEV2ZW50RW1pdHRlcjxBcnJheTxQcmV2aWV3SW1hZ2U+PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQElucHV0KCkgaW5pdGlhbEltYWdlcyA9IFtdXG4gIGZpbGVJbnB1dDogRm9ybUNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2woKTtcbiAgdXJsczogQXJyYXk8UHJldmlld0ltYWdlPiA9IFtdO1xuICBmdWxsU2NyZWVuSW1hZ2U6IG51bGwgfCBzdHJpbmcgPSBudWxsXG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLCBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XG5cbiAgb25GaWxlU2VsZWN0ZWQoaW5wdXROb2RlOiBIVE1MSW5wdXRFbGVtZW50KTogdm9pZCB7XG4gICAgaWYoIWlucHV0Tm9kZT8uZmlsZXM/Lmxlbmd0aCkgcmV0dXJuXG4gICAgY29uc3QgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTtcbiAgICByZWFkZXIucmVhZEFzRGF0YVVSTChpbnB1dE5vZGUuZmlsZXNbMF0pO1xuICAgIGlmKCFpbnB1dE5vZGUuZmlsZXNbMF0udHlwZS5pbmNsdWRlcyhcImltYWdlXCIpKSByZXR1cm5cbiAgICByZWFkZXIub25sb2FkID0gKGU6IGFueSkgPT4ge1xuICAgICAgdGhpcy51cmxzLnB1c2goe1xuICAgICAgICBwYXRoOiBlLnRhcmdldC5yZXN1bHQsXG4gICAgICAgIGlkOiBTeW1ib2woXCJpZFwiKVxuICAgICAgfSk7XG4gICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKClcbiAgICAgIHRoaXMuaW1hZ2VzLmVtaXQodGhpcy51cmxzKVxuICAgIH07XG4gIH1cblxuICBkZWxldGUoaWQ6IHN5bWJvbCB8IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMudXJscy5mb3JFYWNoKChpdGVtLCBpbmRleCkgPT4ge1xuICAgICAgaWYoaXRlbS5pZCA9PT0gaWQpIHtcbiAgICAgICAgdGhpcy51cmxzLnNwbGljZShpbmRleCwgMSlcbiAgICAgIH1cbiAgICB9KVxuICAgIHRoaXMuaW1hZ2VzLmVtaXQodGhpcy51cmxzKVxuICB9XG5cbiAgc2V0VXJscyh1cmxzOiBBcnJheTxQcmV2aWV3SW1hZ2U+KTogdm9pZCB7XG4gICAgdGhpcy51cmxzID0gdXJsc1xuICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKVxuICB9XG5cbiAgdHJhY2tCeUZuKGluZGV4OiBudW1iZXIsIGl0ZW06IFByZXZpZXdJbWFnZSk6IHN5bWJvbCB8IG51bWJlciB7XG4gICAgcmV0dXJuIGl0ZW0uaWRcbiAgfVxuXG4gIGdldFVybChwYXRoOiBzdHJpbmcpOiBTYWZlU3R5bGUge1xuICAgIHJldHVybiB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0U3R5bGUoYHVybCgke3BhdGh9KWApXG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJwcmV2aWV3XCI+XG4gIDxpbnB1dCBoaWRkZW4gKGNoYW5nZSk9XCJvbkZpbGVTZWxlY3RlZChmaWxlSW5wdXQpXCIgY2xhc3M9XCJmaWxlSW5wdXRcIiAjZmlsZUlucHV0IGlkPVwiZmlsZUlucHV0XCIgdHlwZT1cImZpbGVcIj5cbiAgPHVsICpuZ0lmPVwidXJscy5sZW5ndGhcIiBjbGFzcz1cImNvbnRhaW5lclwiPlxuICAgIDxsaSAqbmdGb3I9XCJsZXQgdXJsIG9mIHVybHM7IHRyYWNrQnk6IHRyYWNrQnlGblwiIChjbGljayk9XCJmdWxsU2NyZWVuSW1hZ2U9dXJsLnBhdGhcIiBjbGFzcz1cImltZy13cmFwXCI+XG4gICAgICA8ZGl2IChjbGljayk9XCJkZWxldGUodXJsLmlkKVwiIGNsYXNzPVwiY2xvc2VcIj48L2Rpdj5cbiAgICAgIDxkaXYgW3N0eWxlLmJhY2tncm91bmQtaW1hZ2VdPVwiZ2V0VXJsKHVybC5wYXRoKVwiIGNsYXNzPVwiaW1nXCI+PC9kaXY+XG4gICAgPC9saT5cbiAgPC91bD5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwiZnVsbFwiIChjbGljayk9XCJmdWxsU2NyZWVuSW1hZ2U9bnVsbFwiICpuZ0lmPVwiZnVsbFNjcmVlbkltYWdlXCI+XG4gIDxpbWcgY2xhc3M9XCJmdWxsX19pbWFnZVwiIHNyYz1cInt7ZnVsbFNjcmVlbkltYWdlfX1cIiBhbHQ9XCJpbWdcIj5cbjwvZGl2PlxuIl19