@sd-angular/core/bundles/sd-angular-core-image-preview.umd.min.js

Sd Angular Core Lib

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/dialog"),require("@angular/material/icon"),require("jquery"),require("@sd-angular/core/modal")):"function"==typeof define&&define.amd?define("@sd-angular/core/image-preview",["exports","@angular/core","@angular/common","@angular/material/dialog","@angular/material/icon","jquery","@sd-angular/core/modal"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["sd-angular"]=e["sd-angular"]||{},e["sd-angular"].core=e["sd-angular"].core||{},e["sd-angular"].core["image-preview"]={}),e.ng.core,e.ng.common,e.ng.material.dialog,e.ng.material.icon,e.$,e["sd-angular"].core.modal)}(this,(function(e,t,a,r,i,n,o){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var s=l(n),c=function(){function e(e,t){this.dialogRef=e,this.data=t}return e.prototype.ngOnInit=function(){this.currentImageUrl="string"==typeof this.data.currentImage?this.data.currentImage:this.data.currentImage.previewSrc||this.data.currentImage.src},e.prototype.next=function(){var e=this,t=this.data.images.findIndex((function(t){return(t.previewSrc||t.src)===e.currentImageUrl}));t===this.data.images.length-1?this.currentImageUrl=this.data.images[0].previewSrc||this.data.images[0].src:this.currentImageUrl=this.data.images[t+1].previewSrc||this.data.images[t+1].src},e.prototype.prev=function(){var e=this,t=this.data.images.findIndex((function(t){return(t.previewSrc||t.src)===e.currentImageUrl}));this.currentImageUrl=0===t?this.data.images[this.data.images.length-1].previewSrc||this.data.images[this.data.images.length-1].src:this.data.images[t-1].previewSrc||this.data.images[t-1].src},e}();c.decorators=[{type:t.Component,args:[{selector:"app-image-preview",template:'<h1 mat-dialog-title class="d-flex">\r\n  <mat-icon\r\n    mat-dialog-close\r\n    role="img"\r\n    class="mat-icon notranslate material-icons mat-icon-no-color ml-auto"\r\n    >close</mat-icon\r\n  >\r\n</h1>\r\n<div mat-dialog-content class="h-100 position-relative m-0">\r\n <ng-container *ngIf="data?.images?.length">\r\n    <span class="material-icons-outlined position-absolute prev" (click)="prev()">\r\n      arrow_back_ios\r\n    </span>\r\n    <span class="material-icons-outlined position-absolute next" (click)="next()">\r\n      arrow_forward_ios\r\n    </span>\r\n </ng-container>\r\n  <img\r\n    [src]="currentImageUrl"\r\n    class="image-preview_image"\r\n  />\r\n</div>\r\n',styles:[".image-prevew-panel .mat-dialog-container{padding:0}:host{display:flex;flex-direction:column;height:100%}.image-preview_image{-o-object-fit:contain;display:block;height:100%;margin:0 auto;object-fit:contain;width:90%}.material-icons-outlined{cursor:pointer}.material-icons-outlined.prev{left:5px;top:50%;transform:translateY(-50%)}.material-icons-outlined.next{right:5px;top:50%;transform:translateY(-50%)}"]}]}],c.ctorParameters=function(){return[{type:r.MatDialogRef},{type:void 0,decorators:[{type:t.Inject,args:[r.MAT_DIALOG_DATA]}]}]};var g,m=function(){function e(e,t){this.el=e,this.dialog=t,this.images=null}return e.prototype.onClick=function(){var e;e=this.el.nativeElement.src,this.images.length&&this.sdPreviewCurrentIdx>=0&&(e=this.images[this.sdPreviewCurrentIdx]),this.dialog.open(c,{data:{currentImage:e,images:this.images},backdropClass:["image-prevew-backdrop"],panelClass:"image-prevew-panel",width:"600px",maxWidth:"90%",height:"600px",maxHeight:"90%"})},e}();m.decorators=[{type:t.Directive,args:[{selector:"[sdImagePreview]"}]}],m.ctorParameters=function(){return[{type:t.ElementRef},{type:r.MatDialog}]},m.propDecorators={images:[{type:t.Input,args:["sdImagePreview"]}],sdPreviewCurrentIdx:[{type:t.Input}],onClick:[{type:t.HostListener,args:["click"]}]};var d=function(){function e(e,t){var a=this;this.dialogRef=e,this.data=t,this.imageList=[],this.imageOrgWidthList=[],this.imageListTotal=0,this.imageCurrent="",this.imageCurrentIndex=0,this.imageCurrentPercent=100,this.imageCurrentWidth=0,g.set(this,(function(){setTimeout((function(){a.imageList=[],a.imageOrgWidthList=[],s("img[alt=c-image-editor-quill]").each((function(e,t){s(t).parent("a").addClass("c-image-editor-quill-box"),s(t).parent("a").click((function(e){e.preventDefault(),e.stopPropagation();var t=s(e.currentTarget).children("img");a.imageCurrent=s(t).attr("src"),a.imageCurrentIndex=a.imageList.findIndex((function(e){return e===a.imageCurrent})),a.imageCurrentPercent=100,a.imageCurrentWidth=s(t)[0].naturalWidth,a.popup.open()})),a.imageList.push(s(t).attr("src")),a.imageOrgWidthList.push(s(t)[0].naturalWidth),a.imageListTotal=a.imageList.length}))}),100)})),this.imageGalleryBoxPrev=function(){a.imageCurrentIndex>0&&(a.imageCurrentIndex--,a.imageCurrent=a.imageList[a.imageCurrentIndex],a.imageGalleryBoxCalculateWidth())},this.imageGalleryBoxNext=function(){a.imageCurrentIndex<a.imageList.length-1&&(a.imageCurrentIndex++,a.imageCurrent=a.imageList[a.imageCurrentIndex],a.imageGalleryBoxCalculateWidth())},this.imageGalleryBoxZoomIn=function(){a.imageCurrentPercent<200&&(a.imageCurrentPercent+=10,a.imageGalleryBoxCalculateWidth())},this.imageGalleryBoxZoomOut=function(){a.imageCurrentPercent>10&&(a.imageCurrentPercent-=10,a.imageGalleryBoxCalculateWidth())},this.imageGalleryBoxCalculateWidth=function(){var e=a.imageOrgWidthList[a.imageCurrentIndex];a.imageCurrentWidth=a.imageCurrentPercent*e/100}}return e.prototype.ngOnInit=function(){},e}();g=new WeakMap,d.decorators=[{type:t.Component,args:[{selector:"sd-image-preview-2",template:'<sd-modal [title]="\' \'" width="90%" #popup>\r\n  <sd-modal-body>\r\n    <div class="c-image-gallery-box">\r\n      <div class="c-content-scroll">\r\n        <div class="c-content">\r\n          <div class="c-content-cell">\r\n            <img src="{{imageCurrent}}" style="width: {{imageCurrentWidth}}px"/>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class="c-toolbar">\r\n        <mat-icon (click)="imageGalleryBoxZoomOut()">zoom_out</mat-icon>\r\n        <span><b>{{imageCurrentPercent}}%</b></span>\r\n        <mat-icon (click)="imageGalleryBoxZoomIn()">zoom_in</mat-icon>\r\n        <span>&nbsp;</span>\r\n        <mat-icon (click)="imageGalleryBoxPrev()">navigate_before</mat-icon>\r\n        <span><b>{{(imageCurrentIndex + 1)}} / {{imageListTotal}}</b></span>\r\n        <mat-icon (click)="imageGalleryBoxNext()">navigate_next</mat-icon>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </sd-modal-body>\r\n</sd-modal>\r\n',styles:[".c-image-gallery-box{background:rgba(0,0,0,.54);position:relative}.c-image-gallery-box .c-content-scroll{height:79vh;overflow:auto;width:100%}.c-image-gallery-box .c-content-scroll .c-content{display:table;height:100%;width:100%}.c-image-gallery-box .c-content-scroll .c-content .c-content-cell{display:table-cell;text-align:center;vertical-align:middle}.c-image-gallery-box .c-toolbar{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:rgba(0,0,0,.5);border-radius:4px;bottom:18px;color:#eee;left:0;margin-left:auto;margin-right:auto;padding-top:8px;position:absolute;right:0;text-align:center;user-select:none;width:250px}.c-image-gallery-box .c-toolbar span{margin:0 4px;vertical-align:top}.c-image-gallery-box .c-toolbar mat-icon{cursor:pointer;margin:0 4px}"]}]}],d.ctorParameters=function(){return[{type:r.MatDialogRef},{type:void 0,decorators:[{type:t.Inject,args:[r.MAT_DIALOG_DATA]}]}]},d.propDecorators={popup:[{type:t.ViewChild,args:[o.SdModal]}]};var u=function(){};u.decorators=[{type:t.NgModule,args:[{declarations:[c,d,m],exports:[m],imports:[a.CommonModule,r.MatDialogModule,i.MatIconModule,o.SdModalModule],entryComponents:[c]}]}],e.SdImagePreviewModule=u,e.ɵa=c,e.ɵb=d,e.ɵc=m,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=sd-angular-core-image-preview.umd.min.js.map