implementing lightbox image navigation

backend/middlewares/GalleryMWs.ts

@@ -52,6 +52,11 @@ export class GalleryMWs {
             return next();
         }
 
+        //check if thumbnail already exist
+        if (fs.existsSync(fullImagePath) === false) {
+            return next(new Error(ErrorCodes.GENERAL_ERROR, "no such file :" + fullImagePath));
+        }
+
         req.resultPipe = fullImagePath;
         return next();
     }

backend/routes/GalleryRouter.ts

@@ -19,7 +19,7 @@ export class GalleryRouter {
 
     private addDirectoryList() {
         this.app.get(["/api/gallery/content/:directory(*)", "/api/gallery/", "/api/gallery//"],
-            // AuthenticationMWs.authenticate,
+            AuthenticationMWs.authenticate,
             GalleryMWs.listDirectory,
             RenderingMWs.renderResult
         );

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

@@ -21,12 +21,42 @@
     height: 100%; /* Full height */
     background-color: black;
 }
-img {
+
-    width: 100%;
+.imgContainer img {
-    height: 100%;
+    position: absolute;
 }
 .imgContainer{
     justify-content: center; /* add to align horizontal */
     align-items: center; /* add to align vertical */
+}
 
+.navigation-arrow {
+    font-size: x-large;
+    width: 50%;
+    height: 100%;
+    position: static;
+    display: inline-block;
+    padding: 15px;
+    color: white;
+    opacity: 0.4;
+}
+
+.navigation-arrow span {
+    top: 50%;
+}
+
+.navigation-arrow:hover {
+    opacity: 1.0;
+}
+
+#navigation-arrow-container {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    position: fixed;;
+}
+
+#rightArrow {
+    float: right;
+    text-align: right;
 }

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

@@ -1,15 +1,27 @@
 <div
         [hidden]="!activePhoto"
-        (click)="hide()">
+>
-    <div class="blackCanvas"
+    <div class="blackCanvas" #blackCanvas>
-         #blackCanvas>
 
     </div>
-    <div class="lightbox"
+    <div class="lightbox" #lightbox>
-         #lightbox>
+        <div #imgContainer class="imgContainer">
-         <div   class="imgContainer">
+            <img *ngIf="activePhoto"
-            <img #thImage [src]="getThumbnailPath()" />
+                 [style.width.%]="imageSize.width"
-            <img #image [src]="getPhotoPath()" style="position:absolute;"/>
+                 [style.height.%]="imageSize.height"
-          </div>
+                 [src]="activePhoto.gridPhoto.getThumbnailPath()"/>
-     </div>
+
- </div>
+            <img *ngIf="activePhoto"
+                 [style.width.%]="imageSize.width"
+                 [style.height.%]="imageSize.height"
+                 [src]="activePhoto.gridPhoto.getPhotoPath()"/>
+        </div>
+
+        <div id="navigation-arrow-container">
+            <div class="navigation-arrow" id="leftArrow" (click)="prevImage()"><span
+                    class="glyphicon glyphicon-chevron-left"></span></div>
+            <div class="navigation-arrow" id="rightArrow" (click)="nextImage()"><span
+                    class="glyphicon glyphicon-chevron-right"></span></div>
+        </div>
+    </div>
+</div>

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

@@ -16,9 +16,10 @@ export class GalleryLightboxComponent {
 
     @ViewChild('lightbox') lightBoxDiv:ElementRef;
     @ViewChild('blackCanvas') blackCanvasDiv:ElementRef;
-    @ViewChild('thImage') thIMageImg:ElementRef;
+    @ViewChild('imgContainer') imgContainer:ElementRef;
-    @ViewChild('image') imageImg:ElementRef;
 
+
+    public imageSize = {width: "auto", height: "100"};
     private activePhoto:GalleryPhotoComponent = null;
     public gridPhotoQL:QueryList<GalleryPhotoComponent>;
 
@@ -31,6 +32,54 @@ export class GalleryLightboxComponent {
 
     }
 
+    public nextImage() {
+
+        let pcList = this.gridPhotoQL.toArray();
+        for (let i = 0; i < pcList.length; i++) {
+            if (pcList[i] === this.activePhoto && i + 1 < pcList.length) {
+                this.activePhoto = pcList[i + 1];
+
+                let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
+
+                this.forceAnimateFrom(toImage,
+                    {},
+                    this.imgContainer.nativeElement);
+
+
+                this.setImageSize();
+                return;
+            }
+        }
+    }
+
+    public prevImage() {
+        let pcList = this.gridPhotoQL.toArray();
+        for (let i = 0; i < pcList.length; i++) {
+            if (pcList[i] === this.activePhoto && i > 0) {
+                this.activePhoto = pcList[i - 1];
+
+                let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
+
+                this.forceAnimateFrom(toImage,
+                    {},
+                    this.imgContainer.nativeElement);
+
+                this.setImageSize();
+                return;
+            }
+        }
+    }
+
+    private setImageSize() {
+        if (this.activePhoto.gridPhoto.photo.metadata.size.height > this.activePhoto.gridPhoto.photo.metadata.size.width) {
+            this.imageSize.height = "100";
+            this.imageSize.width = null;
+        } else {
+            this.imageSize.height = null;
+            this.imageSize.width = "100";
+        }
+    }
+
     public show(photo:Photo) {
         let selectedPhoto = this.findPhotoComponenet(photo);
         if (selectedPhoto === null) {
@@ -39,6 +88,7 @@ export class GalleryLightboxComponent {
 
         this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden');
         this.activePhoto = selectedPhoto;
+        this.setImageSize();
 
 
         let from = this.activePhoto.getDimension();
@@ -50,11 +100,7 @@ export class GalleryLightboxComponent {
 
         this.forceAnimateFrom(fromImage,
             toImage,
-            this.thIMageImg.nativeElement);
+            this.imgContainer.nativeElement);
-
-        this.forceAnimateFrom(fromImage,
-            toImage,
-            this.imageImg.nativeElement);
 
         this.forceAnimateFrom(from.toStyle(),
             {height: "100%", width: "100%", "top": "0px", "left": "0px"},
@@ -94,11 +140,8 @@ export class GalleryLightboxComponent {
 
         this.forceAnimateTo(fromImage,
             toImage,
-            this.thIMageImg.nativeElement);
+            this.imgContainer.nativeElement);
-
+       
-        this.forceAnimateTo(fromImage,
-            toImage,
-            this.imageImg.nativeElement);
 
     }