implementing lightroom fullscreenmode

frontend/app/app.component.ts

@@ -13,6 +13,7 @@ import {AdminComponent} from "./admin/admin.component";
 import {NetworkService} from "./model/network/network.service";
 import {ThumbnailLoaderService} from "./gallery/grid/thumnailLoader.service";
 import {GalleryCacheService} from "./gallery/cache.gallery.service";
+import {FullScreenService} from "./gallery/fullscreen.service";
 
 
 @Component({
@@ -27,7 +28,8 @@ import {GalleryCacheService} from "./gallery/cache.gallery.service";
         GalleryCacheService,
         GalleryService,
         AuthenticationService,
-        ThumbnailLoaderService]
+        ThumbnailLoaderService,
+        FullScreenService]
 })
 @RouteConfig([
     {

frontend/app/gallery/fullscreen.service.ts

@@ -0,0 +1,43 @@
+///<reference path="../../browser.d.ts"/>
+
+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class FullScreenService {
+
+
+    public isFullScreenEnabled():boolean {
+        return !!(document.fullscreenElement || document['mozFullScreenElement'] || document.webkitFullscreenElement);
+    }
+
+    public showFullScreen(element:any) {
+        if (this.isFullScreenEnabled()) {
+            return;
+        }
+
+        if (element.requestFullscreen) {
+            element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    }
+
+    public exitFullScreen() {
+        if (!this.isFullScreenEnabled()) {
+            return;
+        }
+
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document['mozCancelFullScreen']) {
+            document['mozCancelFullScreen']();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    }
+
+}

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

@@ -43,6 +43,7 @@
     width: 100%;
     height: 100%;
     left: 0;
+    top: 0;
     position: fixed;;
     color: white;
 }

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

@@ -1,4 +1,4 @@
-<div [hidden]="!visible">
+<div [hidden]="!visible" #root>
 
     <div class="blackCanvas">
     </div>
@@ -19,7 +19,15 @@
                [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-resize-small highlight"
+                  *ngIf="fullScreenService.isFullScreenEnabled()"
+                  (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
+
+            <span class="glyphicon glyphicon-fullscreen highlight"
+                  *ngIf="!fullScreenService.isFullScreenEnabled()"
+                  (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
+
             <span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
         </div>
 

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

@@ -1,11 +1,12 @@
 ///<reference path="../../../browser.d.ts"/>
 
-import {Component, QueryList, Output, EventEmitter, HostListener} from "@angular/core";
+import {Component, QueryList, Output, EventEmitter, HostListener, ElementRef, ViewChild} from "@angular/core";
 import {Photo} from "../../../../common/entities/Photo";
 import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component.ts";
 import {BrowserDomAdapter} from "@angular/platform-browser/src/browser/browser_adapter";
 import {Dimension} from "../../model/IRenderable";
 import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.component";
+import {FullScreenService} from "../fullscreen.service";
 
 @Component({
     selector: 'gallery-lightbox',
@@ -25,8 +26,10 @@ export class GalleryLightboxComponent {
     private dom:BrowserDomAdapter;
     private visible = false;
 
+    @ViewChild("root") elementRef:ElementRef;
 
-    constructor() {
+
+    constructor(private fullScreenService:FullScreenService) {
         this.dom = new BrowserDomAdapter();
 
 
@@ -92,7 +95,7 @@ export class GalleryLightboxComponent {
     }
 
     public hide() {
-
+        this.fullScreenService.exitFullScreen();
         this.visible = false;
         let to = this.activePhoto.getDimension();
 
@@ -107,6 +110,7 @@ export class GalleryLightboxComponent {
 
     }
 
+
     private findPhotoComponent(photo) {
         let galleryPhotoComponents = this.gridPhotoQL.toArray();
         for (let i = 0; i < galleryPhotoComponents.length; i++) {