Implemented `activatable` support for Network

HISTORY.md

@@ -17,6 +17,7 @@ http://visjs.org
 - A fix in reading group properties for a node.
 - Fixed physics solving stopping when a support node was not moving.
 - Added localization support.
+- Implemented option `activatable`.
 
 ### Graph2D
 

dist/vis.css

@@ -1,3 +1,18 @@
+.vis .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* Must be displayed above for example selected Timeline items */
+  z-index: 10;
+}
+
+.vis-active {
+  box-shadow: 0 0 10px #86d5f8;
+}
+
 .vis.timeline {
 }
 
@@ -129,8 +144,7 @@
   position: absolute;
   width: 100%;
   height: 0;
-  left: 1px;
-  z-index: 1;
+  left: 0;
 }
 
 .vis.timeline  .foreground .group {
@@ -157,7 +171,9 @@
 .vis.timeline .item.selected {
   border-color: #FFC200;
   background-color: #FFF785;
-  z-index: 999;
+
+  /* z-index must be higher than the z-index of custom time bar and current time bar */
+  z-index: 2;
 }
 
 .vis.timeline .editable .item.selected {
@@ -233,7 +249,6 @@
   left: -4px;
 
   cursor: w-resize;
-  z-index: 10000;
 }
 
 .vis.timeline .item.range .drag-right {
@@ -244,7 +259,6 @@
   right: -4px;
 
   cursor: e-resize;
-  z-index: 10001; /* a little higher z-index than .drag-left */
 }
 
 .vis.timeline .timeaxis {
@@ -511,137 +525,148 @@
 
 
 div.network-manipulationDiv {
-    border-width:0px;
-    border-bottom: 1px;
-    border-style:solid;
-    border-color: #d6d9d8;
-    background: #ffffff; /* Old browsers */
-    background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
-
-    width: 600px;
-    height:30px;
-    z-index:10;
-    position:absolute;
+  border-width: 0;
+  border-bottom: 1px;
+  border-style:solid;
+  border-color: #d6d9d8;
+  background: #ffffff; /* Old browsers */
+  background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 30px;
 }
 
 div.network-manipulation-editMode {
-    height:30px;
-    z-index:10;
-    position:absolute;
-    margin-top:20px;
+  position:absolute;
+  left: 0;
+  top: 0;
+  height: 30px;
+  margin-top:20px;
 }
 
 div.network-manipulation-closeDiv {
-    height:30px;
-    width:30px;
-    z-index:11;
-    position:absolute;
-    margin-top:3px;
-    margin-left:590px;
-    background-position: 0px 0px;
-    background-repeat:no-repeat;
-    background-image: url("img/network/cross.png");
-    cursor: pointer;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  position:absolute;
+  left: 0;
+  top: 0;
+  width: 30px;
+  height: 30px;
+
+  margin-top: 3px;
+  margin-left: 590px;
+  background-position: 0px 0px;
+  background-repeat: no-repeat;
+  background-image: url("img/network/cross.png");
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 span.network-manipulationUI {
-    font-family: verdana;
-    font-size: 12px;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    display:inline-block;
-    background-position: 0px 0px;
-    background-repeat:no-repeat;
-    height:24px;
-    margin: -14px 0px 0px 10px;
-    vertical-align:middle;
-    cursor: pointer;
-    padding: 0px 8px 0px 8px;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  font-family: verdana;
+  font-size: 12px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  display:inline-block;
+  background-position: 0px 0px;
+  background-repeat:no-repeat;
+  height:24px;
+  margin: -14px 0px 0px 10px;
+  vertical-align:middle;
+  cursor: pointer;
+  padding: 0px 8px 0px 8px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 span.network-manipulationUI:hover {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
 span.network-manipulationUI:active {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
 span.network-manipulationUI.back {
-    background-image: url("img/network/backIcon.png");
+  background-image: url("img/network/backIcon.png");
 }
 
 span.network-manipulationUI.none:hover {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
-    cursor: default;
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+  cursor: default;
 }
 span.network-manipulationUI.none:active {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
 span.network-manipulationUI.none {
-    padding: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
 }
 span.network-manipulationUI.notification{
-    margin: 2px;
-    font-weight: bold;
+  margin: 2px;
+  font-weight: bold;
 }
 
 span.network-manipulationUI.add {
-    background-image: url("img/network/addNodeIcon.png");
+  background-image: url("img/network/addNodeIcon.png");
 }
 
 span.network-manipulationUI.edit {
-    background-image: url("img/network/editIcon.png");
+  background-image: url("img/network/editIcon.png");
 }
 
 span.network-manipulationUI.edit.editmode {
-    background-color: #fcfcfc;
-    border-style:solid;
-    border-width:1px;
-    border-color: #cccccc;
+  background-color: #fcfcfc;
+  border-style:solid;
+  border-width:1px;
+  border-color: #cccccc;
 }
 
 span.network-manipulationUI.connect {
-    background-image: url("img/network/connectIcon.png");
+  background-image: url("img/network/connectIcon.png");
 }
 
 span.network-manipulationUI.delete {
-    background-image: url("img/network/deleteIcon.png");
+  background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
 span.network-manipulationLabel {
-    margin: 0px 0px 0px 23px;
-    line-height: 25px;
+  margin: 0px 0px 0px 23px;
+  line-height: 25px;
 }
 div.network-seperatorLine {
-    display:inline-block;
-    width:1px;
-    height:20px;
-    background-color: #bdbdbd;
-    margin: 5px 7px 0px 15px;
+  display:inline-block;
+  width:1px;
+  height:20px;
+  background-color: #bdbdbd;
+  margin: 5px 7px 0px 15px;
+}
+
+div.network-navigation_wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
 div.network-navigation {
     width:34px;
     height:34px;
-    z-index:10;
     -moz-border-radius: 17px;
     border-radius: 17px;
     position:absolute;

docs/network.html

@@ -870,6 +870,14 @@ var options = {
   <th>Description</th>
 </tr>
 
+<tr>
+  <td>activatable</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>When a Network is configured to be <code>activatable</code>, it will react to mouse, touch, and keyboard events only when active.
+    When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.</td>
+</tr>
+
 <tr>
   <td><a href="#Physics">physics</a></td>
   <td>Object</td>

examples/network/01_basic_usage.html

@@ -4,6 +4,7 @@
   <title>Network | Basic usage</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     #mynetwork {

examples/network/02_random_nodes.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/03_images.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/04_shapes.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/05_social_network.html

@@ -16,6 +16,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var DIR = 'img/soft-scraps-icons/';

examples/network/06_groups.html

@@ -16,6 +16,7 @@
 
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/07_selections.html

@@ -4,6 +4,7 @@
   <title>Network | Selections</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     #mynetwork {

examples/network/08_mobile_friendly.html

@@ -22,6 +22,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/09_sizing.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/10_multiline_text.html

@@ -12,6 +12,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     function draw() {

examples/network/11_custom_style.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/12_scalable_images.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var DIR = 'img/soft-scraps-icons/';

examples/network/13_dashed_lines.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     // Called on page load

examples/network/14_dot_language.html

@@ -3,6 +3,7 @@
   <title>Network | DOT Language</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="mynetwork"></div>

examples/network/15_dot_language_playground.html

@@ -4,6 +4,7 @@
   <title>Network | DOT language playground</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, html {

examples/network/16_dynamic_data.html

@@ -54,6 +54,7 @@
 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes, edges, network;

examples/network/17_network_info.html

@@ -18,6 +18,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/18_fully_random_nodes_clustering.html

@@ -1,95 +1,96 @@
 <!doctype html>
 <html>
 <head>
-    <title>Network | Fully random nodes clustering</title>
+  <title>Network | Fully random nodes clustering</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt sans;
-        }
-        #mynetwork {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../dist/vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var network = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
 
-        function draw() {
-            nodes = [];
-            edges = [];
-            // randomly create some nodes and edges
-            var nodeCount = parseInt(document.getElementById('nodeCount').value);
+    function draw() {
+      nodes = [];
+      edges = [];
+      // randomly create some nodes and edges
+      var nodeCount = parseInt(document.getElementById('nodeCount').value);
 
-            for (var i = 0; i < nodeCount; i++) {
-                nodes.push({
-                    id: i,
-                    label: String(i)
-                });
-            }
-            for (var i = 0; i < nodeCount; i++) {
-                var from = i;
-                var to = i;
-                to = i;
-                while (to == i) {
-                    to = Math.floor(Math.random() * (nodeCount));
-                }
-                edges.push({
-                    from: from,
-                    to: to
-                });
-            }
-            // create a network
-            var clusteringOn = document.getElementById('clustering').checked;
-            var container = document.getElementById('mynetwork');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
-                clustering: {
-                    enabled: clusteringOn
-                },
-                stabilize: false
-            };
-            network = new vis.Network(container, data, options);
-
-            // add event listeners
-            network.on('select', function(params) {
-                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-            });
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
+      }
+      for (var i = 0; i < nodeCount; i++) {
+        var from = i;
+        var to = i;
+        to = i;
+        while (to == i) {
+          to = Math.floor(Math.random() * (nodeCount));
         }
-    </script>
+        edges.push({
+          from: from,
+          to: to
+        });
+      }
+      // create a network
+      var clusteringOn = document.getElementById('clustering').checked;
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
+        clustering: {
+          enabled: clusteringOn
+        },
+        stabilize: false
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+  </script>
 </head>
 
 <body onload="draw();">
 <h2>Clustering - Fully random network</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
-    This example shows a fully randomly generated set of nodes and connected edges.
-    By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
-    a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
-    <br />
-    <br />
-    Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
-    will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
-    <br />
-    <br />
-    Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
+  This example shows a fully randomly generated set of nodes and connected edges.
+  By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
+  a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
+  <br />
+  <br />
+  Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
+  will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
+  <br />
+  <br />
+  Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
 </div>
 <br />
 <form onsubmit="draw(); return false;">
-    <label for="nodeCount">Number of nodes:</label>
-    <input id="nodeCount" type="text" value="50" style="width: 50px;">
-    <label for="clustering">Enable Clustering:</label>
-    <input id="clustering" type="checkbox" onChange="draw()" checked="true">
-    <input type="submit" value="Go">
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="50" style="width: 50px;">
+  <label for="clustering">Enable Clustering:</label>
+  <input id="clustering" type="checkbox" onChange="draw()" checked="true">
+  <input type="submit" value="Go">
 </form>
 <br>
 

examples/network/19_scale_free_graph_clustering.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/22_les_miserables.html

@@ -12,6 +12,7 @@
     </style>
 
     <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
     <script type="text/javascript">
         function draw() {

examples/network/23_hierarchical_layout.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/24_hierarchical_layout_userdefined.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/25_physics_configuration.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/26_staticSmoothCurves.html

@@ -4,6 +4,7 @@
   <title>Network | Static smooth curves</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     #mynetwork {

lib/network/Network.js

@@ -13,6 +13,7 @@ var Node = require('./Node');
 var Edge = require('./Edge');
 var Popup = require('./Popup');
 var MixinLoader = require('./mixins/MixinLoader');
+var Activator = require('../shared/Activator');
 var locales = require('./locales');
 
 // Load custom shapes into CanvasRenderingContext2D
@@ -545,14 +546,13 @@ Network.prototype.setData = function(data, disableStart) {
 /**
  * Set options
  * @param {Object} options
- * @param {Boolean} [initializeView] | set zoom and translation to default.
  */
 Network.prototype.setOptions = function (options) {
   if (options) {
     var prop;
 
     var fields = ['nodes','edges','smoothCurves','hierarchicalLayout','clustering','navigation','keyboard','dataManipulation',
-      'onAdd','onEdit','onEditEdge','onConnect','onDelete'
+      'onAdd','onEdit','onEditEdge','onConnect','onDelete','activatable'
     ];
     util.selectiveNotDeepExtend(fields,this.constants, options);
     util.selectiveNotDeepExtend(['color'],this.constants.nodes, options.nodes);
@@ -648,6 +648,19 @@ Network.prototype.setOptions = function (options) {
       }
     }
 
+    if ('activatable' in options) {
+      if (options.activatable) {
+        this.activator = new Activator(this.frame);
+        this.activator.on('change', this._createKeyBinds.bind(this));
+      }
+      else {
+        if (this.activator) {
+          this.activator.destroy();
+          delete this.activator;
+        }
+      }
+    }
+
     if (options.labels) {
       throw new Error('Option "labels" is deprecated. Use options "locale" and "locales" instead.');
     }
@@ -686,7 +699,7 @@ Network.prototype._create = function () {
   }
 
   this.frame = document.createElement('div');
-  this.frame.className = 'network-frame';
+  this.frame.className = 'vis network-frame';
   this.frame.style.position = 'relative';
   this.frame.style.overflow = 'hidden';
 
@@ -738,7 +751,7 @@ Network.prototype._createKeyBinds = function() {
 
   this.mousetrap.reset();
 
-  if (this.constants.keyboard.enabled == true) {
+  if (this.constants.keyboard.enabled && this.isActive()) {
     this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
     this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
     this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
@@ -2223,4 +2236,12 @@ Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
   }
 };
 
+/**
+ * Returns true when the Timeline is active.
+ * @returns {boolean}
+ */
+Network.prototype.isActive = function () {
+  return !this.activator || this.activator.active;
+};
+
 module.exports = Network;

lib/shared/Activator.js

@@ -1,4 +1,5 @@
 var mousetrap = require('mousetrap');
+var Emitter = require('emitter-component');
 var Hammer = require('../module/hammer');
 var util = require('../util');
 
@@ -27,14 +28,36 @@ function Activator(container) {
   this.hammer = Hammer(this.dom.overlay, {prevent_default: false});
   this.hammer.on('tap', this._onTapOverlay.bind(this));
 
+  // block all touch events (except tap)
+  var me = this;
+  var events = [
+    'touch', 'pinch',
+    'doubletap', 'hold',
+    'dragstart', 'drag', 'dragend',
+    'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+  ];
+  events.forEach(function (event) {
+    me.hammer.on(event, function (event) {
+      event.stopPropagation();
+    });
+  });
+
   // attach a tap event to the window, in order to deactivate when clicking outside the timeline
   this.windowHammer = Hammer(window, {prevent_default: false});
-  this.windowHammer.on('tap', this.deactivate.bind(this));
+  this.windowHammer.on('tap', function (event) {
+    // deactivate when clicked outside the container
+    if (!_hasParent(event.target, container)) {
+      me.deactivate();
+    }
+  });
 
   // mousetrap listener only bounded when active)
   this.escListener = this.deactivate.bind(this);
 }
 
+// turn into an event emitter
+Emitter(Activator.prototype);
+
 // The currently active activator
 Activator.current = null;
 
@@ -66,6 +89,12 @@ Activator.prototype.activate = function () {
   this.active = true;
   this.dom.overlay.style.display = 'none';
   util.addClassName(this.dom.container, 'vis-active');
+
+  this.emit('change');
+  this.emit('activate');
+
+  // ugly hack: bind ESC after emitting the events, as the Network rebinds all
+  // keyboard events on a 'change' event
   mousetrap.bind('esc', this.escListener);
 };
 
@@ -78,12 +107,39 @@ Activator.prototype.deactivate = function () {
   this.dom.overlay.style.display = '';
   util.removeClassName(this.dom.container, 'vis-active');
   mousetrap.unbind('esc', this.escListener);
+
+  this.emit('change');
+  this.emit('deactivate');
 };
 
+/**
+ * Handle a tap event: activate the container
+ * @param event
+ * @private
+ */
 Activator.prototype._onTapOverlay = function (event) {
   // activate the container
   this.activate();
   event.stopPropagation();
 };
 
+/**
+ * Test whether the element has the requested parent element somewhere in
+ * its chain of parent nodes.
+ * @param {HTMLElement} element
+ * @param {HTMLElement} parent
+ * @returns {boolean} Returns true when the parent is found somewhere in the
+ *                    chain of parent nodes.
+ * @private
+ */
+function _hasParent(element, parent) {
+  while (element) {
+    if (element === parent) {
+      return true
+    }
+    element = element.parentNode;
+  }
+  return false;
+}
+
 module.exports = Activator;

lib/timeline/Core.js

@@ -114,7 +114,7 @@ Core.prototype._create = function (container) {
   events.forEach(function (event) {
     var listener = function () {
       var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-      if (!me.activator || me.activator.active) {
+      if (me.isActive()) {
         me.emit.apply(me, args);
       }
     };
@@ -206,6 +206,14 @@ Core.prototype.setOptions = function (options) {
   this.redraw();
 };
 
+/**
+ * Returns true when the Timeline is active.
+ * @returns {boolean}
+ */
+Core.prototype.isActive = function () {
+  return !this.activator || this.activator.active;
+};
+
 /**
  * Destroy the Core, clean up all DOM elements and event listeners.
  */