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.

188 lines
4.3 KiB

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