Browse Source

Merge pull request #290 from dturkenk/data-attributes

Store additional item fields as data- attributes
v3_develop
Jos de Jong 10 years ago
parent
commit
ea08f62bbd
9 changed files with 78 additions and 2 deletions
  1. +8
    -0
      docs/timeline.html
  2. +39
    -0
      examples/timeline/23_data_attributes.html
  3. +1
    -0
      examples/timeline/index.html
  4. +1
    -1
      lib/timeline/Core.js
  5. +1
    -1
      lib/timeline/component/ItemSet.js
  6. +20
    -0
      lib/timeline/component/item/Item.js
  7. +4
    -0
      lib/timeline/component/item/ItemBox.js
  8. +2
    -0
      lib/timeline/component/item/ItemPoint.js
  9. +2
    -0
      lib/timeline/component/item/ItemRange.js

+ 8
- 0
docs/timeline.html View File

@ -378,6 +378,14 @@ var options = {
When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
</tr>
<tr>
<td>dataAttributes</td>
<td>Array[String]</td>
<td>false</td>
<td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the content element.</td>
</tr>
<tr>
<td>editable</td>
<td>Boolean | Object</td>

+ 39
- 0
examples/timeline/23_data_attributes.html View File

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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', tooltip: 'This is item 1'},
{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', tooltip: 'This is item 6'}
]);
// Configuration for the Timeline
var options = {dataAttributes: ['tooltip', 'id']};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -34,6 +34,7 @@
<p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
<p><a href="21_set_selection.html">21_set_selection.html</a></p>
<p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
<p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

+ 1
- 1
lib/timeline/Core.js View File

@ -173,7 +173,7 @@ Core.prototype._create = function (container) {
Core.prototype.setOptions = function (options) {
if (options) {
// copy the known options
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse'];
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes'];
util.selectiveExtend(fields, this.options, options);
if ('clickToUse' in options) {

+ 1
- 1
lib/timeline/component/ItemSet.js View File

@ -259,7 +259,7 @@ ItemSet.prototype._create = function(){
ItemSet.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes'];
util.selectiveExtend(fields, this.options, options);
if ('margin' in options) {

+ 20
- 0
lib/timeline/component/item/Item.js View File

@ -140,4 +140,24 @@ Item.prototype._repaintDeleteButton = function (anchor) {
}
};
/**
* Process dataAttributes timeline option and set as data- attributes on dom.content
*/
Item.prototype._attachDataAttributes = function() {
if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
var auxiliaryData = Object.keys(this.data);
for (var i in this.options.dataAttributes) {
var c = this.options.dataAttributes[i];
if (auxiliaryData.indexOf(c) >= 0) {
this.dom.content.setAttribute('data-' + c, this.data[c]);
}
}
}
};
module.exports = Item;

+ 4
- 0
lib/timeline/component/item/ItemBox.js View File

@ -132,6 +132,10 @@ ItemBox.prototype.redraw = function() {
this.dirty = true;
}
this._attachDataAttributes();
// recalculate size
if (this.dirty) {
this.props.dot.height = dom.dot.offsetHeight;

+ 2
- 0
lib/timeline/component/item/ItemPoint.js View File

@ -121,6 +121,8 @@ ItemPoint.prototype.redraw = function() {
this.dirty = true;
}
this._attachDataAttributes();
// recalculate size
if (this.dirty) {
this.width = dom.point.offsetWidth;

+ 2
- 0
lib/timeline/component/item/ItemRange.js View File

@ -115,6 +115,8 @@ ItemRange.prototype.redraw = function() {
this.dirty = true;
}
this._attachDataAttributes();
// recalculate size
if (this.dirty) {
// determine from css whether this box has overflow

Loading…
Cancel
Save