Fix #204 : fullscreen rétrocompatible, factorisation de code

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"

src/app/components/fixedvar-results/results.component.ts

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

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

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

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) => {

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) => {

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) => {