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.

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