Released version 4.1.0

dist/vis.css

@@ -825,6 +825,7 @@ div.vis-network-tooltip {
   border: 1px solid #808074;
 
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
 }
 div.vis-network-configuration {
     position:relative;

examples/timeline/editing/editingItemsCallbacks.html

@@ -10,6 +10,9 @@
     }
   </style>
 
+  <script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
+  <link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/>
+
   <script src="../../../dist/vis.js"></script>
   <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
   <script src="../../googleAnalytics.js"></script>
@@ -42,24 +45,30 @@
     editable: true,
 
     onAdd: function (item, callback) {
-      item.content = prompt('Enter text content for new item:', item.content);
-      if (item.content != null) {
-        callback(item); // send back adjusted new item
-      }
-      else {
-        callback(null); // cancel item creation
-      }
+      prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
+        if (value) {
+          item.content = value;
+          callback(item); // send back adjusted new item
+        }
+        else {
+          callback(null); // cancel item creation
+        }
+      });
     },
 
     onMove: function (item, callback) {
-      if (confirm('Do you really want to move the item to\n' +
+      var title = 'Do you really want to move the item to\n' +
           'start: ' + item.start + '\n' +
-          'end: ' + item.end + '?')) {
-        callback(item); // send back item as confirmation (can be changed)
-      }
-      else {
-        callback(null); // cancel editing item
-      }
+          'end: ' + item.end + '?';
+
+      prettyConfirm('Move item', title, function (ok) {
+        if (ok) {
+          callback(item); // send back item as confirmation (can be changed)
+        }
+        else {
+          callback(null); // cancel editing item
+        }
+      });
     },
 
     onMoving: function (item, callback) {
@@ -71,22 +80,26 @@
     },
 
     onUpdate: function (item, callback) {
-      item.content = prompt('Edit items text:', item.content);
-      if (item.content != null) {
-        callback(item); // send back adjusted item
-      }
-      else {
-        callback(null); // cancel updating the item
-      }
+      prettyPrompt('Update item', 'Edit items text:', item.content, function (value) {
+        if (value) {
+          item.content = value;
+          callback(item); // send back adjusted item
+        }
+        else {
+          callback(null); // cancel updating the item
+        }
+      });
     },
 
     onRemove: function (item, callback) {
-      if (confirm('Remove item ' + item.content + '?')) {
-        callback(item); // confirm deletion
-      }
-      else {
-        callback(null); // cancel deletion
-      }
+      prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) {
+        if (ok) {
+          callback(item); // confirm deletion
+        }
+        else {
+          callback(null); // cancel deletion
+        }
+      });
     }
   };
   var timeline = new vis.Timeline(container, items, options);
@@ -103,6 +116,26 @@
     log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
   }
 
+  function prettyConfirm(title, text, callback) {
+    swal({
+      title: title,
+      text: text,
+      type: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: "#DD6B55"
+    }, callback);
+  }
+
+  function prettyPrompt(title, text, inputValue, callback) {
+    swal({
+      title: title,
+      text: text,
+      type: 'input',
+      showCancelButton: true,
+      inputValue: inputValue
+    }, callback);
+  }
+
 </script>
 </body>
 </html>

examples/timeline/other/customTimeBars.html

@@ -25,7 +25,7 @@
 </p>
 <p>
   <input type="button" id="remove" value="Remove custom vertical bar">
-  <input type="text" id="barIndex" value="1" placeholder="custom bar ID">
+  <input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
 </p>
 <p>
   <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
@@ -49,7 +49,7 @@
 
   // Set first time bar
   customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
-  timeline.addCustomTime(customDate, '1');
+  timeline.addCustomTime(customDate, 't1');
 
   document.getElementById('add').onclick = function () {
     try {

graph2d_examples.html

@@ -204,7 +204,7 @@
         </a>
     </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
-        <a href="examples/graph2d/16_bothAxis_titles.html">
+        <a href="examples/graph2d/16_bothAxisTitles.html">
             <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/16.png">
             <div class="exampleTitle">axis titles</div>
         </a>

index.html

@@ -183,8 +183,8 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.0.0/vis.min.js" target="_blank">vis.min.js</a><br>
-                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.0.0/vis.min.css" target="_blank">vis.min.css</a>
+                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.12.0/vis.min.js" target="_blank">vis.min.js</a><br>
+                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.12.0/vis.min.css" target="_blank">vis.min.css</a>
                     </p>
                     <h3>download</h3>
                     <p>