diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 974e2d27..85829ad1 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -498,6 +498,38 @@ var options = { +
+{ + content: { + padding: '10px', + border: '1px solid #4d4d4d', + color: '#1a1a1a', + background: 'rgba(255,255,255,0.7)', + borderRadius: '2px', + boxShadow: '5px 5px 10px rgba(128,128,128,0.5)' + }, + line: { + height: '40px', + width: '0', + borderLeft: '1px solid #4d4d4d' + }, + dot: { + height: '0', + width: '0', + border: '5px solid #4d4d4d', + borderRadius: '5px' + } +}+
content
. See section Templates for a detailed explanation.content
. See section Templates for a detailed explanation.percentage
can be a Number
and must be between 0 and 1. If the parameter value of percentage
is null, the window will be left unchanged.
+ percentage
can be a Number
and must be between 0 and 1. If the parameter value of percentage
is null, the window will be left unchanged. Available options:
+ animation: boolean or {duration: number, easingFunction: string}
'easeInOutQuad'
. Available easing functions: "linear"
, "easeInQuad"
, "easeOutQuad"
, "easeInOutQuad"
, "easeInCubic"
, "easeOutCubic"
, "easeInOutCubic"
, "easeInQuart"
, "easeOutQuart"
, "easeInOutQuart"
, "easeInQuint"
, "easeOutQuint"
, "easeInOutQuint"
.percentage
can be a Number
and must be between 0 and 1. If the parameter value of percentage
is null, the window will be left unchanged.
+ percentage
can be a Number
and must be between 0 and 1. If the parameter value of percentage
is null, the window will be left unchanged. Available options:
+ animation: boolean or {duration: number, easingFunction: string}
'easeInOutQuad'
. Available easing functions: "linear"
, "easeInQuad"
, "easeOutQuad"
, "easeInOutQuad"
, "easeInCubic"
, "easeOutCubic"
, "easeInOutCubic"
, "easeInQuart"
, "easeOutQuart"
, "easeInOutQuart"
, "easeInQuint"
, "easeOutQuint"
, "easeInOutQuint"
.
+ Individual manipulation actions (updateTime
, updateGroup
and remove
) can also be set on individual items. If any of the item-level
+ actions are specified (and overrideItems
is not false
) then that takes precedence over the settings at the timeline level. Current behavior is
+ that if any of the item-level actions are not specified, those items get undefined
value (rather than inheriting from the timeline level). This may change
+ in future major releases, and code that specifies all item level values will handle major release changes better. That is, instead of using
+ editable: {updateTime : true}
, use editable: {updateTime : true, updateGroup: false, remove: false}
.
+
One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:
@@ -1743,11 +1757,11 @@ var items = new vis.DataSet([- Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML: + Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML:
var options = { - template: function (item) { + template: function (item, element, data) { var html = ... // generate HTML markup for this item return html; } @@ -1759,8 +1773,11 @@ var items = new vis.DataSet([ The HTML for an item can be created manually:var options = { - template: function (item) { - return '<h1>' + item.header + '</h1><p>' + item.description + '</p>'; + template: function (item, element, data) { + return '<h1>' + item.header + data.moving?' '+ data.start:'' + '</h1><p>' + item.description + '</p>'; + }, + onMoving: function (item, callback) { + item.moving = true; } };@@ -1795,7 +1812,7 @@ var template = Handlebars.compile(source); You can use a React component for the templates by rendering them to the templates' element directly:- template: function (item, element) { + template: function (item, element, data) { return ReactDOM.render(<b>{item.content}</b>, element); },@@ -1814,7 +1831,7 @@ var templates = { }; var options = { - template: function (item) { + template: function (item, element, data) { var template = templates[item.template]; // choose the right template return template(item); // execute the template } diff --git a/examples/graph3d/11_tooltips.html b/examples/graph3d/11_tooltips.html index 67d84443..d2821071 100644 --- a/examples/graph3d/11_tooltips.html +++ b/examples/graph3d/11_tooltips.html @@ -64,12 +64,26 @@ showShadow: false, // Option tooltip can be true, false, or a function returning a string with HTML contents - //tooltip: true, tooltip: function (point) { // parameter point contains properties x, y, z, and data // data is the original object passed to the point constructor return 'value: ' + point.z + '
' + point.data.extra; }, + + // Tooltip default styling can be overridden + tooltipStyle: { + content: { + background : 'rgba(255, 255, 255, 0.7)', + padding : '10px', + borderRadius : '10px' + }, + line: { + borderLeft : '1px dotted rgba(0, 0, 0, 0.5)' + }, + dot: { + border : '5px solid rgba(0, 0, 0, 0.5)' + } + }, keepAspectRatio: true, verticalRatio: 0.5 diff --git a/examples/timeline/editing/individualEditableItems.html b/examples/timeline/editing/individualEditableItems.html index ef7f0987..095c1574 100644 --- a/examples/timeline/editing/individualEditableItems.html +++ b/examples/timeline/editing/individualEditableItems.html @@ -34,7 +34,7 @@