fullscreen mode for netmap

share/public/css/netdisco.css

@@ -629,6 +629,7 @@ form .clearfix.success input {
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* D3 SVG */
 
+/*
 .node circle {
   fill: #fff;
   stroke: steelblue;
@@ -651,6 +652,7 @@ form .clearfix.success input {
   stroke-width: 2px;
   display: none;
 }
+*/
 
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* dataTables */

share/views/ajax/device/netmap.tt

@@ -1,20 +1,39 @@
 <script>
 
+function requestFullScreen(elt) {
+  // console.log("Requesting fullscreen for", elt);
+  if (elt.requestFullscreen) {
+    elt.requestFullscreen();
+  } else if (elt.msRequestFullscreen) {
+    elt.msRequestFullscreen();
+  } else if (elt.mozRequestFullScreen) {
+    elt.mozRequestFullScreen();
+  } else if (elt.webkitRequestFullscreen) {
+    elt.webkitRequestFullscreen();
+  } else {
+    // console.error("Fullscreen not available");
+  }
+}
+
+$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
+  resizeGraphContainer();
+});
+
+// custom resize function as there is no event to fire and we need
+// to react to the sidebar.
+function resizeGraphContainer() {
+  setTimeout(function(){
+    var netmap_pane = jQuery('#netmap_pane');
+    graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
+    graph.height( window.innerHeight - 100 ).resume();
+  }, 500)
+}
+
 $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, function(mapdata) {
 
-  // custom resize function as there is no event to fire and we need
-  // to react to the sidebar.
-  function resizeGraphContainer() {
-    setTimeout(function(){
-      var netmap_pane = jQuery('#netmap_pane');
-      graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
-      graph.height( window.innerHeight - 100 ).resume();
-    }, 500)
-  }
-
   jQuery(document).ready(function() {
     window.graph = netGobrechtsD3Force('netmap_pane')
-      .debug(true)
+      // .debug(true)
       .lassoMode(true)
       .dragMode(true)
       .nodeEventToOpenLink('click')
@@ -92,6 +111,19 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
     }};
     graph.start(netmapdata);
 
+    graph.inspect().dom.svg
+         .append("svg:text")
+         .attr("id", "nd2_fullscreen_netmap")
+         .attr("class", "link")
+         .attr("x", (graph.width() - 17))
+         .attr("y", 17)
+         .attr("text-anchor", "start")
+         .attr("font-family", "FontAwesome")
+         .text(function() { return '\uf0b2' })
+         .on("click", function() {
+           requestFullScreen(document.getElementById('netmap_pane'));
+         });
+
     // center on our selected device
 //    graph.inspect().main.force.on('end.centernode', function() {
 //      var node = graph.nodeDataById( mapdata['v3']['centernode'] );