Add an icon to toggle fullscreen of the browser

README.md

@@ -88,6 +88,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md)
         - [`ar2` (AR2 Forecasting)](#ar2-ar2-forecasting)
         - [`simplealarms` (Simple BG Alarms)](#simplealarms-simple-bg-alarms)
         - [`profile` (Treatment Profile)](#profile-treatment-profile)
+        - [`fullscreen` (Fullscreen)](#fullscreen-fullscreen)
       - [Advanced Plugins:](#advanced-plugins)
         - [`careportal` (Careportal)](#careportal-careportal)
         - [`boluscalc` (Bolus Wizard)](#boluscalc-bolus-wizard)
@@ -418,6 +419,10 @@ autonomy for your data:
   * `PROFILE_HISTORY` (`off`) - possible values `on` or `off`. Enable/disable NS ability to keep history of your profiles (still experimental)
   * `PROFILE_MULTIPLE` (`off`) - possible values `on` or `off`. Enable/disable NS ability to handle and switch between multiple treatment profiles
 
+##### `fullscreen` (Fullscreen)
+
+  Add an icon that, when clicked, toggles [Fullscreen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
+
 #### Advanced Plugins:
 
 ##### `careportal` (Careportal)

lib/client/fullscreen.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const init = ($) => {
+
+  // show expand/compress icon depending on whether fullscreen is enabled
+  const showIcon = () => {
+    if (document.fullscreenElement) {
+      // fullscreen is enabled
+      $('#fullscreenIcon').removeClass('icon-expand');
+      $('#fullscreenIcon').addClass('icon-compress');
+    } else {
+      // fullscreen is not enabled
+      $('#fullscreenIcon').removeClass('icon-compress');
+      $('#fullscreenIcon').addClass('icon-expand');
+    }
+  };
+
+  if (document.fullscreenEnabled) {
+
+    // watch for fullscreen change events
+    document
+      .body
+      .addEventListener("fullscreenchange", (event) => {
+        showIcon();
+        event.preventDefault();
+      });
+
+    // set up the click event handler for the fullscreen icon
+    $('#fullscreen')
+      .click((event) => {
+        if (!document.fullscreenElement) {
+          document
+            .body
+            .requestFullscreen()
+            .catch(err => console.error(`failed to request fullscreen: ${err.message}`));
+        } else {
+          document
+            .exitFullscreen()
+            .catch(err => console.error(`failed to exit fullscreen: ${err.message}`));
+        }
+        event.preventDefault();
+      });
+
+    // now that everything is set up, make the fullscreen icon visible
+    showIcon();
+    $('#fullscreen').show();
+  }
+};
+
+module.exports = init;

lib/client/index.js

@@ -1391,6 +1391,11 @@ client.load = function load (serverSettings, callback) {
       chart.updateContext();
     }
   }
+
+  if (client.settings.isEnabled('fullscreen')) {
+    require('./fullscreen')($);
+  }
+
 };
 
 module.exports = client;

static/css/main.css

@@ -82,6 +82,8 @@
 .icon-sort-numeric:before { content: '\f162'; }
 .icon-chart-line:before { content: '\f201'; }
 .icon-hourglass:before { content: '\f254'; }
+.icon-expand:before { content: '\2197'; }
+.icon-compress:before { content: '\2199'; }
 
 /* Plugin Icons id-s (copy from generated icon style.css) */
 .plugicon-database:before { content: "\e901"; }
@@ -824,4 +826,4 @@ a, a:visited, a:link {
     font-size: 12px;
     line-height: 13px;
   }
-}
+}

views/partials/toolbar.ejs

@@ -21,6 +21,7 @@
             <a id="treatmentDrawerToggle" class="tip" original-title="Care Portal" aria-label="Care Portal" href="#" style="display:none;"><i class="icon-plus"></i></a>
             <a id="lockedToggle" class="tip" original-title="Token needed for Care Portal" aria-label="Token needed for Care Portal" href="#" style="display:none;"><i class="icon-lock"></i></a>
             <a id="drawerToggle" class="tip" original-title="Settings" aria-label="Settings" href="#"><i class="icon-menu"></i></a>
+            <a id="fullscreen" class="tip" original-title="Fullscreen" aria-label="Fullscreen" href="#" style="display:none;"><i id="fullscreenIcon" class="icon-expand"></i></a>
             <a id="testAlarms" class="tip" original-title="Alarm Test / Smartphone Enable" aria-label="Alarm Test / Smartphone Enable" href="#"><i class="icon-volume"></i></a>
             <a id="editbutton" class="tip" original-title="Edit Mode" aria-label="Edit Mode" href="#" style="display:none;"><i class="icon-edit"></i></a>
             <a id="adminnotifies" class="tip" original-title="Admin ntofications" aria-label="Admin notifications" href="#" style="display:none;"><i class="plugicon-notifies" style='color: #c91515'></i></a>
@@ -32,4 +33,4 @@
     <div class="toolbar-title">
         <h2 class="translate"><%= title %></h1>
     </div>
-<% } %>
+<% } %>