|
|
@ -9,9 +9,9 @@ import {
|
|
|
|
OnDestroy,
|
|
|
|
OnDestroy,
|
|
|
|
OnInit,
|
|
|
|
OnInit,
|
|
|
|
Output,
|
|
|
|
Output,
|
|
|
|
ViewChild
|
|
|
|
ViewChild,
|
|
|
|
} from "@angular/core";
|
|
|
|
} from "@angular/core";
|
|
|
|
import {SafeResourceUrl} from "@angular/platform-browser";
|
|
|
|
import { SafeResourceUrl } from "@angular/platform-browser";
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
@Component({
|
|
|
|
selector: "app-content-aware-image",
|
|
|
|
selector: "app-content-aware-image",
|
|
|
@ -58,12 +58,21 @@ export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public checkSize(): void {
|
|
|
|
public checkSize(): void {
|
|
|
|
if (this.imageElement?.nativeElement && this.imageContainer?.nativeElement) {
|
|
|
|
if (
|
|
|
|
this.adjustSize(this.imageElement.nativeElement, this.imageContainer.nativeElement);
|
|
|
|
this.imageElement?.nativeElement &&
|
|
|
|
|
|
|
|
this.imageContainer?.nativeElement
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
this.adjustSize(
|
|
|
|
|
|
|
|
this.imageElement.nativeElement,
|
|
|
|
|
|
|
|
this.imageContainer.nativeElement,
|
|
|
|
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public onImageLoad(image: HTMLImageElement, imageContainer: HTMLDivElement): void {
|
|
|
|
public onImageLoad(
|
|
|
|
|
|
|
|
image: HTMLImageElement,
|
|
|
|
|
|
|
|
imageContainer: HTMLDivElement,
|
|
|
|
|
|
|
|
): void {
|
|
|
|
this.adjustSize(image, imageContainer);
|
|
|
|
this.adjustSize(image, imageContainer);
|
|
|
|
this.appLoadEnd.emit();
|
|
|
|
this.appLoadEnd.emit();
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -73,18 +82,24 @@ export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
|
|
|
|
* @param {HTMLImageElement} image
|
|
|
|
* @param {HTMLImageElement} image
|
|
|
|
* @param {HTMLDivElement} imageContainer
|
|
|
|
* @param {HTMLDivElement} imageContainer
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
public adjustSize(image: HTMLImageElement, imageContainer: HTMLDivElement): void {
|
|
|
|
public adjustSize(
|
|
|
|
|
|
|
|
image: HTMLImageElement,
|
|
|
|
|
|
|
|
imageContainer: HTMLDivElement,
|
|
|
|
|
|
|
|
): void {
|
|
|
|
const containerHeight = Math.abs(imageContainer.clientHeight);
|
|
|
|
const containerHeight = Math.abs(imageContainer.clientHeight);
|
|
|
|
const containerWidth = Math.abs(imageContainer.clientWidth);
|
|
|
|
const containerWidth = Math.abs(imageContainer.clientWidth);
|
|
|
|
|
|
|
|
|
|
|
|
if (this.previousWidth != containerWidth || this.previousHeight != containerHeight) {
|
|
|
|
if (
|
|
|
|
|
|
|
|
this.previousWidth !== containerWidth ||
|
|
|
|
|
|
|
|
this.previousHeight !== containerHeight
|
|
|
|
|
|
|
|
) {
|
|
|
|
this.previousHeight = containerHeight;
|
|
|
|
this.previousHeight = containerHeight;
|
|
|
|
this.previousWidth = containerWidth;
|
|
|
|
this.previousWidth = containerWidth;
|
|
|
|
const imageRelativeHeight = image.naturalHeight / containerHeight;
|
|
|
|
const imageRelativeHeight = image.naturalHeight / containerHeight;
|
|
|
|
const imageRelativeWidth = image.naturalWidth / containerWidth;
|
|
|
|
const imageRelativeWidth = image.naturalWidth / containerWidth;
|
|
|
|
const scaleWidth = imageRelativeWidth > imageRelativeHeight;
|
|
|
|
const scaleWidth = imageRelativeWidth > imageRelativeHeight;
|
|
|
|
|
|
|
|
|
|
|
|
if (scaleWidth != this.scaleWidth) {
|
|
|
|
if (scaleWidth !== this.scaleWidth) {
|
|
|
|
this.scaleWidth = scaleWidth;
|
|
|
|
this.scaleWidth = scaleWidth;
|
|
|
|
this.changeDetector.detectChanges();
|
|
|
|
this.changeDetector.detectChanges();
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -96,6 +111,7 @@ export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
|
|
|
|
|
|
|
|
|
|
|
|
if (this.retryCount < this.maxRetry) {
|
|
|
|
if (this.retryCount < this.maxRetry) {
|
|
|
|
this.retryCount++;
|
|
|
|
this.retryCount++;
|
|
|
|
|
|
|
|
image.src = "";
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
image.src = imageSrc;
|
|
|
|
image.src = imageSrc;
|
|
|
|
}, this.retryDelay * this.retryCount);
|
|
|
|
}, this.retryDelay * this.retryCount);
|
|
|
|