feat(Toolbar): add fullscreen toggle

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,

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",

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",

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",

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

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

src/scss/toolbar.scss

@@ -228,7 +228,6 @@
       display: block;
       text-align: center;
       font-size: $xsmall;
-      margin-top: -2px;
       letter-spacing: 0.05em;
     }