117 lines
2.7 KiB
TypeScript
117 lines
2.7 KiB
TypeScript
import { Component, OnInit, Input, ElementRef } from '@angular/core';
|
|
import { HttpClient } from '@angular/common/http';
|
|
|
|
import { take } from 'rxjs/operators';
|
|
import { NGXLogger } from 'ngx-logger';
|
|
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
|
|
import { ucapAnimations } from '../animations';
|
|
|
|
@Component({
|
|
selector: 'ucap-ui-imaage',
|
|
template: `
|
|
<img
|
|
[src]="imageSrc"
|
|
[style]="baseStyle"
|
|
[ngClass]="classList"
|
|
[@fadeInOut]
|
|
/>
|
|
`,
|
|
styles: [],
|
|
animations: ucapAnimations
|
|
})
|
|
export class ImageComponent implements OnInit {
|
|
@Input()
|
|
base: string;
|
|
|
|
@Input()
|
|
path: string;
|
|
|
|
@Input()
|
|
validation = true;
|
|
|
|
@Input()
|
|
default: string;
|
|
|
|
@Input()
|
|
set style(style: string | object) {
|
|
let mappedStyles = style as string;
|
|
|
|
if (typeof style === 'object') {
|
|
mappedStyles = Object.entries(style).reduce(
|
|
(styleString, [propName, propValue]) => {
|
|
propName = propName.replace(
|
|
/([A-Z])/g,
|
|
matches => `-${matches[0].toLowerCase()}`
|
|
);
|
|
return `${styleString}${propName}:${propValue};`;
|
|
},
|
|
''
|
|
);
|
|
|
|
this.baseStyle = this.domSanitizer.bypassSecurityTrustStyle(mappedStyles);
|
|
} else if (typeof style === 'string') {
|
|
this.baseStyle = this.domSanitizer.bypassSecurityTrustStyle(mappedStyles);
|
|
}
|
|
}
|
|
|
|
@Input()
|
|
set imageClass(classes: string) {
|
|
if (classes && classes.length) {
|
|
classes.split(' ').forEach((className: string) => {
|
|
this.classList[className] = true;
|
|
});
|
|
|
|
this.elementRef.nativeElement.className = '';
|
|
}
|
|
}
|
|
|
|
baseStyle: SafeStyle;
|
|
imageSrc: string;
|
|
classList: { [key: string]: boolean } = {};
|
|
|
|
constructor(
|
|
private elementRef: ElementRef<HTMLElement>,
|
|
private domSanitizer: DomSanitizer,
|
|
private httpClient: HttpClient,
|
|
private logger: NGXLogger
|
|
) {
|
|
this.imageSrc = null;
|
|
}
|
|
|
|
ngOnInit() {
|
|
if (this.validation) {
|
|
if (
|
|
!this.base ||
|
|
'' === this.base.trim() ||
|
|
!this.path ||
|
|
'' === this.path.trim()
|
|
) {
|
|
this.imageSrc = this.default;
|
|
}
|
|
}
|
|
|
|
if (!this.imageSrc) {
|
|
this.imageSrc = this.default;
|
|
|
|
const imageUrl = `${this.base}${this.path}`;
|
|
const image = new Image();
|
|
image.onload = () => {
|
|
if ('naturalHeight' in this) {
|
|
if (image.naturalHeight + image.naturalWidth === 0) {
|
|
image.onerror('naturalHeight');
|
|
return;
|
|
}
|
|
} else if (image.width + image.height === 0) {
|
|
image.onerror('width');
|
|
return;
|
|
}
|
|
this.imageSrc = image.src;
|
|
};
|
|
image.onerror = () => {
|
|
this.imageSrc = this.default;
|
|
};
|
|
image.src = imageUrl;
|
|
}
|
|
}
|
|
}
|