From 565f99415784a169f1474881dc9a8d07cb687ae4 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Wed, 22 May 2019 13:10:52 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20#204=20:=20fullscreen=20r=C3=A9trocompati?=
=?UTF-8?q?ble,=20factorisation=20de=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
.../fixedvar-results/results.component.ts | 33 +++++++++++++++++++
.../fixedvar-results/var-results.component.ts | 20 +++--------
.../pab-results-table.component.ts | 20 +++--------
.../remous-results.component.ts | 23 +++----------
.../results-graph/results-graph.component.ts | 20 +++--------
.../section-results.component.ts | 20 +++--------
7 files changed, 59 insertions(+), 78 deletions(-)
create mode 100644 src/app/components/fixedvar-results/results.component.ts
diff --git a/package.json b/package.json
index 57219b5b6..3a0cdd9e4 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
"roboto-fontface": "^0.10.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
+ "screenfull": "^4.2.0",
"tslib": "^1.9.0",
"xlsx": "^0.14.1",
"zone.js": "^0.8.28"
diff --git a/src/app/components/fixedvar-results/results.component.ts b/src/app/components/fixedvar-results/results.component.ts
new file mode 100644
index 000000000..57c95d10a
--- /dev/null
+++ b/src/app/components/fixedvar-results/results.component.ts
@@ -0,0 +1,33 @@
+import * as screenfull from "screenfull";
+import { Screenfull } from "screenfull"; // @see https://github.com/sindresorhus/screenfull.js/issues/126#issuecomment-488796645
+
+/**
+ * Base class for results components, including common features
+ */
+export class ResultsComponent {
+
+ /** tracks the fullscreen state */
+ public get isFullscreen() {
+ // return (document["fullscreenElement"] !== null);
+ const sf = <Screenfull>screenfull;
+ if (sf.enabled) {
+ return sf.isFullscreen;
+ }
+ }
+
+ public setFullscreen(element) {
+ // element.requestFullscreen();
+ const sf = <Screenfull>screenfull;
+ if (sf.enabled) {
+ sf.request(element);
+ }
+ }
+
+ public exitFullscreen() {
+ // document.exitFullscreen();
+ const sf = <Screenfull>screenfull;
+ if (sf.enabled) {
+ sf.exit();
+ }
+ }
+}
diff --git a/src/app/components/fixedvar-results/var-results.component.ts b/src/app/components/fixedvar-results/var-results.component.ts
index b8185119d..2151ddd92 100644
--- a/src/app/components/fixedvar-results/var-results.component.ts
+++ b/src/app/components/fixedvar-results/var-results.component.ts
@@ -4,6 +4,7 @@ import { ApplicationSetupService } from "../../services/app-setup/app-setup.serv
import { ResultElement } from "jalhyd";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import * as XLSX from "xlsx";
+import { ResultsComponent } from "./results.component";
@Component({
selector: "var-results",
@@ -12,7 +13,7 @@ import * as XLSX from "xlsx";
"./var-results.component.scss"
]
})
-export class VarResultsComponent {
+export class VarResultsComponent extends ResultsComponent {
/** rÊsultats non mis en forme */
protected _varResults: VarResults;
@@ -23,17 +24,14 @@ export class VarResultsComponent {
/** entÃĒtes des colonnes (param à varier, à calculer + extraResults) */
protected _headers: string[];
- /** tracks the fullscreen state */
- public get isFullscreen() {
- return (document["fullscreenElement"] !== null);
- }
-
@ViewChild("tableContainer") table: ElementRef;
constructor(
protected appSetupService: ApplicationSetupService,
protected intlService: I18nService
- ) { }
+ ) {
+ super();
+ }
public set results(r: VarResults) {
this._varResults = r;
@@ -106,14 +104,6 @@ export class VarResultsComponent {
return data;
}
- public setFullscreen(element) {
- element.requestFullscreen();
- }
-
- public exitFullscreen() {
- document.exitFullscreen();
- }
-
public exportAsSpreadsheet() {
// automagic <table> extraction
const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table.nativeElement);
diff --git a/src/app/components/pab-results/pab-results-table.component.ts b/src/app/components/pab-results/pab-results-table.component.ts
index 2d66c877f..af0ebe4df 100644
--- a/src/app/components/pab-results/pab-results-table.component.ts
+++ b/src/app/components/pab-results/pab-results-table.component.ts
@@ -5,6 +5,7 @@ import { PabResults } from "../../results/pab-results";
import * as XLSX from "xlsx";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
+import { ResultsComponent } from "../fixedvar-results/results.component";
@Component({
selector: "pab-results-table",
@@ -13,7 +14,7 @@ import { I18nService } from "../../services/internationalisation/internationalis
"./pab-results-table.component.scss"
]
})
-export class PabResultsTableComponent {
+export class PabResultsTableComponent extends ResultsComponent {
/** rÊsultats non mis en forme */
private _pabResults: PabResults;
@@ -24,17 +25,14 @@ export class PabResultsTableComponent {
/** rÊsultats mis en forme */
private _dataSet: any[];
- /** tracks the fullscreen state */
- public get isFullscreen() {
- return (document["fullscreenElement"] !== null);
- }
-
@ViewChild("tableContainer") table: ElementRef;
constructor(
protected appSetupService: ApplicationSetupService,
protected intlService: I18nService
- ) { }
+ ) {
+ super();
+ }
public set results(r: PabResults) {
this._pabResults = r;
@@ -138,14 +136,6 @@ export class PabResultsTableComponent {
return this._dataSet;
}
- public setFullscreen(element) {
- element.requestFullscreen();
- }
-
- public exitFullscreen() {
- document.exitFullscreen();
- }
-
public exportAsSpreadsheet() {
// automagic <table> extraction
const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table.nativeElement);
diff --git a/src/app/components/remous-results/remous-results.component.ts b/src/app/components/remous-results/remous-results.component.ts
index 8192b2397..f11fa831b 100644
--- a/src/app/components/remous-results/remous-results.component.ts
+++ b/src/app/components/remous-results/remous-results.component.ts
@@ -10,6 +10,7 @@ import { VarResultsComponent } from "../fixedvar-results/var-results.component";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
import { ServiceFactory } from "../../services/service-factory";
import { FormulaireService } from "../../services/formulaire/formulaire.service";
+import { ResultsComponent } from "../fixedvar-results/results.component";
/**
* donnÊes pour une ligne dans le graphe
@@ -35,8 +36,6 @@ class LineData {
*/
private _data = {};
- private appSetup: ApplicationSetupService;
-
/**
* profondeur à laquelle est dessinÊe la ligne
* les profondeurs les plus petites sont dessinÊes derrière les profondeurs les plus grandes
@@ -49,7 +48,6 @@ class LineData {
for (let i = this._tx.length - 1; i >= 0; i--) {
this._ty.push(null);
}
- this.appSetup = ServiceFactory.instance.applicationSetupService;
}
public getYat(x: number) {
@@ -198,7 +196,7 @@ class GraphData {
"./remous-results.component.scss"
]
})
-export class RemousResultsComponent implements DoCheck {
+export class RemousResultsComponent extends ResultsComponent implements DoCheck {
private _remousResults: RemousResults;
/*
@@ -237,16 +235,13 @@ export class RemousResultsComponent implements DoCheck {
@ViewChild(LogComponent)
private logComponent: LogComponent;
- /** tracks the fullscreen state */
- public get isFullscreen() {
- return (document["fullscreenElement"] !== null);
- }
-
constructor(
private intlService: I18nService,
private appSetup: ApplicationSetupService,
private formService: FormulaireService
- ) { }
+ ) {
+ super();
+ }
private get uitextLigneFluviale() {
// calculator type for translation
@@ -655,14 +650,6 @@ export class RemousResultsComponent implements DoCheck {
}
}
- public setFullscreen(element) {
- element.requestFullscreen();
- }
-
- public exitFullscreen() {
- document.exitFullscreen();
- }
-
public exportAsImage(element: HTMLDivElement) {
const canvas: HTMLCanvasElement = element.querySelector("canvas");
canvas.toBlob((blob) => {
diff --git a/src/app/components/results-graph/results-graph.component.ts b/src/app/components/results-graph/results-graph.component.ts
index 1180e2e1e..efd025288 100644
--- a/src/app/components/results-graph/results-graph.component.ts
+++ b/src/app/components/results-graph/results-graph.component.ts
@@ -7,6 +7,7 @@ import { ApplicationSetupService } from "../../services/app-setup/app-setup.serv
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { PlottableData } from "../../results/plottable-data";
import { GraphType } from "../../results/graph-type";
+import { ResultsComponent } from "../fixedvar-results/results.component";
@Component({
selector: "results-graph",
@@ -15,7 +16,7 @@ import { GraphType } from "../../results/graph-type";
"./results-graph.component.scss"
]
})
-export class ResultsGraphComponent implements AfterContentInit, Observer {
+export class ResultsGraphComponent extends ResultsComponent implements AfterContentInit, Observer {
private _results: PlottableData;
/** used to briefly destroy/rebuild the chart component, to refresh axis labels (@see bug #137) */
@@ -49,15 +50,12 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
}
};
- /** tracks the fullscreen state */
- public get isFullscreen() {
- return (document["fullscreenElement"] !== null);
- }
-
public constructor(
private appSetup: ApplicationSetupService,
private intlService: I18nService
- ) { }
+ ) {
+ super();
+ }
public set results(r: PlottableData) {
this.forceRebuild();
@@ -260,14 +258,6 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
};
}
- public setFullscreen(element) {
- element.requestFullscreen();
- }
-
- public exitFullscreen() {
- document.exitFullscreen();
- }
-
public exportAsImage(element: HTMLDivElement) {
const canvas: HTMLCanvasElement = element.querySelector("canvas");
canvas.toBlob((blob) => {
diff --git a/src/app/components/section-results/section-results.component.ts b/src/app/components/section-results/section-results.component.ts
index 40eb93801..1309ab2ab 100644
--- a/src/app/components/section-results/section-results.component.ts
+++ b/src/app/components/section-results/section-results.component.ts
@@ -6,6 +6,7 @@ import { SectionCanvasComponent } from "../section-canvas/section-canvas.compone
import { SectionResults } from "../../results/section-results";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
import { CalculatorResults } from "../../results/calculator-results";
+import { ResultsComponent } from "../fixedvar-results/results.component";
@Component({
selector: "section-results",
@@ -14,11 +15,13 @@ import { CalculatorResults } from "../../results/calculator-results";
"./section-results.component.scss"
]
})
-export class SectionResultsComponent implements DoCheck {
+export class SectionResultsComponent extends ResultsComponent implements DoCheck {
constructor(
private appSetupService: ApplicationSetupService
- ) { }
+ ) {
+ super();
+ }
public set results(rs: CalculatorResults[]) {
this._resultElement = undefined;
@@ -65,11 +68,6 @@ export class SectionResultsComponent implements DoCheck {
@ViewChild(SectionCanvasComponent)
private _sectionCanvas: SectionCanvasComponent;
- /** tracks the fullscreen state */
- public get isFullscreen() {
- return (document["fullscreenElement"] !== null);
- }
-
public updateView() {
if (this._sectionCanvas) {
this._sectionCanvas.reset();
@@ -126,14 +124,6 @@ export class SectionResultsComponent implements DoCheck {
return "result_id_" + String(i & 1);
}
- public setFullscreen(element) {
- element.requestFullscreen();
- }
-
- public exitFullscreen() {
- document.exitFullscreen();
- }
-
public exportAsImage(element: HTMLDivElement) {
const canvas: HTMLCanvasElement = element.querySelector("canvas");
canvas.toBlob((blob) => {
--
GitLab