SFM-Broker/src/app/image-popup-dialog/image-popup-dialog.component.ts

import {AfterViewInit, Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-image-popup-dialog',
  templateUrl: './image-popup-dialog.component.html',
  styleUrls: ['./image-popup-dialog.component.scss']
})
export class ImagePopupDialogComponent implements OnInit{
  @Input() url = '';
  @Input() title = 'Image';
  @ViewChild('content', { read: ElementRef }) img: ElementRef;
  public opened = false;
  public imgWidthPercent = 1;
  public iWidth = 100;
  public imgOriginalWidth = 0;
  public imgOriginalHeight = 0;
  public imageLoaded = false;
  public scrHeight = 0;
  public scrWidth = 0;
  public dialogWidth = 0 ;
  public margin = 32; // dialog margin;
  constructor() { }

  ngOnInit(): void {
    this.getScreenSize();
    this.initDialogWidth();
  }


  @HostListener('window:resize', ['$event'])
  getScreenSize(event?): void {
    this.scrHeight = window.innerHeight;
    this.scrWidth = window.innerWidth;
    this.dialogWidth = 200; // this.scrWidth;
    // console.log(this.scrHeight, this.scrWidth);
    // console.log(this.scrHeight, this.scrWidth);
  }

  public showImg(url: string, title?: string): void {
    this.initDialogWidth();
    this.title = title || 'Image';
    const ts = Date.now();
    this.url = url + '?date=' + ts;
    this.opened = true;
  }

  private initDialogWidth(): void {
    this.imageLoaded = false;
    this.dialogWidth = 200;
    this.iWidth = this.dialogWidth - this.margin;
  }

  public close(status: string): void {
    this.opened = false;
  }

  public zoom(diff: number): void {
    this.imgWidthPercent += diff;
    if (this.imgWidthPercent < 0.05) {
      this.imgWidthPercent = 0.05;
    }
    if (this.imgWidthPercent > 3){
      this.imgWidthPercent = 3;
    }
    this.resizeWindow();
  }

  public originalSize(): void {
    this.imgWidthPercent = 1;
    this.resizeWindow();
  }

  private resizeWindow(): void {
    this.iWidth = this.imgOriginalWidth * this.imgWidthPercent;
    const margin = this.margin; // the default dialog padding
    if (this.iWidth + margin <= this.scrWidth) {
      this.dialogWidth = this.iWidth + margin;
    }else{
      this.dialogWidth = this.scrWidth;
    }

    // console.log(this.img.nativeElement.naturalWidth, this.img.nativeElement.naturalHeight,
    //   this.img.nativeElement.width, this.img.nativeElement.height, this.iWidth, this.imgWidthPercent);

  }

  public onLoad(): void {
    this.imageLoaded = true;
    this.imgOriginalWidth = this.img.nativeElement.naturalWidth;
    this.imgOriginalHeight = this.img.nativeElement.naturalHeight;
    if ( this.imgOriginalWidth > this.scrWidth) {
      this.iWidth = this.scrWidth - this.margin;
    }else{
      this.iWidth = this.imgOriginalWidth;
    }
    this.imgWidthPercent = this.iWidth   / this.imgOriginalWidth;
    this.resizeWindow();
  }

}