Refactored ItemRangeOverflow

src/timeline/component/item/ItemRange.js

@@ -30,6 +30,8 @@ function ItemRange (parent, data, options, defaultOptions) {
 
 ItemRange.prototype = new Item (null, null);
 
+ItemRange.prototype.baseClassName = 'item range';
+
 /**
  * Check whether this item is visible in the current time window
  * @returns {boolean} True if visible
@@ -105,7 +107,7 @@ ItemRange.prototype.repaint = function repaint() {
       (this.selected ? ' selected' : '');
   if (this.className != className) {
     this.className = className;
-    dom.box.className = 'item range' + className;
+    dom.box.className = this.baseClassName + className;
 
     this.dirty = true;
   }

src/timeline/component/item/ItemRangeOverflow.js

@@ -16,104 +16,42 @@ 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);
 }
 
 ItemRangeOverflow.prototype = new ItemRange (null, null);
 
+ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow';
+
 /**
- * Repaint the item
- * @return {Boolean} changed
+ * Reposition the item horizontally
+ * @Override
  */
-ItemRangeOverflow.prototype.repaint = function repaint() {
-  // TODO: make an efficient repaint
-  var changed = false;
-  var dom = this.dom;
-
-  if (!dom) {
-    this._create();
-    dom = this.dom;
-    changed = true;
+ItemRangeOverflow.prototype.repositionX = function repositionX() {
+  var parentWidth = this.parent.width,
+      start = this.parent.toScreen(this.data.start) + this.offset,
+      end = this.parent.toScreen(this.data.end) + this.offset,
+      padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
+      contentLeft;
+
+  // limit the width of the this, as browsers cannot draw very wide divs
+  if (start < -parentWidth) {
+    start = -parentWidth;
   }
-
-  if (dom) {
-    if (!this.parent) {
-      throw new Error('Cannot repaint item: no parent attached');
-    }
-    var foreground = this.parent.getForeground();
-    if (!foreground) {
-      throw new Error('Cannot repaint time axis: ' +
-          'parent has no foreground container element');
-    }
-
-    if (!dom.box.parentNode) {
-      foreground.appendChild(dom.box);
-      changed = true;
-    }
-
-    // update content
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.id);
-      }
-      changed = true;
-    }
-
-    this._repaintDeleteButton(dom.box);
-    this._repaintDragLeft();
-    this._repaintDragRight();
-
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = 'item rangeoverflow' + className;
-      changed = true;
-    }
+  if (end > 2 * parentWidth) {
+    end = 2 * parentWidth;
   }
 
-  return changed;
-};
+  // when range exceeds left of the window, position the contents at the left of the visible area
+  contentLeft = Math.max(-start, 0);
 
-/**
- * Reposition the item, recalculate its left, top, and width, using the current
- * range and size of the items itemset
- * @override
- */
-ItemRangeOverflow.prototype.reposition = function reposition() {
-  var dom = this.dom,
-      props = this.props;
+  this.left = start;
+  var boxWidth = Math.max(end - start, 1);
+  this.width = (this.props.content && boxWidth < this.props.content.width) ?
+      this.props.content.width :
+      boxWidth;
 
-  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';
-  }
+  this.dom.box.style.left = this.left + 'px';
+  this.dom.box.style.width = boxWidth + 'px';
+  this.dom.content.style.left = contentLeft + 'px';
 };