1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
pigallery2/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
2016-12-30 11:58:04 +01:00

175 lines
5.6 KiB
TypeScript

import {Component, Input, ElementRef, ViewChild, OnInit, AfterViewInit, OnDestroy} from "@angular/core";
import {IRenderable, Dimension} from "../../../model/IRenderable";
import {GridPhoto} from "../GridPhoto";
import {SearchTypes} from "../../../../../common/entities/AutoCompleteItem";
import {RouterLink} from "@angular/router";
import {Config} from "../../../config/Config";
import {
ThumbnailLoaderService,
ThumbnailTaskEntity,
ThumbnailLoadingListener,
ThumbnailLoadingPriority
} from "../thumnailLoader.service";
@Component({
selector: 'gallery-grid-photo',
templateUrl: 'app/gallery/grid/photo/photo.grid.gallery.component.html',
styleUrls: ['app/gallery/grid/photo/photo.grid.gallery.component.css'],
providers: [RouterLink],
})
export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit, OnDestroy {
@Input() gridPhoto: GridPhoto;
@ViewChild("img") imageRef: ElementRef;
@ViewChild("info") infoDiv: ElementRef;
@ViewChild("photoContainer") container: ElementRef;
image = {
src: '',
show: false
};
loading = {
animate: false,
show: true
};
thumbnailTask: ThumbnailTaskEntity = null;
infoStyle = {
height: 0,
background: "rgba(0,0,0,0.0)"
};
SearchTypes: any = [];
searchEnabled: boolean = true;
wasInView: boolean = null;
constructor(private thumbnailService: ThumbnailLoaderService) {
this.SearchTypes = SearchTypes;
this.searchEnabled = Config.Client.Search.searchEnabled;
}
ngOnInit() {
this.loading.show = true;
//set up befoar 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() {
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() {
if (this.thumbnailTask != null) {
let isInView = this.isInView();
if (this.wasInView != isInView) {
this.wasInView = isInView;
if (isInView === true) {
if (this.gridPhoto.isReplacementThumbnailAvailable()) {
this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
} else {
this.thumbnailTask.priority = ThumbnailLoadingPriority.high;
}
} else {
if (this.gridPhoto.isReplacementThumbnailAvailable()) {
this.thumbnailTask.priority = ThumbnailLoadingPriority.low;
} else {
this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
}
}
}
}
}
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
};
}
}