@creativeacer/ngx-image-display/bundles/creativeacer-ngx-image-display.umd.min.js

Ngx-Image-Display : Responsive image container

!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@creativeacer/ngx-image-display",["exports","@angular/core","@angular/common"],i):i(((e="undefined"!=typeof globalThis?globalThis:e||self).creativeacer=e.creativeacer||{},e.creativeacer["ngx-image-display"]={}),e.ng.core,e.ng.common)}(this,(function(e,i,t){"use strict";var a;!function(e){e.zoom="zoom",e.lighten="lighten",e.darken="darken",e.greyscale="greyscale",e.sepia="sepia"}(a||(a={}));var n=function(){function e(e){this.renderer=e,this.defaultdisplayconfig={imageminwidth:"250px",containerwidth:"65%",containerheight:"600px"},this.defaultImageEffect={hoverEffectActive:!1},this.onImageSelected=new i.EventEmitter}return e.prototype.ngOnInit=function(){this.displayconfig||(this.displayconfig=this.defaultdisplayconfig),this.imageEffect||(this.imageEffect=this.defaultImageEffect),this.setContainerLayout(),this.setContainer(),this.setHoverEffect(),this.setSameSize()},e.prototype.setContainer=function(){this.displayconfig&&this.displayconfig.containerwidth&&(this.containerwidth=this.displayconfig.containerwidth),this.displayconfig&&this.displayconfig.containerheight&&(this.containerheight=this.displayconfig.containerheight)},e.prototype.setContainerLayout=function(){this.displayconfig&&this.displayconfig.imageminwidth&&this.displayconfig.columns?this.gridcolumns="repeat("+this.displayconfig.columns+", minmax("+this.displayconfig.imageminwidth+", 1fr))":this.displayconfig&&this.displayconfig.imageminwidth?this.gridcolumns="repeat(auto-fit, minmax("+this.displayconfig.imageminwidth+", 1fr))":this.gridcolumns="repeat(auto-fit, minmax(300px, 1fr))"},e.prototype.setHoverEffect=function(){if(this.imageEffect.hoverEffectActive&&this.imageEffect.hoverEffect)switch(this.imageEffect.hoverEffect){case"zoom":this.zoomlvl=a.zoom;break;case"lighten":this.zoomlvl=a.lighten;break;case"darken":this.zoomlvl=a.darken;break;case"greyscale":this.zoomlvl=a.greyscale;break;case"sepia":this.zoomlvl=a.sepia}else this.imageEffect.hoverEffectActive&&(this.zoomlvl=a.zoom)},e.prototype.viewFullScreen=function(e){this.renderer.setStyle(this.myModal.nativeElement,"display","block"),this.renderer.setProperty(this.img01.nativeElement,"src",e.imageData.value),this.renderer.setProperty(this.caption.nativeElement,"innerHTML",e.imageData.subtext?e.imageData.subtext:"")},e.prototype.closeImage=function(){this.renderer.setStyle(this.myModal.nativeElement,"display","none")},e.prototype.calculateStyle=function(e){return{initialEffect:!this.hovering===e,zoom:this.hovering===e&&this.zoomlvl===a.zoom,lighten:this.hovering===e&&this.zoomlvl===a.lighten,darken:this.hovering===e&&this.zoomlvl===a.darken,greyscale:this.hovering===e&&this.zoomlvl===a.greyscale,sepia:this.hovering===e&&this.zoomlvl===a.sepia}},e.prototype.setSameSize=function(){this.sameSize||(this.sameSize={active:!1,imgContainerHeight:"300px"})},e.prototype.mouseenter=function(e){this.imageEffect.hoverEffectActive&&(this.hovering=e)},e.prototype.mouseleave=function(){this.hovering=-1},e.prototype.imageSelected=function(e,i){var t={imageData:i.imageData,type:i.type,mouseEvent:e};this.onImageSelected.emit(t)},e}();n.decorators=[{type:i.Component,args:[{selector:"ngx-image-display",template:'<div class="bodymain">\n  <div class="imageDiv" [ngStyle]="{\'width\': containerwidth, \'height\': containerheight}">\n    <main *ngIf="!sameSize.active" [ngStyle]="{\'grid-template-columns\': gridcolumns, \'grid-template-rows\': gridrows}">\n      <div class="overlay" *ngFor="let image of images; let i = index"  (mouseenter)="mouseenter(i)" (mouseleave)="mouseleave()" [ngClass]="calculateStyle(i)">\n        <img (click)=\'imageSelected($event, image)\' class="imagecontainer" [src]="image.imageData.value"/>\n        <div class="subtext" (click)=\'imageSelected($event, image)\' [ngClass]="{\'full\': image.imageData.subtextOverlay === \'full\',\n        \'half\': image.imageData.subtextOverlay === \'half\',\n        \'bottom\': image.imageData.subtextOverlay === \'bottom\' || (!image.imageData.subtextOverlay && image.imageData.subtext)}">{{image.imageData.subtext}}</div>\n        <span *ngIf="displayconfig.fullScreenView" class="fullview" (click)="viewFullScreen(image)">&#10064;</span>\n      </div>\n    </main>\n    <main *ngIf="sameSize.active" [ngStyle]="{\'grid-template-columns\': gridcolumns, \'grid-template-rows\': gridrows}">\n      <div class="overlay" *ngFor="let image of images; let i = index" (mouseenter)="mouseenter(i)" (mouseleave)="mouseleave()"  [ngClass]="calculateStyle(i)">\n        <div class="img imagecontainer" (click)=\'imageSelected($event, image)\' [ngStyle]="{\'background-image\':\' url(\' + image.imageData.value + \')\',\n         \'min-height\': sameSize.imgContainerHeight}"></div>\n        <div class="subtext" (click)=\'imageSelected($event, image)\' [ngClass]="{\'full\': image.imageData.subtextOverlay === \'full\',\n        \'half\': image.imageData.subtextOverlay === \'half\',\n        \'bottom\': image.imageData.subtextOverlay === \'bottom\' || (!image.imageData.subtextOverlay && image.imageData.subtext)}">{{image.imageData.subtext}}</div>\n        <span *ngIf="displayconfig.fullScreenView" class="fullview" (click)="viewFullScreen(image)">&#10064;</span>\n      </div>\n    </main>\n  </div>\n</div>\n\n\x3c!-- The Modal --\x3e \n<div #myModal class="modal">\n<span #close class="close" (click)="closeImage()">&times;</span>\n<img class="modal-content" #img01>\n<div #caption class="caption"></div>\n</div>\n',styles:['.bodymain{display:flex;justify-content:center;width:100%}.bodymain .imageDiv{overflow:auto}.overlay:hover .fullview{display:initial}.fullview{color:#f1f1f1;display:none;font-size:25px;font-weight:700;position:absolute;right:25px;top:15px;transition:.3s}.fullview:focus,.fullview:hover{color:#bbb;cursor:pointer;text-decoration:none}main{box-sizing:border-box;display:grid;grid-column-gap:10px;grid-row-gap:10px}main .overlay{align-self:center;display:flex;overflow:hidden;position:relative}main .overlay .imagecontainer{transition:transform .5s ease}main .overlay .img,main .overlay img{align-self:center;display:flex;width:100%}main .overlay .img{background-position:50% 50%;background-repeat:no-repeat;background-size:cover}main .overlay .subtext{align-items:center;background-color:rgba(0,0,0,.4);bottom:0;color:#fff;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;right:0;transition:.5s ease}main .overlay .subtext.full{background-size:cover;height:100%;width:100%}main .overlay .subtext.half{background-size:cover;height:45%;width:100%}main .overlay .subtext.bottom{background-size:cover;height:20%;width:100%}main .initialEffect{filter:brightness(100%);overflow:hidden;transform:scale(1);z-index:"initial"}main .zoom{overflow:hidden;z-index:"999"}main .zoom .img,main .zoom img{transform:scale(1.3);transition:transform .3s ease}main .lighten{filter:brightness(150%)}main .darken,main .lighten{transition:.2s ease-in-out;z-index:"999"}main .darken{filter:brightness(50%)}main .greyscale{filter:grayscale(100%)}main .greyscale,main .sepia{transition:.2s ease-in-out;z-index:"999"}main .sepia{filter:sepia(100%)}#myImg{border-radius:5px;cursor:pointer;transition:.3s}#myImg:hover{opacity:.7}.modal{background-color:#000;background-color:rgba(0,0,0,.9);display:none;height:100%;left:0;overflow:auto;padding-top:100px;position:fixed;top:0;width:100%;z-index:1}.caption,.modal-content{display:block;margin:auto;max-width:700px;width:80%}.caption{color:#ccc;height:150px;padding:10px 0;text-align:center}#caption,.modal-content{-webkit-animation-duration:.6s;-webkit-animation-name:zoom;animation-duration:.6s;animation-name:zoom}@-webkit-keyframes zoom{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.close{color:#f1f1f1;font-size:40px;font-weight:700;position:absolute;right:35px;top:15px;transition:.3s}.close:focus,.close:hover{color:#bbb;cursor:pointer;text-decoration:none}@media only screen and (max-width:700px){.modal-content{width:100%}}']}]}],n.ctorParameters=function(){return[{type:i.Renderer2}]},n.propDecorators={images:[{type:i.Input}],sameSize:[{type:i.Input}],displayconfig:[{type:i.Input}],imageEffect:[{type:i.Input}],onImageSelected:[{type:i.Output}],myModal:[{type:i.ViewChild,args:["myModal"]}],myImg:[{type:i.ViewChild,args:["myImg"]}],img01:[{type:i.ViewChild,args:["img01"]}],caption:[{type:i.ViewChild,args:["caption"]}],close:[{type:i.ViewChild,args:["close"]}]};var o=function(){function e(){}return e.forRoot=function(){return{ngModule:e}},e}();o.decorators=[{type:i.NgModule,args:[{declarations:[n],imports:[t.CommonModule],exports:[n]}]}],e.NgxImageDisplayModule=o,e.NgximagedisplayComponent=n,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=creativeacer-ngx-image-display.umd.min.js.map