implementing lightbox zoom animation

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());
         }
     }

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 <Dimension>{
+            top: this.imageRef.nativeElement.offsetTop,
+            left: this.imageRef.nativeElement.offsetLeft,
+            width: this.imageRef.nativeElement.width,
+            height: this.imageRef.nativeElement.height
+        };
     }
 
 }

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;
 }
 
 

frontend/app/gallery/lightbox/lightbox.gallery.component.html

@@ -1,14 +1,20 @@
 <div [hidden]="!visible" #root>
 
-    <div class="blackCanvas">
+    <div class="blackCanvas"
+         [style.opacity]="blackCanvasOpacity">
     </div>
 
-    <div class="lightbox">
+    <div class="lightbox"
+         [style.width.px]="lightboxDimension.width"
+         [style.height.px]="lightboxDimension.height"
+         [style.top.px]="lightboxDimension.top"
+         [style.left.px]="lightboxDimension.left">
         <gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
                                 [style.top.px]="photoDimension.top"
                                 [style.left.px]="photoDimension.left"
                                 [style.width.px]="photoDimension.width"
-                                [style.height.px]="photoDimension.height">
+                                [style.height.px]="photoDimension.height"
+                                [style.transition]="transition">
         </gallery-lightbox-photo>
     </div>
 

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 = <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;
 
     private activePhoto: GalleryPhotoComponent;
     public gridPhotoQL: QueryList<GalleryPhotoComponent>;
@@ -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 = <Dimension>{
+                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 <Dimension>{top: top, left: left, width: width, height: height};
     }
 }
 

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;
 }