@creativeacer/ngx-image-display
Version:
Ngx-Image-Display : Responsive image container
1 lines • 9.19 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgximagedisplayComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"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)\">❐</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)\">❐</span>\n </div>\n </main>\n </div>\n</div>\n\n<!-- The Modal --> \n<div #myModal class=\"modal\">\n<span #close class=\"close\" (click)=\"closeImage()\">×</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%}}"]}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":2}}]}],"sameSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":2}}]}],"displayconfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":2}}]}],"imageEffect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":2}}]}],"onImageSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":2}}]}],"myModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":2},"arguments":["myModal"]}]}],"myImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":47,"character":2},"arguments":["myImg"]}]}],"img01":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":2},"arguments":["img01"]}]}],"caption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":2},"arguments":["caption"]}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":2},"arguments":["close"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":52,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"setContainer":[{"__symbolic":"method"}],"setContainerLayout":[{"__symbolic":"method"}],"setHoverEffect":[{"__symbolic":"method"}],"viewFullScreen":[{"__symbolic":"method"}],"closeImage":[{"__symbolic":"method"}],"calculateStyle":[{"__symbolic":"method"}],"setSameSize":[{"__symbolic":"method"}],"mouseenter":[{"__symbolic":"method"}],"mouseleave":[{"__symbolic":"method"}],"imageSelected":[{"__symbolic":"method"}]}},"BaseImage":{"__symbolic":"interface"},"UrlImage":{"__symbolic":"interface"},"DisplayConfig":{"__symbolic":"interface"},"ImageData":{"__symbolic":"interface"},"ClickedImageData":{"__symbolic":"interface"},"ImageEffect":{"__symbolic":"interface"},"SameSizeConfig":{"__symbolic":"interface"},"NgxImageDisplayModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgximagedisplayComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"NgximagedisplayComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxImageDisplayModule"}}}}}},"origins":{"NgximagedisplayComponent":"./lib/ngximagedisplay.component","BaseImage":"./interfaces/ngximagedisplay.interface","UrlImage":"./interfaces/ngximagedisplay.interface","DisplayConfig":"./interfaces/ngximagedisplay.interface","ImageData":"./interfaces/ngximagedisplay.interface","ClickedImageData":"./interfaces/ngximagedisplay.interface","ImageEffect":"./interfaces/ngximagedisplay.interface","SameSizeConfig":"./interfaces/ngximagedisplay.interface","NgxImageDisplayModule":"./lib/ngximagedisplay.module"},"importAs":"@creativeacer/ngx-image-display"}