From 827dd42418339ce573ca004bef213b2f609b1907 Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Fri, 30 Dec 2016 11:58:04 +0100 Subject: [PATCH] implementing lightbox zoom animation --- frontend/app/gallery/grid/GridPhoto.ts | 1 + .../photo/photo.grid.gallery.component.ts | 10 +-- .../lightbox/lightbox.gallery.component.css | 7 ++ .../lightbox/lightbox.gallery.component.html | 12 +++- .../lightbox/lightbox.gallery.component.ts | 71 ++++++++++++++----- frontend/app/model/IRenderable.ts | 22 ++---- 6 files changed, 80 insertions(+), 43 deletions(-) diff --git a/frontend/app/gallery/grid/GridPhoto.ts b/frontend/app/gallery/grid/GridPhoto.ts index a7241cb..f803685 100644 --- a/frontend/app/gallery/grid/GridPhoto.ts +++ b/frontend/app/gallery/grid/GridPhoto.ts @@ -12,6 +12,7 @@ export class GridPhoto { thumbnailLoaded() { if (!this.isThumbnailAvailable()) { + this.photo.readyThumbnails = this.photo.readyThumbnails || []; this.photo.readyThumbnails.push(this.getThumbnailSize()); } } diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts index 1be9c52..c1403dc 100644 --- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts +++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts @@ -162,10 +162,12 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit } public getDimension(): Dimension { - return new Dimension(this.imageRef.nativeElement.offsetTop, - this.imageRef.nativeElement.offsetLeft, - this.imageRef.nativeElement.width, - this.imageRef.nativeElement.height); + return { + top: this.imageRef.nativeElement.offsetTop, + left: this.imageRef.nativeElement.offsetLeft, + width: this.imageRef.nativeElement.width, + height: this.imageRef.nativeElement.height + }; } } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index d62e126..179d531 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -10,6 +10,12 @@ justify-content: center; /* add to align horizontal */ align-items: center; /* add to align vertical */ cursor: pointer; + transition: all 0.3s ease-in-out; +} + +gallery-lightbox-photo { + transition: all 0.3s ease-in-out; + overflow: hidden; } .blackCanvas{ @@ -20,6 +26,7 @@ width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: black; + transition: all 0.3s ease-in-out; } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index e732f11..6ed5280 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -1,14 +1,20 @@
-
+
-
+
+ [style.height.px]="photoDimension.height" + [style.transition]="transition">
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index b988a5c..4c3e1a0 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts @@ -13,7 +13,10 @@ export class GalleryLightboxComponent { @Output('onLastElement') onLastElement = new EventEmitter(); public navigation = {hasPrev: true, hasNext: true}; - public photoDimension: Dimension = new Dimension(0, 0, 0, 0); + public photoDimension: Dimension = {top: 0, left: 0, width: 0, height: 0}; + public lightboxDimension: Dimension = {top: 0, left: 0, width: 0, height: 0}; + private transition: string = ""; + public blackCanvasOpacity: any = 0; private activePhoto: GalleryPhotoComponent; public gridPhotoQL: QueryList; @@ -30,6 +33,7 @@ export class GalleryLightboxComponent { public nextImage() { + this.disableAnimation(); let pcList = this.gridPhotoQL.toArray(); for (let i = 0; i < pcList.length; i++) { if (pcList[i] === this.activePhoto) { @@ -46,6 +50,7 @@ export class GalleryLightboxComponent { } public prevImage() { + this.disableAnimation(); let pcList = this.gridPhotoQL.toArray(); for (let i = 0; i < pcList.length; i++) { if (pcList[i] === this.activePhoto) { @@ -59,37 +64,49 @@ export class GalleryLightboxComponent { private showPhoto(photoComponent: GalleryPhotoComponent) { - this.activePhoto = null; - setImmediate(() => { - let pcList = this.gridPhotoQL.toArray(); + let pcList = this.gridPhotoQL.toArray(); - let index = pcList.indexOf(photoComponent); - if (index == -1) { - throw new Error("Can't find the photo"); - } + let index = pcList.indexOf(photoComponent); + if (index == -1) { + throw new Error("Can't find the photo"); + } - this.photoDimension = this.calcLightBoxPhotoDimension(photoComponent.gridPhoto.photo); - this.navigation.hasPrev = index > 0; - this.navigation.hasNext = index + 1 < pcList.length; - this.activePhoto = photoComponent; - }); + this.photoDimension = this.calcLightBoxPhotoDimension(photoComponent.gridPhoto.photo); + this.navigation.hasPrev = index > 0; + this.navigation.hasNext = index + 1 < pcList.length; + this.activePhoto = photoComponent; } public show(photo: PhotoDTO) { + this.enableAnimation(); this.visible = true; let selectedPhoto = this.findPhotoComponent(photo); if (selectedPhoto === null) { - throw new Error("Can't find PhotoDTO"); + throw new Error("Can't find Photo"); } + this.lightboxDimension = selectedPhoto.getDimension(); + this.lightboxDimension.top -= this.getBodyScrollTop(); + this.blackCanvasOpacity = 0; + this.photoDimension = selectedPhoto.getDimension(); - this.showPhoto(selectedPhoto); document.getElementsByTagName('body')[0].style.overflow = 'hidden'; + + setImmediate(() => { + this.lightboxDimension = { + top: 0, + left: 0, + width: this.getScreenWidth(), + height: this.getScreenHeight() + }; + this.blackCanvasOpacity = 1.0; + this.showPhoto(selectedPhoto); + }); } public hide() { + this.enableAnimation(); this.fullScreenService.exitFullScreen(); - this.visible = false; let to = this.activePhoto.getDimension(); //iff target image out of screen -> scroll to there @@ -97,8 +114,15 @@ export class GalleryLightboxComponent { this.setBodyScrollTop(to.top); } - document.getElementsByTagName('body')[0].style.overflow = 'auto'; - this.activePhoto = null; + 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); } @@ -127,6 +151,15 @@ export class GalleryLightboxComponent { } } + private enableAnimation() { + this.transition = null; + } + + private disableAnimation() { + this.transition = "initial"; + } + + private getBodyScrollTop(): number { return window.scrollY; } @@ -157,7 +190,7 @@ export class GalleryLightboxComponent { let top = (this.getScreenHeight() / 2 - height / 2); let left = (this.getScreenWidth() / 2 - width / 2); - return new Dimension(top, left, width, height); + return {top: top, left: left, width: width, height: height}; } } diff --git a/frontend/app/model/IRenderable.ts b/frontend/app/model/IRenderable.ts index e067083..f015edb 100644 --- a/frontend/app/model/IRenderable.ts +++ b/frontend/app/model/IRenderable.ts @@ -2,21 +2,9 @@ export interface IRenderable { getDimension():Dimension; } -export class Dimension { - public top:number; - public left:number; - public width:number; - public height:number; - - - constructor(top:number, left:number, width:number, height:number) { - this.top = top; - this.left = left; - this.width = width; - this.height = height; - } - - public toStyle() { - return {height: this.height + "px", width: this.width + "px", top: this.top + "px", left: this.left + "px"} - } +export interface Dimension { + top: number; + left: number; + width: number; + height: number; }