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.

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