Replaced Item.getWidth with a normal property, and ItemRangeOverflow makes a special property with getter/setter

docs/timeline.html

@@ -466,9 +466,7 @@ var options = {
   <td>showCustomTime</td>
   <td>boolean</td>
   <td>false</td>
-  <td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future.
-    <!-- TODO: more docs on showCustomTime
-    When the custom time bar is dragged by the user, an event is triggered, on which the contents of the timeline can be changed in to the state at that moment in time.--></td>
+  <td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
 </tr>
 
 <tr>

examples/timeline/01_basic.html

@@ -21,7 +21,7 @@
     {id: 1, content: 'item 1', start: '2013-04-20'},
     {id: 2, content: 'item 2', start: '2013-04-14'},
     {id: 3, content: 'item 3', start: '2013-04-18'},
-    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', type:'rangeoverflow'},
     {id: 5, content: 'item 5', start: '2013-04-25'},
     {id: 6, content: 'item 6', start: '2013-04-27'}
   ];

src/timeline/Stack.js

@@ -183,8 +183,8 @@ Stack.prototype.checkOverlap = function checkOverlap (items, itemIndex,
  * @return {boolean}        true if a and b collide, else false
  */
 Stack.prototype.collision = function collision (a, b, margin) {
-  return ((a.left - margin) < (b.left + b.getWidth()) &&
-      (a.left + a.getWidth() + margin) > b.left &&
+  return ((a.left - margin) < (b.left + b.width) &&
+      (a.left + a.width + margin) > b.left &&
       (a.top - margin) < (b.top + b.height) &&
       (a.top + a.height + margin) > b.top);
 };

src/timeline/component/item/Item.js

@@ -80,11 +80,3 @@ Item.prototype.reflow = function reflow() {
 Item.prototype.setOffset = function setOffset(offset) {
   this.offset = offset;
 };
-
-/**
- * Return the items width
- * @return {Number} width
- */
-Item.prototype.getWidth = function getWidth() {
-  return this.width;
-};

src/timeline/component/item/ItemRangeOverflow.js

@@ -16,6 +16,22 @@ function ItemRangeOverflow (parent, data, options, defaultOptions) {
     }
   };
 
+  // define a private property _width, which is the with of the range box
+  // adhering to the ranges start and end date. The property width has a
+  // getter which returns the max of border width and content width
+  this._width = 0;
+  Object.defineProperty(this, 'width', {
+    get: function () {
+      return (this.props.content && this._width < this.props.content.width) ?
+          this.props.content.width :
+          this._width;
+    },
+
+    set: function (width) {
+      this._width = width;
+    }
+  });
+
   ItemRange.call(this, parent, data, options, defaultOptions);
 }
 
@@ -62,7 +78,7 @@ ItemRangeOverflow.prototype.repaint = function repaint() {
         dom.content.innerHTML = this.content;
       }
       else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        throw new Error('Property "content" missing in item ' + this.id);
       }
       changed = true;
     }
@@ -80,12 +96,19 @@ ItemRangeOverflow.prototype.repaint = function repaint() {
 };
 
 /**
- * Return the items width
- * @return {Number} width
+ * Reposition the item, recalculate its left, top, and width, using the current
+ * range and size of the items itemset
+ * @override
  */
-ItemRangeOverflow.prototype.getWidth = function getWidth() {
-  if (this.props.content !== undefined && this.width < this.props.content.width)
-    return this.props.content.width;
-  else
-    return this.width;
+ItemRangeOverflow.prototype.reposition = function reposition() {
+  var dom = this.dom,
+      props = this.props;
+
+  if (dom) {
+    dom.box.style.top = this.top + 'px';
+    dom.box.style.left = this.left + 'px';
+    dom.box.style.width = this._width + 'px';
+
+    dom.content.style.left = props.content.left + 'px';
+  }
 };