diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/editing')
6 files changed, 0 insertions, 551 deletions
diff --git a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html deleted file mode 100644 index b1c8ef75..00000000 --- a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Custom snapping</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - <script src="../../googleAnalytics.js"></script> -</head> -<body> -<p> - When moving the items in on the Timeline below, they will snap to full hours, - independent of being zoomed in or out. -</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: 'A', start: '2015-02-09T04:00:00'}, - {id: 2, content: 'B', start: '2015-02-09T14:00:00'}, - {id: 3, content: 'C', start: '2015-02-09T16:00:00'}, - {id: 4, content: 'D', start: '2015-02-09T17:00:00'}, - {id: 5, content: 'E', start: '2015-02-10T03:00:00'} - ]); - - // Configuration for the Timeline - var options = { - editable: true, - - // always snap to full hours, independent of the scale - snap: function (date, scale, step) { - var hour = 60 * 60 * 1000; - return Math.round(date / hour) * hour; - } - - // to configure no snapping at all: - // - // snap: null - // - // or let the snap function return the date unchanged: - // - // snap: function (date, scale, step) { - // return date; - // } - }; - - // Create a Timeline - var timeline = new vis.Timeline(container, items, options); -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/editingItems.html b/www/lib/vis/examples/timeline/editing/editingItems.html deleted file mode 100644 index 186a363c..00000000 --- a/www/lib/vis/examples/timeline/editing/editingItems.html +++ /dev/null @@ -1,77 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Manipulation example</title> - - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - </style> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - <script src="../../googleAnalytics.js"></script> -</head> -<body> - -<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p> - -<div id="visualization"></div> - -<script> - // create a dataset with items - // we specify the type of the fields `start` and `end` here to be strings - // containing an ISO date. The fields will be outputted as ISO dates - // automatically getting data from the DataSet via items.get(). - var items = new vis.DataSet({ - type: { start: 'ISODate', end: 'ISODate' } - }); - - // add items to the DataSet - items.add([ - {id: 1, content: 'item 1<br>start', start: '2014-01-23'}, - {id: 2, content: 'item 2', start: '2014-01-18'}, - {id: 3, content: 'item 3', start: '2014-01-21'}, - {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'}, - {id: 5, content: 'item 5', start: '2014-01-28', type:'point'}, - {id: 6, content: 'item 6', start: '2014-01-26'} - ]); - - // log changes to the console - items.on('*', function (event, properties) { - console.log(event, properties.items); - }); - - var container = document.getElementById('visualization'); - var options = { - start: '2014-01-10', - end: '2014-02-10', - height: '300px', - - // allow selecting multiple items using ctrl+click, shift+click, or hold. - multiselect: true, - - // allow manipulation of items - editable: true, - - /* alternatively, enable/disable individual actions: - - editable: { - add: true, - updateTime: true, - updateGroup: true, - remove: true - }, - - */ - - showCurrentTime: true - }; - - var timeline = new vis.Timeline(container, items, options); - -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html deleted file mode 100644 index 7c15d878..00000000 --- a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html +++ /dev/null @@ -1,141 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Manipulation callbacks</title> - - <style type="text/css"> - body, html { - font-family: sans-serif; - font-size: 11pt; - } - </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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - <script src="../../googleAnalytics.js"></script> -</head> -<body> -<p style="max-width: 800px;"> - This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions. -</p> - -<div id="visualization"></div> -<p></p> -<div id="log"></div> - -<script type="text/javascript"> - // note that months are zero-based in the JavaScript Date object, so month 3 is April - var items = new vis.DataSet([ - {id: 1, content: 'item 1', start: new Date(2013, 3, 20)}, - {id: 2, content: 'item 2', start: new Date(2013, 3, 14)}, - {id: 3, content: 'item 3', start: new Date(2013, 3, 18)}, - {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)}, - {id: 5, content: 'item 5', start: new Date(2013, 3, 25)}, - {id: 6, content: 'item 6', start: new Date(2013, 3, 27)} - ]); - - var min = new Date(2013, 3, 1); // 1 april - var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april - - var container = document.getElementById('visualization'); - var options = { - editable: true, - - onAdd: function (item, callback) { - 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) { - var title = 'Do you really want to move the item to\n' + - 'start: ' + item.start + '\n' + - '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) { - if (item.start < min) item.start = min; - if (item.start > max) item.start = max; - if (item.end > max) item.end = max; - - callback(item); // send back the (possibly) changed item - }, - - onUpdate: function (item, callback) { - 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) { - 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); - - items.on('*', function (event, properties) { - logEvent(event, properties); - }); - - function logEvent(event, properties) { - var log = document.getElementById('log'); - var msg = document.createElement('div'); - msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' + - 'properties=' + JSON.stringify(properties); - 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>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/individualEditableItems.html b/www/lib/vis/examples/timeline/editing/individualEditableItems.html deleted file mode 100644 index d6210305..00000000 --- a/www/lib/vis/examples/timeline/editing/individualEditableItems.html +++ /dev/null @@ -1,58 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Individual editable items</title> - - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - - div.vis-editable, - div.vis-editable.vis-selected { - /* custom styling for editable items... */ - } - - div.vis-readonly, - div.vis-readonly.vis-selected { - /* custom styling for readonly items... */ - background-color: #ff4500; - border-color: red; - color: white; - } - </style> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - <script src="../../googleAnalytics.js"></script> -</head> -<body> - -<p>Specify individual items to be editable or readonly.</p> - -<div id="visualization"></div> - -<script> - // create a DataSet with items - var items = new vis.DataSet([ - {id: 1, content: 'Editable', editable: true, start: '2010-08-23'}, - {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'}, - {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'}, - {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'}, - {id: 5, content: 'Editable', editable: true, start: '2010-08-28'}, - {id: 6, content: 'Read-only', editable: false, start: '2010-08-29'}, - {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'}, - {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'} - ]); - - var container = document.getElementById('visualization'); - var options = { - editable: true // default for all items - }; - - var timeline = new vis.Timeline(container, items, options); - -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html deleted file mode 100644 index 18380beb..00000000 --- a/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html +++ /dev/null @@ -1,130 +0,0 @@ -<html> -<head> - <title>Timeline | Tooltip on item onUpdateTime Option</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <style type="text/css"> - .vis-item .vis-onUpdateTime-tooltip { - border-radius: 4px; - } - </style> - - <script src="../../googleAnalytics.js"></script> -</head> - -<body> - -<h1>Timeline Tooltip on item onUpdateTime Option</h1> - -<h2>With <code>tooltipOnItemUpdateTime: true</code> -</h2> - -<div id="mytimeline1"></div> - -<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code> -</h2> - -<div id="mytimeline2"></div> - - -<h2>With groups</h2> - -<div id="mytimeline3"></div> -<script> - - // create items - var numberOfItems = 10; - var items = new vis.DataSet(); - var types = [ 'box', 'point', 'range'] - - - for (var order = 0; order < numberOfItems; order++) { - var date = vis.moment(); - - - date.add(Math.round(Math.random() * 2), 'hour'); - items.add({ - id: order, - type: types[Math.floor(3 * Math.random())], - content: 'Item ' + order, - start: date.clone().add(order + 1, 'hour'), - end: date.clone().add(order + 3, 'hour') - }); - } - - // specify options - var options = { - multiselect: true, - maxHeight: 400, - start: new Date((new Date()).valueOf() - 10000000), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true - }; - - var options1 = Object.assign({ - tooltipOnItemUpdateTime: true - }, options) - var container1 = document.getElementById('mytimeline1'); - timeline1 = new vis.Timeline(container1, items, null, options1); - - var options2 = Object.assign({ - orientation: 'top', - tooltipOnItemUpdateTime: { - template: function(item) { - return 'html template for tooltip with <b>item.start</b>: ' + item.start; - } - } - }, options) - var container2 = document.getElementById('mytimeline2'); - timeline2 = new vis.Timeline(container2, items, null, options2); - - - // create groups - var numberOfGroups = 25; - var groups = new vis.DataSet() - for (var i = 0; i < numberOfGroups; i++) { - groups.add({ - id: i, - content: 'Truck ' + i - }) - } - - // create items for groups - var numberOfItems = 1000; - var itemsWithGroups = new vis.DataSet(); - - var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); - - for (var truck = 0; truck < numberOfGroups; truck++) { - var date = new Date(); - for (var order = 0; order < itemsPerGroup; order++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - - itemsWithGroups.add({ - id: order + itemsPerGroup * truck, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - } - } - - - var options3 = Object.assign({ - orientation: 'top', - tooltipOnItemUpdateTime: true - }, options) - var container3 = document.getElementById('mytimeline3'); - timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3); - -</script> - -</body> -</html> diff --git a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html deleted file mode 100644 index 985551ee..00000000 --- a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html +++ /dev/null @@ -1,90 +0,0 @@ -<html> -<head> - <title>Timeline | Update data on event</title> - - <style type="text/css"> - body { - font: 11pt verdana; - } - - .vis.timeline .item.past { - filter: alpha(opacity=50); - opacity: 0.5; - } - </style> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - <script src="../../googleAnalytics.js"></script> -</head> - -<body> -<p style="width: 600px;"> - When the custom time bar is shown, the user can drag this bar to a specific - time. The Timeline sends an event that the custom time is changed, after - which the contents of the timeline can be changed according to the specified - time in past or future. -</p> - -<div id="customTime"> </div> -<p></p> - -<div id="mytimeline"></div> - - -<script> - // create a data set - var data = new vis.DataSet([ - { - id: 1, - start: new Date((new Date()).getTime() - 60 * 1000), - end: new Date(), - content: 'Dynamic event' - } - ]); - - // specify options - var options = { - showCurrentTime: true - }; - - // create a timeline - var container = document.getElementById('mytimeline'); - timeline = new vis.Timeline(container, data, options); - - timeline.addCustomTime(new Date()); - - // add event listener - timeline.on('timechange', function (event) { - document.getElementById("customTime").innerHTML = "Custom Time: " + event.time; - - var item = data.get(1); - if (event.time > item.start) { - item.end = new Date(event.time); - var now = new Date(); - if (event.time < now) { - item.content = "Dynamic event (past)"; - item.className = 'past'; - } - else if (event.time > now) { - item.content = "Dynamic event (future)"; - item.className = 'future'; - } - else { - item.content = "Dynamic event (now)"; - item.className = 'now'; - } - - data.update(item); - } - }); - - // set a custom range from -2 minute to +3 minutes current time - var start = new Date((new Date()).getTime() - 2 * 60 * 1000); - var end = new Date((new Date()).getTime() + 3 * 60 * 1000); - timeline.setWindow(start, end, {animation: false}); - -</script> - -</body> -</html> |