CustomTime and CurrentTime works again

src/timeline/Timeline.js

@@ -57,6 +57,7 @@ function Timeline (container, items, options) {
   };
 
   // event bus
+  // TODO: make the Timeline itself an emitter
   this.emitter = new Emitter();
 
   // root panel
@@ -129,6 +130,14 @@ function Timeline (container, items, options) {
       now.clone().add('days', -3).valueOf(),
       now.clone().add('days', 4).valueOf()
   );
+  /* TODO
+  this.range.on('rangechange', function (properties) {
+    me.controller.emit('rangechange', properties);
+  });
+  this.range.on('rangechanged', function (properties) {
+    me.controller.emit('rangechanged', properties);
+  });
+  */
 
   // panel with time axis
   var timeAxisOptions = Object.create(rootOptions);
@@ -155,15 +164,19 @@ function Timeline (container, items, options) {
   this.contentPanel = new Panel(contentOptions);
   this.mainPanel.appendChild(this.contentPanel);
 
-  /* TODO
   // current time bar
-  this.currenttime = new CurrentTime(rootOptions);
-  this.mainPanel.appendChild(this.currenttime);
+  this.currentTime = new CurrentTime(this.range, rootOptions);
+  this.mainPanel.appendChild(this.currentTime);
 
   // custom time bar
-  this.customtime = new CustomTime(rootOptions);
-  this.mainPanel.appendChild(this.customtime);
-  */
+  this.customTime = new CustomTime(rootOptions);
+  this.mainPanel.appendChild(this.customTime);
+  this.customTime.on('timechange', function (time) {
+    me.emitter.emit('timechange', time);
+  });
+  this.customTime.on('timechanged', function (time) {
+    me.emitter.emit('timechanged', time);
+  });
 
   // create groupset
   this.setGroups(null);
@@ -240,11 +253,11 @@ Timeline.prototype.setOptions = function (options) {
  * @param {Date} time
  */
 Timeline.prototype.setCustomTime = function (time) {
-  if (!this.customtime) {
+  if (!this.customTime) {
     throw new Error('Cannot get custom time: Custom time bar is not enabled');
   }
 
-  this.customtime.setCustomTime(time);
+  this.customTime.setCustomTime(time);
 };
 
 /**
@@ -252,11 +265,11 @@ Timeline.prototype.setCustomTime = function (time) {
  * @return {Date} customTime
  */
 Timeline.prototype.getCustomTime = function() {
-  if (!this.customtime) {
+  if (!this.customTime) {
     throw new Error('Cannot get custom time: Custom time bar is not enabled');
   }
 
-  return this.customtime.getCustomTime();
+  return this.customTime.getCustomTime();
 };
 
 /**

src/timeline/component/CurrentTime.js

@@ -1,14 +1,16 @@
 /**
  * A current time bar
+ * @param {Range} range
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCurrentTime]
  * @constructor CurrentTime
  * @extends Component
  */
 
-function CurrentTime (options) {
+function CurrentTime (range, options) {
   this.id = util.randomUUID();
 
+  this.range = range;
   this.options = options || {};
   this.defaultOptions = {
     showCurrentTime: false
@@ -40,7 +42,7 @@ CurrentTime.prototype.repaint = function () {
     throw new Error('Cannot repaint bar: no parent attached');
   }
 
-  var parentContainer = parent.parent.getContainer(); // FIXME: this is weird
+  var parentContainer = parent.getContainer();
   if (!parentContainer) {
     throw new Error('Cannot repaint bar: parent has no container element');
   }
@@ -66,7 +68,7 @@ CurrentTime.prototype.repaint = function () {
   }
 
   var now = new Date();
-  var x = parent.toScreen(now);
+  var x = this.options.toScreen(now);
 
   bar.style.left = x + 'px';
   bar.title = 'Current time: ' + now;
@@ -77,12 +79,12 @@ CurrentTime.prototype.repaint = function () {
     delete this.currentTimeTimer;
   }
 
+  // determine interval to refresh
   var timeline = this;
-  var interval = 1 / parent.conversion.scale / 2;
-
-  if (interval < 30) {
-    interval = 30;
-  }
+  var scale = this.range.conversion(parent.width).scale;
+  var interval = 1 / scale / 2;
+  if (interval < 30)   interval = 30;
+  if (interval > 1000) interval = 1000;
 
   this.currentTimeTimer = setTimeout(function() {
     timeline.repaint();

src/timeline/component/CustomTime.js

@@ -45,7 +45,7 @@ CustomTime.prototype.repaint = function () {
     throw new Error('Cannot repaint bar: no parent attached');
   }
 
-  var parentContainer = parent.parent.getContainer(); // FIXME: this is weird
+  var parentContainer = parent.getContainer();
   if (!parentContainer) {
     throw new Error('Cannot repaint bar: parent has no container element');
   }
@@ -87,7 +87,7 @@ CustomTime.prototype.repaint = function () {
     this.hammer.on('dragend',   this._onDragEnd.bind(this));
   }
 
-  var x = parent.toScreen(this.customTime);
+  var x = this.options.toScreen(this.customTime);
 
   bar.style.left = x + 'px';
   bar.title = 'Time: ' + this.customTime;
@@ -131,17 +131,15 @@ CustomTime.prototype._onDragStart = function(event) {
  */
 CustomTime.prototype._onDrag = function (event) {
   var deltaX = event.gesture.deltaX,
-      x = this.parent.toScreen(this.eventParams.customTime) + deltaX,
-      time = this.parent.toTime(x);
+      x = this.options.toScreen(this.eventParams.customTime) + deltaX,
+      time = this.options.toTime(x);
 
   this.setCustomTime(time);
 
   // fire a timechange event
-  if (this.controller) {
-    this.controller.emit('timechange', {
-      time: this.customTime
-    })
-  }
+  this.emit('timechange', {
+    time: new Date(this.customTime.valueOf())
+  });
 
   event.stopPropagation();
   event.preventDefault();
@@ -154,11 +152,9 @@ CustomTime.prototype._onDrag = function (event) {
  */
 CustomTime.prototype._onDragEnd = function (event) {
   // fire a timechanged event
-  if (this.controller) {
-    this.controller.emit('timechanged', {
-      time: this.customTime
-    })
-  }
+  this.emit('timechanged', {
+    time: new Date(this.customTime.valueOf())
+  });
 
   event.stopPropagation();
   event.preventDefault();