diff --git a/Jakefile.js b/Jakefile.js index b54781e3..42857a70 100644 --- a/Jakefile.js +++ b/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', diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index 10ea6add..27c62282 100644 --- a/src/timeline/Timeline.js +++ b/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); diff --git a/src/timeline/component/CurrentTime.js b/src/timeline/component/CurrentTime.js new file mode 100644 index 00000000..d4a792fb --- /dev/null +++ b/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; +}; diff --git a/src/timeline/component/css/currenttime.css b/src/timeline/component/css/currenttime.css new file mode 100644 index 00000000..5ea0380b --- /dev/null +++ b/src/timeline/component/css/currenttime.css @@ -0,0 +1,5 @@ +.vis.timeline .currenttime { + background-color: #FF7F6E; + width: 2px; + z-index: 9; +} \ No newline at end of file