implementing lightbox move back to its place

frontend/app/gallery/gallery.component.html

@@ -1,6 +1,6 @@
 <app-frame>
     <md-content flex id="content">
-        <div *ngIf="currentDirectory" *ngFor="#directory of currentDirectory.directories">
+        <div *ngIf="currentDirectory" *ngFor="let directory of currentDirectory.directories">
             <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
         </div>
         <gallery-grid [directory]="currentDirectory"></gallery-grid>

frontend/app/gallery/grid/grid.gallery.component.html

@@ -1,19 +1,14 @@
 <div class="lightboxCss"
      #lightbox
-
+     (click)="hideLightBox()" >
-     (click)="hideLightBox($event)"
-     [style.top.px]="lightboxModel.top"
-     [style.left.px]="lightboxModel.left"
-     [style.width.px]="lightboxModel.image.width"
-     [style.height.px]="lightboxModel.image.height">
     <img [src]="lightboxModel.image.src" width="100%" height="100%"/>
 </div>
 
 <div #gridContainer *ngIf="directory" (window:resize)="onResize()" >
     <gallery-photo
-                    *ngFor="#gridPhoto of photosToRender"
+                    *ngFor="let gridPhoto of photosToRender"
                     *ngIf="gridPhoto"
-                    (click)="showLightBox($event,gridPhoto)"
+                    (click)="showLightBox(gridPhoto)"
                    [photo]="gridPhoto.photo"
                    [directory]="directory"
                    [style.width.px]="gridPhoto.renderWidth"

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

@@ -1,6 +1,8 @@
 ///<reference path="../../../browser.d.ts"/>
 
-import {Component, Input, ElementRef, OnChanges, ViewChild, ContentChild} from 'angular2/core';
+import {
+    Component, Input, ElementRef, OnChanges, ViewChild, ViewChildren, QueryList
+} from 'angular2/core';
 import {Directory} from "../../../../common/entities/Directory";
 import {Photo} from "../../../../common/entities/Photo";
 import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
@@ -18,6 +20,7 @@ export class GalleryGridComponent implements OnChanges{
 
     @ViewChild('lightbox') lightBoxDiv:ElementRef;
     @ViewChild('gridContainer') gridContainer:ElementRef;
+    @ViewChildren(GalleryPhotoComponent) photosRef:QueryList<GalleryPhotoComponent>;
     @Input() directory:Directory;
     photosToRender:Array<GridPhoto> = [];
     private IMAGE_MARGIN = 2;
@@ -66,35 +69,57 @@ export class GalleryGridComponent implements OnChanges{
     }
 
     public lightboxModel = {top:0,left:0, image:{width:0, height:0,src:""}, visible: false};
-    
+    private activePhoto:GalleryPhotoComponent  = null;
-    public showLightBox(event,gridPhoto:GridPhoto){
+    public showLightBox(gridPhoto:GridPhoto){
-        gridPhoto = Utils.clone(gridPhoto);
+        let galleryPhotoComponents = this.photosRef.toArray();
- 
+        let selectedPhoto:GalleryPhotoComponent = null;
-        this.lightboxModel.visible = true;
+        for(let i= 0; i < galleryPhotoComponents.length; i++){
+            if(galleryPhotoComponents[i].photo == gridPhoto.photo){
+                selectedPhoto = galleryPhotoComponents[i];
+                break;
+            }
+        }
+        if(selectedPhoto === null){
+            throw new Error("Can't find Photo");
+        }
+        this.activePhoto = selectedPhoto;        
   
         this.lightboxModel.image.src = Photo.getThumbnailPath(this.directory,gridPhoto.photo);
-        console.log( this.gridContainer);
+
+        let from = {"top":selectedPhoto.elementRef.nativeElement.firstChild.offsetTop+"px",
+                    "left":selectedPhoto.elementRef.nativeElement.firstChild.offsetLeft+"px",
+                    width:gridPhoto.renderWidth+"px",
+                    height: gridPhoto.renderHeight+"px"};
         
         let animation0 = this.animBuilder.css();
         animation0.setDuration(0);
-        animation0.setToStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px",
+        animation0.setToStyles(from);
-            "top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"});
         animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
             
             let animation = this.animBuilder.css();
             animation.setDuration(1000); 
-            animation.setFromStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px",
+            animation.setFromStyles(from);
-                                    "top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"});
+            animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
-            animation.setToStyles({height: "100%", width: "100%",
-                                    "top":"0px","left": "0px"});
             animation.start(this.lightBoxDiv.nativeElement);
         });
     }
 
-    public hideLightBox(event) {
+    public hideLightBox() {
-        this.lightBoxDiv.nativeElement.style.width = 0;
+        let to = {"top":this.activePhoto.elementRef.nativeElement.firstChild.offsetTop+"px",
+            "left":this.activePhoto.elementRef.nativeElement.firstChild.offsetLeft+"px",
+            width:this.activePhoto.elementRef.nativeElement.firstChild.width+"px",
+            height: this.activePhoto.elementRef.nativeElement.firstChild.height+"px"};
 
-        this.lightBoxDiv.nativeElement.style.height = 0;
+        let animation = this.animBuilder.css();
+        animation.setDuration(1000);
+        animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
+        animation.setToStyles(to);
+        animation.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
+            let animation2 = this.animBuilder.css();
+            animation2.setDuration(0);
+            animation2.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
+            animation2.start(this.lightBoxDiv.nativeElement);
+        });
     }
 
  

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

@@ -1,6 +1,6 @@
 ///<reference path="../../../browser.d.ts"/>
 
-import {Component, Input} from 'angular2/core';
+import {Component, Input, ElementRef} from 'angular2/core';
 import {Photo} from "../../../../common/entities/Photo";
 import {Directory} from "../../../../common/entities/Directory";
 import {Utils} from "../../../../common/Utils"; 
@@ -13,7 +13,7 @@ export class GalleryPhotoComponent{
     @Input() photo: Photo;
     @Input() directory: Directory;
     
-    constructor() {
+    constructor(public elementRef: ElementRef) {
     }
 
     getPhotoPath(){

package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/bpatrik/PiGallery2/issues"
   },
   "dependencies": {
-    "angular2": "^2.0.0-beta.16",
+    "angular2": "^2.0.0-beta.17",
     "body-parser": "^1.15.0",
     "core-js": "^2.3.0",
     "debug": "^2.2.0",
@@ -31,22 +31,22 @@
     "express-session": "^1.13.0",
     "html-webpack-plugin": "^2.16.0",
     "image-size": "^0.5.0",
-    "jimp": "^0.2.22",
+    "jimp": "^0.2.24",
     "karma-mocha-reporter": "^2.0.2",
     "mime": "^1.3.4",
-    "mongoose": "^4.4.13",
+    "mongoose": "^4.4.14",
     "morgan": "^1.7.0",
     "ng2-cookies": "^0.1.5",
     "ng2-material": "^0.3.7",
     "optimist": "^0.6.1",
     "protractor": "^3.3.0",
     "remap-istanbul": "^0.6.3",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "^5.0.0-beta.6",
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.2",
     "tslint": "^3.8.1",
     "tslint-loader": "^2.1.4",
-    "typescript": "^1.8.10",
+    "typescript": "^1.9.0",
     "typings": "^0.8.1",
     "webpack": "^1.13.0",
     "zone.js": "^0.6.12"