implementing controls to lightbox

frontend/app/gallery/lightbox/lightbox.gallery.component.css

@@ -22,41 +22,59 @@
     background-color: black;
 }
 
-.imgContainer img {
+
-    position: absolute;
-}
-.imgContainer{
-    justify-content: center; /* add to align horizontal */
-    align-items: center; /* add to align vertical */
-}
 
 .navigation-arrow {
-    font-size: x-large;
+    width: 30%;
-    width: 50%;
     height: 100%;
     position: static;
     display: inline-block;
     padding: 15px;
-    color: white;
+    cursor: pointer;
-    opacity: 0.4;
 }
 
 .navigation-arrow span {
-    top: 50%;
+    top: 43%;
 }
 
-.navigation-arrow:hover {
+#controllers-container {
-    opacity: 1.0;
+    z-index: 1100;
-}
-
-#navigation-arrow-container {
     width: 100%;
     height: 100%;
     left: 0;
     position: fixed;;
+    color: white;
+    font-size: x-large;
 }
 
 #rightArrow {
     float: right;
     text-align: right;
+}
+
+#controls {
+    top: 0;
+    height: initial;
+    text-align: right;
+    width: 100%;
+    padding: 5px;
+}
+
+#controls span {
+    margin-left: 2px;
+    margin-right: 2px;
+    color: white;
+    cursor: pointer;
+}
+
+.highlight {
+    opacity: 0.4;
+    transition: opacity .2s ease-out;
+    -moz-transition: opacity .2s ease-out;
+    -webkit-transition: opacity .2s ease-out;
+    -o-transition: opacity .2s ease-out;
+}
+
+.highlight:hover {
+    opacity: 1.0;
 }

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

@@ -1,27 +1,27 @@
-<div
+<div [hidden]="!activePhoto">
-        [hidden]="!activePhoto"
+
->
     <div class="blackCanvas" #blackCanvas>
-
     </div>
+
     <div class="lightbox" #lightbox>
-        <div #imgContainer class="imgContainer">
+        <gallery-lightbox-photo #imgContainer [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null">
-            <img *ngIf="activePhoto"
+        </gallery-lightbox-photo>
-                 [style.width.%]="imageSize.width"
+    </div>
-                 [style.height.%]="imageSize.height"
-                 [src]="activePhoto.gridPhoto.getThumbnailPath()"/>
 
-            <img *ngIf="activePhoto"
+
-                 [style.width.%]="imageSize.width"
+    <div id="controllers-container" #controls>
-                 [style.height.%]="imageSize.height"
+        <div id="controls">
-                 [src]="activePhoto.gridPhoto.getPhotoPath()"/>
+            <a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
+               [download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight"
+                                                                   title="download"></span></a>
+            <span class="glyphicon glyphicon-info-sign highlight" title="info"></span>
+            <span class="glyphicon glyphicon-fullscreen highlight" title="toggle fullscreen"></span>
+            <span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
         </div>
 
-        <div id="navigation-arrow-container">
+        <div class="navigation-arrow highlight" *ngIf="navigation.hasPrev" id="leftArrow" (click)="prevImage()"><span
-            <div class="navigation-arrow" id="leftArrow" (click)="prevImage()"><span
+                class="glyphicon glyphicon-chevron-left"></span></div>
-                    class="glyphicon glyphicon-chevron-left"></span></div>
+        <div class="navigation-arrow highlight" *ngIf="navigation.hasNext" id="rightArrow" (click)="nextImage()"><span
-            <div class="navigation-arrow" id="rightArrow" (click)="nextImage()"><span
+                class="glyphicon glyphicon-chevron-right"></span></div>
-                    class="glyphicon glyphicon-chevron-right"></span></div>
-        </div>
     </div>
 </div>

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -6,21 +6,25 @@ import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component.
 import {AnimationBuilder} from "@angular/platform-browser/src/animate/animation_builder";
 import {BrowserDomAdapter} from "@angular/platform-browser/src/browser_common";
 import {Dimension} from "../../model/IRenderable";
+import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.component";
 
 @Component({
     selector: 'gallery-lightbox',
     styleUrls: ['app/gallery/lightbox/lightbox.gallery.component.css'],
-    templateUrl: 'app/gallery/lightbox/lightbox.gallery.component.html'
+    templateUrl: 'app/gallery/lightbox/lightbox.gallery.component.html',
+    directives: [GalleryLightboxPhotoComponent]
 })
 export class GalleryLightboxComponent {
 
     @ViewChild('lightbox') lightBoxDiv:ElementRef;
     @ViewChild('blackCanvas') blackCanvasDiv:ElementRef;
-    @ViewChild('imgContainer') imgContainer:ElementRef;
+    @ViewChild('controls') controlsDiv:ElementRef;
+    @ViewChild('imgContainer') imgContainer:GalleryLightboxPhotoComponent;
 
 
     public imageSize = {width: "auto", height: "100"};
-    private activePhoto:GalleryPhotoComponent = null;
+    public navigation = {hasPrev: true, hasNext: true};
+    private activePhoto:GalleryPhotoComponent;
     public gridPhotoQL:QueryList<GalleryPhotoComponent>;
 
     private dom:BrowserDomAdapter;
@@ -38,12 +42,18 @@ export class GalleryLightboxComponent {
         for (let i = 0; i < pcList.length; i++) {
             if (pcList[i] === this.activePhoto && i + 1 < pcList.length) {
                 this.activePhoto = pcList[i + 1];
+                this.navigation.hasPrev = true;
+                if (i + 2 < pcList.length) {
+                    this.navigation.hasNext = true;
+                } else {
+                    this.navigation.hasNext = false;
+                }
 
                 let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
 
                 this.forceAnimateFrom(toImage,
                     {},
-                    this.imgContainer.nativeElement);
+                    this.imgContainer.nativeElement.nativeElement);
 
 
                 this.setImageSize();
@@ -57,12 +67,18 @@ export class GalleryLightboxComponent {
         for (let i = 0; i < pcList.length; i++) {
             if (pcList[i] === this.activePhoto && i > 0) {
                 this.activePhoto = pcList[i - 1];
+                this.navigation.hasNext = true;
+                if (i - 1 > 0) {
+                    this.navigation.hasPrev = true;
+                } else {
+                    this.navigation.hasPrev = false;
+                }
 
                 let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
 
                 this.forceAnimateFrom(toImage,
                     {},
-                    this.imgContainer.nativeElement);
+                    this.imgContainer.nativeElement.nativeElement);
 
                 this.setImageSize();
                 return;
@@ -81,7 +97,7 @@ export class GalleryLightboxComponent {
     }
 
     public show(photo:Photo) {
-        let selectedPhoto = this.findPhotoComponenet(photo);
+        let selectedPhoto = this.findPhotoComponent(photo);
         if (selectedPhoto === null) {
             throw new Error("Can't find Photo");
         }
@@ -100,7 +116,7 @@ export class GalleryLightboxComponent {
 
         this.forceAnimateFrom(fromImage,
             toImage,
-            this.imgContainer.nativeElement);
+            this.imgContainer.nativeElement.nativeElement);
 
         this.forceAnimateFrom(from.toStyle(),
             {height: "100%", width: "100%", "top": "0px", "left": "0px"},
@@ -111,6 +127,10 @@ export class GalleryLightboxComponent {
             {opacity: "1"},
             this.blackCanvasDiv.nativeElement);
 
+        this.forceAnimateFrom({opacity: "0", display: "block"},
+            {opacity: "1"},
+            this.controlsDiv.nativeElement);
+
     }
 
     public hide() {
@@ -134,18 +154,23 @@ export class GalleryLightboxComponent {
             this.blackCanvasDiv.nativeElement,
             {display: "none"});
 
+        this.forceAnimateTo({opacity: "1.0", display: "block"},
+            {opacity: "0.0", display: "block"},
+            this.controlsDiv.nativeElement,
+            {display: "none"});
+
 
         let fromImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
         let toImage = {width: to.width + "px", height: to.height + "px", top: "0px", left: "0px"};
 
         this.forceAnimateTo(fromImage,
             toImage,
-            this.imgContainer.nativeElement);
+            this.imgContainer.nativeElement.nativeElement);
        
 
     }
 
-    private findPhotoComponenet(photo) {
+    private findPhotoComponent(photo) {
         let galleryPhotoComponents = this.gridPhotoQL.toArray();
         let selectedPhoto:GalleryPhotoComponent = null;
         for (let i = 0; i < galleryPhotoComponents.length; i++) {
@@ -189,19 +214,7 @@ export class GalleryLightboxComponent {
         });
     }
 
-    getPhotoPath() {
-        if (!this.activePhoto) {
-            return "";
-        }
-        return this.activePhoto.gridPhoto.getPhotoPath();
-    }
 
-    getThumbnailPath() {
-        if (!this.activePhoto) {
-            return "";
-        }
-        return this.activePhoto.gridPhoto.getThumbnailPath();
-    }
 
     private getBodyScrollTop() {
         return this.dom.getProperty(this.dom.query('body'), 'scrollTop');

frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.css

@@ -0,0 +1,9 @@
+.imgContainer img {
+    position: absolute;
+}
+
+.imgContainer {
+    justify-content: center; /* add to align horizontal */
+    align-items: center; /* add to align vertical */
+}
+

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

@@ -0,0 +1,13 @@
+<div class="imgContainer" #imgContainer>
+    <img *ngIf="gridPhoto"
+         [style.width.%]="imageSize.width"
+         [style.height.%]="imageSize.height"
+         [src]="gridPhoto.getThumbnailPath()"/>
+
+    <img *ngIf="gridPhoto"
+         [style.width.%]="imageSize.width"
+         [style.height.%]="imageSize.height"
+         [src]="gridPhoto.getPhotoPath()"/>
+</div>
+
+

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

@@ -0,0 +1,41 @@
+///<reference path="../../../../browser.d.ts"/>
+
+import {Component, OnChanges, Input, ViewChild, ElementRef} from "@angular/core";
+import {GridPhoto} from "../../grid/GridPhoto";
+
+@Component({
+    selector: 'gallery-lightbox-photo',
+    styleUrls: ['app/gallery/lightbox/photo/photo.lightbox.gallery.component.css'],
+    templateUrl: 'app/gallery/lightbox/photo/photo.lightbox.gallery.component.html'
+})
+export class GalleryLightboxPhotoComponent implements OnChanges {
+
+    @Input() gridPhoto:GridPhoto;
+
+    public imageSize = {width: "auto", height: "100"};
+    @ViewChild('imgContainer') nativeElement:ElementRef;
+
+
+    constructor() {
+    }
+
+    ngOnChanges() {
+        this.setImageSize();
+    }
+
+    private setImageSize() {
+        if (!this.gridPhoto) {
+            return;
+        }
+
+        if (this.gridPhoto.photo.metadata.size.height > this.gridPhoto.photo.metadata.size.width) {
+            this.imageSize.height = "100";
+            this.imageSize.width = null;
+        } else {
+            this.imageSize.height = null;
+            this.imageSize.width = "100";
+        }
+    }
+
+}
+