From 26c8432acf41a27d758135d7407cd6081cf7937e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Tue, 22 Mar 2022 22:03:34 +0100
Subject: [PATCH] feat(Toolbar): add fullscreen toggle

---
 config.js                                   |  1 +
 package-lock.json                           | 17 +++++++
 package.json                                |  1 +
 src/common/data/copy.json                   |  4 +-
 src/components/Toolbar.js                   |  4 ++
 src/components/controls/FullScreenToggle.js | 52 +++++++++++++++++++++
 src/scss/toolbar.scss                       |  1 -
 7 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components/controls/FullScreenToggle.js

diff --git a/config.js b/config.js
index e08a445..e3d41a8 100644
--- a/config.js
+++ b/config.js
@@ -118,6 +118,7 @@ module.exports = {
       COLOR_BY_CATEGORY: false,
       COLOR_BY_ASSOCIATION: true,
       USE_ASSOCIATIONS: true,
+      USE_FULLSCREEN: true,
       USE_SOURCES: true,
       USE_SPOTLIGHTS: false,
       USE_SHAPES: false,
diff --git a/package-lock.json b/package-lock.json
index 85b6326..b3f72fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,6 +80,7 @@
         "resolve": "1.18.1",
         "resolve-url-loader": "^3.1.2",
         "sass-loader": "10.2.1",
+        "screenfull": "^5.2.0",
         "semver": "7.3.2",
         "style-loader": "1.3.0",
         "supercluster": "^7.1.0",
@@ -22138,6 +22139,17 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/scriptjs": {
       "version": "2.5.9",
       "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
@@ -43298,6 +43310,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "scriptjs": {
       "version": "2.5.9",
       "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
diff --git a/package.json b/package.json
index 4eba5e0..6495aae 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "10.2.1",
+    "screenfull": "^5.2.0",
     "semver": "7.3.2",
     "style-loader": "1.3.0",
     "supercluster": "^7.1.0",
diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index e2ba701..ce8f20d 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -149,7 +149,9 @@
       "shapes": "Shapes",
       "shapes_label": "Shapes",
       "explore_by_shapes__title": "Explore events by shape breakdown",
-      "explore_by_shape__description": "Shapes map to a given type of event that appears on the timeline.<br><br>Select the shape marker to toggle this type of event on / off"
+      "explore_by_shape__description": "Shapes map to a given type of event that appears on the timeline.<br><br>Select the shape marker to toggle this type of event on / off",
+      "fullscreen_enter": "Fullscreen",
+      "fullscreen_exit": "Exit Fullscreen"
     },
     "timeline": {
       "labels_title": "Testimonies",
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index 87d9bc9..d8aaf72 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -22,6 +22,7 @@ import {
   getFilterIdx,
 } from "../common/utilities.js";
 import { ToolbarButton } from "./controls/atoms/ToolbarButton";
+import { FullscreenToggle } from "./controls/FullScreenToggle";
 
 class Toolbar extends React.Component {
   constructor(props) {
@@ -298,6 +299,9 @@ class Toolbar extends React.Component {
                 panels.shapes.icon
               )
             : null}
+          {features.USE_FULLSCREEN && (
+            <FullscreenToggle language={this.props.language} />
+          )}
         </div>
         <BottomActions
           info={{
diff --git a/src/components/controls/FullScreenToggle.js b/src/components/controls/FullScreenToggle.js
new file mode 100644
index 0000000..1df02eb
--- /dev/null
+++ b/src/components/controls/FullScreenToggle.js
@@ -0,0 +1,52 @@
+import React from "react";
+import screenfull from "screenfull";
+import { ToolbarButton } from "./atoms/ToolbarButton";
+import copy from "../../common/data/copy.json";
+
+export class FullscreenToggle extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onFullscreenStateChange = this.onFullscreenStateChange.bind(this);
+
+    this.state = {
+      isFullscreen: screenfull.isFullscreen,
+    };
+  }
+
+  componentDidMount() {
+    screenfull.on("change", this.onFullscreenStateChange);
+  }
+
+  componentWillUnmount() {
+    screenfull.off("change", this.onFullscreenStateChange);
+  }
+
+  onFullscreenStateChange(evt) {
+    this.setState({ isFullscreen: screenfull.isFullscreen });
+  }
+
+  onToggleFullscreen() {
+    screenfull.toggle().catch(console.warn);
+  }
+
+  render() {
+    if (!screenfull.isEnabled) return null;
+
+    const { language } = this.props;
+    const { isFullscreen } = this.state;
+
+    return (
+      <ToolbarButton
+        isActive={isFullscreen}
+        label={
+          isFullscreen
+            ? copy[language].toolbar.fullscreen_exit
+            : copy[language].toolbar.fullscreen_enter
+        }
+        iconKey={isFullscreen ? "fullscreen_exit" : "fullscreen"}
+        onClick={this.onToggleFullscreen}
+      />
+    );
+  }
+}
diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss
index 39520fa..912c8ba 100644
--- a/src/scss/toolbar.scss
+++ b/src/scss/toolbar.scss
@@ -228,7 +228,6 @@
       display: block;
       text-align: center;
       font-size: $xsmall;
-      margin-top: -2px;
       letter-spacing: 0.05em;
     }