vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

176 lines
4.5 KiB

  1. var util = require('../../util');
  2. var Component = require('./Component');
  3. var moment = require('../../module/moment');
  4. var locales = require('../locales');
  5. /**
  6. * A current time bar
  7. * @param {{range: Range, dom: Object, domProps: Object}} body
  8. * @param {Object} [options] Available parameters:
  9. * {Boolean} [showCurrentTime]
  10. * @constructor CurrentTime
  11. * @extends Component
  12. */
  13. function CurrentTime (body, options) {
  14. this.body = body;
  15. // default options
  16. this.defaultOptions = {
  17. showCurrentTime: true,
  18. moment: moment,
  19. locales: locales,
  20. locale: 'en'
  21. };
  22. this.options = util.extend({}, this.defaultOptions);
  23. this.offset = 0;
  24. this._create();
  25. this.setOptions(options);
  26. }
  27. CurrentTime.prototype = new Component();
  28. /**
  29. * Create the HTML DOM for the current time bar
  30. * @private
  31. */
  32. CurrentTime.prototype._create = function() {
  33. var bar = document.createElement('div');
  34. bar.className = 'vis-current-time';
  35. bar.style.position = 'absolute';
  36. bar.style.top = '0px';
  37. bar.style.height = '100%';
  38. this.bar = bar;
  39. };
  40. /**
  41. * Destroy the CurrentTime bar
  42. */
  43. CurrentTime.prototype.destroy = function () {
  44. this.options.showCurrentTime = false;
  45. this.redraw(); // will remove the bar from the DOM and stop refreshing
  46. this.body = null;
  47. };
  48. /**
  49. * Set options for the component. Options will be merged in current options.
  50. * @param {Object} options Available parameters:
  51. * {boolean} [showCurrentTime]
  52. */
  53. CurrentTime.prototype.setOptions = function(options) {
  54. if (options) {
  55. // copy all options that we know
  56. util.selectiveExtend(['showCurrentTime', 'moment', 'locale', 'locales'], this.options, options);
  57. }
  58. };
  59. /**
  60. * Repaint the component
  61. * @return {boolean} Returns true if the component is resized
  62. */
  63. CurrentTime.prototype.redraw = function() {
  64. if (this.options.showCurrentTime) {
  65. var parent = this.body.dom.backgroundVertical;
  66. if (this.bar.parentNode != parent) {
  67. // attach to the dom
  68. if (this.bar.parentNode) {
  69. this.bar.parentNode.removeChild(this.bar);
  70. }
  71. parent.appendChild(this.bar);
  72. this.start();
  73. }
  74. var now = this.options.moment(new Date().valueOf() + this.offset);
  75. var x = this.body.util.toScreen(now);
  76. var locale = this.options.locales[this.options.locale];
  77. if (!locale) {
  78. if (!this.warned) {
  79. console.log('WARNING: options.locales[\'' + this.options.locale + '\'] not found. See http://visjs.org/docs/timeline/#Localization');
  80. this.warned = true;
  81. }
  82. locale = this.options.locales['en']; // fall back on english when not available
  83. }
  84. var title = locale.current + ' ' + locale.time + ': ' + now.format('dddd, MMMM Do YYYY, H:mm:ss');
  85. title = title.charAt(0).toUpperCase() + title.substring(1);
  86. if (this.options.rtl) {
  87. this.bar.style.right = x + 'px';
  88. } else {
  89. this.bar.style.left = x + 'px';
  90. }
  91. this.bar.title = title;
  92. }
  93. else {
  94. // remove the line from the DOM
  95. if (this.bar.parentNode) {
  96. this.bar.parentNode.removeChild(this.bar);
  97. }
  98. this.stop();
  99. }
  100. return false;
  101. };
  102. /**
  103. * Start auto refreshing the current time bar
  104. */
  105. CurrentTime.prototype.start = function() {
  106. var me = this;
  107. function update () {
  108. me.stop();
  109. // determine interval to refresh
  110. var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
  111. var interval = 1 / scale / 10;
  112. if (interval < 30) interval = 30;
  113. if (interval > 1000) interval = 1000;
  114. me.redraw();
  115. me.body.emitter.emit('currentTimeTick');
  116. // start a renderTimer to adjust for the new time
  117. me.currentTimeTimer = setTimeout(update, interval);
  118. }
  119. update();
  120. };
  121. /**
  122. * Stop auto refreshing the current time bar
  123. */
  124. CurrentTime.prototype.stop = function() {
  125. if (this.currentTimeTimer !== undefined) {
  126. clearTimeout(this.currentTimeTimer);
  127. delete this.currentTimeTimer;
  128. }
  129. };
  130. /**
  131. * Set a current time. This can be used for example to ensure that a client's
  132. * time is synchronized with a shared server time.
  133. * @param {Date | String | Number} time A Date, unix timestamp, or
  134. * ISO date string.
  135. */
  136. CurrentTime.prototype.setCurrentTime = function(time) {
  137. var t = util.convert(time, 'Date').valueOf();
  138. var now = new Date().valueOf();
  139. this.offset = t - now;
  140. this.redraw();
  141. };
  142. /**
  143. * Get the current time.
  144. * @return {Date} Returns the current time.
  145. */
  146. CurrentTime.prototype.getCurrentTime = function() {
  147. return new Date(new Date().valueOf() + this.offset);
  148. };
  149. module.exports = CurrentTime;