jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
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
a0851af39e 4db0a9b4dd
commit
ea08f62bbd
9 changed files with 78 additions and 2 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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> 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>
<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> <tr>
<td>editable</td> <td>editable</td>
<td>Boolean | Object</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="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="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="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> <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) { Core.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy the known 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); util.selectiveExtend(fields, this.options, options);
if ('clickToUse' in 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) { ItemSet.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // 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); util.selectiveExtend(fields, this.options, options);
if ('margin' in 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; 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.dirty = true;
} }
this._attachDataAttributes();
// recalculate size // recalculate size
if (this.dirty) { if (this.dirty) {
this.props.dot.height = dom.dot.offsetHeight; 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.dirty = true;
} }
this._attachDataAttributes();
// recalculate size // recalculate size
if (this.dirty) { if (this.dirty) {
this.width = dom.point.offsetWidth; 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.dirty = true;
} }
this._attachDataAttributes();
// recalculate size // recalculate size
if (this.dirty) { if (this.dirty) {
// determine from css whether this box has overflow // determine from css whether this box has overflow

Write Preview
Loading…
Cancel
Save