implementing map lightbox

frontend/app/app.module.ts

@@ -28,6 +28,7 @@ import {GalleryComponent} from "./gallery/gallery.component";
 import {StringifyRole} from "./pipes/StringifyRolePipe";
 import {Config} from "./config/Config";
 import {GalleryMapComponent} from "./gallery/map/map.gallery.component";
+import {GalleryMapLightboxComponent} from "./gallery/map/lightbox/lightbox.map.gallery.component";
 
 @NgModule({
     imports: [
@@ -51,6 +52,7 @@ import {GalleryMapComponent} from "./gallery/map/map.gallery.component";
         GalleryDirectoryComponent,
         GalleryLightboxComponent,
         GalleryMapComponent,
+        GalleryMapLightboxComponent,
         FrameComponent,
         GallerySearchComponent,
         GalleryNavigatorComponent,

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

@@ -0,0 +1,65 @@
+.lightbox {
+    position: fixed; /* Stay in place */
+    z-index: 1100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: hidden;
+    display: flex; /* add */
+    justify-content: center; /* add to align horizontal */
+    align-items: center; /* add to align vertical */
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+}
+
+.sebm-google-map-container {
+    width: 100%;
+    height: 100%;
+}
+
+.blackCanvas {
+    position: fixed; /* Stay in place */
+    z-index: 1099; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    background-color: black;
+    transition: all 0.3s ease-in-out;
+}
+
+#controllers-container {
+    z-index: 1100;
+    right: 0;
+    top: 0;
+    position: fixed;
+}
+
+#controls {
+    top: 0;
+    height: initial;
+    text-align: right;
+    width: 100%;
+    padding: 5px;
+    font-size: large;
+}
+
+#controls span {
+    margin-left: 6px;
+    margin-right: 6px;
+    color: black;
+    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/map/lightbox/lightbox.map.gallery.component.html

@@ -0,0 +1,44 @@
+<div [hidden]="!visible" #root>
+
+
+    <div class="lightbox"
+         [style.width.px]="lightboxDimension.width"
+         [style.height.px]="lightboxDimension.height"
+         [style.top.px]="lightboxDimension.top"
+         [style.left.px]="lightboxDimension.left"
+         [style.opacity]="opacity">
+        <sebm-google-map
+                [style.width.px]="mapDimension.width"
+                [style.height.px]="mapDimension.height"
+                [zoom]="5"
+                [latitude]="mapCenter.latitude"
+                [longitude]="mapCenter.longitude">
+            <sebm-google-map-marker
+                    *ngFor="let photo of mapPhotos"
+                    [latitude]="photo.latitude"
+                    [longitude]="photo.longitude"
+                    [iconUrl]="photo.iconUrl">
+            </sebm-google-map-marker>
+        </sebm-google-map>
+    </div>
+
+
+    <div id="controllers-container" #controls>
+        <div id="controls">
+            <span>
+                <span class=" glyphicon glyphicon-resize-small highlight"
+                      *ngIf="fullScreenService.isFullScreenEnabled()"
+                      (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
+                </span>
+            <span>
+             <span class="glyphicon glyphicon-fullscreen highlight"
+                   *ngIf="!fullScreenService.isFullScreenEnabled()"
+                   (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
+                </span>
+            <span>
+             <span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
+             </span>
+        </div>
+
+    </div>
+</div>

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

@@ -0,0 +1,118 @@
+import {Component, Input, OnChanges, ElementRef, ViewChild} from "@angular/core";
+import {PhotoDTO} from "../../../../../common/entities/PhotoDTO";
+import {Dimension} from "../../../model/IRenderable";
+import {FullScreenService} from "../../fullscreen.service";
+import {Utils} from "../../../../../common/Utils";
+import {SebmGoogleMap} from "angular2-google-maps/core";
+
+@Component({
+    selector: 'gallery-map-lightbox',
+    styleUrls: ['app/gallery/map/lightbox/lightbox.map.gallery.component.css'],
+    templateUrl: 'app/gallery/map/lightbox/lightbox.map.gallery.component.html',
+})
+export class GalleryMapLightboxComponent implements OnChanges {
+
+    @Input() photos: Array<PhotoDTO>;
+    private startPosition = null;
+    public lightboxDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
+    public mapDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
+    private visible = false;
+    private opacity = 1.0;
+    mapPhotos: Array<{latitude: string, longitude: string, iconUrl}> = [];
+    mapCenter = {latitude: "0", longitude: "0"};
+
+    @ViewChild("root") elementRef: ElementRef;
+
+    @ViewChild(SebmGoogleMap) map: SebmGoogleMap;
+
+
+    constructor(private fullScreenService: FullScreenService) {
+
+
+    }
+
+//TODO: fix zooming
+    ngOnChanges() {
+        this.mapPhotos = this.photos.filter(p => {
+            return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData;
+        }).map(p => {
+            return {
+                latitude: p.metadata.positionData.GPSData.latitude,
+                longitude: p.metadata.positionData.GPSData.longitude,
+                iconUrl: Utils.concatUrls("/api/gallery/content/", p.directory.path, p.directory.name, p.name, "icon")
+            };
+        });
+
+        if (this.mapPhotos.length > 0) {
+            this.mapCenter = this.mapPhotos[0];
+        }
+
+
+    }
+
+    public show(position: Dimension) {
+        this.visible = true;
+        this.opacity = 1.0;
+        this.startPosition = position;
+        this.lightboxDimension = position;
+        this.lightboxDimension.top -= this.getBodyScrollTop();
+        this.mapDimension = <Dimension>{
+            top: 0,
+            left: 0,
+            width: this.getScreenWidth(),
+            height: this.getScreenHeight()
+        };
+        this.map.triggerResize();
+
+        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
+
+        setImmediate(() => {
+            this.lightboxDimension = <Dimension>{
+                top: 0,
+                left: 0,
+                width: this.getScreenWidth(),
+                height: this.getScreenHeight()
+            };
+        });
+    }
+
+    public hide() {
+        this.fullScreenService.exitFullScreen();
+        let to = this.startPosition;
+
+        //iff target image out of screen -> scroll to there
+        if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
+            this.setBodyScrollTop(to.top);
+        }
+
+        this.lightboxDimension = this.startPosition;
+        this.lightboxDimension.top -= this.getBodyScrollTop();
+        document.getElementsByTagName('body')[0].style.overflow = 'scroll';
+        this.opacity = 0.0;
+        setTimeout(() => {
+            this.visible = false;
+        }, 500);
+
+
+    }
+
+
+    private getBodyScrollTop(): number {
+        return window.scrollY;
+    }
+
+    private setBodyScrollTop(value: number) {
+        window.scrollTo(window.scrollX, value);
+    }
+
+    private getScreenWidth() {
+        return window.innerWidth;
+    }
+
+    private getScreenHeight() {
+        return window.innerHeight;
+    }
+
+
+}
+

frontend/app/gallery/map/map.gallery.component.css

@@ -1,4 +1,10 @@
 .sebm-google-map-container {
+    width: 100%;
+    height: 100%;
+}
+
+#map {
+
     width: 100%;
     height: 100%;
 }

frontend/app/gallery/map/map.gallery.component.html

@@ -1,15 +1,19 @@
+<gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
+<div id="map" #map>
 <sebm-google-map
+        (click)="click()"
         [disableDefaultUI]="true"
         [zoomControl]="false"
         [streetViewControl]="false"
+        [usePanning]="false"
+        [draggable]="false"
         [zoom]="0"
         [latitude]="mapCenter.latitude"
         [longitude]="mapCenter.longitude">
     <sebm-google-map-marker
-
             *ngFor="let photo of mapPhotos"
             [latitude]="photo.latitude"
-            [longitude]="photo.longitude"
+            [longitude]="photo.longitude">
-            [iconUrl]="photo.iconUrl">
     </sebm-google-map-marker>
-</sebm-google-map>
+</sebm-google-map>
+</div>

frontend/app/gallery/map/map.gallery.component.ts

@@ -1,17 +1,21 @@
-import {Component, OnChanges, Input} from "@angular/core";
+import {Component, OnChanges, Input, ViewChild, ElementRef} from "@angular/core";
 import {PhotoDTO} from "../../../../common/entities/PhotoDTO";
 import {Utils} from "../../../../common/Utils";
+import {IRenderable, Dimension} from "../../model/IRenderable";
+import {GalleryMapLightboxComponent} from "./lightbox/lightbox.map.gallery.component";
 @Component({
     selector: 'gallery-map',
     templateUrl: 'app/gallery/map/map.gallery.component.html',
     styleUrls: ['app/gallery/map/map.gallery.component.css']
 })
-export class GalleryMapComponent implements OnChanges {
+export class GalleryMapComponent implements OnChanges, IRenderable {
 
     @Input() photos: Array<PhotoDTO>;
+    @ViewChild(GalleryMapLightboxComponent) mapLightbox: GalleryMapLightboxComponent;
 
     mapPhotos: Array<{latitude: string, longitude: string, iconUrl}> = [];
     mapCenter = {latitude: "0", longitude: "0"};
+    @ViewChild("map") map: ElementRef;
 
     //TODO: fix zooming
     ngOnChanges() {
@@ -31,5 +35,18 @@ export class GalleryMapComponent implements OnChanges {
 
 
     }
+
+    click() {
+        this.mapLightbox.show(this.getDimension());
+    }
+
+    public getDimension(): Dimension {
+        return <Dimension>{
+            top: this.map.nativeElement.offsetTop,
+            left: this.map.nativeElement.offsetLeft,
+            width: this.map.nativeElement.offsetWidth,
+            height: this.map.nativeElement.offsetHeight
+        };
+    }
 }