Merge branch 'feat/fullscreen' of github.com:fspoettel/ukraine-timemap

src/common/data/copy.json

@@ -157,7 +157,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

@@ -21,6 +21,8 @@ import {
   getCategoryIdxs,
   getFilterIdx,
 } from "../common/utilities.js";
+import { ToolbarButton } from "./controls/atoms/ToolbarButton";
+import { FullscreenToggle } from "./controls/FullScreenToggle";
 
 class Toolbar extends React.Component {
   constructor(props) {
@@ -179,20 +181,15 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTab(_selected, label, iconKey) {
-    const isActive = this.state._selected === _selected;
-    const classes = isActive ? "toolbar-tab active" : "toolbar-tab";
-
     return (
-      <div
-        className={classes}
-        key={iconKey}
+      <ToolbarButton
+        label={label}
+        iconKey={iconKey}
+        isActive={this.state._selected === _selected}
         onClick={() => {
           this.selectTab(_selected);
         }}
-      >
-        <i className="material-icons">{iconKey}</i>
-        <div className="tab-caption">{label}</div>
-      </div>
+      />
     );
   }
 
@@ -302,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/components/controls/atoms/ToolbarButton.js

@@ -0,0 +1,12 @@
+export function ToolbarButton({ isActive, iconKey, onClick, label }) {
+  return (
+    <div
+      className={isActive ? "toolbar-tab active" : "toolbar-tab"}
+      key={iconKey}
+      onClick={onClick}
+    >
+      <i className="material-icons">{iconKey}</i>
+      <div className="tab-caption">{label}</div>
+    </div>
+  );
+}

src/scss/toolbar.scss

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