Merge pull request #20 from Gillingham/develop

Create ItemRangeOverflow item type

src/timeline/Stack.js

@@ -185,8 +185,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.width) &&
-        (a.left + a.width + margin) > b.left &&
+    return ((a.left - margin) < (b.left + b.getWidth()) &&
+        (a.left + a.getWidth() + margin) > b.left &&
         (a.top - margin) < (b.top + b.height) &&
         (a.top + a.height + margin) > b.top);
 };

src/timeline/component/ItemSet.js

@@ -67,6 +67,7 @@ ItemSet.prototype = new Panel();
 ItemSet.types = {
     box: ItemBox,
     range: ItemRange,
+    rangeoverflow: ItemRangeOverflow,
     point: ItemPoint
 };
 

src/timeline/component/css/item.css

@@ -49,17 +49,24 @@
     -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
 }
 
-.vis.timeline .item.range .drag-left {
+.vis.timeline .item.rangeoverflow {
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 2px;
+    -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
+}
+
+.vis.timeline .item.range .drag-left, .vis.timeline .item.rangeoverflow .drag-left {
     cursor: w-resize;
     z-index: 1000;
 }
 
-.vis.timeline .item.range .drag-right {
+.vis.timeline .item.range .drag-right, .vis.timeline .item.rangeoverflow .drag-right {
     cursor: e-resize;
     z-index: 1000;
 }
 
-.vis.timeline .item.range .content {
+.vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content {
     position: relative;
     display: inline-block;
 }

src/timeline/component/item/Item.js

@@ -69,3 +69,11 @@ Item.prototype.reflow = function reflow() {
     // should be implemented by the item
     return false;
 };
+
+/**
+ * Return the items width
+ * @return {Integer} width
+ */
+Item.prototype.getWidth = function getWidth() {
+    return this.width;
+}

src/timeline/component/item/ItemRangeOverflow.js

@@ -0,0 +1,91 @@
+/**
+ * @constructor ItemRangeOverflow
+ * @extends ItemRange
+ * @param {ItemSet} parent
+ * @param {Object} data             Object containing parameters start, end
+ *                                  content, className.
+ * @param {Object} [options]        Options to set initial property values
+ * @param {Object} [defaultOptions] default options
+ *                                  // TODO: describe available options
+ */
+function ItemRangeOverflow (parent, data, options, defaultOptions) {
+    this.props = {
+        content: {
+            left: 0,
+            width: 0
+        }
+    };
+
+    ItemRange.call(this, parent, data, options, defaultOptions);
+}
+
+ItemRangeOverflow.prototype = new ItemRange (null, null);
+
+/**
+ * Repaint the item
+ * @return {Boolean} changed
+ */
+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;
+    }
+
+    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.data.id);
+            }
+            changed = true;
+        }
+
+        // update class
+        var className = this.data.className ? (' ' + this.data.className) : '';
+        if (this.className != className) {
+            this.className = className;
+            dom.box.className = 'item rangeoverflow' + className;
+            changed = true;
+        }
+    }
+
+    return changed;
+};
+
+/**
+ * Return the items width
+ * @return {Integer} width
+ */
+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;
+}