CurrentTime and CustomTime working again

src/timeline/Timeline.js

@@ -97,25 +97,25 @@ function Timeline (container, items, options) {
 
   this.components = [];
 
-  // create a Range
+  // range
   this.range = new Range(this, this.options);
   this.range.setRange(
       now.clone().add('days', -3).valueOf(),
       now.clone().add('days', 4).valueOf()
   );
 
-  // Create a TimeAxis
-  var timeAxis = new TimeAxis(this, this.options);
-  this.components.push(timeAxis);
+  // time axis
+  this.timeAxis = new TimeAxis(this, this.options);
+  this.components.push(this.timeAxis);
 
-  // re-emit public events
-  this.emitter.on('rangechange', function (properties) {
-    me.emit('rangechange', properties);
-  });
-  this.emitter.on('rangechanged', function (properties) {
-    me.emit('rangechanged', properties);
-  });
+  // current time bar
+  this.currentTime = new CurrentTime(this, this.options);
+  this.components.push(this.currentTime);
 
+  // custom time bar
+  // Note: time bar will be attached in this.setOptions when selected
+  this.customTime = new CustomTime(this, this.options);
+  this.components.push(this.customTime);
 
   /* TODO
   // root panel
@@ -378,7 +378,7 @@ Timeline.prototype._create = function () {
   // TODO: move watch from RootPanel to here
 
   // create a central event bus
-  this.emitter = new Emitter();
+  this.emitter = this;
 
   this.emitter.on('rangechange', this.repaint.bind(this));
 

src/timeline/component/CurrentTime.js

@@ -1,28 +1,22 @@
 /**
  * A current time bar
- * @param {Range} range
+ * @param {{range: Range, dom: Object}} timeline
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCurrentTime]
  * @constructor CurrentTime
  * @extends Component
  */
 
-function CurrentTime (range, options) {
-  this.id = util.randomUUID();
+function CurrentTime (timeline, options) {
+  this.timeline = timeline;
 
-  this.range = range;
   this.options = options || {};
-  this.defaultOptions = {
-    showCurrentTime: false
-  };
 
   this._create();
 }
 
 CurrentTime.prototype = new Component();
 
-CurrentTime.prototype.setOptions = Component.prototype.setOptions;
-
 /**
  * Create the HTML DOM for the current time bar
  * @private
@@ -37,26 +31,37 @@ CurrentTime.prototype._create = function _create () {
   this.bar = bar;
 };
 
-/**
- * Get the frame element of the current time bar
- * @returns {HTMLElement} frame
- */
-CurrentTime.prototype.getFrame = function getFrame() {
-  return this.bar;
-};
-
 /**
  * Repaint the component
  * @return {boolean} Returns true if the component is resized
  */
 CurrentTime.prototype.repaint = function repaint() {
-  var parent = this.parent;
+  // FIXME: CurrentTime should be on the foreground
 
-  var now = new Date();
-  var x = this.options.toScreen(now);
+  if (this.options.showCurrentTime) {
+    if (this.bar.parentNode != this.timeline.dom.backgroundVertical) {
+      // attach to the dom
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
+      this.timeline.dom.backgroundVertical.appendChild(this.bar);
 
-  this.bar.style.left = x + 'px';
-  this.bar.title = 'Current time: ' + now;
+      this.start();
+    }
+
+    var now = new Date();
+    var x = this.options.toScreen(now);
+
+    this.bar.style.left = x + 'px';
+    this.bar.title = 'Current time: ' + now;
+  }
+  else {
+    // remove the line from the DOM
+    if (this.bar.parentNode) {
+      this.bar.parentNode.removeChild(this.bar);
+      this.stop();
+    }
+  }
 
   return false;
 };
@@ -71,7 +76,7 @@ CurrentTime.prototype.start = function start() {
     me.stop();
 
     // determine interval to refresh
-    var scale = me.range.conversion(me.parent.width).scale;
+    var scale = me.timeline.range.conversion(me.timeline.props.center.width).scale;
     var interval = 1 / scale / 10;
     if (interval < 30)   interval = 30;
     if (interval > 1000) interval = 1000;

src/timeline/component/CustomTime.js

@@ -1,18 +1,15 @@
 /**
  * A custom time bar
+ * @param {{range: Range, dom: Object}} timeline
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCustomTime]
  * @constructor CustomTime
  * @extends Component
  */
 
-function CustomTime (options) {
-  this.id = util.randomUUID();
-
+function CustomTime (timeline, options) {
+  this.timeline = timeline;
   this.options = options || {};
-  this.defaultOptions = {
-    showCustomTime: false
-  };
 
   this.customTime = new Date();
   this.eventParams = {}; // stores state parameters while dragging the bar
@@ -23,8 +20,6 @@ function CustomTime (options) {
 
 CustomTime.prototype = new Component();
 
-CustomTime.prototype.setOptions = Component.prototype.setOptions;
-
 /**
  * Create the DOM for the custom time
  * @private
@@ -54,23 +49,31 @@ CustomTime.prototype._create = function _create () {
   this.hammer.on('dragend',   this._onDragEnd.bind(this));
 };
 
-/**
- * Get the frame element of the custom time bar
- * @returns {HTMLElement} frame
- */
-CustomTime.prototype.getFrame = function getFrame() {
-  return this.bar;
-};
-
 /**
  * Repaint the component
  * @return {boolean} Returns true if the component is resized
  */
 CustomTime.prototype.repaint = function () {
-  var x = this.options.toScreen(this.customTime);
-
-  this.bar.style.left = x + 'px';
-  this.bar.title = 'Time: ' + this.customTime;
+  if (this.options.showCustomTime) {
+    if (this.bar.parentNode != this.timeline.dom.backgroundVertical) {
+      // attach to the dom
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
+      this.timeline.dom.backgroundVertical.appendChild(this.bar);
+    }
+
+    var x = this.options.toScreen(this.customTime);
+
+    this.bar.style.left = x + 'px';
+    this.bar.title = 'Time: ' + this.customTime;
+  }
+  else {
+    // remove the line from the DOM
+    if (this.bar.parentNode) {
+      this.bar.parentNode.removeChild(this.bar);
+    }
+  }
 
   return false;
 };
@@ -120,7 +123,7 @@ CustomTime.prototype._onDrag = function (event) {
   this.setCustomTime(time);
 
   // fire a timechange event
-  this.emit('timechange', {
+  this.timeline.emitter.emit('timechange', {
     time: new Date(this.customTime.valueOf())
   });
 
@@ -137,7 +140,7 @@ CustomTime.prototype._onDragEnd = function (event) {
   if (!this.eventParams.dragging) return;
 
   // fire a timechanged event
-  this.emit('timechanged', {
+  this.timeline.emitter.emit('timechanged', {
     time: new Date(this.customTime.valueOf())
   });
 

src/timeline/component/TimeAxis.js

@@ -101,7 +101,8 @@ TimeAxis.prototype.repaint = function () {
   props.majorLineWidth = 1; // TODO: really calculate width
 
   //  take foreground and background offline while updating (is almost twice as fast)
-  var beforeChild = foreground.nextSibling;
+  var foregroundNextSibling = foreground.nextSibling;
+  var backgroundNextSibling = background.nextSibling;
   foreground.parentNode && foreground.parentNode.removeChild(foreground);
   background.parentNode && background.parentNode.removeChild(background);
 
@@ -109,14 +110,19 @@ TimeAxis.prototype.repaint = function () {
 
   this._repaintLabels();
 
-  // put DOM online again (foreground at the same place)
-  if (beforeChild) {
-    parent.insertBefore(foreground, beforeChild);
+  // put DOM online again (at the same place)
+  if (foregroundNextSibling) {
+    parent.insertBefore(foreground, foregroundNextSibling);
   }
   else {
     parent.appendChild(foreground)
   }
-  this.timeline.dom.backgroundVertical.appendChild(background);
+  if (backgroundNextSibling) {
+    this.timeline.dom.backgroundVertical.insertBefore(background, backgroundNextSibling);
+  }
+  else {
+    this.timeline.dom.backgroundVertical.appendChild(background)
+  }
 
   return this._isResized() || parentChanged;
 };

src/timeline/component/css/panel.css

@@ -40,3 +40,7 @@
   border-left-style: solid;
   border-right-style: solid;
 }
+
+.vis.timeline .background {
+  overflow: hidden;
+}