1 files changed, 135 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html
new file mode 100644
index 00000000..760bb539
--- /dev/null
+++ b/www/lib/vis/examples/network/other/navigation.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Navigation</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      border-collapse: collapse;
+    }
+    table.legend_table td,
+    table.legend_table th {
+      border: 1px solid #d3d3d3;
+      padding: 10px;
+    }
+
+    table.legend_table td {
+      text-align: center;
+      width:110px;
+    }
+  </style>
+
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+
+    function draw() {
+      destroy();
+
+      // create an array with nodes
+      var nodes = [
+        {id: 1, label: 'Node 1'},
+        {id: 2, label: 'Node 2'},
+        {id: 3, label: 'Node 3'},
+        {id: 4, label: 'Node 4'},
+        {id: 5, label: 'Node 5'}
+      ];
+
+      // create an array with edges
+      var edges = new vis.DataSet([
+        {from: 1, to: 3},
+        {from: 1, to: 2},
+        {from: 2, to: 4},
+        {from: 2, to: 5}
+      ]);
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        interaction: {
+          navigationButtons: true,
+          keyboard: true
+        }
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw();">
+<h2>Navigation controls and keyboad navigation</h2>
+<div style="width: 800px; font-size:14px; text-align: justify;">
+  This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
+  <table class="legend_table">
+    <tr>
+      <th>Icons: </th>
+      <td><img src="../../../dist/img/network/upArrow.png" />     </td>
+      <td><img src="../../../dist/img/network/downArrow.png" />   </td>
+      <td><img src="../../../dist/img/network/leftArrow.png" />   </td>
+      <td><img src="../../../dist/img/network/rightArrow.png" />  </td>
+      <td><img src="../../../dist/img/network/plus.png" />        </td>
+      <td><img src="../../../dist/img/network/minus.png" />       </td>
+      <td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
+    </tr>
+    <tr>
+      <th>Keyboard shortcuts:</th>
+      <td><div>Up arrow</div></td>
+      <td><div>Down arrow</div></td>
+      <td><div>Left arrow</div></td>
+      <td><div>Right arrow</div></td>
+      <td><div>=<br />[<br />Page up</div></td>
+      <td><div>-<br />]<br />Page down</div></td>
+      <td><div>None</div></td>
+    </tr>
+    <tr>
+      <th>Description:</th>
+      <td>Move up</td>
+      <td>Move down</td>
+      <td>Move left</td>
+      <td>Move right</td>
+      <td>Zoom in</td>
+      <td>Zoom out</td>
+      <td>Zoom extent</td>
+    </tr>
+  </table>
+  <br />
+  Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
+  Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> must be included.</u>
+    The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
+</div>
+
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+</body>
+</html>