Browse Source

Removed promt and confirm in example with fancy looking (non-blocking) prompt/confirm

flowchartTest
jos 9 years ago
parent
commit
cb4c33a894
2 changed files with 123 additions and 27 deletions
  1. +61
    -27
      examples/timeline/editing/editingItemsCallbacks.html
  2. +62
    -0
      examples/timeline/other/tooltips.html

+ 61
- 27
examples/timeline/editing/editingItemsCallbacks.html View File

@ -10,6 +10,9 @@
} }
</style> </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> <script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script> <script src="../../googleAnalytics.js"></script>
@ -42,24 +45,30 @@
editable: true, editable: true,
onAdd: function (item, callback) { 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) { 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' + '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) { onMoving: function (item, callback) {
@ -71,22 +80,26 @@
}, },
onUpdate: function (item, callback) { 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) { 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); var timeline = new vis.Timeline(container, items, options);
@ -103,6 +116,27 @@
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg); 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> </script>
</body> </body>
</html> </html>

+ 62
- 0
examples/timeline/other/tooltips.html View File

@ -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>

Loading…
Cancel
Save