@creativeacer/ngx-image-display
Version:
Ngx-Image-Display : Responsive image container
179 lines (173 loc) • 10.9 kB
JavaScript
import { EventEmitter, Component, Renderer2, Input, Output, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
var hoverEffect;
(function (hoverEffect) {
hoverEffect["zoom"] = "zoom";
hoverEffect["lighten"] = "lighten";
hoverEffect["darken"] = "darken";
hoverEffect["greyscale"] = "greyscale";
hoverEffect["sepia"] = "sepia";
})(hoverEffect || (hoverEffect = {}));
class NgximagedisplayComponent {
constructor(renderer) {
this.renderer = renderer;
/**
* Default configuration
*/
this.defaultdisplayconfig = {
imageminwidth: '250px',
containerwidth: '65%',
containerheight: '600px'
};
this.defaultImageEffect = {
hoverEffectActive: false
};
this.onImageSelected = new EventEmitter();
}
ngOnInit() {
if (!this.displayconfig) {
this.displayconfig = this.defaultdisplayconfig;
}
if (!this.imageEffect) {
this.imageEffect = this.defaultImageEffect;
}
// this.gridrows = 'repeat(auto-fit, minmax('+this.displayconfig.rowheight+', 1fr))';
this.setContainerLayout();
this.setContainer();
this.setHoverEffect();
this.setSameSize();
}
setContainer() {
if (this.displayconfig && this.displayconfig.containerwidth) {
this.containerwidth = this.displayconfig.containerwidth;
}
if (this.displayconfig && this.displayconfig.containerheight) {
this.containerheight = this.displayconfig.containerheight;
}
}
setContainerLayout() {
if (this.displayconfig && this.displayconfig.imageminwidth && this.displayconfig.columns) {
this.gridcolumns = 'repeat(' + this.displayconfig.columns + ', minmax(' + this.displayconfig.imageminwidth + ', 1fr))';
}
else if (this.displayconfig && this.displayconfig.imageminwidth) {
this.gridcolumns = 'repeat(auto-fit, minmax(' + this.displayconfig.imageminwidth + ', 1fr))';
}
else {
this.gridcolumns = 'repeat(auto-fit, minmax(300px, 1fr))';
}
}
setHoverEffect() {
if (this.imageEffect.hoverEffectActive && this.imageEffect.hoverEffect) {
switch (this.imageEffect.hoverEffect) {
case 'zoom':
this.zoomlvl = hoverEffect.zoom;
break;
case 'lighten':
this.zoomlvl = hoverEffect.lighten;
break;
case 'darken':
this.zoomlvl = hoverEffect.darken;
break;
case 'greyscale':
this.zoomlvl = hoverEffect.greyscale;
break;
case 'sepia':
this.zoomlvl = hoverEffect.sepia;
break;
default:
break;
}
}
else if (this.imageEffect.hoverEffectActive) {
this.zoomlvl = hoverEffect.zoom;
}
}
viewFullScreen(img) {
this.renderer.setStyle(this.myModal.nativeElement, 'display', 'block');
this.renderer.setProperty(this.img01.nativeElement, 'src', img.imageData.value);
this.renderer.setProperty(this.caption.nativeElement, 'innerHTML', img.imageData.subtext ? img.imageData.subtext : '');
}
closeImage() {
this.renderer.setStyle(this.myModal.nativeElement, 'display', 'none');
}
calculateStyle(i) {
return {
initialEffect: !this.hovering === i,
zoom: this.hovering === i && (this.zoomlvl === hoverEffect.zoom),
lighten: this.hovering === i && (this.zoomlvl === hoverEffect.lighten),
darken: this.hovering === i && (this.zoomlvl === hoverEffect.darken),
greyscale: this.hovering === i && (this.zoomlvl === hoverEffect.greyscale),
sepia: this.hovering === i && (this.zoomlvl === hoverEffect.sepia)
};
}
setSameSize() {
if (!this.sameSize) {
this.sameSize = {
active: false,
imgContainerHeight: '300px'
};
}
}
mouseenter(itemIndex) {
if (this.imageEffect.hoverEffectActive) {
this.hovering = itemIndex;
}
}
mouseleave() {
this.hovering = -1;
}
imageSelected(mouseEvent, img) {
const clickedImageData = {
imageData: img.imageData,
type: img.type,
mouseEvent
};
this.onImageSelected.emit(clickedImageData);
}
}
NgximagedisplayComponent.decorators = [
{ type: 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)\">❐</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%}}"]
},] }
];
NgximagedisplayComponent.ctorParameters = () => [
{ type: Renderer2 }
];
NgximagedisplayComponent.propDecorators = {
images: [{ type: Input }],
sameSize: [{ type: Input }],
displayconfig: [{ type: Input }],
imageEffect: [{ type: Input }],
onImageSelected: [{ type: Output }],
myModal: [{ type: ViewChild, args: ['myModal',] }],
myImg: [{ type: ViewChild, args: ['myImg',] }],
img01: [{ type: ViewChild, args: ['img01',] }],
caption: [{ type: ViewChild, args: ['caption',] }],
close: [{ type: ViewChild, args: ['close',] }]
};
class NgxImageDisplayModule {
static forRoot() {
return {
ngModule: NgxImageDisplayModule,
};
}
}
NgxImageDisplayModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgximagedisplayComponent],
imports: [
CommonModule
],
exports: [NgximagedisplayComponent]
},] }
];
/*
* Public API Surface of ngximagedisplay
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxImageDisplayModule, NgximagedisplayComponent };
//# sourceMappingURL=creativeacer-ngx-image-display.js.map