Renamed body.props to body.domProps

src/timeline/Range.js

@@ -3,7 +3,7 @@
  * A Range controls a numeric range with a start and end value.
  * The Range adjusts the range based on mouse events or programmatic changes,
  * and triggers events when the range is changing or has been changed.
- * @param {{dom: Object, props: Object, emitter: Emitter}} body
+ * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
  * @param {Object} [options]    See description at Range.setOptions
  */
 function Range(body, options) {
@@ -294,7 +294,7 @@ Range.prototype._onDrag = function (event) {
 
   var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
       interval = (touchParams.end - touchParams.start),
-      width = (direction == 'horizontal') ? this.body.props.center.width : this.body.props.center.height,
+      width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
       diffRange = -delta / width * interval;
 
   this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
@@ -442,12 +442,12 @@ Range.prototype._pointerToDate = function (pointer) {
   validateDirection(direction);
 
   if (direction == 'horizontal') {
-    var width = this.body.props.center.width;
+    var width = this.body.domProps.center.width;
     conversion = this.conversion(width);
     return pointer.x / conversion.scale + conversion.offset;
   }
   else {
-    var height = this.body.props.center.height;
+    var height = this.body.domProps.center.height;
     conversion = this.conversion(height);
     return pointer.y / conversion.scale + conversion.offset;
   }

src/timeline/Timeline.js

@@ -30,8 +30,12 @@ function Timeline (container, items, options) {
 
   this.body = {
     dom: this.dom,
-    props: this.props,
-    emitter: this,
+    domProps: this.props,
+    emitter: {
+      on: this.on.bind(this),
+      off: this.off.bind(this),
+      emit: this.emit.bind(this)
+    },
     util: {
       snap: null, // will be specified after TimeAxis is created
       toScreen: me._toScreen.bind(me),

src/timeline/component/Component.js

@@ -1,6 +1,6 @@
 /**
  * Prototype for visual components
- * @param {{dom: Object, props: Object, emitter: Emitter, range: Range}} [body]
+ * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
  * @param {Object} [options]
  */
 function Component (body, options) {

src/timeline/component/CurrentTime.js

@@ -1,6 +1,6 @@
 /**
  * A current time bar
- * @param {{range: Range, dom: Object}} body
+ * @param {{range: Range, dom: Object, domProps: Object}} body
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCurrentTime]
  * @constructor CurrentTime
@@ -93,7 +93,7 @@ CurrentTime.prototype.start = function() {
     me.stop();
 
     // determine interval to refresh
-    var scale = me.body.range.conversion(me.body.props.center.width).scale;
+    var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
     var interval = 1 / scale / 10;
     if (interval < 30)   interval = 30;
     if (interval > 1000) interval = 1000;

src/timeline/component/ItemSet.js

@@ -4,7 +4,7 @@ var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
  * An ItemSet holds a set of items and ranges which can be displayed in a
  * range. The width is determined by the parent of the ItemSet, and the height
  * is determined by the size of the items.
- * @param {{dom: Object, props: Object, emitter: Emitter, range: Range}} body
+ * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
  * @param {Object} [options]      See ItemSet.setOptions for the available options.
  * @constructor ItemSet
  * @extends Component
@@ -447,9 +447,9 @@ ItemSet.prototype.redraw = function() {
 
   // reposition axis
   this.dom.axis.style.top = asSize((orientation == 'top') ?
-      (this.body.props.top.height + this.body.props.border.top) :
-      (this.body.props.top.height + this.body.props.centerContainer.height));
-  this.dom.axis.style.left = this.body.props.border.left + 'px';
+      (this.body.domProps.top.height + this.body.domProps.border.top) :
+      (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
+  this.dom.axis.style.left = this.body.domProps.border.left + 'px';
 
   // check if this component is resized
   resized = this._isResized() || resized;

src/timeline/component/TimeAxis.js

@@ -1,6 +1,6 @@
 /**
  * A horizontal time axis
- * @param {{dom: Object, props: Object, emitter: Emitter, range: Range}} body
+ * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
  * @param {Object} [options]        See TimeAxis.setOptions for the available
  *                                  options.
  * @constructor TimeAxis
@@ -101,8 +101,8 @@ TimeAxis.prototype.redraw = function () {
   props.height = props.minorLabelHeight + props.majorLabelHeight;
   props.width = foreground.offsetWidth;
 
-  props.minorLineHeight = this.body.props.root.height - props.majorLabelHeight -
-      (options.orientation == 'top' ? this.body.props.bottom.height : this.body.props.top.height);
+  props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
+      (options.orientation == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
   props.minorLineWidth = 1; // TODO: really calculate width
   props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
   props.majorLineWidth = 1; // TODO: really calculate width
@@ -308,7 +308,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
     line.style.top = props.majorLabelHeight + 'px';
   }
   else {
-    line.style.top = this.body.props.top.height + 'px';
+    line.style.top = this.body.domProps.top.height + 'px';
   }
   line.style.height = props.minorLineHeight + 'px';
   line.style.left = (x - props.minorLineWidth / 2) + 'px';
@@ -337,7 +337,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
     line.style.top = '0';
   }
   else {
-    line.style.top = this.body.props.top.height + 'px';
+    line.style.top = this.body.domProps.top.height + 'px';
   }
   line.style.left = (x - props.majorLineWidth / 2) + 'px';
   line.style.height = props.majorLineHeight + 'px';