[TASK] Add optional fullscreen mode

assets/icons/icon.scss

@@ -7,9 +7,9 @@ $cache-breaker: unique-id();
   font-family: 'ionicons';
   font-style: normal;
   font-weight: normal;
-  src: url('fonts/icon.woff2?rel=#{$cache-breaker}') format('woff2'),
+  src: url('fonts/meshviewer.woff2?rel=#{$cache-breaker}') format('woff2'),
-  url('fonts/icon.woff?rel=#{$cache-breaker}') format('woff'),
+  url('fonts/meshviewer.woff?rel=#{$cache-breaker}') format('woff'),
-  url('fonts/icon.ttf?rel=#{$cache-breaker}') format('truetype');
+  url('fonts/meshviewer.ttf?rel=#{$cache-breaker}') format('truetype');
 }
 
 [class^='ion-'],
@@ -49,3 +49,5 @@ $cache-breaker: unique-id();
 @include icon('arrow-resize', '\f264');
 @include icon('arrow-left-c', '\f108');
 @include icon('arrow-right-c', '\f10b');
+@include icon('full-enter', '\e901');
+@include icon('full-exit', '\e900');

config.default.js

@@ -6,6 +6,8 @@ module.exports = function () {
     'nodeZoom': 18,
     'labelZoom': 13,
     'clientZoom': 15,
+    'fullscreen': true,
+    'fullscreenFrame': true,
     'nodeAttr': [
       // value can be a node attribute (1 depth) or a a function in utils/node with prefix show
       {

lib/gui.js

@@ -1,10 +1,10 @@
 define(['d3-interpolate', 'map', 'sidebar', 'tabs', 'container', 'legend',
   'linklist', 'nodelist', 'simplenodelist', 'infobox/main',
   'proportions', 'forcegraph', 'title', 'about', 'datadistributor',
-  'filters/filtergui', 'filters/hostname'],
+  'filters/filtergui', 'filters/hostname', 'helper'],
 function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
   Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
-  Title, About, DataDistributor, FilterGUI, HostnameFilter) {
+  Title, About, DataDistributor, FilterGUI, HostnameFilter, helper) {
   'use strict';
 
   return function (language) {
@@ -77,6 +77,17 @@ function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
 
     buttons.appendChild(buttonToggle);
 
+    if (config.fullscreen || config.fullscreenFrame && window.frameElement) {
+      var buttonFullscreen = document.createElement('button');
+      buttonFullscreen.classList.add('ion-full-enter');
+      buttonFullscreen.setAttribute('aria-label', _.t('button.fullscreen'));
+      buttonFullscreen.onclick = function onclick() {
+        helper.fullscreen(buttonFullscreen);
+      };
+
+      buttons.appendChild(buttonFullscreen);
+    }
+
     var title = new Title();
 
     var header = new Container('header');

lib/utils/helper.js

@@ -176,5 +176,23 @@ define({
       }
     }
     ctx.fill();
+  },
+  fullscreen: function fullscreen(btn) {
+    if (!document.fullscreenElement) {
+      var fel = document.firstElementChild;
+      var func = fel.requestFullscreen
+        || fel.webkitRequestFullScreen
+        || fel.msRequestFullscreen;
+      func.call(fel);
+      btn.classList.add('ion-full-exit');
+    } else {
+      func = document.exitFullscreen
+        || document.webkitexitFullscreen
+        || document.msexitFullscreen;
+      if (func) {
+        func.call(document);
+        btn.classList.add('ion-full-enter');
+      }
+    }
   }
 });

locale/de.json

@@ -59,7 +59,8 @@
   "button": {
     "switchView": "Ansicht wechseln",
     "location": "Koordinaten wählen",
-    "tracking": "Lokalisierung"
+    "tracking": "Lokalisierung",
+    "fullscreen": "Vollbildmodus wechseln"
   },
   "momentjs": {
     "calendar": {

locale/en.json

@@ -59,7 +59,8 @@
   "button": {
     "switchView": "Switch view",
     "location": "Pick coordinates",
-    "tracking": "Localisation"
+    "tracking": "Localisation",
+    "fullscreen": "Toggle fullscreen"
   },
   "momentjs": {
     "calendar": {