Refactored `ItemBox`, `ItemRange`, and `ItemPoint` to respectively `BoxItem`, `RangeItem`, and `PointItem`.

HISTORY.md

@@ -25,6 +25,8 @@ http://visjs.org
 - Fixed newly added item ignored when returning an other object instance.
 - Fixed option `autoResize` not working on IE in case of changing visibility
   of the Timeline container element.
+- Renamed internal items from `ItemBox`, `ItemRange`, and `ItemPoint` to
+  respectively `BoxItem`, `RangeItem`, and `PointItem`.
 
 
 ## 2014-08-29, version 3.3.0

index.js

@@ -29,10 +29,10 @@ exports.timeline = {
   components: {
     items: {
       Item: require('./lib/timeline/component/item/Item'),
-      ItemBackground: require('./lib/timeline/component/item/ItemBackground'),
-      ItemBox: require('./lib/timeline/component/item/ItemBox'),
-      ItemPoint: require('./lib/timeline/component/item/ItemPoint'),
-      ItemRange: require('./lib/timeline/component/item/ItemRange')
+      BackgroundItem: require('./lib/timeline/component/item/BackgroundItem'),
+      BoxItem: require('./lib/timeline/component/item/BoxItem'),
+      PointItem: require('./lib/timeline/component/item/PointItem'),
+      RangeItem: require('./lib/timeline/component/item/RangeItem')
     },
 
     Component: require('./lib/timeline/component/Component'),

lib/timeline/component/Group.js

@@ -1,6 +1,6 @@
 var util = require('../../util');
 var stack = require('../Stack');
-var ItemRange = require('./item/ItemRange');
+var RangeItem = require('./item/RangeItem');
 
 /**
  * @constructor Group
@@ -303,14 +303,14 @@ Group.prototype.order = function() {
 /**
  * Create an array containing all items being a range (having an end date)
  * @param {Item[]} array
- * @returns {ItemRange[]}
+ * @returns {RangeItem[]}
  * @private
  */
 Group.prototype._constructByEndArray = function(array) {
   var endArray = [];
 
   for (var i = 0; i < array.length; i++) {
-    if (array[i] instanceof ItemRange) {
+    if (array[i] instanceof RangeItem) {
       endArray.push(array[i]);
     }
   }
@@ -331,14 +331,14 @@ Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range
       i;
 
   // first check if the items that were in view previously are still in view.
-  // this handles the case for the ItemRange that is both before and after the current one.
+  // this handles the case for the RangeItem that is both before and after the current one.
   if (visibleItems.length > 0) {
     for (i = 0; i < visibleItems.length; i++) {
       this._checkIfVisible(visibleItems[i], newVisibleItems, range);
     }
   }
 
-  // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
+  // If there were no visible items previously, use binarySearch to find a visible PointItem or RangeItem (based on startTime)
   if (newVisibleItems.length == 0) {
     initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
   }
@@ -346,7 +346,7 @@ Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range
     initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
   }
 
-  // use visible search to find a visible ItemRange (only based on endTime)
+  // use visible search to find a visible RangeItem (only based on endTime)
   var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
 
   // if we found a initial ID to use, trace it up and down until we meet an invisible item.

lib/timeline/component/ItemSet.js

@@ -4,10 +4,10 @@ var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
 var Component = require('./Component');
 var Group = require('./Group');
-var ItemBox = require('./item/ItemBox');
-var ItemPoint = require('./item/ItemPoint');
-var ItemRange = require('./item/ItemRange');
-var ItemBackground = require('./item/ItemBackground');
+var BoxItem = require('./item/BoxItem');
+var PointItem = require('./item/PointItem');
+var RangeItem = require('./item/RangeItem');
+var BackgroundItem = require('./item/BackgroundItem');
 
 
 var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
@@ -128,10 +128,10 @@ ItemSet.prototype = new Component();
 
 // available item types will be registered here
 ItemSet.types = {
-  background: ItemBackground,
-  box: ItemBox,
-  range: ItemRange,
-  point: ItemPoint
+  background: BackgroundItem,
+  box: BoxItem,
+  range: RangeItem,
+  point: PointItem
 };
 
 /**
@@ -205,7 +205,7 @@ ItemSet.prototype._create = function(){
  *                              individual items.
  *                           {String} align
  *                              Alignment for the items, only applicable for
- *                              ItemBox. Choose 'center' (default), 'left', or
+ *                              BoxItem. Choose 'center' (default), 'left', or
  *                              'right'.
  *                           {String} orientation
  *                              Orientation of the item set. Choose 'top' or
@@ -999,7 +999,7 @@ ItemSet.prototype._constructByEndArray = function(array) {
   var endArray = [];
 
   for (var i = 0; i < array.length; i++) {
-    if (array[i] instanceof ItemRange) {
+    if (array[i] instanceof RangeItem) {
       endArray.push(array[i]);
     }
   }

lib/timeline/component/item/ItemBackground.js → lib/timeline/component/item/BackgroundItem.js

@@ -1,9 +1,9 @@
 var Hammer = require('../../../module/hammer');
 var Item = require('./Item');
-var ItemRange = require('./ItemRange');
+var RangeItem = require('./RangeItem');
 
 /**
- * @constructor ItemBackground
+ * @constructor BackgroundItem
  * @extends Item
  * @param {Object} data             Object containing parameters start, end
  *                                  content, className.
@@ -12,8 +12,8 @@ var ItemRange = require('./ItemRange');
  * @param {Object} [options]        Configuration options
  *                                  // TODO: describe options
  */
-// TODO: implement support for the ItemBackground just having a start, then being displayed as a sort of an annotation
-function ItemBackground (data, conversion, options) {
+// TODO: implement support for the BackgroundItem just having a start, then being displayed as a sort of an annotation
+function BackgroundItem (data, conversion, options) {
   this.props = {
     content: {
       width: 0
@@ -34,16 +34,16 @@ function ItemBackground (data, conversion, options) {
   Item.call(this, data, conversion, options);
 }
 
-ItemBackground.prototype = new Item (null, null, null);
+BackgroundItem.prototype = new Item (null, null, null);
 
-ItemBackground.prototype.baseClassName = 'item background';
+BackgroundItem.prototype.baseClassName = 'item background';
 
 /**
  * Check whether this item is visible inside given range
  * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  * @returns {boolean} True if visible
  */
-ItemBackground.prototype.isVisible = function(range) {
+BackgroundItem.prototype.isVisible = function(range) {
   // determine visibility
   return (this.data.start < range.end) && (this.data.end > range.start);
 };
@@ -51,7 +51,7 @@ ItemBackground.prototype.isVisible = function(range) {
 /**
  * Repaint the item
  */
-ItemBackground.prototype.redraw = function() {
+BackgroundItem.prototype.redraw = function() {
   var dom = this.dom;
   if (!dom) {
     // create DOM
@@ -115,28 +115,28 @@ ItemBackground.prototype.redraw = function() {
  * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
  */
-ItemBackground.prototype.show = ItemRange.prototype.show;
+BackgroundItem.prototype.show = RangeItem.prototype.show;
 
 /**
  * Hide the item from the DOM (when visible)
  * @return {Boolean} changed
  */
-ItemBackground.prototype.hide = ItemRange.prototype.hide;
+BackgroundItem.prototype.hide = RangeItem.prototype.hide;
 
 /**
  * Reposition the item horizontally
  * @Override
  */
-ItemBackground.prototype.repositionX = ItemRange.prototype.repositionX;
+BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
 
 /**
  * Reposition the item vertically
  * @Override
  */
-ItemBackground.prototype.repositionY = function() {
+BackgroundItem.prototype.repositionY = function() {
   var onTop = this.options.orientation === 'top';
   this.dom.content.style.top = onTop ? '' : '0';
   this.dom.content.style.bottom = onTop ? '0' : '';
 };
 
-module.exports = ItemBackground;
+module.exports = BackgroundItem;

lib/timeline/component/item/ItemBox.js → lib/timeline/component/item/BoxItem.js

@@ -1,7 +1,7 @@
 var Item = require('./Item');
 
 /**
- * @constructor ItemBox
+ * @constructor BoxItem
  * @extends Item
  * @param {Object} data             Object containing parameters start
  *                                  content, className.
@@ -10,7 +10,7 @@ var Item = require('./Item');
  * @param {Object} [options]        Configuration options
  *                                  // TODO: describe available options
  */
-function ItemBox (data, conversion, options) {
+function BoxItem (data, conversion, options) {
   this.props = {
     dot: {
       width: 0,
@@ -32,14 +32,14 @@ function ItemBox (data, conversion, options) {
   Item.call(this, data, conversion, options);
 }
 
-ItemBox.prototype = new Item (null, null, null);
+BoxItem.prototype = new Item (null, null, null);
 
 /**
  * Check whether this item is visible inside given range
  * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  * @returns {boolean} True if visible
  */
-ItemBox.prototype.isVisible = function(range) {
+BoxItem.prototype.isVisible = function(range) {
   // determine visibility
   // TODO: account for the real width of the item. Right now we just add 1/4 to the window
   var interval = (range.end - range.start) / 4;
@@ -49,7 +49,7 @@ ItemBox.prototype.isVisible = function(range) {
 /**
  * Repaint the item
  */
-ItemBox.prototype.redraw = function() {
+BoxItem.prototype.redraw = function() {
   var dom = this.dom;
   if (!dom) {
     // create DOM
@@ -132,7 +132,7 @@ ItemBox.prototype.redraw = function() {
  * Show the item in the DOM (when not already displayed). The items DOM will
  * be created when needed.
  */
-ItemBox.prototype.show = function() {
+BoxItem.prototype.show = function() {
   if (!this.displayed) {
     this.redraw();
   }
@@ -141,7 +141,7 @@ ItemBox.prototype.show = function() {
 /**
  * Hide the item from the DOM (when visible)
  */
-ItemBox.prototype.hide = function() {
+BoxItem.prototype.hide = function() {
   if (this.displayed) {
     var dom = this.dom;
 
@@ -160,7 +160,7 @@ ItemBox.prototype.hide = function() {
  * Reposition the item horizontally
  * @Override
  */
-ItemBox.prototype.repositionX = function() {
+BoxItem.prototype.repositionX = function() {
   var start = this.conversion.toScreen(this.data.start);
   var align = this.options.align;
   var left;
@@ -194,7 +194,7 @@ ItemBox.prototype.repositionX = function() {
  * Reposition the item vertically
  * @Override
  */
-ItemBox.prototype.repositionY = function() {
+BoxItem.prototype.repositionY = function() {
   var orientation = this.options.orientation;
   var box = this.dom.box;
   var line = this.dom.line;
@@ -219,4 +219,4 @@ ItemBox.prototype.repositionY = function() {
   dot.style.top = (-this.props.dot.height / 2) + 'px';
 };
 
-module.exports = ItemBox;
+module.exports = BoxItem;

lib/timeline/component/item/ItemPoint.js → lib/timeline/component/item/PointItem.js

@@ -1,7 +1,7 @@
 var Item = require('./Item');
 
 /**
- * @constructor ItemPoint
+ * @constructor PointItem
  * @extends Item
  * @param {Object} data             Object containing parameters start
  *                                  content, className.
@@ -10,7 +10,7 @@ var Item = require('./Item');
  * @param {Object} [options]        Configuration options
  *                                  // TODO: describe available options
  */
-function ItemPoint (data, conversion, options) {
+function PointItem (data, conversion, options) {
   this.props = {
     dot: {
       top: 0,
@@ -33,14 +33,14 @@ function ItemPoint (data, conversion, options) {
   Item.call(this, data, conversion, options);
 }
 
-ItemPoint.prototype = new Item (null, null, null);
+PointItem.prototype = new Item (null, null, null);
 
 /**
  * Check whether this item is visible inside given range
  * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  * @returns {boolean} True if visible
  */
-ItemPoint.prototype.isVisible = function(range) {
+PointItem.prototype.isVisible = function(range) {
   // determine visibility
   // TODO: account for the real width of the item. Right now we just add 1/4 to the window
   var interval = (range.end - range.start) / 4;
@@ -50,7 +50,7 @@ ItemPoint.prototype.isVisible = function(range) {
 /**
  * Repaint the item
  */
-ItemPoint.prototype.redraw = function() {
+PointItem.prototype.redraw = function() {
   var dom = this.dom;
   if (!dom) {
     // create DOM
@@ -128,7 +128,7 @@ ItemPoint.prototype.redraw = function() {
  * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
  */
-ItemPoint.prototype.show = function() {
+PointItem.prototype.show = function() {
   if (!this.displayed) {
     this.redraw();
   }
@@ -137,7 +137,7 @@ ItemPoint.prototype.show = function() {
 /**
  * Hide the item from the DOM (when visible)
  */
-ItemPoint.prototype.hide = function() {
+PointItem.prototype.hide = function() {
   if (this.displayed) {
     if (this.dom.point.parentNode) {
       this.dom.point.parentNode.removeChild(this.dom.point);
@@ -154,7 +154,7 @@ ItemPoint.prototype.hide = function() {
  * Reposition the item horizontally
  * @Override
  */
-ItemPoint.prototype.repositionX = function() {
+PointItem.prototype.repositionX = function() {
   var start = this.conversion.toScreen(this.data.start);
 
   this.left = start - this.props.dot.width;
@@ -167,7 +167,7 @@ ItemPoint.prototype.repositionX = function() {
  * Reposition the item vertically
  * @Override
  */
-ItemPoint.prototype.repositionY = function() {
+PointItem.prototype.repositionY = function() {
   var orientation = this.options.orientation,
       point = this.dom.point;
 
@@ -179,4 +179,4 @@ ItemPoint.prototype.repositionY = function() {
   }
 };
 
-module.exports = ItemPoint;
+module.exports = PointItem;

lib/timeline/component/item/ItemRange.js → lib/timeline/component/item/RangeItem.js

@@ -2,7 +2,7 @@ var Hammer = require('../../../module/hammer');
 var Item = require('./Item');
 
 /**
- * @constructor ItemRange
+ * @constructor RangeItem
  * @extends Item
  * @param {Object} data             Object containing parameters start, end
  *                                  content, className.
@@ -11,7 +11,7 @@ var Item = require('./Item');
  * @param {Object} [options]        Configuration options
  *                                  // TODO: describe options
  */
-function ItemRange (data, conversion, options) {
+function RangeItem (data, conversion, options) {
   this.props = {
     content: {
       width: 0
@@ -32,16 +32,16 @@ function ItemRange (data, conversion, options) {
   Item.call(this, data, conversion, options);
 }
 
-ItemRange.prototype = new Item (null, null, null);
+RangeItem.prototype = new Item (null, null, null);
 
-ItemRange.prototype.baseClassName = 'item range';
+RangeItem.prototype.baseClassName = 'item range';
 
 /**
  * Check whether this item is visible inside given range
  * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  * @returns {boolean} True if visible
  */
-ItemRange.prototype.isVisible = function(range) {
+RangeItem.prototype.isVisible = function(range) {
   // determine visibility
   return (this.data.start < range.end) && (this.data.end > range.start);
 };
@@ -49,7 +49,7 @@ ItemRange.prototype.isVisible = function(range) {
 /**
  * Repaint the item
  */
-ItemRange.prototype.redraw = function() {
+RangeItem.prototype.redraw = function() {
   var dom = this.dom;
   if (!dom) {
     // create DOM
@@ -117,7 +117,7 @@ ItemRange.prototype.redraw = function() {
  * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
  */
-ItemRange.prototype.show = function() {
+RangeItem.prototype.show = function() {
   if (!this.displayed) {
     this.redraw();
   }
@@ -127,7 +127,7 @@ ItemRange.prototype.show = function() {
  * Hide the item from the DOM (when visible)
  * @return {Boolean} changed
  */
-ItemRange.prototype.hide = function() {
+RangeItem.prototype.hide = function() {
   if (this.displayed) {
     var box = this.dom.box;
 
@@ -146,7 +146,7 @@ ItemRange.prototype.hide = function() {
  * Reposition the item horizontally
  * @Override
  */
-ItemRange.prototype.repositionX = function() {
+RangeItem.prototype.repositionX = function() {
   var parentWidth = this.parent.width;
   var start = this.conversion.toScreen(this.data.start);
   var end = this.conversion.toScreen(this.data.end);
@@ -217,7 +217,7 @@ ItemRange.prototype.repositionX = function() {
  * Reposition the item vertically
  * @Override
  */
-ItemRange.prototype.repositionY = function() {
+RangeItem.prototype.repositionY = function() {
   var orientation = this.options.orientation,
       box = this.dom.box;
 
@@ -233,7 +233,7 @@ ItemRange.prototype.repositionY = function() {
  * Repaint a drag area on the left side of the range when the range is selected
  * @protected
  */
-ItemRange.prototype._repaintDragLeft = function () {
+RangeItem.prototype._repaintDragLeft = function () {
   if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
     // create and show drag area
     var dragLeft = document.createElement('div');
@@ -263,7 +263,7 @@ ItemRange.prototype._repaintDragLeft = function () {
  * Repaint a drag area on the right side of the range when the range is selected
  * @protected
  */
-ItemRange.prototype._repaintDragRight = function () {
+RangeItem.prototype._repaintDragRight = function () {
   if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
     // create and show drag area
     var dragRight = document.createElement('div');
@@ -289,4 +289,4 @@ ItemRange.prototype._repaintDragRight = function () {
   }
 };
 
-module.exports = ItemRange;
+module.exports = RangeItem;

lib/util.js

@@ -1086,7 +1086,7 @@ exports.mergeOptions = function (mergeTarget, options, option) {
  * This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
  * if the time we selected (start or end) is within the current range).
  *
- * The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
+ * The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the RangeItem that is
  * before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
  * either the start OR end time has to be in the range.
  *
@@ -1162,7 +1162,7 @@ exports.binarySearch = function(orderedItems, range, field, field2) {
  * This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
  * if the time we selected (start or end) is within the current range).
  *
- * The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
+ * The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the RangeItem that is
  * before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
  * either the start OR end time has to be in the range.
  *