From aecb1e33d4a5cb2d7687601c2b858979a0840287 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 9 Oct 2017 21:24:12 -0600 Subject: [PATCH] Add a fullscreen button to the widget wrapper Adds #103 --- package-lock.json | 5 +++ package.json | 1 + web/app/app.module.ts | 4 +++ .../fullscreen-button.component.html | 3 ++ .../fullscreen-button.component.scss | 15 +++++++++ .../fullscreen-button.component.ts | 31 ++++++++++++++++++ .../toggle-fullscreen.directive.ts | 16 +++++++++ .../generic/generic.component.html | 1 + .../generic/generic.component.scss | 6 ++++ web/public/img/enter-fullscreen.png | Bin 0 -> 360 bytes web/public/img/exit-fullscreen.png | Bin 0 -> 347 bytes 11 files changed, 82 insertions(+) create mode 100644 web/app/fullscreen-button/fullscreen-button.component.html create mode 100644 web/app/fullscreen-button/fullscreen-button.component.scss create mode 100644 web/app/fullscreen-button/fullscreen-button.component.ts create mode 100644 web/app/toggle-fullscreen/toggle-fullscreen.directive.ts create mode 100644 web/public/img/enter-fullscreen.png create mode 100644 web/public/img/exit-fullscreen.png diff --git a/package-lock.json b/package-lock.json index 49b2ee1..78190f5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ccafe2b..0457607 100644 --- a/package.json +++ b/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", diff --git a/web/app/app.module.ts b/web/app/app.module.ts index 26ed221..0c1bd14 100644 --- a/web/app/app.module.ts +++ b/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 ], diff --git a/web/app/fullscreen-button/fullscreen-button.component.html b/web/app/fullscreen-button/fullscreen-button.component.html new file mode 100644 index 0000000..9e714ba --- /dev/null +++ b/web/app/fullscreen-button/fullscreen-button.component.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/web/app/fullscreen-button/fullscreen-button.component.scss b/web/app/fullscreen-button/fullscreen-button.component.scss new file mode 100644 index 0000000..e3d4751 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/app/fullscreen-button/fullscreen-button.component.ts b/web/app/fullscreen-button/fullscreen-button.component.ts new file mode 100644 index 0000000..f9ad72b --- /dev/null +++ b/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); + } + } +} diff --git a/web/app/toggle-fullscreen/toggle-fullscreen.directive.ts b/web/app/toggle-fullscreen/toggle-fullscreen.directive.ts new file mode 100644 index 0000000..856bd42 --- /dev/null +++ b/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(); + } + } + +} diff --git a/web/app/widget_wrappers/generic/generic.component.html b/web/app/widget_wrappers/generic/generic.component.html index 2e9eb40..92baf94 100644 --- a/web/app/widget_wrappers/generic/generic.component.html +++ b/web/app/widget_wrappers/generic/generic.component.html @@ -10,4 +10,5 @@ + \ No newline at end of file diff --git a/web/app/widget_wrappers/generic/generic.component.scss b/web/app/widget_wrappers/generic/generic.component.scss index 41ddf19..1e42721 100644 --- a/web/app/widget_wrappers/generic/generic.component.scss +++ b/web/app/widget_wrappers/generic/generic.component.scss @@ -38,4 +38,10 @@ iframe { right: 0; width: 100%; height: 100%; +} + +.toggleFullscreen { + position: fixed; + bottom: 10px; + right: 10px; } \ No newline at end of file diff --git a/web/public/img/enter-fullscreen.png b/web/public/img/enter-fullscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..126fbaf59acffc7b7111a4a5bc96386d58f86fe9 GIT binary patch literal 360 zcmV-u0hj)XP)b(N_)=tsHR!A({#k_i!7%LX?)TmdyUaYO z8M*!zcm%SFXXn5;vThg1EAD>-BVgqR`jTu%TSkf_sn}Hyc!qMuz8{*|BvAJw)_|FH zfJVSv8yEoB>%#uU3GfyxRKd)(ZRRpb1Al#W1hIoi29g19U=Dn;$FFt(3#avd2CYOQ zk+>kbk_w=C2CbIUdVq2-$blOI$EYK7=d|*51GSM1Bm@6)fuy#Xh2q%)m`2uZ@%OcF zAnAVF_)87Z>bmq0000|`5&fYQBSy; zvSzKlq!R03eK58{v&_{=rdCl_PJedm<<>^`2ZvvNZ;XEMdqz=6g#8)xF*Qf}zxy`)qx?7n@FF zro+jzISeVY4^%&x`PV!BS!Kmh>kCY~8h=XdVBXYm#zkr3j)GrT4NrZGDbAm<=^XpnZT_S;PX5Tet>0|DaeC(yU_dZ