2016-07-06 12:53:49 +02:00
|
|
|
import {Component, QueryList, Output, EventEmitter, HostListener, ElementRef, ViewChild} from "@angular/core";
|
2016-12-27 21:55:51 +02:00
|
|
|
import {PhotoDTO} from "../../../../common/entities/PhotoDTO";
|
2016-12-27 00:36:38 +02:00
|
|
|
import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component";
|
2016-04-30 21:36:24 +02:00
|
|
|
import {Dimension} from "../../model/IRenderable";
|
2016-07-06 12:53:49 +02:00
|
|
|
import {FullScreenService} from "../fullscreen.service";
|
2016-04-30 18:01:54 +02:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'gallery-lightbox',
|
|
|
|
styleUrls: ['app/gallery/lightbox/lightbox.gallery.component.css'],
|
2016-05-13 14:27:00 +02:00
|
|
|
templateUrl: 'app/gallery/lightbox/lightbox.gallery.component.html',
|
2016-04-30 18:01:54 +02:00
|
|
|
})
|
2016-04-30 21:36:24 +02:00
|
|
|
export class GalleryLightboxComponent {
|
2016-07-04 16:58:10 +02:00
|
|
|
@Output('onLastElement') onLastElement = new EventEmitter();
|
2016-04-30 18:01:54 +02:00
|
|
|
|
2016-05-13 14:27:00 +02:00
|
|
|
public navigation = {hasPrev: true, hasNext: true};
|
2016-12-30 12:58:04 +02:00
|
|
|
public photoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
|
|
|
|
public lightboxDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
|
|
|
|
private transition: string = "";
|
|
|
|
public blackCanvasOpacity: any = 0;
|
2016-07-04 16:58:10 +02:00
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
private activePhoto: GalleryPhotoComponent;
|
|
|
|
public gridPhotoQL: QueryList<GalleryPhotoComponent>;
|
2016-04-30 18:01:54 +02:00
|
|
|
|
2016-07-05 12:55:47 +02:00
|
|
|
private visible = false;
|
2016-04-30 21:36:24 +02:00
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
@ViewChild("root") elementRef: ElementRef;
|
2016-04-30 21:36:24 +02:00
|
|
|
|
2016-07-06 12:53:49 +02:00
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
constructor(private fullScreenService: FullScreenService) {
|
2016-04-30 18:33:07 +02:00
|
|
|
|
2016-04-30 21:36:24 +02:00
|
|
|
|
2016-04-30 18:01:54 +02:00
|
|
|
}
|
|
|
|
|
2016-05-12 23:00:38 +02:00
|
|
|
public nextImage() {
|
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
this.disableAnimation();
|
2016-05-12 23:00:38 +02:00
|
|
|
let pcList = this.gridPhotoQL.toArray();
|
|
|
|
for (let i = 0; i < pcList.length; i++) {
|
2016-07-05 12:55:47 +02:00
|
|
|
if (pcList[i] === this.activePhoto) {
|
|
|
|
if (i + 1 < pcList.length) {
|
|
|
|
this.showPhoto(pcList[i + 1]);
|
2016-07-04 16:58:10 +02:00
|
|
|
|
2016-07-05 12:55:47 +02:00
|
|
|
if (i + 3 === pcList.length) {
|
|
|
|
this.onLastElement.emit({}); //trigger to render more photos if there are
|
|
|
|
}
|
|
|
|
}
|
2016-05-12 23:00:38 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
public prevImage() {
|
2016-12-30 12:58:04 +02:00
|
|
|
this.disableAnimation();
|
2016-05-12 23:00:38 +02:00
|
|
|
let pcList = this.gridPhotoQL.toArray();
|
|
|
|
for (let i = 0; i < pcList.length; i++) {
|
2016-07-05 12:55:47 +02:00
|
|
|
if (pcList[i] === this.activePhoto) {
|
|
|
|
if (i > 0) {
|
|
|
|
this.showPhoto(pcList[i - 1]);
|
|
|
|
}
|
2016-05-12 23:00:38 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
private showPhoto(photoComponent: GalleryPhotoComponent) {
|
2016-12-30 12:58:04 +02:00
|
|
|
let pcList = this.gridPhotoQL.toArray();
|
2016-07-04 22:10:30 +02:00
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
let index = pcList.indexOf(photoComponent);
|
|
|
|
if (index == -1) {
|
|
|
|
throw new Error("Can't find the photo");
|
|
|
|
}
|
2016-07-04 22:10:30 +02:00
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
this.photoDimension = this.calcLightBoxPhotoDimension(photoComponent.gridPhoto.photo);
|
|
|
|
this.navigation.hasPrev = index > 0;
|
|
|
|
this.navigation.hasNext = index + 1 < pcList.length;
|
|
|
|
this.activePhoto = photoComponent;
|
2016-07-04 22:10:30 +02:00
|
|
|
}
|
|
|
|
|
2016-12-27 21:55:51 +02:00
|
|
|
public show(photo: PhotoDTO) {
|
2016-12-30 12:58:04 +02:00
|
|
|
this.enableAnimation();
|
2016-07-05 12:55:47 +02:00
|
|
|
this.visible = true;
|
2016-05-13 14:27:00 +02:00
|
|
|
let selectedPhoto = this.findPhotoComponent(photo);
|
2016-04-30 21:36:24 +02:00
|
|
|
if (selectedPhoto === null) {
|
2016-12-30 12:58:04 +02:00
|
|
|
throw new Error("Can't find Photo");
|
2016-04-30 18:01:54 +02:00
|
|
|
}
|
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
this.lightboxDimension = selectedPhoto.getDimension();
|
|
|
|
this.lightboxDimension.top -= this.getBodyScrollTop();
|
|
|
|
this.blackCanvasOpacity = 0;
|
|
|
|
this.photoDimension = selectedPhoto.getDimension();
|
2016-07-05 12:55:47 +02:00
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
|
2016-12-30 12:58:04 +02:00
|
|
|
|
|
|
|
setImmediate(() => {
|
|
|
|
this.lightboxDimension = <Dimension>{
|
|
|
|
top: 0,
|
|
|
|
left: 0,
|
|
|
|
width: this.getScreenWidth(),
|
|
|
|
height: this.getScreenHeight()
|
|
|
|
};
|
|
|
|
this.blackCanvasOpacity = 1.0;
|
|
|
|
this.showPhoto(selectedPhoto);
|
|
|
|
});
|
2016-04-30 18:01:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public hide() {
|
2016-12-30 12:58:04 +02:00
|
|
|
this.enableAnimation();
|
2016-07-06 12:53:49 +02:00
|
|
|
this.fullScreenService.exitFullScreen();
|
2016-04-30 18:01:54 +02:00
|
|
|
let to = this.activePhoto.getDimension();
|
2016-07-04 16:58:10 +02:00
|
|
|
|
2016-05-13 21:40:04 +02:00
|
|
|
//iff target image out of screen -> scroll to there
|
|
|
|
if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
|
|
|
|
this.setBodyScrollTop(to.top);
|
|
|
|
}
|
2016-04-30 21:36:24 +02:00
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
this.lightboxDimension = this.activePhoto.getDimension();
|
|
|
|
this.lightboxDimension.top -= this.getBodyScrollTop();
|
|
|
|
this.blackCanvasOpacity = 0;
|
|
|
|
this.photoDimension = this.activePhoto.getDimension();
|
|
|
|
setTimeout(() => {
|
|
|
|
this.visible = false;
|
|
|
|
this.activePhoto = null;
|
|
|
|
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
|
|
|
|
}, 500);
|
2016-06-16 16:24:47 +02:00
|
|
|
|
2016-04-30 21:36:24 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2016-07-06 12:53:49 +02:00
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
private findPhotoComponent(photo: any) {
|
2016-04-30 21:36:24 +02:00
|
|
|
let galleryPhotoComponents = this.gridPhotoQL.toArray();
|
|
|
|
for (let i = 0; i < galleryPhotoComponents.length; i++) {
|
2016-05-12 11:00:46 +02:00
|
|
|
if (galleryPhotoComponents[i].gridPhoto.photo == photo) {
|
2016-07-04 22:10:30 +02:00
|
|
|
return galleryPhotoComponents[i];
|
2016-04-30 21:36:24 +02:00
|
|
|
}
|
|
|
|
}
|
2016-07-04 22:10:30 +02:00
|
|
|
return null;
|
2016-04-30 21:36:24 +02:00
|
|
|
}
|
|
|
|
|
2016-07-05 13:33:09 +02:00
|
|
|
@HostListener('window:keydown', ['$event'])
|
2016-12-27 00:36:38 +02:00
|
|
|
onKeyPress(e: KeyboardEvent) {
|
|
|
|
let event: KeyboardEvent = window.event ? <any>window.event : e;
|
2016-07-05 12:55:47 +02:00
|
|
|
switch (event.keyCode) {
|
|
|
|
case 37:
|
|
|
|
this.prevImage();
|
|
|
|
break;
|
|
|
|
case 39:
|
|
|
|
this.nextImage();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2016-04-30 18:33:07 +02:00
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
private enableAnimation() {
|
|
|
|
this.transition = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
private disableAnimation() {
|
|
|
|
this.transition = "initial";
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
private getBodyScrollTop(): number {
|
2016-07-05 12:34:11 +02:00
|
|
|
return window.scrollY;
|
2016-04-30 21:36:24 +02:00
|
|
|
}
|
|
|
|
|
2016-12-27 00:36:38 +02:00
|
|
|
private setBodyScrollTop(value: number) {
|
2016-07-05 12:34:11 +02:00
|
|
|
window.scrollTo(window.scrollX, value);
|
2016-05-13 21:40:04 +02:00
|
|
|
}
|
|
|
|
|
2016-04-30 21:36:24 +02:00
|
|
|
private getScreenWidth() {
|
|
|
|
return window.innerWidth;
|
|
|
|
}
|
|
|
|
|
|
|
|
private getScreenHeight() {
|
|
|
|
return window.innerHeight;
|
2016-04-30 18:01:54 +02:00
|
|
|
}
|
2016-04-30 21:36:24 +02:00
|
|
|
|
2016-05-09 17:04:56 +02:00
|
|
|
|
2016-12-27 21:55:51 +02:00
|
|
|
private calcLightBoxPhotoDimension(photo: PhotoDTO): Dimension {
|
2016-04-30 21:36:24 +02:00
|
|
|
let width = 0;
|
|
|
|
let height = 0;
|
2016-05-12 18:24:26 +02:00
|
|
|
if (photo.metadata.size.height > photo.metadata.size.width) {
|
|
|
|
width = Math.round(photo.metadata.size.width * (this.getScreenHeight() / photo.metadata.size.height));
|
2016-05-09 17:04:56 +02:00
|
|
|
height = this.getScreenHeight();
|
2016-04-30 21:36:24 +02:00
|
|
|
} else {
|
2016-05-09 17:04:56 +02:00
|
|
|
width = this.getScreenWidth();
|
2016-05-12 18:24:26 +02:00
|
|
|
height = Math.round(photo.metadata.size.height * (this.getScreenWidth() / photo.metadata.size.width));
|
2016-04-30 21:36:24 +02:00
|
|
|
}
|
|
|
|
let top = (this.getScreenHeight() / 2 - height / 2);
|
|
|
|
let left = (this.getScreenWidth() / 2 - width / 2);
|
|
|
|
|
2016-12-30 12:58:04 +02:00
|
|
|
return <Dimension>{top: top, left: left, width: width, height: height};
|
2016-04-30 18:01:54 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|