Released version 0.0.7

.npmignore

@@ -0,0 +1,8 @@
+node_modules
+src
+test
+.idea
+component.json
+Jakefile.js
+.npmignore
+.gitignore

HISTORY.md

@@ -2,6 +2,11 @@ vis.js history
 http://visjs.org
 
 
+## 2012-04-25, version 0.0.7
+
+- Sanitized the published packages on npm and bower.
+
+
 ## 2012-04-25, version 0.0.6
 
 - Css is now packaged in the javascript file, and automatically loaded.

component.json

@@ -1,6 +1,6 @@
 {
     "name": "vis",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "A dynamic, browser-based visualization library.",
     "homepage": "http://visjs.org/",
     "repository": {
@@ -8,11 +8,14 @@
         "url": "git://github.com/almende/vis.git"
     },
     "ignore": [
+        "node_modules",
         "src",
-        "lib",
         "test",
+        ".idea",
         "Jakefile.js",
-        "package.json"
+        "package.json",
+        ".npmignore",
+        ".gitignore"
     ],
     "dependencies": {},
     "devDependencies": {}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vis",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "A dynamic, browser-based visualization library.",
     "homepage": "http://visjs.org/",
     "repository": {
@@ -23,12 +23,11 @@
     "scripts": {
         "prepublish": "jake"
     },
-    "dependencies": {
-        "moment": "latest"
-    },
+    "dependencies": {},
     "devDependencies": {
         "jake": ">= 0.5.9",
         "jake-utils": ">= 0.0.18",
-        "uglify-js": ">= 2.2.5"
+        "uglify-js": ">= 2.2.5",
+        "moment": "latest"
     }
 }

vis.js

@@ -4,7 +4,7 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 0.0.6
+ * @version 0.0.7
  * @date    2013-04-25
  *
  * @license
@@ -56,7 +56,7 @@ var vis = {
 
 module.exports = exports = vis;
 
-},{"./controller":2,"./range":3,"./dataset":4,"./events":5,"./stack":6,"./util":7,"./timestep":8,"./component/component":9,"./component/panel":10,"./component/rootpanel":11,"./component/itemset":12,"./component/timeaxis":13,"./visualization/timeline":14}],5:[function(require,module,exports){
+},{"./dataset":2,"./events":3,"./controller":4,"./range":5,"./stack":6,"./timestep":7,"./util":8,"./component/component":9,"./component/rootpanel":10,"./component/panel":11,"./component/itemset":12,"./component/timeaxis":13,"./visualization/timeline":14}],3:[function(require,module,exports){
 /**
  * Event listener (singleton)
  */
@@ -176,7 +176,7 @@ var events = {
 // exports
 module.exports = exports = events;
 
-},{}],7:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
 
 // create namespace
 var util = {};
@@ -962,7 +962,7 @@ if(!Array.isArray) {
 // exports
 module.exports = exports = util;
 
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
 var util = require('./util'),
     Component = require('./component/component');
 
@@ -1110,7 +1110,7 @@ Controller.prototype.reflow = function () {
 module.exports = exports = Controller;
 
 
-},{"./util":7,"./component/component":9}],4:[function(require,module,exports){
+},{"./util":8,"./component/component":9}],2:[function(require,module,exports){
 var util = require('./util');
 
 /**
@@ -1664,7 +1664,7 @@ DataSet.prototype._appendRow = function (dataTable, columns, item) {
 // exports
 module.exports = exports = DataSet;
 
-},{"./util":7}],3:[function(require,module,exports){
+},{"./util":8}],5:[function(require,module,exports){
 var util = require('./util'),
     events = require('./events');
 
@@ -2196,7 +2196,7 @@ Range.prototype.move = function(moveFactor) {
 // exports
 module.exports = exports = Range;
 
-},{"./util":7,"./events":5}],6:[function(require,module,exports){
+},{"./util":8,"./events":3}],6:[function(require,module,exports){
 var util = require('./util');
 
 /**
@@ -2360,7 +2360,7 @@ Stack.prototype.collision = function(a, b, margin) {
 // exports
 module.exports = exports = Stack;
 
-},{"./util":7}],9:[function(require,module,exports){
+},{"./util":8}],9:[function(require,module,exports){
 var util = require('./../util');
 
 /**
@@ -2483,7 +2483,7 @@ Component.prototype.on = function (event, callback) {
 // exports
 module.exports = exports = Component;
 
-},{"./../util":7}],10:[function(require,module,exports){
+},{"./../util":8}],11:[function(require,module,exports){
 var util = require('../util'),
     Component = require('./component');
 
@@ -2592,7 +2592,7 @@ Panel.prototype.reflow = function () {
 // exports
 module.exports = exports = Panel;
 
-},{"../util":7,"./component":9}],11:[function(require,module,exports){
+},{"../util":8,"./component":9}],10:[function(require,module,exports){
 var util = require('../util'),
     Panel = require('./panel');
 
@@ -2800,7 +2800,7 @@ RootPanel.prototype._updateEventEmitters = function () {
 // exports
 module.exports = exports = RootPanel;
 
-},{"../util":7,"./panel":10}],12:[function(require,module,exports){
+},{"../util":8,"./panel":11}],12:[function(require,module,exports){
 var util = require('../util'),
     DataSet = require('../dataset'),
     Panel = require('./panel'),
@@ -3319,7 +3319,7 @@ ItemSet.prototype.toScreen = function(time) {
 // exports
 module.exports = exports = ItemSet;
 
-},{"../dataset":4,"../util":7,"./panel":10,"../stack":6,"./item/itembox":15,"./item/itemrange":16,"./item/itempoint":17}],13:[function(require,module,exports){
+},{"../util":8,"../dataset":2,"./panel":11,"../stack":6,"./item/itembox":15,"./item/itemrange":16,"./item/itempoint":17}],13:[function(require,module,exports){
 var util = require('../util'),
     TimeStep = require('../timestep'),
     Component = require('./component');
@@ -3852,7 +3852,7 @@ TimeAxis.prototype._updateConversion = function() {
 // exports
 module.exports = exports = TimeAxis;
 
-},{"../util":7,"../timestep":8,"./component":9}],8:[function(require,module,exports){
+},{"../util":8,"../timestep":7,"./component":9}],7:[function(require,module,exports){
 var util = require('./util'),
     moment = require('moment');
 
@@ -4310,37 +4310,45 @@ TimeStep.prototype.getLabelMajor = function(date) {
 // exports
 module.exports = exports = TimeStep;
 
-},{"./util":7,"moment":18}],16:[function(require,module,exports){
+},{"./util":8,"moment":18}],15:[function(require,module,exports){
 var util = require('../../util'),
     Item = require('./item');
 
 /**
- * @constructor ItemRange
+ * @constructor ItemBox
  * @extends Item
  * @param {ItemSet} parent
- * @param {Object} data       Object containing parameters start, end
+ * @param {Object} data       Object containing parameters start
  *                            content, className.
  * @param {Object} [options]  Options to set initial property values
  *                            // TODO: describe available options
  */
-function ItemRange (parent, data, options) {
+function ItemBox (parent, data, options) {
     this.props = {
-        content: {
+        dot: {
             left: 0,
-            width: 0
+            top: 0,
+            width: 0,
+            height: 0
+        },
+        line: {
+            top: 0,
+            left: 0,
+            width: 0,
+            height: 0
         }
     };
 
     Item.call(this, parent, data, options);
 }
 
-ItemRange.prototype = new Item (null, null);
+ItemBox.prototype = new Item (null, null);
 
 /**
  * Select the item
  * @override
  */
-ItemRange.prototype.select = function () {
+ItemBox.prototype.select = function () {
     this.selected = true;
     // TODO: select and unselect
 };
@@ -4349,7 +4357,7 @@ ItemRange.prototype.select = function () {
  * Unselect the item
  * @override
  */
-ItemRange.prototype.unselect = function () {
+ItemBox.prototype.unselect = function () {
     this.selected = false;
     // TODO: select and unselect
 };
@@ -4358,7 +4366,7 @@ ItemRange.prototype.unselect = function () {
  * Repaint the item
  * @return {Boolean} changed
  */
-ItemRange.prototype.repaint = function () {
+ItemBox.prototype.repaint = function () {
     // TODO: make an efficient repaint
     var changed = false;
     var dom = this.dom;
@@ -4371,7 +4379,7 @@ ItemRange.prototype.repaint = function () {
         dom = this.dom;
 
         if (dom) {
-            if (!this.options && !this.options.parent) {
+            if (!this.options && !this.parent) {
                 throw new Error('Cannot repaint item: no parent attached');
             }
             var foreground = this.parent.getForeground();
@@ -4379,13 +4387,26 @@ ItemRange.prototype.repaint = function () {
                 throw new Error('Cannot repaint time axis: ' +
                     'parent has no foreground container element');
             }
+            var background = this.parent.getBackground();
+            if (!background) {
+                throw new Error('Cannot repaint time axis: ' +
+                    'parent has no background container element');
+            }
 
             if (!dom.box.parentNode) {
                 foreground.appendChild(dom.box);
                 changed = true;
             }
+            if (!dom.line.parentNode) {
+                background.appendChild(dom.line);
+                changed = true;
+            }
+            if (!dom.dot.parentNode) {
+                this.parent.dom.axis.appendChild(dom.dot);
+                changed = true;
+            }
 
-            // update content
+            // update contents
             if (this.data.content != this.content) {
                 this.content = this.data.content;
                 if (this.content instanceof Element) {
@@ -4402,10 +4423,13 @@ ItemRange.prototype.repaint = function () {
             }
 
             // update class
-            var className = this.data.className ? ('' + this.data.className) : '';
+            var className = (this.data.className? ' ' + this.data.className : '') +
+                (this.selected ? ' selected' : '');
             if (this.className != className) {
                 this.className = className;
-                dom.box.className = 'item range' + className;
+                dom.box.className = 'item box' + className;
+                dom.line.className = 'item line' + className;
+                dom.dot.className  = 'item dot' + className;
                 changed = true;
             }
         }
@@ -4417,6 +4441,14 @@ ItemRange.prototype.repaint = function () {
                 dom.box.parentNode.removeChild(dom.box);
                 changed = true;
             }
+            if (dom.line.parentNode) {
+                dom.line.parentNode.removeChild(dom.line);
+                changed = true;
+            }
+            if (dom.dot.parentNode) {
+                dom.dot.parentNode.removeChild(dom.dot);
+                changed = true;
+            }
         }
     }
 
@@ -4424,69 +4456,65 @@ ItemRange.prototype.repaint = function () {
 };
 
 /**
- * Reflow the item: calculate its actual size from the DOM
+ * Reflow the item: calculate its actual size and position from the DOM
  * @return {boolean} resized    returns true if the axis is resized
  * @override
  */
-ItemRange.prototype.reflow = function () {
+ItemBox.prototype.reflow = function () {
     if (this.data.start == undefined) {
         throw new Error('Property "start" missing in item ' + this.data.id);
     }
-    if (this.data.end == undefined) {
-        throw new Error('Property "end" missing in item ' + this.data.id);
-    }
 
-    var dom = this.dom,
+    var update = util.updateProperty,
+        dom = this.dom,
         props = this.props,
         options = this.options,
-        parent = this.parent,
-        start = parent.toScreen(this.data.start),
-        end = parent.toScreen(this.data.end),
-        changed = 0;
+        start = this.parent.toScreen(this.data.start),
+        align = options && options.align,
+        orientation = options.orientation,
+        changed = 0,
+        top,
+        left;
 
     if (dom) {
-        var update = util.updateProperty,
-            box = dom.box,
-            parentWidth = parent.width,
-            orientation = options.orientation,
-            contentLeft,
-            top;
-
-        changed += update(props.content, 'width', dom.content.offsetWidth);
-
-        changed += update(this, 'height', box.offsetHeight);
-
-        // limit the width of the this, as browsers cannot draw very wide divs
-        if (start < -parentWidth) {
-            start = -parentWidth;
-        }
-        if (end > 2 * parentWidth) {
-            end = 2 * parentWidth;
+        changed += update(props.dot, 'height', dom.dot.offsetHeight);
+        changed += update(props.dot, 'width', dom.dot.offsetWidth);
+        changed += update(props.line, 'width', dom.line.offsetWidth);
+        changed += update(props.line, 'width', dom.line.offsetWidth);
+        changed += update(this, 'width', dom.box.offsetWidth);
+        changed += update(this, 'height', dom.box.offsetHeight);
+        if (align == 'right') {
+            left = start - this.width;
         }
-
-        // when range exceeds left of the window, position the contents at the left of the visible area
-        if (start < 0) {
-            contentLeft = Math.min(-start,
-                (end - start - props.content.width - 2 * options.padding));
-            // TODO: remove the need for options.padding. it's terrible.
+        else if (align == 'left') {
+            left = start;
         }
         else {
-            contentLeft = 0;
+            // default or 'center'
+            left = start - this.width / 2;
         }
-        changed += update(props.content, 'left', contentLeft);
+        changed += update(this, 'left', left);
 
+        changed += update(props.line, 'left', start - props.line.width / 2);
+        changed += update(props.dot, 'left', start - props.dot.width / 2);
         if (orientation == 'top') {
             top = options.margin.axis;
+
             changed += update(this, 'top', top);
+            changed += update(props.line, 'top', 0);
+            changed += update(props.line, 'height', top);
+            changed += update(props.dot, 'top', -props.dot.height / 2);
         }
         else {
             // default or 'bottom'
-            top = parent.height - this.height - options.margin.axis;
+            var parentHeight = this.parent.height;
+            top = parentHeight - this.height - options.margin.axis;
+
             changed += update(this, 'top', top);
+            changed += update(props.line, 'top', top + this.height);
+            changed += update(props.line, 'height', Math.max(options.margin.axis, 0));
+            changed += update(props.dot, 'top', parentHeight - props.dot.height / 2);
         }
-
-        changed += update(this, 'left', start);
-        changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
     }
     else {
         changed += 1;
@@ -4499,18 +4527,27 @@ ItemRange.prototype.reflow = function () {
  * Create an items DOM
  * @private
  */
-ItemRange.prototype._create = function () {
+ItemBox.prototype._create = function () {
     var dom = this.dom;
     if (!dom) {
         this.dom = dom = {};
-        // background box
-        dom.box = document.createElement('div');
+
+        // create the box
+        dom.box = document.createElement('DIV');
         // className is updated in repaint()
 
-        // contents box
-        dom.content = document.createElement('div');
+        // contents box (inside the background box). used for making margins
+        dom.content = document.createElement('DIV');
         dom.content.className = 'content';
         dom.box.appendChild(dom.content);
+
+        // line to axis
+        dom.line = document.createElement('DIV');
+        dom.line.className = 'line';
+
+        // dot on axis
+        dom.dot = document.createElement('DIV');
+        dom.dot.className = 'dot';
     }
 };
 
@@ -4519,61 +4556,71 @@ ItemRange.prototype._create = function () {
  * range and size of the items itemset
  * @override
  */
-ItemRange.prototype.reposition = function () {
+ItemBox.prototype.reposition = function () {
     var dom = this.dom,
-        props = this.props;
+        props = this.props,
+        orientation = this.options.orientation;
 
     if (dom) {
-        dom.box.style.top = this.top + 'px';
-        dom.box.style.left = this.left + 'px';
-        dom.box.style.width = this.width + 'px';
+        var box = dom.box,
+            line = dom.line,
+            dot = dom.dot;
 
-        dom.content.style.left = props.content.left + 'px';
+        box.style.left = this.left + 'px';
+        box.style.top = this.top + 'px';
+
+        line.style.left = props.line.left + 'px';
+        if (orientation == 'top') {
+            line.style.top = 0 + 'px';
+            line.style.height = this.top + 'px';
+        }
+        else {
+            // orientation 'bottom'
+            line.style.top = props.line.top + 'px';
+            line.style.top = (this.top + this.height) + 'px';
+            line.style.height = Math.max(props.dot.top - this.top - this.height, 0) + 'px';
+
+        }
+
+        dot.style.left = props.dot.left + 'px';
+        dot.style.top = props.dot.top + 'px';
     }
 };
 
 // exports
-module.exports = exports = ItemRange;
+module.exports = exports = ItemBox;
 
-},{"../../util":7,"./item":19}],15:[function(require,module,exports){
+},{"./item":19,"../../util":8}],16:[function(require,module,exports){
 var util = require('../../util'),
     Item = require('./item');
 
 /**
- * @constructor ItemBox
+ * @constructor ItemRange
  * @extends Item
  * @param {ItemSet} parent
- * @param {Object} data       Object containing parameters start
+ * @param {Object} data       Object containing parameters start, end
  *                            content, className.
  * @param {Object} [options]  Options to set initial property values
  *                            // TODO: describe available options
  */
-function ItemBox (parent, data, options) {
+function ItemRange (parent, data, options) {
     this.props = {
-        dot: {
-            left: 0,
-            top: 0,
-            width: 0,
-            height: 0
-        },
-        line: {
-            top: 0,
+        content: {
             left: 0,
-            width: 0,
-            height: 0
+            width: 0
         }
     };
 
     Item.call(this, parent, data, options);
 }
 
-ItemBox.prototype = new Item (null, null);
+ItemRange.prototype = new Item (null, null);
 
 /**
  * Select the item
  * @override
  */
-ItemBox.prototype.select = function () {
+ItemRange.prototype.select = function () {
     this.selected = true;
     // TODO: select and unselect
 };
@@ -4582,7 +4629,7 @@ ItemBox.prototype.select = function () {
  * Unselect the item
  * @override
  */
-ItemBox.prototype.unselect = function () {
+ItemRange.prototype.unselect = function () {
     this.selected = false;
     // TODO: select and unselect
 };
@@ -4591,7 +4638,7 @@ ItemBox.prototype.unselect = function () {
  * Repaint the item
  * @return {Boolean} changed
  */
-ItemBox.prototype.repaint = function () {
+ItemRange.prototype.repaint = function () {
     // TODO: make an efficient repaint
     var changed = false;
     var dom = this.dom;
@@ -4604,7 +4651,7 @@ ItemBox.prototype.repaint = function () {
         dom = this.dom;
 
         if (dom) {
-            if (!this.options && !this.parent) {
+            if (!this.options && !this.options.parent) {
                 throw new Error('Cannot repaint item: no parent attached');
             }
             var foreground = this.parent.getForeground();
@@ -4612,26 +4659,13 @@ ItemBox.prototype.repaint = function () {
                 throw new Error('Cannot repaint time axis: ' +
                     'parent has no foreground container element');
             }
-            var background = this.parent.getBackground();
-            if (!background) {
-                throw new Error('Cannot repaint time axis: ' +
-                    'parent has no background container element');
-            }
 
             if (!dom.box.parentNode) {
                 foreground.appendChild(dom.box);
                 changed = true;
             }
-            if (!dom.line.parentNode) {
-                background.appendChild(dom.line);
-                changed = true;
-            }
-            if (!dom.dot.parentNode) {
-                this.parent.dom.axis.appendChild(dom.dot);
-                changed = true;
-            }
 
-            // update contents
+            // update content
             if (this.data.content != this.content) {
                 this.content = this.data.content;
                 if (this.content instanceof Element) {
@@ -4648,13 +4682,10 @@ ItemBox.prototype.repaint = function () {
             }
 
             // update class
-            var className = (this.data.className? ' ' + this.data.className : '') +
-                (this.selected ? ' selected' : '');
+            var className = this.data.className ? ('' + this.data.className) : '';
             if (this.className != className) {
                 this.className = className;
-                dom.box.className = 'item box' + className;
-                dom.line.className = 'item line' + className;
-                dom.dot.className  = 'item dot' + className;
+                dom.box.className = 'item range' + className;
                 changed = true;
             }
         }
@@ -4666,14 +4697,6 @@ ItemBox.prototype.repaint = function () {
                 dom.box.parentNode.removeChild(dom.box);
                 changed = true;
             }
-            if (dom.line.parentNode) {
-                dom.line.parentNode.removeChild(dom.line);
-                changed = true;
-            }
-            if (dom.dot.parentNode) {
-                dom.dot.parentNode.removeChild(dom.dot);
-                changed = true;
-            }
         }
     }
 
@@ -4681,65 +4704,69 @@ ItemBox.prototype.repaint = function () {
 };
 
 /**
- * Reflow the item: calculate its actual size and position from the DOM
+ * Reflow the item: calculate its actual size from the DOM
  * @return {boolean} resized    returns true if the axis is resized
  * @override
  */
-ItemBox.prototype.reflow = function () {
+ItemRange.prototype.reflow = function () {
     if (this.data.start == undefined) {
         throw new Error('Property "start" missing in item ' + this.data.id);
     }
+    if (this.data.end == undefined) {
+        throw new Error('Property "end" missing in item ' + this.data.id);
+    }
 
-    var update = util.updateProperty,
-        dom = this.dom,
+    var dom = this.dom,
         props = this.props,
         options = this.options,
-        start = this.parent.toScreen(this.data.start),
-        align = options && options.align,
-        orientation = options.orientation,
-        changed = 0,
-        top,
-        left;
+        parent = this.parent,
+        start = parent.toScreen(this.data.start),
+        end = parent.toScreen(this.data.end),
+        changed = 0;
 
     if (dom) {
-        changed += update(props.dot, 'height', dom.dot.offsetHeight);
-        changed += update(props.dot, 'width', dom.dot.offsetWidth);
-        changed += update(props.line, 'width', dom.line.offsetWidth);
-        changed += update(props.line, 'width', dom.line.offsetWidth);
-        changed += update(this, 'width', dom.box.offsetWidth);
-        changed += update(this, 'height', dom.box.offsetHeight);
-        if (align == 'right') {
-            left = start - this.width;
+        var update = util.updateProperty,
+            box = dom.box,
+            parentWidth = parent.width,
+            orientation = options.orientation,
+            contentLeft,
+            top;
+
+        changed += update(props.content, 'width', dom.content.offsetWidth);
+
+        changed += update(this, 'height', box.offsetHeight);
+
+        // limit the width of the this, as browsers cannot draw very wide divs
+        if (start < -parentWidth) {
+            start = -parentWidth;
         }
-        else if (align == 'left') {
-            left = start;
+        if (end > 2 * parentWidth) {
+            end = 2 * parentWidth;
+        }
+
+        // when range exceeds left of the window, position the contents at the left of the visible area
+        if (start < 0) {
+            contentLeft = Math.min(-start,
+                (end - start - props.content.width - 2 * options.padding));
+            // TODO: remove the need for options.padding. it's terrible.
         }
         else {
-            // default or 'center'
-            left = start - this.width / 2;
+            contentLeft = 0;
         }
-        changed += update(this, 'left', left);
+        changed += update(props.content, 'left', contentLeft);
 
-        changed += update(props.line, 'left', start - props.line.width / 2);
-        changed += update(props.dot, 'left', start - props.dot.width / 2);
         if (orientation == 'top') {
             top = options.margin.axis;
-
             changed += update(this, 'top', top);
-            changed += update(props.line, 'top', 0);
-            changed += update(props.line, 'height', top);
-            changed += update(props.dot, 'top', -props.dot.height / 2);
         }
         else {
             // default or 'bottom'
-            var parentHeight = this.parent.height;
-            top = parentHeight - this.height - options.margin.axis;
-
+            top = parent.height - this.height - options.margin.axis;
             changed += update(this, 'top', top);
-            changed += update(props.line, 'top', top + this.height);
-            changed += update(props.line, 'height', Math.max(options.margin.axis, 0));
-            changed += update(props.dot, 'top', parentHeight - props.dot.height / 2);
         }
+
+        changed += update(this, 'left', start);
+        changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
     }
     else {
         changed += 1;
@@ -4752,27 +4779,18 @@ ItemBox.prototype.reflow = function () {
  * Create an items DOM
  * @private
  */
-ItemBox.prototype._create = function () {
+ItemRange.prototype._create = function () {
     var dom = this.dom;
     if (!dom) {
         this.dom = dom = {};
-
-        // create the box
-        dom.box = document.createElement('DIV');
+        // background box
+        dom.box = document.createElement('div');
         // className is updated in repaint()
 
-        // contents box (inside the background box). used for making margins
-        dom.content = document.createElement('DIV');
+        // contents box
+        dom.content = document.createElement('div');
         dom.content.className = 'content';
         dom.box.appendChild(dom.content);
-
-        // line to axis
-        dom.line = document.createElement('DIV');
-        dom.line.className = 'line';
-
-        // dot on axis
-        dom.dot = document.createElement('DIV');
-        dom.dot.className = 'dot';
     }
 };
 
@@ -4781,41 +4799,23 @@ ItemBox.prototype._create = function () {
  * range and size of the items itemset
  * @override
  */
-ItemBox.prototype.reposition = function () {
+ItemRange.prototype.reposition = function () {
     var dom = this.dom,
-        props = this.props,
-        orientation = this.options.orientation;
+        props = this.props;
 
     if (dom) {
-        var box = dom.box,
-            line = dom.line,
-            dot = dom.dot;
-
-        box.style.left = this.left + 'px';
-        box.style.top = this.top + 'px';
-
-        line.style.left = props.line.left + 'px';
-        if (orientation == 'top') {
-            line.style.top = 0 + 'px';
-            line.style.height = this.top + 'px';
-        }
-        else {
-            // orientation 'bottom'
-            line.style.top = props.line.top + 'px';
-            line.style.top = (this.top + this.height) + 'px';
-            line.style.height = Math.max(props.dot.top - this.top - this.height, 0) + 'px';
-
-        }
+        dom.box.style.top = this.top + 'px';
+        dom.box.style.left = this.left + 'px';
+        dom.box.style.width = this.width + 'px';
 
-        dot.style.left = props.dot.left + 'px';
-        dot.style.top = props.dot.top + 'px';
+        dom.content.style.left = props.content.left + 'px';
     }
 };
 
 // exports
-module.exports = exports = ItemBox;
+module.exports = exports = ItemRange;
 
-},{"../../util":7,"./item":19}],17:[function(require,module,exports){
+},{"../../util":8,"./item":19}],17:[function(require,module,exports){
 var util = require('../../util'),
     Item = require('./item');
 
@@ -5031,7 +5031,7 @@ ItemPoint.prototype.reposition = function () {
 // exports
 module.exports = exports = ItemPoint;
 
-},{"../../util":7,"./item":19}],18:[function(require,module,exports){
+},{"../../util":8,"./item":19}],18:[function(require,module,exports){
 (function(){// moment.js
 // version : 2.0.0
 // author : Tim Wood
@@ -6588,7 +6588,7 @@ Timeline.prototype.setData = function(data) {
 // exports
 module.exports = exports = Timeline;
 
-},{"./../util":7,"../range":3,"../controller":2,"../component/component":9,"../component/rootpanel":11,"../component/timeaxis":13,"../component/itemset":12,"moment":18}],19:[function(require,module,exports){
+},{"./../util":8,"../range":5,"../controller":4,"../component/component":9,"../component/rootpanel":10,"../component/timeaxis":13,"../component/itemset":12,"moment":18}],19:[function(require,module,exports){
 var Component = require('../component');
 
 /**