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.

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