Docs updated. A litte refactoring

HISTORY.md

@@ -16,7 +16,7 @@ http://visjs.org
 
 ### Timeline
 
-- Implemented support for attaching HTML attributes to items.
+- Implemented support for attaching HTML attributes to items. Thanks @dturkenk.
 - Fixed moment.js url in localization example.
 - Fixed `className` of groups not being updated when changed.
 - Fixed the `id` field of a new item not correctly generated.

docs/timeline.html

@@ -382,7 +382,7 @@ var options = {
   <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>
+  <td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the DOM element of the items.</td>
 </tr>
 
 

examples/timeline/index.html

@@ -14,7 +14,7 @@
 
   <p><a href="01_basic.html">01_basic.html</a></p>
   <p><a href="02_interactive.html">02_dataset.html</a></p>
-  <p><a href="03_a_lot_of_data.html">03_a_lot_of_data.html</a></p>
+  <p><a href="03_performance.html">03_performance.html</a></p>
   <p><a href="04_html_data.html">04_html_data.html</a></p>
   <p><a href="05_groups.html">05_groups.html</a></p>
   <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
@@ -25,7 +25,7 @@
   <p><a href="11_points.html">11_points.html</a></p>
   <p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
   <p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
-  <p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
+  <p><a href="14_group_performance.html">14_group_performance.html</a></p>
   <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
   <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
   <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>

lib/timeline/component/item/ItemBox.js

@@ -104,11 +104,9 @@ ItemBox.prototype.redraw = function() {
   // - the item's data is changed
   // - the item is selected/deselected
   if (this.dirty) {
-    // update contents
     this._updateContents(this.dom.content);
-
-    // update title
     this._updateTitle(this.dom.box);
+    this._updateDataAttributes(this.dom.box);
 
     // update class
     var className = (this.data.className? ' ' + this.data.className : '') +
@@ -117,9 +115,6 @@ ItemBox.prototype.redraw = function() {
     dom.line.className = 'item line' + className;
     dom.dot.className  = 'item dot' + className;
 
-    // update data attributes
-    this._updateDataAttributes(this.dom.box);
-
     // recalculate size
     this.props.dot.height = dom.dot.offsetHeight;
     this.props.dot.width = dom.dot.offsetWidth;

lib/timeline/component/item/ItemPoint.js

@@ -94,11 +94,9 @@ ItemPoint.prototype.redraw = function() {
   // - the item's data is changed
   // - the item is selected/deselected
   if (this.dirty) {
-    // update contents
     this._updateContents(this.dom.content);
-
-    // update title
     this._updateTitle(this.dom.point);
+    this._updateDataAttributes(this.dom.point);
 
     // update class
     var className = (this.data.className? ' ' + this.data.className : '') +
@@ -106,9 +104,6 @@ ItemPoint.prototype.redraw = function() {
     dom.point.className  = 'item point' + className;
     dom.dot.className  = 'item dot' + className;
 
-    // attach HTML attributes
-    this._updateDataAttributes(this.dom.point);
-
     // recalculate size
     this.width = dom.point.offsetWidth;
     this.height = dom.point.offsetHeight;

lib/timeline/component/item/ItemRange.js

@@ -89,19 +89,15 @@ ItemRange.prototype.redraw = function() {
   // - the item's data is changed
   // - the item is selected/deselected
   if (this.dirty) {
-    // update contents
     this._updateContents(this.dom.content);
-
-    // update title
     this._updateTitle(this.dom.box);
+    this._updateDataAttributes(this.dom.box);
 
     // update class
     var className = (this.data.className ? (' ' + this.data.className) : '') +
         (this.selected ? ' selected' : '');
     dom.box.className = this.baseClassName + className;
 
-    this._updateDataAttributes(this.dom.box);
-
     // determine from css whether this box has overflow
     this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';