Merge pull request #290 from dturkenk/data-attributes

Store additional item fields as data- attributes
10 years ago · ea08f62bbd
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -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>
--- a/examples/timeline/23_data_attributes.html
+++ b/examples/timeline/23_data_attributes.html
@ -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>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -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>

--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -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) {
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@ -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) {
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@ -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;
--- a/lib/timeline/component/item/ItemBox.js
+++ b/lib/timeline/component/item/ItemBox.js
@ -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;
--- a/lib/timeline/component/item/ItemPoint.js
+++ b/lib/timeline/component/item/ItemPoint.js
@ -121,6 +121,8 @@ ItemPoint.prototype.redraw = function() {
    this.dirty = true;
  }

  this._attachDataAttributes();

  // recalculate size
  if (this.dirty) {
    this.width = dom.point.offsetWidth;
--- a/lib/timeline/component/item/ItemRange.js
+++ b/lib/timeline/component/item/ItemRange.js
@ -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