lightbox draft implemented

common/entities/Photo.ts

@@ -1,4 +1,13 @@
+import {Utils} from "../Utils";
+import {Directory} from "./Directory";
 export class Photo {
     constructor(public id:number, public name:string, public width:number, public height:number) {
     }
+
+    public static getThumbnailPath(directory:Directory,photo:Photo){
+        return Utils.concatUrls("/api/gallery",directory.path,directory.name,photo.name,"thumbnail");
+    }
+    public static  getPhotoPath(directory:Directory,photo:Photo){
+        return Utils.concatUrls("/api/gallery",directory.path,directory.name,photo.name);
+    }
 }

frontend/app/admin/newuser/new.user.admin.component.ts

@@ -1,17 +1,16 @@
 
 import {Component} from 'angular2/core';   
-import {MATERIAL_DIRECTIVES} from "ng2-material/all"; 
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
-import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
+import {MdDialogRef} from "ng2-material/components/dialog/dialog_ref";
  
 @Component({
     selector: 'admin-new-user',
     templateUrl: 'app/admin/newuser/new.user.admin.component.html',
     styleUrls:['app/admin/newuser/new.user.admin.component.css'],
-    directives:[MATERIAL_DIRECTIVES],
+    directives:[MATERIAL_DIRECTIVES]
-    providers:[MATERIAL_BROWSER_PROVIDERS]
 })
 export class NewUserComponent{
-    constructor() {
+    constructor(private dialog: MdDialogRef) {
     } 
 
 }

frontend/app/gallery/grid/grid.gallery.component.css

@@ -4,4 +4,14 @@ div {
 gallery-photo {
   /*  display: inline-block;
     overflow: hidden;*/
+    cursor: pointer;
+}
+.lightboxCss{
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 0px; /* Full width */
+    height: 0px; /* Full height */
+    background-color: #000066;
 }

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

@@ -1,13 +1,25 @@
-<div *ngIf="directory" (window:resize)="onResize()" >
+<div class="lightboxCss"
+     #lightbox
+
+     (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="#gridPhoto of photosToRender"
                     *ngIf="gridPhoto"
+                    (click)="showLightBox($event,gridPhoto)"
                    [photo]="gridPhoto.photo"
                    [directory]="directory"
                    [style.width.px]="gridPhoto.renderWidth"
                    [style.height.px]="gridPhoto.renderHeight"
-                    [style.marginLeft.px]="IMAGE_MARGIN"
+                   [style.marginLeft.px]="IMAGE_MARGIN"
-                    [style.marginRight.px]="IMAGE_MARGIN">
+                   [style.marginRight.px]="IMAGE_MARGIN">
 
     </gallery-photo>
 </div>

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

@@ -1,10 +1,12 @@
 ///<reference path="../../../browser.d.ts"/>
 
-import {Component, Input,  ElementRef, OnChanges} from 'angular2/core';
+import {Component, Input, ElementRef, OnChanges, ViewChild, ContentChild} from 'angular2/core';
 import {Directory} from "../../../../common/entities/Directory";
 import {Photo} from "../../../../common/entities/Photo";
 import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
 import {GridRowBuilder} from "./GridRowBuilder";
+import {AnimationBuilder} from "angular2/animate";
+import {Utils} from "../../../../common/Utils";
 
 @Component({
     selector: 'gallery-grid',
@@ -13,7 +15,9 @@ import {GridRowBuilder} from "./GridRowBuilder";
     directives:[GalleryPhotoComponent]
 })
 export class GalleryGridComponent implements OnChanges{
-    
+
+    @ViewChild('lightbox') lightBoxDiv:ElementRef;
+    @ViewChild('gridContainer') gridContainer:ElementRef;
     @Input() directory:Directory;
     photosToRender:Array<GridPhoto> = [];
     private IMAGE_MARGIN = 2;
@@ -21,7 +25,7 @@ export class GalleryGridComponent implements OnChanges{
     private MIN_ROW_COUNT = 2;
     private MAX_ROW_COUNT = 5;
     
-    constructor(private elementRef: ElementRef) {
+    constructor(private elementRef: ElementRef,private animBuilder: AnimationBuilder) {
     }
 
     ngOnChanges(){
@@ -45,7 +49,7 @@ export class GalleryGridComponent implements OnChanges{
              let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
 
              photoRowBuilder.getPhotoRow().forEach((photo) => {
-                 let imageWidth = imageHeight * (photo.width / photo.height);
+                 let imageWidth = imageHeight * (photo.width / photo.height); 
                  this.photosToRender.push(new GridPhoto(photo,imageWidth,imageHeight));
              });
 
@@ -58,11 +62,39 @@ export class GalleryGridComponent implements OnChanges{
     }
     
     private getContainerWidth(): number{
-        if(typeof this.elementRef.nativeElement.firstElementChild === 'undefined' || 
+        return this.gridContainer.nativeElement.clientWidth;
-            this.elementRef.nativeElement.firstElementChild  === null){
+    }
-            return 0;
+
-        }
+    public lightboxModel = {top:0,left:0, image:{width:0, height:0,src:""}, visible: false};
-        return this.elementRef.nativeElement.firstElementChild.clientWidth;
+    
+    public showLightBox(event,gridPhoto:GridPhoto){
+        gridPhoto = Utils.clone(gridPhoto);
+ 
+        this.lightboxModel.visible = true;
+
+        this.lightboxModel.image.src = Photo.getThumbnailPath(this.directory,gridPhoto.photo);
+        console.log( this.gridContainer);
+
+        let animation0 = this.animBuilder.css();
+        animation0.setDuration(0);
+        animation0.setToStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px",
+            "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",
+                                    "top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"});
+            animation.setToStyles({height: "100%", width: "100%",
+                                    "top":"0px","left": "0px"});
+            animation.start(this.lightBoxDiv.nativeElement);
+        });
+    }
+
+    public hideLightBox(event) {
+        this.lightBoxDiv.nativeElement.style.width = 0;
+
+        this.lightBoxDiv.nativeElement.style.height = 0;
     }
 
  

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

@@ -19,6 +19,8 @@ export class GalleryPhotoComponent{
     getPhotoPath(){
         return Utils.concatUrls("/api/gallery",this.directory.path,this.directory.name,this.photo.name,"thumbnail");
     }
+
+ 
     
 }
 

frontend/app/model/network.service.ts

@@ -3,6 +3,7 @@
 import {Http, Headers, RequestOptions, Response} from "angular2/http";
 import {Message} from "../../../common/entities/Message";
 import "rxjs/Rx";
+import {Utils} from "../../../common/Utils";
 
 export class NetworkService{
 

frontend/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
         library: ['peer']
     },
     // Turn on sourcemaps
-    devtool: 'source-map',
+    //devtool: 'source-map',
     resolve: {
         extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],