UNPKG

ngx-edu-components

Version:
170 lines 16 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, Input, Output, EventEmitter, } from "@angular/core"; import Viewer from "viewerjs"; import * as uuid from "uuid"; import { GalleryOptions } from "./gallery-options"; /** * INSTRUCCIONES DE USO * * Instalar: * npm install viewerjs --save * * Configurar en angular.json * en styles > "node_modules/viewerjs/dist/viewer.css" * en scripts > "node_modules/viewerjs/dist/viewer.js" * * Importar en módulo ImageToolsModule en tu módulo * * Crear la siguiente variable en tu componente para cargar las imagenes a mostrar en la galería -> images: ImageItem[] = []; * Cuando se realizen cambios en el array de imagenes, realizar la siguiente asignación para refrescar cambios -> this.images = [...this.images]; * * Agregar el siguiente código en donde quieras que se muestre la galería. Opcionalmente setear imagesHeight (por defecto 200px). * <ngx-edu-gallery [images]="images" [imagesHeight]="200"></ngx-edu-gallery> */ export class NgxEduGalleryComponent { constructor() { this.id = uuid.v4(); this.gallery = null; this.images = []; this.imagesHeight = 200; this.defaultImageUrl = ""; this.galleryOptions = { showAlt: true, showRemoveImage: false, }; this.onRemove = new EventEmitter(); } /** * @return {?} */ ngOnInit() { } /** * @return {?} */ ngOnChanges() { console.log("NgxEduGalleryComponent > ngOnChanges > 1", this.images); if (this.images.length > 0) { console.log("NgxEduGalleryComponent > ngOnChanges > 2"); setTimeout((/** * @return {?} */ () => { console.log("NgxEduGalleryComponent > ngOnChanges > 3"); this.initialize(); }), 1000); } } /** * @return {?} */ ngOnDestroy() { console.log("NgxEduGalleryComponent > ngOnDestroy > 1", this.gallery); if (this.gallery) { console.log("NgxEduGalleryComponent > ngOnDestroy > 2"); this.gallery.destroy(); } } /** * @return {?} */ initialize() { console.log("NgxEduGalleryComponent > initialize > 1", this.gallery); if (this.gallery) { console.log("NgxEduGalleryComponent > initialize > 2"); this.gallery.destroy(); } /** @type {?} */ const ul = document.getElementById(this.id); console.log("NgxEduGalleryComponent > initialize > 3 > ul", ul); if (!ul) return; this.gallery = new Viewer(ul); console.log("NgxEduGalleryComponent > initialize > 3", this.gallery); } /** * @param {?} event * @return {?} */ onError(event) { if (!event) return; event.target.src = this.defaultImageUrl; } /** * @return {?} */ show() { console.log("NgxEduGalleryComponent > show > 1"); if (!this.gallery) return; console.log("NgxEduGalleryComponent > show > 2"); this.gallery.show(); } /** * @param {?} index * @return {?} */ view(index) { console.log("NgxEduGalleryComponent > view > 1", this.gallery, index); if (!this.gallery || index < 0) return; console.log("NgxEduGalleryComponent > view > 2"); this.gallery.view(index); } /** * @param {?} zoom * @return {?} */ zoom(zoom) { if (!this.gallery) return; this.gallery.zoomTo(zoom); } /** * @param {?} image * @param {?} position * @return {?} */ remove(image, position) { this.onRemove.emit({ image: image, position: position, }); } } NgxEduGalleryComponent.decorators = [ { type: Component, args: [{ selector: "ngx-edu-gallery", template: "<ul [id]=\"id\" class=\"ngx-edu-gallery\">\r\n <li *ngFor=\"let image of images; let i = index\">\r\n <mat-card>\r\n <div class=\"image-container\" *ngIf=\"defaultImageUrl\">\r\n <mat-icon\r\n class=\"remove-image\"\r\n matTooltip=\"Quitar\"\r\n (click)=\"remove(image, i)\"\r\n *ngIf=\"galleryOptions.showRemoveImage\"\r\n >cancel</mat-icon\r\n >\r\n <img\r\n src=\"{{ image.url ? image.url : '' }}\"\r\n alt=\"{{ image.alt ? image.alt : '' }}\"\r\n (error)=\"onError($event)\"\r\n [style.height.px]=\"imagesHeight\"\r\n />\r\n <div class=\"description\" *ngIf=\"galleryOptions.showAlt\">\r\n {{ image.alt ? image.alt : \"\" }}\r\n </div>\r\n </div>\r\n <div\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n *ngIf=\"!defaultImageUrl\"\r\n >\r\n <span>El par\u00E1metro de entrada [defaultImageUrl] es requerido.</span>\r\n </div>\r\n </mat-card>\r\n </li>\r\n</ul>\r\n", styles: [".ngx-edu-gallery{list-style-type:none;margin:0;padding:0}.ngx-edu-gallery li{display:inline-block;margin-right:8px;margin-bottom:8px;padding:0}.ngx-edu-gallery li mat-card{max-width:unset;min-width:unset}.ngx-edu-gallery li mat-card .image-container{position:relative}.ngx-edu-gallery li mat-card .image-container .remove-image{position:absolute;top:-12px;right:-12px;cursor:pointer}.ngx-edu-gallery li mat-card .image-container img{cursor:pointer}.ngx-edu-gallery li mat-card .image-container .description{position:absolute;background-color:#000;opacity:.8;color:#fff!important;font-size:20px;padding:8px!important;width:100%!important;left:0;bottom:0}"] }] } ]; /** @nocollapse */ NgxEduGalleryComponent.ctorParameters = () => []; NgxEduGalleryComponent.propDecorators = { images: [{ type: Input }], imagesHeight: [{ type: Input }], defaultImageUrl: [{ type: Input }], galleryOptions: [{ type: Input }], onRemove: [{ type: Output }] }; if (false) { /** @type {?} */ NgxEduGalleryComponent.prototype.id; /** @type {?} */ NgxEduGalleryComponent.prototype.gallery; /** @type {?} */ NgxEduGalleryComponent.prototype.images; /** @type {?} */ NgxEduGalleryComponent.prototype.imagesHeight; /** @type {?} */ NgxEduGalleryComponent.prototype.defaultImageUrl; /** @type {?} */ NgxEduGalleryComponent.prototype.galleryOptions; /** @type {?} */ NgxEduGalleryComponent.prototype.onRemove; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWVkdS1nYWxsZXJ5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1lZHUtY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtZWR1LWdhbGxlcnkvbmd4LWVkdS1nYWxsZXJ5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFJVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksR0FDYixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLE1BQU0sTUFBTSxVQUFVLENBQUM7QUFDOUIsT0FBTyxLQUFLLElBQUksTUFBTSxNQUFNLENBQUM7QUFDN0IsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBeUJuRCxNQUFNLE9BQU8sc0JBQXNCO0lBU2pDO1FBQ0UsSUFBSSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLFlBQVksR0FBRyxHQUFHLENBQUM7UUFDeEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxFQUFFLENBQUM7UUFDMUIsSUFBSSxDQUFDLGNBQWMsR0FBRztZQUNwQixPQUFPLEVBQUUsSUFBSTtZQUNiLGVBQWUsRUFBRSxLQUFLO1NBQ3ZCLENBQUM7UUFDRixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFDMUMsQ0FBQzs7OztJQUVELFFBQVEsS0FBSSxDQUFDOzs7O0lBRWIsV0FBVztRQUNULE9BQU8sQ0FBQyxHQUFHLENBQUMsMENBQTBDLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3JFLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQzFCLE9BQU8sQ0FB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QUs7dUJBQ0wsTUFBTTs7OztJQU5QLG9DQUFXOztJQUNYLHlDQUFhOztJQUNiLHdDQUE2Qjs7SUFDN0IsOENBQThCOztJQUM5QixpREFBaUM7O0lBQ2pDLGdEQUF3Qzs7SUFDeEMsMENBQXNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgT25Jbml0LFxyXG4gIE9uQ2hhbmdlcyxcclxuICBPbkRlc3Ryb3ksXHJcbiAgSW5wdXQsXHJcbiAgT3V0cHV0LFxyXG4gIEV2ZW50RW1pdHRlcixcclxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBJbWFnZUl0ZW0gfSBmcm9tIFwiLi9pbWFnZS1pdGVtXCI7XHJcbmltcG9ydCBWaWV3ZXIgZnJvbSBcInZpZXdlcmpzXCI7XHJcbmltcG9ydCAqIGFzIHV1aWQgZnJvbSBcInV1aWRcIjtcclxuaW1wb3J0IHsgR2FsbGVyeU9wdGlvbnMgfSBmcm9tIFwiLi9nYWxsZXJ5LW9wdGlvbnNcIjtcclxuXHJcbi8qKlxyXG4gKiBJTlNUUlVDQ0lPTkVTIERFIFVTT1xyXG4gKlxyXG4gKiBJbnN0YWxhcjpcclxuICogIG5wbSBpbnN0YWxsIHZpZXdlcmpzIC0tc2F2ZVxyXG4gKlxyXG4gKiBDb25maWd1cmFyIGVuIGFuZ3VsYXIuanNvblxyXG4gKiAgZW4gc3R5bGVzID4gXCJub2RlX21vZHVsZXMvdmlld2VyanMvZGlzdC92aWV3ZXIuY3NzXCJcclxuICogIGVuIHNjcmlwdHMgPiBcIm5vZGVfbW9kdWxlcy92aWV3ZXJqcy9kaXN0L3ZpZXdlci5qc1wiXHJcbiAqXHJcbiAqIEltcG9ydGFyIGVuIG3Ds2R1bG8gSW1hZ2VUb29sc01vZHVsZSBlbiB0dSBtw7NkdWxvXHJcbiAqXHJcbiAqIENyZWFyIGxhIHNpZ3VpZW50ZSB2YXJpYWJsZSBlbiB0dSBjb21wb25lbnRlIHBhcmEgY2FyZ2FyIGxhcyBpbWFnZW5lcyBhIG1vc3RyYXIgZW4gbGEgZ2FsZXLDrWEgLT4gaW1hZ2VzOiBJbWFnZUl0ZW1bXSA9IFtdO1xyXG4gKiBDdWFuZG8gc2UgcmVhbGl6ZW4gY2FtYmlvcyBlbiBlbCBhcnJheSBkZSBpbWFnZW5lcywgcmVhbGl6YXIgbGEgc2lndWllbnRlIGFzaWduYWNpw7NuIHBhcmEgcmVmcmVzY2FyIGNhbWJpb3MgLT4gdGhpcy5pbWFnZXMgPSBbLi4udGhpcy5pbWFnZXNdO1xyXG4gKlxyXG4gKiBBZ3JlZ2FyIGVsIHNpZ3VpZW50ZSBjw7NkaWdvIGVuIGRvbmRlIHF1aWVyYXMgcXVlIHNlIG11ZXN0cmUgbGEgZ2FsZXLDrWEuIE9wY2lvbmFsbWVudGUgc2V0ZWFyIGltYWdlc0hlaWdodCAocG9yIGRlZmVjdG8gMjAwcHgpLlxyXG4gKiA8bmd4LWVkdS1nYWxsZXJ5IFtpbWFnZXNdPVwiaW1hZ2VzXCIgW2ltYWdlc0hlaWdodF09XCIyMDBcIj48L25neC1lZHUtZ2FsbGVyeT5cclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBcIm5neC1lZHUtZ2FsbGVyeVwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIm5neC1lZHUtZ2FsbGVyeS5jb21wb25lbnQuaHRtbFwiLFxyXG4gIHN0eWxlVXJsczogW1wibmd4LWVkdS1nYWxsZXJ5LmNvbXBvbmVudC5zY3NzXCJdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4RWR1R2FsbGVyeUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xyXG4gIGlkOiBzdHJpbmc7XHJcbiAgZ2FsbGVyeTogYW55O1xyXG4gIEBJbnB1dCgpIGltYWdlczogSW1hZ2VJdGVtW107XHJcbiAgQElucHV0KCkgaW1hZ2VzSGVpZ2h0OiBudW1iZXI7XHJcbiAgQElucHV0KCkgZGVmYXVsdEltYWdlVXJsOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgZ2FsbGVyeU9wdGlvbnM6IEdhbGxlcnlPcHRpb25zO1xyXG4gIEBPdXRwdXQoKSBvblJlbW92ZTogRXZlbnRFbWl0dGVyPGFueT47XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgdGhpcy5pZCA9IHV1aWQudjQoKTtcclxuICAgIHRoaXMuZ2FsbGVyeSA9IG51bGw7XHJcbiAgICB0aGlzLmltYWdlcyA9IFtdO1xyXG4gICAgdGhpcy5pbWFnZXNIZWlnaHQgPSAyMDA7XHJcbiAgICB0aGlzLmRlZmF1bHRJbWFnZVVybCA9IFwiXCI7XHJcbiAgICB0aGlzLmdhbGxlcnlPcHRpb25zID0ge1xyXG4gICAgICBzaG93QWx0OiB0cnVlLFxyXG4gICAgICBzaG93UmVtb3ZlSW1hZ2U6IGZhbHNlLFxyXG4gICAgfTtcclxuICAgIHRoaXMub25SZW1vdmUgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge31cclxuXHJcbiAgbmdPbkNoYW5nZXMoKSB7XHJcbiAgICBjb25zb2xlLmxvZyhcIk5neEVkdUdhbGxlcnlDb21wb25lbnQgPiBuZ09uQ2hhbmdlcyA+IDFcIiwgdGhpcy5pbWFnZXMpO1xyXG4gICAgaWYgKHRoaXMuaW1hZ2VzLmxlbmd0aCA+IDApIHtcclxuICAgICAgY29uc29sZS5sb2coXCJOZ3hFZHVHYWxsZXJ5Q29tcG9uZW50ID4gbmdPbkNoYW5nZXMgPiAyXCIpO1xyXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICBjb25zb2xlLmxvZyhcIk5neEVkdUdhbGxlcnlDb21wb25lbnQgPiBuZ09uQ2hhbmdlcyA+IDNcIik7XHJcbiAgICAgICAgdGhpcy5pbml0aWFsaXplKCk7XHJcbiAgICAgIH0sIDEwMDApO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKSB7XHJcbiAgICBjb25zb2xlLmxvZyhcIk5neEVkdUdhbGxlcnlDb21wb25lbnQgPiBuZ09uRGVzdHJveSA+IDFcIiwgdGhpcy5nYWxsZXJ5KTtcclxuICAgIGlmICh0aGlzLmdhbGxlcnkpIHtcclxuICAgICAgY29uc29sZS5sb2coXCJOZ3hFZHVHYWxsZXJ5Q29tcG9uZW50ID4gbmdPbkRlc3Ryb3kgPiAyXCIpO1xyXG4gICAgICB0aGlzLmdhbGxlcnkuZGVzdHJveSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHVibGljIGluaXRpYWxpemUoKSB7XHJcbiAgICBjb25zb2xlLmxvZyhcIk5neEVkdUdhbGxlcnlDb21wb25lbnQgPiBpbml0aWFsaXplID4gMVwiLCB0aGlzLmdhbGxlcnkpO1xyXG4gICAgaWYgKHRoaXMuZ2FsbGVyeSkge1xyXG4gICAgICBjb25zb2xlLmxvZyhcIk5neEVkdUdhbGxlcnlDb21wb25lbnQgPiBpbml0aWFsaXplID4gMlwiKTtcclxuICAgICAgdGhpcy5nYWxsZXJ5LmRlc3Ryb3koKTtcclxuICAgIH1cclxuICAgIGNvbnN0IHVsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQodGhpcy5pZCk7XHJcbiAgICBjb25zb2xlLmxvZyhcIk5neEVkdUdhbGxlcnlDb21wb25lbnQgPiBpbml0aWFsaXplID4gMyA+IHVsXCIsIHVsKTtcclxuICAgIGlmICghdWwpIHJldHVybjtcclxuICAgIHRoaXMuZ2FsbGVyeSA9IG5ldyBWaWV3ZXIodWwpO1xyXG4gICAgY29uc29sZS5sb2coXCJOZ3hFZHVHYWxsZXJ5Q29tcG9uZW50ID4gaW5pdGlhbGl6ZSA+IDNcIiwgdGhpcy5nYWxsZXJ5KTtcclxuICB9XHJcblxyXG4gIG9uRXJyb3IoZXZlbnQpIHtcclxuICAgIGlmICghZXZlbnQpIHJldHVybjtcclxuICAgIGV2ZW50LnRhcmdldC5zcmMgPSB0aGlzLmRlZmF1bHRJbWFnZVVybDtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBzaG93KCkge1xyXG4gICAgY29uc29sZS5sb2coXCJOZ3hFZHVHYWxsZXJ5Q29tcG9uZW50ID4gc2hvdyA+IDFcIik7XHJcbiAgICBpZiAoIXRoaXMuZ2FsbGVyeSkgcmV0dXJuO1xyXG4gICAgY29uc29sZS5sb2coXCJOZ3hFZHVHYWxsZXJ5Q29tcG9uZW50ID4gc2hvdyA+IDJcIik7XHJcbiAgICB0aGlzLmdhbGxlcnkuc2hvdygpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHZpZXcoaW5kZXg6IG51bWJlcikge1xyXG4gICAgY29uc29sZS5sb2coXCJOZ3hFZHVHYWxsZXJ5Q29tcG9uZW50ID4gdmlldyA+IDFcIiwgdGhpcy5nYWxsZXJ5LCBpbmRleCk7XHJcbiAgICBpZiAoIXRoaXMuZ2FsbGVyeSB8fCBpbmRleCA8IDApIHJldHVybjtcclxuICAgIGNvbnNvbGUubG9nKFwiTmd4RWR1R2FsbGVyeUNvbXBvbmVudCA+IHZpZXcgPiAyXCIpO1xyXG4gICAgdGhpcy5nYWxsZXJ5LnZpZXcoaW5kZXgpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHpvb20oem9vbTogbnVtYmVyKSB7XHJcbiAgICBpZiAoIXRoaXMuZ2FsbGVyeSkgcmV0dXJuO1xyXG4gICAgdGhpcy5nYWxsZXJ5Lnpvb21Ubyh6b29tKTtcclxuICB9XHJcblxyXG4gIHJlbW92ZShpbWFnZTogSW1hZ2VJdGVtLCBwb3NpdGlvbjogbnVtYmVyKSB7XHJcbiAgICB0aGlzLm9uUmVtb3ZlLmVtaXQoe1xyXG4gICAgICBpbWFnZTogaW1hZ2UsXHJcbiAgICAgIHBvc2l0aW9uOiBwb3NpdGlvbixcclxuICAgIH0pO1xyXG4gIH1cclxufVxyXG4iXX0=