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.

232 lines
5.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. * {number | string} id
  11. * {string} locales
  12. * {string} locale
  13. * @constructor CustomTime
  14. * @extends Component
  15. */
  16. function CustomTime (body, options) {
  17. this.body = body;
  18. // default options
  19. this.defaultOptions = {
  20. locales: locales,
  21. locale: 'en',
  22. id: undefined
  23. };
  24. this.options = util.extend({}, this.defaultOptions);
  25. if (options && options.time) {
  26. this.customTime = options.time;
  27. } else {
  28. this.customTime = new Date();
  29. }
  30. this.eventParams = {}; // stores state parameters while dragging the bar
  31. // create the DOM
  32. this._create();
  33. this.setOptions(options);
  34. }
  35. CustomTime.prototype = new Component();
  36. /**
  37. * Set options for the component. Options will be merged in current options.
  38. * @param {Object} options Available parameters:
  39. * {number | string} id
  40. * {string} locales
  41. * {string} locale
  42. */
  43. CustomTime.prototype.setOptions = function(options) {
  44. if (options) {
  45. // copy all options that we know
  46. util.selectiveExtend(['locale', 'locales', 'id'], this.options, options);
  47. }
  48. };
  49. /**
  50. * Create the DOM for the custom time
  51. * @private
  52. */
  53. CustomTime.prototype._create = function() {
  54. var bar = document.createElement('div');
  55. bar['custom-time'] = this;
  56. bar.className = 'vis-custom-time';
  57. bar.style.position = 'absolute';
  58. bar.style.top = '0px';
  59. bar.style.height = '100%';
  60. this.bar = bar;
  61. var drag = document.createElement('div');
  62. drag.style.position = 'relative';
  63. drag.style.top = '0px';
  64. drag.style.left = '-10px';
  65. drag.style.height = '100%';
  66. drag.style.width = '20px';
  67. bar.appendChild(drag);
  68. // attach event listeners
  69. this.hammer = new Hammer(drag);
  70. this.hammer.on('panstart', this._onDragStart.bind(this));
  71. this.hammer.on('panmove', this._onDrag.bind(this));
  72. this.hammer.on('panend', this._onDragEnd.bind(this));
  73. // TODO: cleanup
  74. //this.hammer.on('pan', function (event) {
  75. // event.preventDefault();
  76. //});
  77. };
  78. /**
  79. * Destroy the CustomTime bar
  80. */
  81. CustomTime.prototype.destroy = function () {
  82. this.hide();
  83. this.hammer.destroy();
  84. this.hammer = null;
  85. this.body = null;
  86. };
  87. /**
  88. * Repaint the component
  89. * @return {boolean} Returns true if the component is resized
  90. */
  91. CustomTime.prototype.redraw = function () {
  92. var parent = this.body.dom.backgroundVertical;
  93. if (this.bar.parentNode != parent) {
  94. // attach to the dom
  95. if (this.bar.parentNode) {
  96. this.bar.parentNode.removeChild(this.bar);
  97. }
  98. parent.appendChild(this.bar);
  99. }
  100. var x = this.body.util.toScreen(this.customTime);
  101. var locale = this.options.locales[this.options.locale];
  102. if (!locale) {
  103. if (!this.warned) {
  104. console.log('WARNING: options.locales[\'' + this.options.locale + '\'] not found. See http://visjs.org/docs/timeline.html#Localization');
  105. this.warned = true;
  106. }
  107. locale = this.options.locales['en']; // fall back on english when not available
  108. }
  109. var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
  110. title = title.charAt(0).toUpperCase() + title.substring(1);
  111. this.bar.style.left = x + 'px';
  112. this.bar.title = title;
  113. return false;
  114. };
  115. /**
  116. * Remove the CustomTime from the DOM
  117. */
  118. CustomTime.prototype.hide = function () {
  119. // remove the line from the DOM
  120. if (this.bar.parentNode) {
  121. this.bar.parentNode.removeChild(this.bar);
  122. }
  123. };
  124. /**
  125. * Set custom time.
  126. * @param {Date | number | string} time
  127. */
  128. CustomTime.prototype.setCustomTime = function(time) {
  129. this.customTime = util.convert(time, 'Date');
  130. this.redraw();
  131. };
  132. /**
  133. * Retrieve the current custom time.
  134. * @return {Date} customTime
  135. */
  136. CustomTime.prototype.getCustomTime = function() {
  137. return new Date(this.customTime.valueOf());
  138. };
  139. /**
  140. * Start moving horizontally
  141. * @param {Event} event
  142. * @private
  143. */
  144. CustomTime.prototype._onDragStart = function(event) {
  145. this.eventParams.dragging = true;
  146. this.eventParams.customTime = this.customTime;
  147. event.stopPropagation();
  148. };
  149. /**
  150. * Perform moving operating.
  151. * @param {Event} event
  152. * @private
  153. */
  154. CustomTime.prototype._onDrag = function (event) {
  155. if (!this.eventParams.dragging) return;
  156. var x = this.body.util.toScreen(this.eventParams.customTime) + event.deltaX;
  157. var time = this.body.util.toTime(x);
  158. this.setCustomTime(time);
  159. // fire a timechange event
  160. this.body.emitter.emit('timechange', {
  161. id: this.options.id,
  162. time: new Date(this.customTime.valueOf())
  163. });
  164. event.stopPropagation();
  165. };
  166. /**
  167. * Stop moving operating.
  168. * @param {Event} event
  169. * @private
  170. */
  171. CustomTime.prototype._onDragEnd = function (event) {
  172. if (!this.eventParams.dragging) return;
  173. // fire a timechanged event
  174. this.body.emitter.emit('timechanged', {
  175. id: this.options.id,
  176. time: new Date(this.customTime.valueOf())
  177. });
  178. event.stopPropagation();
  179. };
  180. /**
  181. * Find a custom time from an event target:
  182. * searches for the attribute 'custom-time' in the event target's element tree
  183. * @param {Event} event
  184. * @return {CustomTime | null} customTime
  185. */
  186. CustomTime.customTimeFromTarget = function(event) {
  187. var target = event.target;
  188. while (target) {
  189. if (target.hasOwnProperty('custom-time')) {
  190. return target['custom-time'];
  191. }
  192. target = target.parentNode;
  193. }
  194. return null;
  195. };
  196. module.exports = CustomTime;