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.

790 lines
27 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. * Set a current time. This can be used for example to ensure that a client's
  488. * time is synchronized with a shared server time.
  489. * Only applicable when option `showCurrentTime` is true.
  490. * @param {Date | String | Number} time A Date, unix timestamp, or
  491. * ISO date string.
  492. */
  493. Core.prototype.setCurrentTime = function(time) {
  494. if (!this.currentTime) {
  495. throw new Error('Option showCurrentTime must be true');
  496. }
  497. this.currentTime.setCurrentTime(time);
  498. };
  499. /**
  500. * Get the current time.
  501. * Only applicable when option `showCurrentTime` is true.
  502. * @return {Date} Returns the current time.
  503. */
  504. Core.prototype.getCurrentTime = function() {
  505. if (!this.currentTime) {
  506. throw new Error('Option showCurrentTime must be true');
  507. }
  508. return this.currentTime.getCurrentTime();
  509. };
  510. /**
  511. * Convert a position on screen (pixels) to a datetime
  512. * @param {int} x Position on the screen in pixels
  513. * @return {Date} time The datetime the corresponds with given position x
  514. * @private
  515. */
  516. // TODO: move this function to Range
  517. Core.prototype._toTime = function(x) {
  518. var conversion = this.range.conversion(this.props.center.width);
  519. return new Date(x / conversion.scale + conversion.offset);
  520. };
  521. /**
  522. * Convert a position on the global screen (pixels) to a datetime
  523. * @param {int} x Position on the screen in pixels
  524. * @return {Date} time The datetime the corresponds with given position x
  525. * @private
  526. */
  527. // TODO: move this function to Range
  528. Core.prototype._toGlobalTime = function(x) {
  529. var conversion = this.range.conversion(this.props.root.width);
  530. return new Date(x / conversion.scale + conversion.offset);
  531. };
  532. /**
  533. * Convert a datetime (Date object) into a position on the screen
  534. * @param {Date} time A date
  535. * @return {int} x The position on the screen in pixels which corresponds
  536. * with the given date.
  537. * @private
  538. */
  539. // TODO: move this function to Range
  540. Core.prototype._toScreen = function(time) {
  541. var conversion = this.range.conversion(this.props.center.width);
  542. return (time.valueOf() - conversion.offset) * conversion.scale;
  543. };
  544. /**
  545. * Convert a datetime (Date object) into a position on the root
  546. * This is used to get the pixel density estimate for the screen, not the center panel
  547. * @param {Date} time A date
  548. * @return {int} x The position on root in pixels which corresponds
  549. * with the given date.
  550. * @private
  551. */
  552. // TODO: move this function to Range
  553. Core.prototype._toGlobalScreen = function(time) {
  554. var conversion = this.range.conversion(this.props.root.width);
  555. return (time.valueOf() - conversion.offset) * conversion.scale;
  556. };
  557. /**
  558. * Initialize watching when option autoResize is true
  559. * @private
  560. */
  561. Core.prototype._initAutoResize = function () {
  562. if (this.options.autoResize == true) {
  563. this._startAutoResize();
  564. }
  565. else {
  566. this._stopAutoResize();
  567. }
  568. };
  569. /**
  570. * Watch for changes in the size of the container. On resize, the Panel will
  571. * automatically redraw itself.
  572. * @private
  573. */
  574. Core.prototype._startAutoResize = function () {
  575. var me = this;
  576. this._stopAutoResize();
  577. this._onResize = function() {
  578. if (me.options.autoResize != true) {
  579. // stop watching when the option autoResize is changed to false
  580. me._stopAutoResize();
  581. return;
  582. }
  583. if (me.dom.root) {
  584. // check whether the frame is resized
  585. if ((me.dom.root.clientWidth != me.props.lastWidth) ||
  586. (me.dom.root.clientHeight != me.props.lastHeight)) {
  587. me.props.lastWidth = me.dom.root.clientWidth;
  588. me.props.lastHeight = me.dom.root.clientHeight;
  589. me.emit('change');
  590. }
  591. }
  592. };
  593. // add event listener to window resize
  594. util.addEventListener(window, 'resize', this._onResize);
  595. this.watchTimer = setInterval(this._onResize, 1000);
  596. };
  597. /**
  598. * Stop watching for a resize of the frame.
  599. * @private
  600. */
  601. Core.prototype._stopAutoResize = function () {
  602. if (this.watchTimer) {
  603. clearInterval(this.watchTimer);
  604. this.watchTimer = undefined;
  605. }
  606. // remove event listener on window.resize
  607. util.removeEventListener(window, 'resize', this._onResize);
  608. this._onResize = null;
  609. };
  610. /**
  611. * Start moving the timeline vertically
  612. * @param {Event} event
  613. * @private
  614. */
  615. Core.prototype._onTouch = function (event) {
  616. this.touch.allowDragging = true;
  617. };
  618. /**
  619. * Start moving the timeline vertically
  620. * @param {Event} event
  621. * @private
  622. */
  623. Core.prototype._onPinch = function (event) {
  624. this.touch.allowDragging = false;
  625. };
  626. /**
  627. * Start moving the timeline vertically
  628. * @param {Event} event
  629. * @private
  630. */
  631. Core.prototype._onDragStart = function (event) {
  632. this.touch.initialScrollTop = this.props.scrollTop;
  633. };
  634. /**
  635. * Move the timeline vertically
  636. * @param {Event} event
  637. * @private
  638. */
  639. Core.prototype._onDrag = function (event) {
  640. // refuse to drag when we where pinching to prevent the timeline make a jump
  641. // when releasing the fingers in opposite order from the touch screen
  642. if (!this.touch.allowDragging) return;
  643. var delta = event.gesture.deltaY;
  644. var oldScrollTop = this._getScrollTop();
  645. var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
  646. if (newScrollTop != oldScrollTop) {
  647. this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
  648. }
  649. };
  650. /**
  651. * Apply a scrollTop
  652. * @param {Number} scrollTop
  653. * @returns {Number} scrollTop Returns the applied scrollTop
  654. * @private
  655. */
  656. Core.prototype._setScrollTop = function (scrollTop) {
  657. this.props.scrollTop = scrollTop;
  658. this._updateScrollTop();
  659. return this.props.scrollTop;
  660. };
  661. /**
  662. * Update the current scrollTop when the height of the containers has been changed
  663. * @returns {Number} scrollTop Returns the applied scrollTop
  664. * @private
  665. */
  666. Core.prototype._updateScrollTop = function () {
  667. // recalculate the scrollTopMin
  668. var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
  669. if (scrollTopMin != this.props.scrollTopMin) {
  670. // in case of bottom orientation, change the scrollTop such that the contents
  671. // do not move relative to the time axis at the bottom
  672. if (this.options.orientation == 'bottom') {
  673. this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
  674. }
  675. this.props.scrollTopMin = scrollTopMin;
  676. }
  677. // limit the scrollTop to the feasible scroll range
  678. if (this.props.scrollTop > 0) this.props.scrollTop = 0;
  679. if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
  680. return this.props.scrollTop;
  681. };
  682. /**
  683. * Get the current scrollTop
  684. * @returns {number} scrollTop
  685. * @private
  686. */
  687. Core.prototype._getScrollTop = function () {
  688. return this.props.scrollTop;
  689. };
  690. module.exports = Core;