Add a fullscreen button to the widget wrapper

Adds #103
This commit is contained in:
Travis Ralston 2017-10-09 21:24:12 -06:00
parent c5146d84ff
commit aecb1e33d4
11 changed files with 82 additions and 0 deletions

5
package-lock.json generated
View File

@ -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": { "scss-tokenizer": {
"version": "0.2.3", "version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",

View File

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

View File

@ -25,6 +25,8 @@ import { TravisCiConfigComponent } from "./configs/travisci/travisci-config.comp
import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/custom_widget-config.component"; import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/custom_widget-config.component";
import { MyFilterPipe } from "./shared/my-filter.pipe"; import { MyFilterPipe } from "./shared/my-filter.pipe";
import { GenericWidgetWrapperComponent } from "./widget_wrappers/generic/generic.component"; 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({ @NgModule({
imports: [ imports: [
@ -51,6 +53,8 @@ import { GenericWidgetWrapperComponent } from "./widget_wrappers/generic/generic
CustomWidgetConfigComponent, CustomWidgetConfigComponent,
MyFilterPipe, MyFilterPipe,
GenericWidgetWrapperComponent, GenericWidgetWrapperComponent,
ToggleFullscreenDirective,
FullscreenButtonComponent,
// Vendor // Vendor
], ],

View File

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

View File

@ -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;
}

View File

@ -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);
}
}
}

View File

@ -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();
}
}
}

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 B