From d8444f3b0ce5f55fbfd6c069d0ecbcb73926ce1f Mon Sep 17 00:00:00 2001 From: josdejong Date: Tue, 18 Feb 2014 15:48:30 +0100 Subject: [PATCH] Documented callback functions onAdd, onUpdate, onMove, onRemove --- docs/timeline.html | 88 ++++++++++++++++++++-- examples/timeline/08_validate_changes.html | 2 +- 2 files changed, 82 insertions(+), 8 deletions(-) diff --git a/docs/timeline.html b/docs/timeline.html index 66efe864..33e5beee 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -39,6 +39,7 @@
  • Configuration Options
  • Methods
  • Events
    • +
  • Editing Items
  • Styles
  • Data Policy
    • @@ -344,9 +345,9 @@ var options = { editable Boolean - true - If true, the items on the timeline can be dragged. - + false + If true, the items on the timeline can be dragged. Only applicable when option selectable is true. See also the callbacks onAdd, onUpdate, onMove, and onRemove, described in detail in section Editing Items. + @@ -420,6 +421,38 @@ var options = { + + onAdd + Function + none + Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable are set true. + + + + + onUpdate + Function + none + Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable are set true. + + + + + onMove + Function + none + Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options selectable and editable are set true. + + + + + onRemove + Function + none + Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options selectable and editable are set true. + + + order Function @@ -435,9 +468,7 @@ var options = { orientation String 'bottom' - Orientation of the timeline: 'top' or 'bottom' (default). - If orientation is 'bottom', the time axis is drawn at the bottom, - and if 'top', the axis is drawn on top. + Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top. @@ -735,6 +766,49 @@ timeline.off('select', onSelect); +

    Editing Items

    +

    + When the Timeline is configured to be editable (both options selectable and editable are true), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right. +

    + +

    + One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose: +

    + + + +

    + Each of the callbacks is invoked with two arguments: +

    + + +

    + Example code: +

    + +
    var options = {
+  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
+    }
+  }
+}
+
    + +A full example is available here: 08_validate_changes.html. +

    Styles

    @@ -746,7 +820,7 @@ timeline.off('select', onSelect);

    For example, to change the border and background color of all items, include the following code inside the head of your html code or in a separate stylesheet.

    <style>
-  .graph .item {
+  .vis.timeline .item {
     border-color: orange;
     background-color: yellow;
   }
diff --git a/examples/timeline/08_validate_changes.html b/examples/timeline/08_validate_changes.html
index 2964f10c..7b41f780 100644
--- a/examples/timeline/08_validate_changes.html
+++ b/examples/timeline/08_validate_changes.html
@@ -59,7 +59,7 @@
           callback(item); // send back adjusted item
         }
         else {
-          callback(null); // cancel editing item
+          callback(null); // cancel updating the item
         }
       },