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.

196 lines
4.7 KiB

  1. var Hammer = require('../../module/hammer');
  2. var util = require('../../util');
  3. var Component = require('./Component');
  4. var moment = require('../../module/moment');
  5. var locales = require('../locales');
  6. /**
  7. * A custom time bar
  8. * @param {{range: Range, dom: Object}} body
  9. * @param {Object} [options] Available parameters:
  10. * {Boolean} [showCustomTime]
  11. * @constructor CustomTime
  12. * @extends Component
  13. */
  14. function CustomTime (body, options) {
  15. this.body = body;
  16. // default options
  17. this.defaultOptions = {
  18. showCustomTime: false,
  19. locales: locales,
  20. locale: 'en'
  21. };
  22. this.options = util.extend({}, this.defaultOptions);
  23. this.customTime = new Date();
  24. this.eventParams = {}; // stores state parameters while dragging the bar
  25. // create the DOM
  26. this._create();
  27. this.setOptions(options);
  28. }
  29. CustomTime.prototype = new Component();
  30. /**
  31. * Set options for the component. Options will be merged in current options.
  32. * @param {Object} options Available parameters:
  33. * {boolean} [showCustomTime]
  34. */
  35. CustomTime.prototype.setOptions = function(options) {
  36. if (options) {
  37. // copy all options that we know
  38. util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
  39. }
  40. };
  41. /**
  42. * Create the DOM for the custom time
  43. * @private
  44. */
  45. CustomTime.prototype._create = function() {
  46. var bar = document.createElement('div');
  47. bar.className = 'customtime';
  48. bar.style.position = 'absolute';
  49. bar.style.top = '0px';
  50. bar.style.height = '100%';
  51. this.bar = bar;
  52. var drag = document.createElement('div');
  53. drag.style.position = 'relative';
  54. drag.style.top = '0px';
  55. drag.style.left = '-10px';
  56. drag.style.height = '100%';
  57. drag.style.width = '20px';
  58. bar.appendChild(drag);
  59. // attach event listeners
  60. this.hammer = Hammer(bar, {
  61. prevent_default: true
  62. });
  63. this.hammer.on('dragstart', this._onDragStart.bind(this));
  64. this.hammer.on('drag', this._onDrag.bind(this));
  65. this.hammer.on('dragend', this._onDragEnd.bind(this));
  66. };
  67. /**
  68. * Destroy the CustomTime bar
  69. */
  70. CustomTime.prototype.destroy = function () {
  71. this.options.showCustomTime = false;
  72. this.redraw(); // will remove the bar from the DOM
  73. this.hammer.enable(false);
  74. this.hammer = null;
  75. this.body = null;
  76. };
  77. /**
  78. * Repaint the component
  79. * @return {boolean} Returns true if the component is resized
  80. */
  81. CustomTime.prototype.redraw = function () {
  82. if (this.options.showCustomTime) {
  83. var parent = this.body.dom.backgroundVertical;
  84. if (this.bar.parentNode != parent) {
  85. // attach to the dom
  86. if (this.bar.parentNode) {
  87. this.bar.parentNode.removeChild(this.bar);
  88. }
  89. parent.appendChild(this.bar);
  90. }
  91. var x = this.body.util.toScreen(this.customTime);
  92. var locale = this.options.locales[this.options.locale];
  93. var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
  94. title = title.charAt(0).toUpperCase() + title.substring(1);
  95. this.bar.style.left = x + 'px';
  96. this.bar.title = title;
  97. }
  98. else {
  99. // remove the line from the DOM
  100. if (this.bar.parentNode) {
  101. this.bar.parentNode.removeChild(this.bar);
  102. }
  103. }
  104. return false;
  105. };
  106. /**
  107. * Set custom time.
  108. * @param {Date | number | string} time
  109. */
  110. CustomTime.prototype.setCustomTime = function(time) {
  111. this.customTime = util.convert(time, 'Date');
  112. this.redraw();
  113. };
  114. /**
  115. * Retrieve the current custom time.
  116. * @return {Date} customTime
  117. */
  118. CustomTime.prototype.getCustomTime = function() {
  119. return new Date(this.customTime.valueOf());
  120. };
  121. /**
  122. * Start moving horizontally
  123. * @param {Event} event
  124. * @private
  125. */
  126. CustomTime.prototype._onDragStart = function(event) {
  127. this.eventParams.dragging = true;
  128. this.eventParams.customTime = this.customTime;
  129. event.stopPropagation();
  130. event.preventDefault();
  131. };
  132. /**
  133. * Perform moving operating.
  134. * @param {Event} event
  135. * @private
  136. */
  137. CustomTime.prototype._onDrag = function (event) {
  138. if (!this.eventParams.dragging) return;
  139. var deltaX = event.gesture.deltaX,
  140. x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
  141. time = this.body.util.toTime(x);
  142. this.setCustomTime(time);
  143. // fire a timechange event
  144. this.body.emitter.emit('timechange', {
  145. time: new Date(this.customTime.valueOf())
  146. });
  147. event.stopPropagation();
  148. event.preventDefault();
  149. };
  150. /**
  151. * Stop moving operating.
  152. * @param {event} event
  153. * @private
  154. */
  155. CustomTime.prototype._onDragEnd = function (event) {
  156. if (!this.eventParams.dragging) return;
  157. // fire a timechanged event
  158. this.body.emitter.emit('timechanged', {
  159. time: new Date(this.customTime.valueOf())
  160. });
  161. event.stopPropagation();
  162. event.preventDefault();
  163. };
  164. module.exports = CustomTime;