Add a fullscreen button to the widget wrapper

Adds #103

package-lock.json

@@ -7186,6 +7186,11 @@
         }
       }
     },
+    "screenfull": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-3.3.1.tgz",
+      "integrity": "sha512-znBz3YSjnxiCKdgqcEmCv5YY5PD9zEyhHVFRiCnJ+uk6Qb/DZuaHPsxLBcanGR2o7laa9hByXbyAX85PO7tmxg=="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",

package.json

@@ -34,6 +34,7 @@
     "netmask": "^1.0.6",
     "random-string": "^0.2.0",
     "request": "^2.81.0",
+    "screenfull": "^3.3.1",
     "sequelize": "^4.7.5",
     "sqlite3": "^3.1.9",
     "url": "^0.11.0",

web/app/app.module.ts

@@ -25,6 +25,8 @@ import { TravisCiConfigComponent } from "./configs/travisci/travisci-config.comp
 import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/custom_widget-config.component";
 import { MyFilterPipe } from "./shared/my-filter.pipe";
 import { GenericWidgetWrapperComponent } from "./widget_wrappers/generic/generic.component";
+import { ToggleFullscreenDirective } from "./toggle-fullscreen/toggle-fullscreen.directive";
+import { FullscreenButtonComponent } from "./fullscreen-button/fullscreen-button.component";
 
 @NgModule({
     imports: [
@@ -51,6 +53,8 @@ import { GenericWidgetWrapperComponent } from "./widget_wrappers/generic/generic
         CustomWidgetConfigComponent,
         MyFilterPipe,
         GenericWidgetWrapperComponent,
+        ToggleFullscreenDirective,
+        FullscreenButtonComponent,
 
         // Vendor
     ],

web/app/fullscreen-button/fullscreen-button.component.html

@@ -0,0 +1,3 @@
+<button toggleFullscreen="">
+    <img [src]="isFullscreen ? '/img/exit-fullscreen.png' : '/img/enter-fullscreen.png'" />
+</button>

web/app/fullscreen-button/fullscreen-button.component.scss

@@ -0,0 +1,15 @@
+// component styles are encapsulated and only applied to their components
+button {
+  border: none;
+  background: none;
+}
+
+button img {
+  width: 24px;
+  height: 24px;
+  opacity: 0.6;
+}
+
+button img:hover {
+  opacity: 1;
+}

web/app/fullscreen-button/fullscreen-button.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import * as screenfull from 'screenfull';
+
+@Component({
+    selector: "my-fullscreen-button",
+    templateUrl: "fullscreen-button.component.html",
+    styleUrls: ["fullscreen-button.component.scss"],
+})
+export class FullscreenButtonComponent implements OnDestroy, OnInit {
+
+    public isFullscreen = false;
+
+    private listener = null;
+
+    constructor() {
+        // Do stuff
+    }
+
+    public ngOnInit(): void {
+        this.listener = screenfull.on('change', () => {
+            this.isFullscreen = screenfull.isFullscreen;
+        });
+        this.isFullscreen = screenfull.isFullscreen;
+    }
+
+    public ngOnDestroy(): void {
+        if (this.listener) {
+            screenfull.off(this.listener);
+        }
+    }
+}

web/app/toggle-fullscreen/toggle-fullscreen.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, HostListener } from "@angular/core";
+import * as screenfull from 'screenfull';
+
+@Directive({
+    selector: '[toggleFullscreen]',
+})
+export class ToggleFullscreenDirective {
+
+    @HostListener('click') onClick() {
+        // HACK: This should be behind a service in the event the library changes
+        if (screenfull.enabled) {
+            screenfull.toggle();
+        }
+    }
+
+}

web/app/widget_wrappers/generic/generic.component.html

@@ -10,4 +10,5 @@
         </div>
     </div>
     <iframe [src]="embedUrl" *ngIf="!isLoading && canEmbed" frameborder="0" allowfullscreen></iframe>
+    <my-fullscreen-button *ngIf="!isLoading && canEmbed" class="toggleFullscreen"></my-fullscreen-button>
 </div>

web/app/widget_wrappers/generic/generic.component.scss

@@ -39,3 +39,9 @@ iframe {
   width: 100%;
   height: 100%;
 }
+
+.toggleFullscreen {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}