preview-gallery
Version:
Angular library for previewing photos before uploading
127 lines (120 loc) • 11.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Output, Input, Directive, NgModule } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as i1 from '@angular/platform-browser';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
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) {
var _a;
if (!((_a = inputNode === null || inputNode === void 0 ? void 0 : inputNode.files) === null || _a === void 0 ? void 0 : _a.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
}] } });
class PreviewBtnDirective {
constructor() { }
onClick() {
const container = document.getElementsByTagName('ngx-preview-gallery')[0];
const inp = container.getElementsByClassName('fileInput')[0];
const clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
inp.dispatchEvent(clickEvent);
}
}
PreviewBtnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewBtnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
PreviewBtnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: PreviewBtnDirective, selector: "[preview-btn]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewBtnDirective, decorators: [{
type: Directive,
args: [{
selector: '[preview-btn]',
host: {
'(click)': 'onClick()'
}
}]
}], ctorParameters: function () { return []; } });
class PreviewGalleryModule {
}
PreviewGalleryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PreviewGalleryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewGalleryModule, declarations: [PreviewGalleryComponent,
PreviewBtnDirective], imports: [CommonModule], exports: [PreviewGalleryComponent,
PreviewBtnDirective] });
PreviewGalleryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewGalleryModule, imports: [[
CommonModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PreviewGalleryModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PreviewGalleryComponent,
PreviewBtnDirective
],
imports: [
CommonModule,
],
exports: [
PreviewGalleryComponent,
PreviewBtnDirective
]
}]
}] });
/*
* Public API Surface of preview-gallery
*/
/**
* Generated bundle index. Do not edit.
*/
export { PreviewBtnDirective, PreviewGalleryComponent, PreviewGalleryModule };
//# sourceMappingURL=preview-gallery.mjs.map