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.

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