Browse Source

Current time bar as a component

css_transitions
Fedor Tirsel 11 years ago
parent
commit
a2498f0f6c
4 changed files with 114 additions and 1 deletions
  1. +3
    -1
      Jakefile.js
  2. +5
    -0
      src/timeline/Timeline.js
  3. +101
    -0
      src/timeline/component/CurrentTime.js
  4. +5
    -0
      src/timeline/component/css/currenttime.css

+ 3
- 1
Jakefile.js View File

@ -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',

+ 5
- 0
src/timeline/Timeline.js View File

@ -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);

+ 101
- 0
src/timeline/component/CurrentTime.js View File

@ -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;
};

+ 5
- 0
src/timeline/component/css/currenttime.css View File

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

Loading…
Cancel
Save