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.

837 lines
28 KiB

  1. var Emitter = require('emitter-component');
  2. var Hammer = require('../module/hammer');
  3. var util = require('../util');
  4. var DataSet = require('../DataSet');
  5. var DataView = require('../DataView');
  6. var Range = require('./Range');
  7. var ItemSet = require('./component/ItemSet');
  8. var Activator = require('../shared/Activator');
  9. var DateUtil = require('./DateUtil');
  10. /**
  11. * Create a timeline visualization
  12. * @param {HTMLElement} container
  13. * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
  14. * @param {Object} [options] See Core.setOptions for the available options.
  15. * @constructor
  16. */
  17. function Core () {}
  18. // turn Core into an event emitter
  19. Emitter(Core.prototype);
  20. /**
  21. * Create the main DOM for the Core: a root panel containing left, right,
  22. * top, bottom, content, and background panel.
  23. * @param {Element} container The container element where the Core will
  24. * be attached.
  25. * @private
  26. */
  27. Core.prototype._create = function (container) {
  28. this.dom = {};
  29. this.dom.root = document.createElement('div');
  30. this.dom.background = document.createElement('div');
  31. this.dom.backgroundVertical = document.createElement('div');
  32. this.dom.backgroundHorizontal = document.createElement('div');
  33. this.dom.centerContainer = document.createElement('div');
  34. this.dom.leftContainer = document.createElement('div');
  35. this.dom.rightContainer = document.createElement('div');
  36. this.dom.center = document.createElement('div');
  37. this.dom.left = document.createElement('div');
  38. this.dom.right = document.createElement('div');
  39. this.dom.top = document.createElement('div');
  40. this.dom.bottom = document.createElement('div');
  41. this.dom.shadowTop = document.createElement('div');
  42. this.dom.shadowBottom = document.createElement('div');
  43. this.dom.shadowTopLeft = document.createElement('div');
  44. this.dom.shadowBottomLeft = document.createElement('div');
  45. this.dom.shadowTopRight = document.createElement('div');
  46. this.dom.shadowBottomRight = document.createElement('div');
  47. this.dom.root.className = 'vis timeline root';
  48. this.dom.background.className = 'vispanel background';
  49. this.dom.backgroundVertical.className = 'vispanel background vertical';
  50. this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
  51. this.dom.centerContainer.className = 'vispanel center';
  52. this.dom.leftContainer.className = 'vispanel left';
  53. this.dom.rightContainer.className = 'vispanel right';
  54. this.dom.top.className = 'vispanel top';
  55. this.dom.bottom.className = 'vispanel bottom';
  56. this.dom.left.className = 'content';
  57. this.dom.center.className = 'content';
  58. this.dom.right.className = 'content';
  59. this.dom.shadowTop.className = 'shadow top';
  60. this.dom.shadowBottom.className = 'shadow bottom';
  61. this.dom.shadowTopLeft.className = 'shadow top';
  62. this.dom.shadowBottomLeft.className = 'shadow bottom';
  63. this.dom.shadowTopRight.className = 'shadow top';
  64. this.dom.shadowBottomRight.className = 'shadow bottom';
  65. this.dom.root.appendChild(this.dom.background);
  66. this.dom.root.appendChild(this.dom.backgroundVertical);
  67. this.dom.root.appendChild(this.dom.backgroundHorizontal);
  68. this.dom.root.appendChild(this.dom.centerContainer);
  69. this.dom.root.appendChild(this.dom.leftContainer);
  70. this.dom.root.appendChild(this.dom.rightContainer);
  71. this.dom.root.appendChild(this.dom.top);
  72. this.dom.root.appendChild(this.dom.bottom);
  73. this.dom.centerContainer.appendChild(this.dom.center);
  74. this.dom.leftContainer.appendChild(this.dom.left);
  75. this.dom.rightContainer.appendChild(this.dom.right);
  76. this.dom.centerContainer.appendChild(this.dom.shadowTop);
  77. this.dom.centerContainer.appendChild(this.dom.shadowBottom);
  78. this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
  79. this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
  80. this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
  81. this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
  82. this.on('rangechange', this.redraw.bind(this));
  83. var me = this;
  84. this.on('change', function (properties) {
  85. if (properties && properties.queue == true) {
  86. // redraw once on next tick
  87. if (!me._redrawTimer) {
  88. me._redrawTimer = setTimeout(function () {
  89. me._redrawTimer = null;
  90. me.redraw();
  91. }, 0)
  92. }
  93. }
  94. else {
  95. // redraw immediately
  96. me.redraw();
  97. }
  98. });
  99. // create event listeners for all interesting events, these events will be
  100. // emitted via emitter
  101. this.hammer = new Hammer(this.dom.root, {touchAction: 'pan-y'});
  102. this.hammer.get('pinch').set({enable: true});
  103. this.listeners = {};
  104. var events = [
  105. 'tap', 'doubletap', 'press',
  106. 'pinch',
  107. 'pan', 'panstart', 'panmove', 'panend'
  108. // TODO: cleanup
  109. //'touch', 'pinch',
  110. //'tap', 'doubletap', 'hold',
  111. //'dragstart', 'drag', 'dragend',
  112. //'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
  113. ];
  114. events.forEach(function (type) {
  115. var listener = function (event) {
  116. if (me.isActive()) {
  117. me.emit(type, event);
  118. }
  119. };
  120. me.hammer.on(type, listener);
  121. me.listeners[type] = listener;
  122. });
  123. // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
  124. this.hammer.on('hammer.input', function (event) {
  125. if (event.isFirst) {
  126. if (me.isActive()) {
  127. me.emit('touch', event);
  128. }
  129. }
  130. }.bind(this));
  131. function onMouseWheel(event) {
  132. if (me.isActive()) {
  133. me.emit('mousewheel', event);
  134. }
  135. }
  136. this.dom.root.addEventListener('mousewheel', onMouseWheel);
  137. this.dom.root.addEventListener('DOMMouseScroll', onMouseWheel);
  138. // size properties of each of the panels
  139. this.props = {
  140. root: {},
  141. background: {},
  142. centerContainer: {},
  143. leftContainer: {},
  144. rightContainer: {},
  145. center: {},
  146. left: {},
  147. right: {},
  148. top: {},
  149. bottom: {},
  150. border: {},
  151. scrollTop: 0,
  152. scrollTopMin: 0
  153. };
  154. this.redrawCount = 0;
  155. // attach the root panel to the provided container
  156. if (!container) throw new Error('No container provided');
  157. container.appendChild(this.dom.root);
  158. };
  159. /**
  160. * Set options. Options will be passed to all components loaded in the Timeline.
  161. * @param {Object} [options]
  162. * {String} orientation
  163. * Vertical orientation for the Timeline,
  164. * can be 'bottom' (default) or 'top'.
  165. * {String | Number} width
  166. * Width for the timeline, a number in pixels or
  167. * a css string like '1000px' or '75%'. '100%' by default.
  168. * {String | Number} height
  169. * Fixed height for the Timeline, a number in pixels or
  170. * a css string like '400px' or '75%'. If undefined,
  171. * The Timeline will automatically size such that
  172. * its contents fit.
  173. * {String | Number} minHeight
  174. * Minimum height for the Timeline, a number in pixels or
  175. * a css string like '400px' or '75%'.
  176. * {String | Number} maxHeight
  177. * Maximum height for the Timeline, a number in pixels or
  178. * a css string like '400px' or '75%'.
  179. * {Number | Date | String} start
  180. * Start date for the visible window
  181. * {Number | Date | String} end
  182. * End date for the visible window
  183. */
  184. Core.prototype.setOptions = function (options) {
  185. if (options) {
  186. // copy the known options
  187. var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hiddenDates'];
  188. util.selectiveExtend(fields, this.options, options);
  189. if ('hiddenDates' in this.options) {
  190. DateUtil.convertHiddenOptions(this.body, this.options.hiddenDates);
  191. }
  192. if ('clickToUse' in options) {
  193. if (options.clickToUse) {
  194. if (!this.activator) {
  195. this.activator = new Activator(this.dom.root);
  196. }
  197. }
  198. else {
  199. if (this.activator) {
  200. this.activator.destroy();
  201. delete this.activator;
  202. }
  203. }
  204. }
  205. // enable/disable autoResize
  206. this._initAutoResize();
  207. }
  208. // propagate options to all components
  209. this.components.forEach(function (component) {
  210. component.setOptions(options);
  211. });
  212. // TODO: remove deprecation error one day (deprecated since version 0.8.0)
  213. if (options && options.order) {
  214. throw new Error('Option order is deprecated. There is no replacement for this feature.');
  215. }
  216. // redraw everything
  217. this.redraw();
  218. };
  219. /**
  220. * Returns true when the Timeline is active.
  221. * @returns {boolean}
  222. */
  223. Core.prototype.isActive = function () {
  224. return !this.activator || this.activator.active;
  225. };
  226. /**
  227. * Destroy the Core, clean up all DOM elements and event listeners.
  228. */
  229. Core.prototype.destroy = function () {
  230. // unbind datasets
  231. this.clear();
  232. // remove all event listeners
  233. this.off();
  234. // stop checking for changed size
  235. this._stopAutoResize();
  236. // remove from DOM
  237. if (this.dom.root.parentNode) {
  238. this.dom.root.parentNode.removeChild(this.dom.root);
  239. }
  240. this.dom = null;
  241. // remove Activator
  242. if (this.activator) {
  243. this.activator.destroy();
  244. delete this.activator;
  245. }
  246. // cleanup hammer touch events
  247. for (var event in this.listeners) {
  248. if (this.listeners.hasOwnProperty(event)) {
  249. delete this.listeners[event];
  250. }
  251. }
  252. this.listeners = null;
  253. this.hammer = null;
  254. // give all components the opportunity to cleanup
  255. this.components.forEach(function (component) {
  256. component.destroy();
  257. });
  258. this.body = null;
  259. };
  260. /**
  261. * Set a custom time bar
  262. * @param {Date} time
  263. */
  264. Core.prototype.setCustomTime = function (time) {
  265. if (!this.customTime) {
  266. throw new Error('Cannot get custom time: Custom time bar is not enabled');
  267. }
  268. this.customTime.setCustomTime(time);
  269. };
  270. /**
  271. * Retrieve the current custom time.
  272. * @return {Date} customTime
  273. */
  274. Core.prototype.getCustomTime = function() {
  275. if (!this.customTime) {
  276. throw new Error('Cannot get custom time: Custom time bar is not enabled');
  277. }
  278. return this.customTime.getCustomTime();
  279. };
  280. /**
  281. * Get the id's of the currently visible items.
  282. * @returns {Array} The ids of the visible items
  283. */
  284. Core.prototype.getVisibleItems = function() {
  285. return this.itemSet && this.itemSet.getVisibleItems() || [];
  286. };
  287. /**
  288. * Clear the Core. By Default, items, groups and options are cleared.
  289. * Example usage:
  290. *
  291. * timeline.clear(); // clear items, groups, and options
  292. * timeline.clear({options: true}); // clear options only
  293. *
  294. * @param {Object} [what] Optionally specify what to clear. By default:
  295. * {items: true, groups: true, options: true}
  296. */
  297. Core.prototype.clear = function(what) {
  298. // clear items
  299. if (!what || what.items) {
  300. this.setItems(null);
  301. }
  302. // clear groups
  303. if (!what || what.groups) {
  304. this.setGroups(null);
  305. }
  306. // clear options of timeline and of each of the components
  307. if (!what || what.options) {
  308. this.components.forEach(function (component) {
  309. component.setOptions(component.defaultOptions);
  310. });
  311. this.setOptions(this.defaultOptions); // this will also do a redraw
  312. }
  313. };
  314. /**
  315. * Set Core window such that it fits all items
  316. * @param {Object} [options] Available options:
  317. * `animate: boolean | number`
  318. * If true (default), the range is animated
  319. * smoothly to the new window.
  320. * If a number, the number is taken as duration
  321. * for the animation. Default duration is 500 ms.
  322. */
  323. Core.prototype.fit = function(options) {
  324. var range = this._getDataRange();
  325. // skip range set if there is no start and end date
  326. if (range.start === null && range.end === null) {
  327. return;
  328. }
  329. var animate = (options && options.animate !== undefined) ? options.animate : true;
  330. this.range.setRange(range.start, range.end, animate);
  331. };
  332. /**
  333. * Calculate the data range of the items and applies a 5% window around it.
  334. * @returns {{start: Date | null, end: Date | null}}
  335. * @protected
  336. */
  337. Core.prototype._getDataRange = function() {
  338. // apply the data range as range
  339. var dataRange = this.getItemRange();
  340. // add 5% space on both sides
  341. var start = dataRange.min;
  342. var end = dataRange.max;
  343. if (start != null && end != null) {
  344. var interval = (end.valueOf() - start.valueOf());
  345. if (interval <= 0) {
  346. // prevent an empty interval
  347. interval = 24 * 60 * 60 * 1000; // 1 day
  348. }
  349. start = new Date(start.valueOf() - interval * 0.05);
  350. end = new Date(end.valueOf() + interval * 0.05);
  351. }
  352. return {
  353. start: start,
  354. end: end
  355. }
  356. };
  357. /**
  358. * Set the visible window. Both parameters are optional, you can change only
  359. * start or only end. Syntax:
  360. *
  361. * TimeLine.setWindow(start, end)
  362. * TimeLine.setWindow(range)
  363. *
  364. * Where start and end can be a Date, number, or string, and range is an
  365. * object with properties start and end.
  366. *
  367. * @param {Date | Number | String | Object} [start] Start date of visible window
  368. * @param {Date | Number | String} [end] End date of visible window
  369. * @param {Object} [options] Available options:
  370. * `animate: boolean | number`
  371. * If true (default), the range is animated
  372. * smoothly to the new window.
  373. * If a number, the number is taken as duration
  374. * for the animation. Default duration is 500 ms.
  375. */
  376. Core.prototype.setWindow = function(start, end, options) {
  377. var animate = (options && options.animate !== undefined) ? options.animate : true;
  378. if (arguments.length == 1) {
  379. var range = arguments[0];
  380. this.range.setRange(range.start, range.end, animate);
  381. }
  382. else {
  383. this.range.setRange(start, end, animate);
  384. }
  385. };
  386. /**
  387. * Move the window such that given time is centered on screen.
  388. * @param {Date | Number | String} time
  389. * @param {Object} [options] Available options:
  390. * `animate: boolean | number`
  391. * If true (default), the range is animated
  392. * smoothly to the new window.
  393. * If a number, the number is taken as duration
  394. * for the animation. Default duration is 500 ms.
  395. */
  396. Core.prototype.moveTo = function(time, options) {
  397. var interval = this.range.end - this.range.start;
  398. var t = util.convert(time, 'Date').valueOf();
  399. var start = t - interval / 2;
  400. var end = t + interval / 2;
  401. var animate = (options && options.animate !== undefined) ? options.animate : true;
  402. this.range.setRange(start, end, animate);
  403. };
  404. /**
  405. * Get the visible window
  406. * @return {{start: Date, end: Date}} Visible range
  407. */
  408. Core.prototype.getWindow = function() {
  409. var range = this.range.getRange();
  410. return {
  411. start: new Date(range.start),
  412. end: new Date(range.end)
  413. };
  414. };
  415. /**
  416. * Force a redraw of the Core. Can be useful to manually redraw when
  417. * option autoResize=false
  418. */
  419. Core.prototype.redraw = function() {
  420. var resized = false;
  421. var options = this.options;
  422. var props = this.props;
  423. var dom = this.dom;
  424. if (!dom) return; // when destroyed
  425. DateUtil.updateHiddenDates(this.body, this.options.hiddenDates);
  426. // update class names
  427. if (options.orientation == 'top') {
  428. util.addClassName(dom.root, 'top');
  429. util.removeClassName(dom.root, 'bottom');
  430. }
  431. else {
  432. util.removeClassName(dom.root, 'top');
  433. util.addClassName(dom.root, 'bottom');
  434. }
  435. // update root width and height options
  436. dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
  437. dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
  438. dom.root.style.width = util.option.asSize(options.width, '');
  439. // calculate border widths
  440. props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
  441. props.border.right = props.border.left;
  442. props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
  443. props.border.bottom = props.border.top;
  444. var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
  445. var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
  446. // workaround for a bug in IE: the clientWidth of an element with
  447. // a height:0px and overflow:hidden is not calculated and always has value 0
  448. if (dom.centerContainer.clientHeight === 0) {
  449. props.border.left = props.border.top;
  450. props.border.right = props.border.left;
  451. }
  452. if (dom.root.clientHeight === 0) {
  453. borderRootWidth = borderRootHeight;
  454. }
  455. // calculate the heights. If any of the side panels is empty, we set the height to
  456. // minus the border width, such that the border will be invisible
  457. props.center.height = dom.center.offsetHeight;
  458. props.left.height = dom.left.offsetHeight;
  459. props.right.height = dom.right.offsetHeight;
  460. props.top.height = dom.top.clientHeight || -props.border.top;
  461. props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
  462. // TODO: compensate borders when any of the panels is empty.
  463. // apply auto height
  464. // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
  465. var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
  466. var autoHeight = props.top.height + contentHeight + props.bottom.height +
  467. borderRootHeight + props.border.top + props.border.bottom;
  468. dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
  469. // calculate heights of the content panels
  470. props.root.height = dom.root.offsetHeight;
  471. props.background.height = props.root.height - borderRootHeight;
  472. var containerHeight = props.root.height - props.top.height - props.bottom.height -
  473. borderRootHeight;
  474. props.centerContainer.height = containerHeight;
  475. props.leftContainer.height = containerHeight;
  476. props.rightContainer.height = props.leftContainer.height;
  477. // calculate the widths of the panels
  478. props.root.width = dom.root.offsetWidth;
  479. props.background.width = props.root.width - borderRootWidth;
  480. props.left.width = dom.leftContainer.clientWidth || -props.border.left;
  481. props.leftContainer.width = props.left.width;
  482. props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  483. props.rightContainer.width = props.right.width;
  484. var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
  485. props.center.width = centerWidth;
  486. props.centerContainer.width = centerWidth;
  487. props.top.width = centerWidth;
  488. props.bottom.width = centerWidth;
  489. // resize the panels
  490. dom.background.style.height = props.background.height + 'px';
  491. dom.backgroundVertical.style.height = props.background.height + 'px';
  492. dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
  493. dom.centerContainer.style.height = props.centerContainer.height + 'px';
  494. dom.leftContainer.style.height = props.leftContainer.height + 'px';
  495. dom.rightContainer.style.height = props.rightContainer.height + 'px';
  496. dom.background.style.width = props.background.width + 'px';
  497. dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
  498. dom.backgroundHorizontal.style.width = props.background.width + 'px';
  499. dom.centerContainer.style.width = props.center.width + 'px';
  500. dom.top.style.width = props.top.width + 'px';
  501. dom.bottom.style.width = props.bottom.width + 'px';
  502. // reposition the panels
  503. dom.background.style.left = '0';
  504. dom.background.style.top = '0';
  505. dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px';
  506. dom.backgroundVertical.style.top = '0';
  507. dom.backgroundHorizontal.style.left = '0';
  508. dom.backgroundHorizontal.style.top = props.top.height + 'px';
  509. dom.centerContainer.style.left = props.left.width + 'px';
  510. dom.centerContainer.style.top = props.top.height + 'px';
  511. dom.leftContainer.style.left = '0';
  512. dom.leftContainer.style.top = props.top.height + 'px';
  513. dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
  514. dom.rightContainer.style.top = props.top.height + 'px';
  515. dom.top.style.left = props.left.width + 'px';
  516. dom.top.style.top = '0';
  517. dom.bottom.style.left = props.left.width + 'px';
  518. dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
  519. // update the scrollTop, feasible range for the offset can be changed
  520. // when the height of the Core or of the contents of the center changed
  521. this._updateScrollTop();
  522. // reposition the scrollable contents
  523. var offset = this.props.scrollTop;
  524. if (options.orientation == 'bottom') {
  525. offset += Math.max(this.props.centerContainer.height - this.props.center.height -
  526. this.props.border.top - this.props.border.bottom, 0);
  527. }
  528. dom.center.style.left = '0';
  529. dom.center.style.top = offset + 'px';
  530. dom.left.style.left = '0';
  531. dom.left.style.top = offset + 'px';
  532. dom.right.style.left = '0';
  533. dom.right.style.top = offset + 'px';
  534. // show shadows when vertical scrolling is available
  535. var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
  536. var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
  537. dom.shadowTop.style.visibility = visibilityTop;
  538. dom.shadowBottom.style.visibility = visibilityBottom;
  539. dom.shadowTopLeft.style.visibility = visibilityTop;
  540. dom.shadowBottomLeft.style.visibility = visibilityBottom;
  541. dom.shadowTopRight.style.visibility = visibilityTop;
  542. dom.shadowBottomRight.style.visibility = visibilityBottom;
  543. // redraw all components
  544. this.components.forEach(function (component) {
  545. resized = component.redraw() || resized;
  546. });
  547. if (resized) {
  548. // keep repainting until all sizes are settled
  549. var MAX_REDRAWS = 3; // maximum number of consecutive redraws
  550. if (this.redrawCount < MAX_REDRAWS) {
  551. this.redrawCount++;
  552. this.redraw();
  553. }
  554. else {
  555. console.log('WARNING: infinite loop in redraw?');
  556. }
  557. this.redrawCount = 0;
  558. }
  559. this.emit("finishedRedraw");
  560. };
  561. // TODO: deprecated since version 1.1.0, remove some day
  562. Core.prototype.repaint = function () {
  563. throw new Error('Function repaint is deprecated. Use redraw instead.');
  564. };
  565. /**
  566. * Set a current time. This can be used for example to ensure that a client's
  567. * time is synchronized with a shared server time.
  568. * Only applicable when option `showCurrentTime` is true.
  569. * @param {Date | String | Number} time A Date, unix timestamp, or
  570. * ISO date string.
  571. */
  572. Core.prototype.setCurrentTime = function(time) {
  573. if (!this.currentTime) {
  574. throw new Error('Option showCurrentTime must be true');
  575. }
  576. this.currentTime.setCurrentTime(time);
  577. };
  578. /**
  579. * Get the current time.
  580. * Only applicable when option `showCurrentTime` is true.
  581. * @return {Date} Returns the current time.
  582. */
  583. Core.prototype.getCurrentTime = function() {
  584. if (!this.currentTime) {
  585. throw new Error('Option showCurrentTime must be true');
  586. }
  587. return this.currentTime.getCurrentTime();
  588. };
  589. /**
  590. * Convert a position on screen (pixels) to a datetime
  591. * @param {int} x Position on the screen in pixels
  592. * @return {Date} time The datetime the corresponds with given position x
  593. * @private
  594. */
  595. // TODO: move this function to Range
  596. Core.prototype._toTime = function(x) {
  597. return DateUtil.toTime(this, x, this.props.center.width);
  598. };
  599. /**
  600. * Convert a position on the global screen (pixels) to a datetime
  601. * @param {int} x Position on the screen in pixels
  602. * @return {Date} time The datetime the corresponds with given position x
  603. * @private
  604. */
  605. // TODO: move this function to Range
  606. Core.prototype._toGlobalTime = function(x) {
  607. return DateUtil.toTime(this, x, this.props.root.width);
  608. //var conversion = this.range.conversion(this.props.root.width);
  609. //return new Date(x / conversion.scale + conversion.offset);
  610. };
  611. /**
  612. * Convert a datetime (Date object) into a position on the screen
  613. * @param {Date} time A date
  614. * @return {int} x The position on the screen in pixels which corresponds
  615. * with the given date.
  616. * @private
  617. */
  618. // TODO: move this function to Range
  619. Core.prototype._toScreen = function(time) {
  620. return DateUtil.toScreen(this, time, this.props.center.width);
  621. };
  622. /**
  623. * Convert a datetime (Date object) into a position on the root
  624. * This is used to get the pixel density estimate for the screen, not the center panel
  625. * @param {Date} time A date
  626. * @return {int} x The position on root in pixels which corresponds
  627. * with the given date.
  628. * @private
  629. */
  630. // TODO: move this function to Range
  631. Core.prototype._toGlobalScreen = function(time) {
  632. return DateUtil.toScreen(this, time, this.props.root.width);
  633. //var conversion = this.range.conversion(this.props.root.width);
  634. //return (time.valueOf() - conversion.offset) * conversion.scale;
  635. };
  636. /**
  637. * Initialize watching when option autoResize is true
  638. * @private
  639. */
  640. Core.prototype._initAutoResize = function () {
  641. if (this.options.autoResize == true) {
  642. this._startAutoResize();
  643. }
  644. else {
  645. this._stopAutoResize();
  646. }
  647. };
  648. /**
  649. * Watch for changes in the size of the container. On resize, the Panel will
  650. * automatically redraw itself.
  651. * @private
  652. */
  653. Core.prototype._startAutoResize = function () {
  654. var me = this;
  655. this._stopAutoResize();
  656. this._onResize = function() {
  657. if (me.options.autoResize != true) {
  658. // stop watching when the option autoResize is changed to false
  659. me._stopAutoResize();
  660. return;
  661. }
  662. if (me.dom.root) {
  663. // check whether the frame is resized
  664. // Note: we compare offsetWidth here, not clientWidth. For some reason,
  665. // IE does not restore the clientWidth from 0 to the actual width after
  666. // changing the timeline's container display style from none to visible
  667. if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
  668. (me.dom.root.offsetHeight != me.props.lastHeight)) {
  669. me.props.lastWidth = me.dom.root.offsetWidth;
  670. me.props.lastHeight = me.dom.root.offsetHeight;
  671. me.emit('change');
  672. }
  673. }
  674. };
  675. // add event listener to window resize
  676. util.addEventListener(window, 'resize', this._onResize);
  677. this.watchTimer = setInterval(this._onResize, 1000);
  678. };
  679. /**
  680. * Stop watching for a resize of the frame.
  681. * @private
  682. */
  683. Core.prototype._stopAutoResize = function () {
  684. if (this.watchTimer) {
  685. clearInterval(this.watchTimer);
  686. this.watchTimer = undefined;
  687. }
  688. // remove event listener on window.resize
  689. util.removeEventListener(window, 'resize', this._onResize);
  690. this._onResize = null;
  691. };
  692. /**
  693. * Apply a scrollTop
  694. * @param {Number} scrollTop
  695. * @returns {Number} scrollTop Returns the applied scrollTop
  696. * @private
  697. */
  698. Core.prototype._setScrollTop = function (scrollTop) {
  699. this.props.scrollTop = scrollTop;
  700. this._updateScrollTop();
  701. return this.props.scrollTop;
  702. };
  703. /**
  704. * Update the current scrollTop when the height of the containers has been changed
  705. * @returns {Number} scrollTop Returns the applied scrollTop
  706. * @private
  707. */
  708. Core.prototype._updateScrollTop = function () {
  709. // recalculate the scrollTopMin
  710. var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
  711. if (scrollTopMin != this.props.scrollTopMin) {
  712. // in case of bottom orientation, change the scrollTop such that the contents
  713. // do not move relative to the time axis at the bottom
  714. if (this.options.orientation == 'bottom') {
  715. this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
  716. }
  717. this.props.scrollTopMin = scrollTopMin;
  718. }
  719. // limit the scrollTop to the feasible scroll range
  720. if (this.props.scrollTop > 0) this.props.scrollTop = 0;
  721. if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
  722. return this.props.scrollTop;
  723. };
  724. /**
  725. * Get the current scrollTop
  726. * @returns {number} scrollTop
  727. * @private
  728. */
  729. Core.prototype._getScrollTop = function () {
  730. return this.props.scrollTop;
  731. };
  732. module.exports = Core;