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.

171 lines
4.4 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. this.bar.style.left = x + 'px';
  87. this.bar.title = title;
  88. }
  89. else {
  90. // remove the line from the DOM
  91. if (this.bar.parentNode) {
  92. this.bar.parentNode.removeChild(this.bar);
  93. }
  94. this.stop();
  95. }
  96. return false;
  97. };
  98. /**
  99. * Start auto refreshing the current time bar
  100. */
  101. CurrentTime.prototype.start = function() {
  102. var me = this;
  103. function update () {
  104. me.stop();
  105. // determine interval to refresh
  106. var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
  107. var interval = 1 / scale / 10;
  108. if (interval < 30) interval = 30;
  109. if (interval > 1000) interval = 1000;
  110. me.redraw();
  111. // start a renderTimer to adjust for the new time
  112. me.currentTimeTimer = setTimeout(update, interval);
  113. }
  114. update();
  115. };
  116. /**
  117. * Stop auto refreshing the current time bar
  118. */
  119. CurrentTime.prototype.stop = function() {
  120. if (this.currentTimeTimer !== undefined) {
  121. clearTimeout(this.currentTimeTimer);
  122. delete this.currentTimeTimer;
  123. }
  124. };
  125. /**
  126. * Set a current time. This can be used for example to ensure that a client's
  127. * time is synchronized with a shared server time.
  128. * @param {Date | String | Number} time A Date, unix timestamp, or
  129. * ISO date string.
  130. */
  131. CurrentTime.prototype.setCurrentTime = function(time) {
  132. var t = util.convert(time, 'Date').valueOf();
  133. var now = new Date().valueOf();
  134. this.offset = t - now;
  135. this.redraw();
  136. };
  137. /**
  138. * Get the current time.
  139. * @return {Date} Returns the current time.
  140. */
  141. CurrentTime.prototype.getCurrentTime = function() {
  142. return new Date(new Date().valueOf() + this.offset);
  143. };
  144. module.exports = CurrentTime;