From 67915d58064565a4af364c3928c9698cb59f0829 Mon Sep 17 00:00:00 2001 From: Dan Turkenkopf Date: Wed, 3 Sep 2014 21:43:13 -0400 Subject: [PATCH 1/4] Store additional item fields as data- attributes If additional item fields are defined on the DataSet or array being passed to the timeline, store them as data- attributes on the content element. --- lib/timeline/component/item/ItemBox.js | 12 ++++++++++++ lib/timeline/component/item/ItemPoint.js | 10 ++++++++++ lib/timeline/component/item/ItemRange.js | 12 ++++++++++++ 3 files changed, 34 insertions(+) diff --git a/lib/timeline/component/item/ItemBox.js b/lib/timeline/component/item/ItemBox.js index e1c23df7..282293e1 100644 --- a/lib/timeline/component/item/ItemBox.js +++ b/lib/timeline/component/item/ItemBox.js @@ -132,6 +132,18 @@ ItemBox.prototype.redraw = function() { this.dirty = true; } + // set all other fields as data- attributes + var auxiliaryData = Object.keys(this.data); + + for (var i in auxiliaryData) { + var c = auxiliaryData[i]; + if (['start', 'end', 'content', 'title', 'id', 'className', 'group', 'type'].indexOf(c) < 0) { + dom.content.setAttribute('data-' + c, this.data[c]); + } + } + + + // 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..77f6a2a8 100644 --- a/lib/timeline/component/item/ItemPoint.js +++ b/lib/timeline/component/item/ItemPoint.js @@ -121,6 +121,16 @@ ItemPoint.prototype.redraw = function() { this.dirty = true; } + // set all other fields as data- attributes + var auxiliaryData = Object.keys(this.data); + + for (var i in auxiliaryData) { + var c = auxiliaryData[i]; + if (['start', 'end', 'content', 'title', 'id', 'className', 'group', 'type'].indexOf(c) < 0) { + dom.content.setAttribute('data-' + c, this.data[c]); + } + } + // 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..d7068ade 100644 --- a/lib/timeline/component/item/ItemRange.js +++ b/lib/timeline/component/item/ItemRange.js @@ -115,6 +115,18 @@ ItemRange.prototype.redraw = function() { this.dirty = true; } + + // set all other fields as data- attributes + var auxiliaryData = Object.keys(this.data); + + for (var i in auxiliaryData) { + var c = auxiliaryData[i]; + if (['start', 'end', 'content', 'title', 'id', 'className', 'group', 'type'].indexOf(c) < 0) { + dom.content.setAttribute('data-' + c, this.data[c]); + } + } + + // recalculate size if (this.dirty) { // determine from css whether this box has overflow From 386035180e052ba8819a14026da5fd98ce79f72e Mon Sep 17 00:00:00 2001 From: Dan Turkenkopf Date: Thu, 4 Sep 2014 12:31:50 -0400 Subject: [PATCH 2/4] Define allowed dataAttributes as Timeline option Read from an array of allowed dataAttributes at the timeline level and write them as data- attributes on the item --- lib/timeline/Core.js | 2 +- lib/timeline/component/ItemSet.js | 2 +- lib/timeline/component/item/Item.js | 20 ++++++++++++++++++++ lib/timeline/component/item/ItemBox.js | 10 +--------- lib/timeline/component/item/ItemPoint.js | 10 +--------- lib/timeline/component/item/ItemRange.js | 12 +----------- 6 files changed, 25 insertions(+), 31 deletions(-) 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 282293e1..6bfddfcf 100644 --- a/lib/timeline/component/item/ItemBox.js +++ b/lib/timeline/component/item/ItemBox.js @@ -132,16 +132,8 @@ ItemBox.prototype.redraw = function() { this.dirty = true; } - // set all other fields as data- attributes - var auxiliaryData = Object.keys(this.data); - - for (var i in auxiliaryData) { - var c = auxiliaryData[i]; - if (['start', 'end', 'content', 'title', 'id', 'className', 'group', 'type'].indexOf(c) < 0) { - dom.content.setAttribute('data-' + c, this.data[c]); - } - } + this._attachDataAttributes(); // recalculate size diff --git a/lib/timeline/component/item/ItemPoint.js b/lib/timeline/component/item/ItemPoint.js index 77f6a2a8..c736ed7e 100644 --- a/lib/timeline/component/item/ItemPoint.js +++ b/lib/timeline/component/item/ItemPoint.js @@ -121,15 +121,7 @@ ItemPoint.prototype.redraw = function() { this.dirty = true; } - // set all other fields as data- attributes - var auxiliaryData = Object.keys(this.data); - - for (var i in auxiliaryData) { - var c = auxiliaryData[i]; - if (['start', 'end', 'content', 'title', 'id', 'className', 'group', 'type'].indexOf(c) < 0) { - dom.content.setAttribute('data-' + c, this.data[c]); - } - } + this._attachDataAttributes(); // recalculate size if (this.dirty) { diff --git a/lib/timeline/component/item/ItemRange.js b/lib/timeline/component/item/ItemRange.js index d7068ade..083ce4c4 100644 --- a/lib/timeline/component/item/ItemRange.js +++ b/lib/timeline/component/item/ItemRange.js @@ -115,17 +115,7 @@ ItemRange.prototype.redraw = function() { this.dirty = true; } - - // set all other fields as data- attributes - var auxiliaryData = Object.keys(this.data); - - for (var i in auxiliaryData) { - var c = auxiliaryData[i]; - if (['start', 'end', 'content', 'title', 'id', 'className', 'group', 'type'].indexOf(c) < 0) { - dom.content.setAttribute('data-' + c, this.data[c]); - } - } - + this._attachDataAttributes(); // recalculate size if (this.dirty) { From 926bd0db3c95baa909bef0e8a48de1a73be14139 Mon Sep 17 00:00:00 2001 From: Dan Turkenkopf Date: Thu, 4 Sep 2014 12:32:04 -0400 Subject: [PATCH 3/4] Add data-attribute example --- examples/timeline/23_data_attributes.html | 39 +++++++++++++++++++++++ examples/timeline/index.html | 1 + 2 files changed, 40 insertions(+) create mode 100644 examples/timeline/23_data_attributes.html 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

From 4db0a9b4dd0c1215901f07c5e3218b24b5222944 Mon Sep 17 00:00:00 2001 From: Dan Turkenkopf Date: Thu, 4 Sep 2014 12:32:14 -0400 Subject: [PATCH 4/4] Update timeline options to include dataAttributes --- docs/timeline.html | 8 ++++++++ 1 file changed, 8 insertions(+) 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