pigallery2/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {Dimension, IRenderable} from "../../../model/IRenderable";
import {GridPhoto} from "../GridPhoto";
import {SearchTypes} from "../../../../../common/entities/AutoCompleteItem";
import {RouterLink} from "@angular/router";
import {Thumbnail, ThumbnailManagerService} from "../../thumnailManager.service";
import {Config} from "../../../../../common/config/public/Config";

@Component({
  selector: 'gallery-grid-photo',
  templateUrl: './photo.grid.gallery.component.html',
  styleUrls: ['./photo.grid.gallery.component.css'],
  providers: [RouterLink],
})
export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
  @Input() gridPhoto: GridPhoto;
  @ViewChild("img") imageRef: ElementRef;
  @ViewChild("info") infoDiv: ElementRef;
  @ViewChild("photoContainer") container: ElementRef;

  thumbnail: Thumbnail;
  /*
   image = {
   src: '',
   show: false
   };

   loading = {
   animate: false,
   show: true
   };
   */

  infoStyle = {
    height: 0,
    background: "rgba(0,0,0,0.0)"
  };

  SearchTypes: any = [];
  searchEnabled: boolean = true;

  wasInView: boolean = null;

  constructor(private thumbnailService: ThumbnailManagerService) {
    this.SearchTypes = SearchTypes;
    this.searchEnabled = Config.Client.Search.searchEnabled;
  }

  ngOnInit() {
    this.thumbnail = this.thumbnailService.getThumbnail(this.gridPhoto);
    /*  this.loading.show = true;
     //set up before adding task to thumbnail generator
     if (this.gridPhoto.isThumbnailAvailable()) {
     this.image.src = this.gridPhoto.getThumbnailPath();
     this.image.show = true;
     } else if (this.gridPhoto.isReplacementThumbnailAvailable()) {
     this.image.src = this.gridPhoto.getReplacementThumbnailPath();
     this.image.show = true;
     }*/

  }

  /*
   ngAfterViewInit() {
   //schedule change after Angular checks the model
   if (!this.gridPhoto.isThumbnailAvailable()) {
   setImmediate(() => {

   let listener: ThumbnailLoadingListener = {
   onStartedLoading: () => { //onLoadStarted
   this.loading.animate = true;
   },
   onLoad: () => {//onLoaded
   this.image.src = this.gridPhoto.getThumbnailPath();
   this.image.show = true;
   this.loading.show = false;
   this.thumbnailTask = null;
   },
   onError: (error) => {//onError
   this.thumbnailTask = null;
   //TODO: handle error
   //TODO: not an error if its from cache
   console.error("something bad happened");
   console.error(error);
   }
   };
   if (this.gridPhoto.isReplacementThumbnailAvailable()) {
   this.thumbnailTask = this.thumbnailService.loadImage(this.gridPhoto, ThumbnailLoadingPriority.medium, listener);
   } else {
   this.thumbnailTask = this.thumbnailService.loadImage(this.gridPhoto, ThumbnailLoadingPriority.high, listener);
   }


   });
   }
   }*/

  ngOnDestroy() {
    this.thumbnail.destroy();
    /*
     if (this.thumbnailTask != null) {
     this.thumbnailService.removeTask(this.thumbnailTask);
     this.thumbnailTask = null;
     }*/
  }


  isInView(): boolean {
    return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
      && document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop;
  }


  onScroll() {
    let isInView = this.isInView();
    if (this.wasInView != isInView) {
      this.wasInView = isInView;
      this.thumbnail.Visible = isInView;
    }
  }

  getPositionText(): string {
    if (!this.gridPhoto) {
      return ""
    }
    return this.gridPhoto.photo.metadata.positionData.city ||
      this.gridPhoto.photo.metadata.positionData.state ||
      this.gridPhoto.photo.metadata.positionData.country;
  }

  hover() {
    this.infoStyle.height = this.infoDiv.nativeElement.clientHeight;
    this.infoStyle.background = "rgba(0,0,0,0.8)";

  }

  mouseOut() {
    this.infoStyle.height = 0;
    this.infoStyle.background = "rgba(0,0,0,0.0)";

  }

  /*
   onImageLoad() {
   this.loading.show = false;
   }
   */
  public getDimension(): Dimension {
    return <Dimension>{
      top: this.imageRef.nativeElement.offsetTop,
      left: this.imageRef.nativeElement.offsetLeft,
      width: this.imageRef.nativeElement.width,
      height: this.imageRef.nativeElement.height
    };
  }

}