diff --git a/docs/timeline.html b/docs/timeline.html index 2171d453..94348bbf 100644 --- 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. + + dataAttributes + Array[String] + false + An array of fields optionally defined on the timeline items that will be appended as data- attributes to the content element. + + + editable Boolean | Object diff --git a/examples/timeline/23_data_attributes.html b/examples/timeline/23_data_attributes.html new file mode 100644 index 00000000..4ccf0857 --- /dev/null +++ b/examples/timeline/23_data_attributes.html @@ -0,0 +1,39 @@ + + + + Timeline | Basic demo + + + + + + + +
+ + + + \ No newline at end of file diff --git a/examples/timeline/index.html b/examples/timeline/index.html index 03021917..6f3dc027 100644 --- a/examples/timeline/index.html +++ b/examples/timeline/index.html @@ -34,6 +34,7 @@

20_click_to_use.html

21_set_selection.html

22_window_adjustment.html

+

23_data_attributes.html

requirejs_example.html

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index d816ce38..546b4cb8 100644 --- 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) { diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index d803b097..879b7b04 100644 --- 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) { diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index cfb1aa29..92edb636 100644 --- 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; diff --git a/lib/timeline/component/item/ItemBox.js b/lib/timeline/component/item/ItemBox.js index e1c23df7..6bfddfcf 100644 --- 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; diff --git a/lib/timeline/component/item/ItemPoint.js b/lib/timeline/component/item/ItemPoint.js index 7f87665e..c736ed7e 100644 --- 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; diff --git a/lib/timeline/component/item/ItemRange.js b/lib/timeline/component/item/ItemRange.js index ebff69fb..083ce4c4 100644 --- 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