From cb4c33a894790c527cd6a9b0f0693477031daaa5 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Thu, 28 May 2015 12:24:25 +0200
Subject: [PATCH] Removed promt and confirm in example with fancy looking
 (non-blocking) prompt/confirm

---
 .../editing/editingItemsCallbacks.html        | 88 +++++++++++++------
 examples/timeline/other/tooltips.html         | 62 +++++++++++++
 2 files changed, 123 insertions(+), 27 deletions(-)
 create mode 100644 examples/timeline/other/tooltips.html

diff --git a/examples/timeline/editing/editingItemsCallbacks.html b/examples/timeline/editing/editingItemsCallbacks.html
index 8797683f..6a49f3a4 100644
--- a/examples/timeline/editing/editingItemsCallbacks.html
+++ b/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,27 @@
     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) {
+    console.log(title, text, inputValue)
+    swal({
+      title: title,
+      text: text,
+      type: 'input',
+      showCancelButton: true,
+      inputValue: inputValue
+    }, callback);
+  }
+
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/timeline/other/tooltips.html b/examples/timeline/other/tooltips.html
new file mode 100644
index 00000000..7b75b42b
--- /dev/null
+++ b/examples/timeline/other/tooltips.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Tooltips</title>
+
+  <style type="text/css">
+    /* http://www.menucool.com/tooltip/css-tooltip */
+    a.tooltip {outline:none; }
+    a.tooltip strong {line-height:30px;}
+    a.tooltip:hover {text-decoration:none;}
+    a.tooltip span {
+      z-index:10;display:none; padding:14px 20px;
+      margin-top:-30px; margin-left:28px;
+      width:300px; line-height:16px;
+    }
+    a.tooltip:hover span{
+      display:inline; position:absolute; color:#111;
+      border:1px solid #DCA; background:#fffAF0;}
+    .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
+
+    /*CSS3 extras*/
+    a.tooltip span
+    {
+      border-radius:4px;
+      box-shadow: 5px 5px 8px #CCC;
+    }
+  </style>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body>
+
+<p>
+  Show tooltips when hovering items using a CSS tooltip library or your own custom CSS.
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2014-04-20'},
+    {id: 2, content: 'item 2', start: '2014-04-14'},
+    {id: 3, content: 'item 3', start: '2014-04-18'},
+    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
+    {id: 5, content: 'item 5', start: '2014-04-25'},
+    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>
\ No newline at end of file