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.

813 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 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', 'dataAttributes'];
  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. * Move the window such that given time is centered on screen.
  346. * @param {Date | Number | String} time
  347. * @param {Object} [options] Available options:
  348. * `animate: boolean | number`
  349. * If true (default), the range is animated
  350. * smoothly to the new window.
  351. * If a number, the number is taken as duration
  352. * for the animation. Default duration is 500 ms.
  353. */
  354. Core.prototype.moveTo = function(time, options) {
  355. var interval = this.range.end - this.range.start;
  356. var t = util.convert(time, 'Date').valueOf();
  357. var start = t - interval / 2;
  358. var end = t + interval / 2;
  359. var animate = (options && options.animate !== undefined) ? options.animate : true;
  360. this.range.setRange(start, end, animate);
  361. };
  362. /**
  363. * Get the visible window
  364. * @return {{start: Date, end: Date}} Visible range
  365. */
  366. Core.prototype.getWindow = function() {
  367. var range = this.range.getRange();
  368. return {
  369. start: new Date(range.start),
  370. end: new Date(range.end)
  371. };
  372. };
  373. /**
  374. * Force a redraw of the Core. Can be useful to manually redraw when
  375. * option autoResize=false
  376. */
  377. Core.prototype.redraw = function() {
  378. var resized = false,
  379. options = this.options,
  380. props = this.props,
  381. dom = this.dom;
  382. if (!dom) return; // when destroyed
  383. // update class names
  384. if (options.orientation == 'top') {
  385. util.addClassName(dom.root, 'top');
  386. util.removeClassName(dom.root, 'bottom');
  387. }
  388. else {
  389. util.removeClassName(dom.root, 'top');
  390. util.addClassName(dom.root, 'bottom');
  391. }
  392. // update root width and height options
  393. dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
  394. dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
  395. dom.root.style.width = util.option.asSize(options.width, '');
  396. // calculate border widths
  397. props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
  398. props.border.right = props.border.left;
  399. props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
  400. props.border.bottom = props.border.top;
  401. var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
  402. var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
  403. // calculate the heights. If any of the side panels is empty, we set the height to
  404. // minus the border width, such that the border will be invisible
  405. props.center.height = dom.center.offsetHeight;
  406. props.left.height = dom.left.offsetHeight;
  407. props.right.height = dom.right.offsetHeight;
  408. props.top.height = dom.top.clientHeight || -props.border.top;
  409. props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
  410. // TODO: compensate borders when any of the panels is empty.
  411. // apply auto height
  412. // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
  413. var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
  414. var autoHeight = props.top.height + contentHeight + props.bottom.height +
  415. borderRootHeight + props.border.top + props.border.bottom;
  416. dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
  417. // calculate heights of the content panels
  418. props.root.height = dom.root.offsetHeight;
  419. props.background.height = props.root.height - borderRootHeight;
  420. var containerHeight = props.root.height - props.top.height - props.bottom.height -
  421. borderRootHeight;
  422. props.centerContainer.height = containerHeight;
  423. props.leftContainer.height = containerHeight;
  424. props.rightContainer.height = props.leftContainer.height;
  425. // calculate the widths of the panels
  426. props.root.width = dom.root.offsetWidth;
  427. props.background.width = props.root.width - borderRootWidth;
  428. props.left.width = dom.leftContainer.clientWidth || -props.border.left;
  429. props.leftContainer.width = props.left.width;
  430. props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  431. props.rightContainer.width = props.right.width;
  432. var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
  433. props.center.width = centerWidth;
  434. props.centerContainer.width = centerWidth;
  435. props.top.width = centerWidth;
  436. props.bottom.width = centerWidth;
  437. // resize the panels
  438. dom.background.style.height = props.background.height + 'px';
  439. dom.backgroundVertical.style.height = props.background.height + 'px';
  440. dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
  441. dom.centerContainer.style.height = props.centerContainer.height + 'px';
  442. dom.leftContainer.style.height = props.leftContainer.height + 'px';
  443. dom.rightContainer.style.height = props.rightContainer.height + 'px';
  444. dom.background.style.width = props.background.width + 'px';
  445. dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
  446. dom.backgroundHorizontal.style.width = props.background.width + 'px';
  447. dom.centerContainer.style.width = props.center.width + 'px';
  448. dom.top.style.width = props.top.width + 'px';
  449. dom.bottom.style.width = props.bottom.width + 'px';
  450. // reposition the panels
  451. dom.background.style.left = '0';
  452. dom.background.style.top = '0';
  453. dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px';
  454. dom.backgroundVertical.style.top = '0';
  455. dom.backgroundHorizontal.style.left = '0';
  456. dom.backgroundHorizontal.style.top = props.top.height + 'px';
  457. dom.centerContainer.style.left = props.left.width + 'px';
  458. dom.centerContainer.style.top = props.top.height + 'px';
  459. dom.leftContainer.style.left = '0';
  460. dom.leftContainer.style.top = props.top.height + 'px';
  461. dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
  462. dom.rightContainer.style.top = props.top.height + 'px';
  463. dom.top.style.left = props.left.width + 'px';
  464. dom.top.style.top = '0';
  465. dom.bottom.style.left = props.left.width + 'px';
  466. dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
  467. // update the scrollTop, feasible range for the offset can be changed
  468. // when the height of the Core or of the contents of the center changed
  469. this._updateScrollTop();
  470. // reposition the scrollable contents
  471. var offset = this.props.scrollTop;
  472. if (options.orientation == 'bottom') {
  473. offset += Math.max(this.props.centerContainer.height - this.props.center.height -
  474. this.props.border.top - this.props.border.bottom, 0);
  475. }
  476. dom.center.style.left = '0';
  477. dom.center.style.top = offset + 'px';
  478. dom.left.style.left = '0';
  479. dom.left.style.top = offset + 'px';
  480. dom.right.style.left = '0';
  481. dom.right.style.top = offset + 'px';
  482. // show shadows when vertical scrolling is available
  483. var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
  484. var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
  485. dom.shadowTop.style.visibility = visibilityTop;
  486. dom.shadowBottom.style.visibility = visibilityBottom;
  487. dom.shadowTopLeft.style.visibility = visibilityTop;
  488. dom.shadowBottomLeft.style.visibility = visibilityBottom;
  489. dom.shadowTopRight.style.visibility = visibilityTop;
  490. dom.shadowBottomRight.style.visibility = visibilityBottom;
  491. // redraw all components
  492. this.components.forEach(function (component) {
  493. resized = component.redraw() || resized;
  494. });
  495. if (resized) {
  496. // keep repainting until all sizes are settled
  497. this.redraw();
  498. }
  499. };
  500. // TODO: deprecated since version 1.1.0, remove some day
  501. Core.prototype.repaint = function () {
  502. throw new Error('Function repaint is deprecated. Use redraw instead.');
  503. };
  504. /**
  505. * Set a current time. This can be used for example to ensure that a client's
  506. * time is synchronized with a shared server time.
  507. * Only applicable when option `showCurrentTime` is true.
  508. * @param {Date | String | Number} time A Date, unix timestamp, or
  509. * ISO date string.
  510. */
  511. Core.prototype.setCurrentTime = function(time) {
  512. if (!this.currentTime) {
  513. throw new Error('Option showCurrentTime must be true');
  514. }
  515. this.currentTime.setCurrentTime(time);
  516. };
  517. /**
  518. * Get the current time.
  519. * Only applicable when option `showCurrentTime` is true.
  520. * @return {Date} Returns the current time.
  521. */
  522. Core.prototype.getCurrentTime = function() {
  523. if (!this.currentTime) {
  524. throw new Error('Option showCurrentTime must be true');
  525. }
  526. return this.currentTime.getCurrentTime();
  527. };
  528. /**
  529. * Convert a position on screen (pixels) to a datetime
  530. * @param {int} x Position on the screen in pixels
  531. * @return {Date} time The datetime the corresponds with given position x
  532. * @private
  533. */
  534. // TODO: move this function to Range
  535. Core.prototype._toTime = function(x) {
  536. var conversion = this.range.conversion(this.props.center.width);
  537. return new Date(x / conversion.scale + conversion.offset);
  538. };
  539. /**
  540. * Convert a position on the global screen (pixels) to a datetime
  541. * @param {int} x Position on the screen in pixels
  542. * @return {Date} time The datetime the corresponds with given position x
  543. * @private
  544. */
  545. // TODO: move this function to Range
  546. Core.prototype._toGlobalTime = function(x) {
  547. var conversion = this.range.conversion(this.props.root.width);
  548. return new Date(x / conversion.scale + conversion.offset);
  549. };
  550. /**
  551. * Convert a datetime (Date object) into a position on the screen
  552. * @param {Date} time A date
  553. * @return {int} x The position on the screen in pixels which corresponds
  554. * with the given date.
  555. * @private
  556. */
  557. // TODO: move this function to Range
  558. Core.prototype._toScreen = function(time) {
  559. var conversion = this.range.conversion(this.props.center.width);
  560. return (time.valueOf() - conversion.offset) * conversion.scale;
  561. };
  562. /**
  563. * Convert a datetime (Date object) into a position on the root
  564. * This is used to get the pixel density estimate for the screen, not the center panel
  565. * @param {Date} time A date
  566. * @return {int} x The position on root in pixels which corresponds
  567. * with the given date.
  568. * @private
  569. */
  570. // TODO: move this function to Range
  571. Core.prototype._toGlobalScreen = function(time) {
  572. var conversion = this.range.conversion(this.props.root.width);
  573. return (time.valueOf() - conversion.offset) * conversion.scale;
  574. };
  575. /**
  576. * Initialize watching when option autoResize is true
  577. * @private
  578. */
  579. Core.prototype._initAutoResize = function () {
  580. if (this.options.autoResize == true) {
  581. this._startAutoResize();
  582. }
  583. else {
  584. this._stopAutoResize();
  585. }
  586. };
  587. /**
  588. * Watch for changes in the size of the container. On resize, the Panel will
  589. * automatically redraw itself.
  590. * @private
  591. */
  592. Core.prototype._startAutoResize = function () {
  593. var me = this;
  594. this._stopAutoResize();
  595. this._onResize = function() {
  596. if (me.options.autoResize != true) {
  597. // stop watching when the option autoResize is changed to false
  598. me._stopAutoResize();
  599. return;
  600. }
  601. if (me.dom.root) {
  602. // check whether the frame is resized
  603. // Note: we compare offsetWidth here, not clientWidth. For some reason,
  604. // IE does not restore the clientWidth from 0 to the actual width after
  605. // changing the timeline's container display style from none to visible
  606. if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
  607. (me.dom.root.offsetHeight != me.props.lastHeight)) {
  608. me.props.lastWidth = me.dom.root.offsetWidth;
  609. me.props.lastHeight = me.dom.root.offsetHeight;
  610. me.emit('change');
  611. }
  612. }
  613. };
  614. // add event listener to window resize
  615. util.addEventListener(window, 'resize', this._onResize);
  616. this.watchTimer = setInterval(this._onResize, 1000);
  617. };
  618. /**
  619. * Stop watching for a resize of the frame.
  620. * @private
  621. */
  622. Core.prototype._stopAutoResize = function () {
  623. if (this.watchTimer) {
  624. clearInterval(this.watchTimer);
  625. this.watchTimer = undefined;
  626. }
  627. // remove event listener on window.resize
  628. util.removeEventListener(window, 'resize', this._onResize);
  629. this._onResize = null;
  630. };
  631. /**
  632. * Start moving the timeline vertically
  633. * @param {Event} event
  634. * @private
  635. */
  636. Core.prototype._onTouch = function (event) {
  637. this.touch.allowDragging = true;
  638. };
  639. /**
  640. * Start moving the timeline vertically
  641. * @param {Event} event
  642. * @private
  643. */
  644. Core.prototype._onPinch = function (event) {
  645. this.touch.allowDragging = false;
  646. };
  647. /**
  648. * Start moving the timeline vertically
  649. * @param {Event} event
  650. * @private
  651. */
  652. Core.prototype._onDragStart = function (event) {
  653. this.touch.initialScrollTop = this.props.scrollTop;
  654. };
  655. /**
  656. * Move the timeline vertically
  657. * @param {Event} event
  658. * @private
  659. */
  660. Core.prototype._onDrag = function (event) {
  661. // refuse to drag when we where pinching to prevent the timeline make a jump
  662. // when releasing the fingers in opposite order from the touch screen
  663. if (!this.touch.allowDragging) return;
  664. var delta = event.gesture.deltaY;
  665. var oldScrollTop = this._getScrollTop();
  666. var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
  667. if (newScrollTop != oldScrollTop) {
  668. this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
  669. }
  670. };
  671. /**
  672. * Apply a scrollTop
  673. * @param {Number} scrollTop
  674. * @returns {Number} scrollTop Returns the applied scrollTop
  675. * @private
  676. */
  677. Core.prototype._setScrollTop = function (scrollTop) {
  678. this.props.scrollTop = scrollTop;
  679. this._updateScrollTop();
  680. return this.props.scrollTop;
  681. };
  682. /**
  683. * Update the current scrollTop when the height of the containers has been changed
  684. * @returns {Number} scrollTop Returns the applied scrollTop
  685. * @private
  686. */
  687. Core.prototype._updateScrollTop = function () {
  688. // recalculate the scrollTopMin
  689. var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
  690. if (scrollTopMin != this.props.scrollTopMin) {
  691. // in case of bottom orientation, change the scrollTop such that the contents
  692. // do not move relative to the time axis at the bottom
  693. if (this.options.orientation == 'bottom') {
  694. this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
  695. }
  696. this.props.scrollTopMin = scrollTopMin;
  697. }
  698. // limit the scrollTop to the feasible scroll range
  699. if (this.props.scrollTop > 0) this.props.scrollTop = 0;
  700. if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
  701. return this.props.scrollTop;
  702. };
  703. /**
  704. * Get the current scrollTop
  705. * @returns {number} scrollTop
  706. * @private
  707. */
  708. Core.prototype._getScrollTop = function () {
  709. return this.props.scrollTop;
  710. };
  711. module.exports = Core;