Current time bar as a component

Jakefile.js

@@ -34,7 +34,8 @@ task('build', {async: true}, function () {
             './src/timeline/component/css/groupset.css',
             './src/timeline/component/css/itemset.css',
             './src/timeline/component/css/item.css',
-            './src/timeline/component/css/timeaxis.css'
+            './src/timeline/component/css/timeaxis.css',
+            './src/timeline/component/css/currenttime.css'
         ],
         header: '/* vis.js stylesheet */',
         separator: '\n'
@@ -62,6 +63,7 @@ task('build', {async: true}, function () {
             './src/timeline/component/Panel.js',
             './src/timeline/component/RootPanel.js',
             './src/timeline/component/TimeAxis.js',
+            './src/timeline/component/CurrentTime.js',
             './src/timeline/component/ItemSet.js',
             './src/timeline/component/item/*.js',
             './src/timeline/component/Group.js',

src/timeline/Timeline.js

@@ -17,6 +17,7 @@ function Timeline (container, items, options) {
         // zoomable: true, // TODO: option zoomable
         showMinorLabels: true,
         showMajorLabels: true,
+        showCurrentTime: false,
         autoResize: false
     }, options);
 
@@ -109,6 +110,10 @@ function Timeline (container, items, options) {
     this.timeaxis.setRange(this.range);
     this.controller.add(this.timeaxis);
 
+    // current time bar
+    this.currenttime = new CurrentTime(this.timeaxis, [], rootOptions);
+    this.controller.add(this.currenttime);
+
     // create itemset or groupset
     this.setGroups(null);
 

src/timeline/component/CurrentTime.js

@@ -0,0 +1,101 @@
+/**
+ * A current time bar
+ * @param {Component} parent
+ * @param {Component[]} [depends]   Components on which this components depends
+ *                                  (except for the parent)
+ * @param {Object} [options]        Available parameters:
+ *                                  {Boolean} [showCurrentTime]
+ * @constructor CurrentTime
+ * @extends Component
+ */
+
+function CurrentTime (parent, depends, options) {
+    this.id = util.randomUUID();
+    this.parent = parent;
+    this.depends = depends;
+
+    this.options = options || {};
+    this.defaultOptions = {
+        showCurrentTime: false
+    };
+}
+
+CurrentTime.prototype = new Component();
+
+CurrentTime.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Get the container element of the bar, which can be used by a child to
+ * add its own widgets.
+ * @returns {HTMLElement} container
+ */
+CurrentTime.prototype.getContainer = function () {
+    return this.frame;
+};
+
+/**
+ * Repaint the component
+ * @return {Boolean} changed
+ */
+CurrentTime.prototype.repaint = function () {
+    var bar = this.frame,
+        parent = this.parent,
+        parentContainer = parent.parent.getContainer();
+
+    if (!parent) {
+        throw new Error('Cannot repaint bar: no parent attached');
+    }
+
+    if (!parentContainer) {
+        throw new Error('Cannot repaint bar: parent has no container element');
+    }
+
+    if (!this.getOption('showCurrentTime')) {
+        if (bar) {
+            parentContainer.removeChild(bar);
+            delete this.frame;
+        }
+
+        return;
+    }
+
+    if (!bar) {
+        bar = document.createElement('div');
+        bar.className = 'currenttime';
+        bar.style.position = 'absolute';
+        bar.style.top = '0px';
+        bar.style.height = '100%';
+
+        parentContainer.appendChild(bar);
+        this.frame = bar;
+    }
+
+    if (!parent.conversion) {
+        parent._updateConversion();
+    }
+
+    var now = new Date();
+    var x = parent.toScreen(now);
+
+    bar.style.left = x + 'px';
+    bar.title = 'Current time: ' + now;
+
+    // start a timer to adjust for the new time
+    if (this.currentTimeTimer !== undefined) {
+        clearTimeout(this.currentTimeTimer);
+        delete this.currentTimeTimer;
+    }
+
+    var timeline = this;
+    var interval = 1 / parent.conversion.factor / 2;
+
+    if (interval < 30) {
+        interval = 30;
+    }
+    
+    this.currentTimeTimer = setTimeout(function() {
+        timeline.repaint();
+    }, interval);
+
+    return false;
+};

src/timeline/component/css/currenttime.css

@@ -0,0 +1,5 @@
+.vis.timeline .currenttime {
+    background-color: #FF7F6E;
+    width: 2px;
+    z-index: 9;
+}