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.

1348 lines
46 KiB

  1. var Emitter = require('emitter-component');
  2. var Hammer = require('../module/hammer');
  3. var hammerUtil = require('../hammerUtil');
  4. var util = require('../util');
  5. var TimeAxis = require('./component/TimeAxis');
  6. var Activator = require('../shared/Activator');
  7. var DateUtil = require('./DateUtil');
  8. var CustomTime = require('./component/CustomTime');
  9. /**
  10. * Create a timeline visualization
  11. * @constructor Core
  12. */
  13. function Core () {}
  14. // turn Core into an event emitter
  15. Emitter(Core.prototype);
  16. /**
  17. * Create the main DOM for the Core: a root panel containing left, right,
  18. * top, bottom, content, and background panel.
  19. * @param {Element} container The container element where the Core will
  20. * be attached.
  21. * @protected
  22. */
  23. Core.prototype._create = function (container) {
  24. this.dom = {};
  25. this.dom.container = container;
  26. this.dom.container.style.position = 'relative';
  27. this.dom.root = document.createElement('div');
  28. this.dom.background = document.createElement('div');
  29. this.dom.backgroundVertical = document.createElement('div');
  30. this.dom.backgroundHorizontal = document.createElement('div');
  31. this.dom.centerContainer = document.createElement('div');
  32. this.dom.leftContainer = document.createElement('div');
  33. this.dom.rightContainer = document.createElement('div');
  34. this.dom.center = document.createElement('div');
  35. this.dom.left = document.createElement('div');
  36. this.dom.right = document.createElement('div');
  37. this.dom.top = document.createElement('div');
  38. this.dom.bottom = document.createElement('div');
  39. this.dom.shadowTop = document.createElement('div');
  40. this.dom.shadowBottom = document.createElement('div');
  41. this.dom.shadowTopLeft = document.createElement('div');
  42. this.dom.shadowBottomLeft = document.createElement('div');
  43. this.dom.shadowTopRight = document.createElement('div');
  44. this.dom.shadowBottomRight = document.createElement('div');
  45. this.dom.rollingModeBtn = document.createElement('div');
  46. this.dom.loadingScreen = document.createElement('div');
  47. this.dom.root.className = 'vis-timeline';
  48. this.dom.background.className = 'vis-panel vis-background';
  49. this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
  50. this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
  51. this.dom.centerContainer.className = 'vis-panel vis-center';
  52. this.dom.leftContainer.className = 'vis-panel vis-left';
  53. this.dom.rightContainer.className = 'vis-panel vis-right';
  54. this.dom.top.className = 'vis-panel vis-top';
  55. this.dom.bottom.className = 'vis-panel vis-bottom';
  56. this.dom.left.className = 'vis-content';
  57. this.dom.center.className = 'vis-content';
  58. this.dom.right.className = 'vis-content';
  59. this.dom.shadowTop.className = 'vis-shadow vis-top';
  60. this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
  61. this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
  62. this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
  63. this.dom.shadowTopRight.className = 'vis-shadow vis-top';
  64. this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
  65. this.dom.rollingModeBtn.className = 'vis-rolling-mode-btn';
  66. this.dom.loadingScreen.className = 'vis-loading-screen';
  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.root.appendChild(this.dom.rollingModeBtn);
  76. this.dom.centerContainer.appendChild(this.dom.center);
  77. this.dom.leftContainer.appendChild(this.dom.left);
  78. this.dom.rightContainer.appendChild(this.dom.right);
  79. this.dom.centerContainer.appendChild(this.dom.shadowTop);
  80. this.dom.centerContainer.appendChild(this.dom.shadowBottom);
  81. this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
  82. this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
  83. this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
  84. this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
  85. // size properties of each of the panels
  86. this.props = {
  87. root: {},
  88. background: {},
  89. centerContainer: {},
  90. leftContainer: {},
  91. rightContainer: {},
  92. center: {},
  93. left: {},
  94. right: {},
  95. top: {},
  96. bottom: {},
  97. border: {},
  98. scrollTop: 0,
  99. scrollTopMin: 0
  100. };
  101. this.on('rangechange', function () {
  102. if (this.initialDrawDone === true) {
  103. this._redraw();
  104. }
  105. }.bind(this));
  106. this.on('rangechanged', function () {
  107. if (!this.initialRangeChangeDone) {
  108. this.initialRangeChangeDone = true;
  109. }
  110. }.bind(this));
  111. this.on('touch', this._onTouch.bind(this));
  112. this.on('panmove', this._onDrag.bind(this));
  113. var me = this;
  114. this._origRedraw = this._redraw.bind(this);
  115. this._redraw = util.throttle(this._origRedraw);
  116. this.on('_change', function (properties) {
  117. if (me.itemSet && me.itemSet.initialItemSetDrawn && properties && properties.queue == true) {
  118. me._redraw()
  119. } else {
  120. me._origRedraw();
  121. }
  122. });
  123. // create event listeners for all interesting events, these events will be
  124. // emitted via emitter
  125. this.hammer = new Hammer(this.dom.root);
  126. var pinchRecognizer = this.hammer.get('pinch').set({enable: true});
  127. hammerUtil.disablePreventDefaultVertically(pinchRecognizer);
  128. this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
  129. this.listeners = {};
  130. var events = [
  131. 'tap', 'doubletap', 'press',
  132. 'pinch',
  133. 'pan', 'panstart', 'panmove', 'panend'
  134. // TODO: cleanup
  135. //'touch', 'pinch',
  136. //'tap', 'doubletap', 'hold',
  137. //'dragstart', 'drag', 'dragend',
  138. //'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
  139. ];
  140. events.forEach(function (type) {
  141. var listener = function (event) {
  142. if (me.isActive()) {
  143. me.emit(type, event);
  144. }
  145. };
  146. me.hammer.on(type, listener);
  147. me.listeners[type] = listener;
  148. });
  149. // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
  150. hammerUtil.onTouch(this.hammer, function (event) {
  151. me.emit('touch', event);
  152. }.bind(this));
  153. // emulate a release event (emitted after a pan, pinch, tap, or press)
  154. hammerUtil.onRelease(this.hammer, function (event) {
  155. me.emit('release', event);
  156. }.bind(this));
  157. /**
  158. *
  159. * @param {WheelEvent} event
  160. */
  161. function onMouseWheel(event) {
  162. if (this.isActive()) {
  163. this.emit('mousewheel', event);
  164. }
  165. // deltaX and deltaY normalization from jquery.mousewheel.js
  166. var deltaX = 0;
  167. var deltaY = 0;
  168. // Old school scrollwheel delta
  169. if ( 'detail' in event ) { deltaY = event.detail * -1; }
  170. if ( 'wheelDelta' in event ) { deltaY = event.wheelDelta; }
  171. if ( 'wheelDeltaY' in event ) { deltaY = event.wheelDeltaY; }
  172. if ( 'wheelDeltaX' in event ) { deltaX = event.wheelDeltaX * -1; }
  173. // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
  174. if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
  175. deltaX = deltaY * -1;
  176. deltaY = 0;
  177. }
  178. // New school wheel delta (wheel event)
  179. if ( 'deltaY' in event ) {
  180. deltaY = event.deltaY * -1;
  181. }
  182. if ( 'deltaX' in event ) {
  183. deltaX = event.deltaX;
  184. }
  185. // prevent scrolling when zoomKey defined or activated
  186. if (!this.options.zoomKey || event[this.options.zoomKey]) return;
  187. // Prevent default actions caused by mouse wheel
  188. // (else the page and timeline both scroll)
  189. event.preventDefault();
  190. if (this.options.verticalScroll && Math.abs(deltaY) >= Math.abs(deltaX)) {
  191. var current = this.props.scrollTop;
  192. var adjusted = current + deltaY;
  193. if (this.isActive()) {
  194. this._setScrollTop(adjusted);
  195. this._redraw();
  196. this.emit('scroll', event);
  197. }
  198. } else if (this.options.horizontalScroll) {
  199. var delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
  200. // calculate a single scroll jump relative to the range scale
  201. var diff = (delta / 120) * (this.range.end - this.range.start) / 20;
  202. // calculate new start and end
  203. var newStart = this.range.start + diff;
  204. var newEnd = this.range.end + diff;
  205. var options = {
  206. animation: false,
  207. byUser: true,
  208. event: event
  209. };
  210. this.range.setRange(newStart, newEnd, options);
  211. }
  212. }
  213. if (this.dom.centerContainer.addEventListener) {
  214. // IE9, Chrome, Safari, Opera
  215. this.dom.centerContainer.addEventListener("mousewheel", onMouseWheel.bind(this), false);
  216. // Firefox
  217. this.dom.centerContainer.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
  218. } else {
  219. // IE 6/7/8
  220. this.dom.centerContainer.attachEvent("onmousewheel", onMouseWheel.bind(this));
  221. }
  222. /**
  223. *
  224. * @param {scroll} event
  225. */
  226. function onMouseScrollSide(event) {
  227. if (!me.options.verticalScroll) return;
  228. event.preventDefault();
  229. if (me.isActive()) {
  230. var adjusted = -event.target.scrollTop;
  231. me._setScrollTop(adjusted);
  232. me._redraw();
  233. me.emit('scrollSide', event);
  234. }
  235. }
  236. this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
  237. this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
  238. var itemAddedToTimeline = false;
  239. /**
  240. *
  241. * @param {dragover} event
  242. * @returns {boolean}
  243. */
  244. function handleDragOver(event) {
  245. if (event.preventDefault) {
  246. event.preventDefault(); // Necessary. Allows us to drop.
  247. }
  248. // make sure your target is a vis element
  249. if (!event.target.className.indexOf("vis") > -1) return;
  250. // make sure only one item is added every time you're over the timeline
  251. if (itemAddedToTimeline) return;
  252. event.dataTransfer.dropEffect = 'move';
  253. itemAddedToTimeline = true;
  254. return false;
  255. }
  256. /**
  257. *
  258. * @param {drop} event
  259. * @returns {boolean}
  260. */
  261. function handleDrop(event) {
  262. // prevent redirect to blank page - Firefox
  263. if(event.preventDefault) { event.preventDefault(); }
  264. if(event.stopPropagation) { event.stopPropagation(); }
  265. // return when dropping non-vis items
  266. try {
  267. var itemData = JSON.parse(event.dataTransfer.getData("text"))
  268. if (!itemData || !itemData.content) return
  269. } catch (err) {
  270. return false;
  271. }
  272. itemAddedToTimeline = false;
  273. event.center = {
  274. x: event.clientX,
  275. y: event.clientY
  276. };
  277. if (itemData.target !== 'item') {
  278. me.itemSet._onAddItem(event);
  279. } else {
  280. me.itemSet._onDropObjectOnItem(event);
  281. }
  282. me.emit('drop', me.getEventProperties(event))
  283. return false;
  284. }
  285. this.dom.center.addEventListener('dragover', handleDragOver.bind(this), false);
  286. this.dom.center.addEventListener('drop', handleDrop.bind(this), false);
  287. this.customTimes = [];
  288. // store state information needed for touch events
  289. this.touch = {};
  290. this.redrawCount = 0;
  291. this.initialDrawDone = false;
  292. this.initialRangeChangeDone = false;
  293. // attach the root panel to the provided container
  294. if (!container) throw new Error('No container provided');
  295. container.appendChild(this.dom.root);
  296. container.appendChild(this.dom.loadingScreen);
  297. };
  298. /**
  299. * Set options. Options will be passed to all components loaded in the Timeline.
  300. * @param {Object} [options]
  301. * {String} orientation
  302. * Vertical orientation for the Timeline,
  303. * can be 'bottom' (default) or 'top'.
  304. * {string | number} width
  305. * Width for the timeline, a number in pixels or
  306. * a css string like '1000px' or '75%'. '100%' by default.
  307. * {string | number} height
  308. * Fixed height for the Timeline, a number in pixels or
  309. * a css string like '400px' or '75%'. If undefined,
  310. * The Timeline will automatically size such that
  311. * its contents fit.
  312. * {string | number} minHeight
  313. * Minimum height for the Timeline, a number in pixels or
  314. * a css string like '400px' or '75%'.
  315. * {string | number} maxHeight
  316. * Maximum height for the Timeline, a number in pixels or
  317. * a css string like '400px' or '75%'.
  318. * {number | Date | string} start
  319. * Start date for the visible window
  320. * {number | Date | string} end
  321. * End date for the visible window
  322. */
  323. Core.prototype.setOptions = function (options) {
  324. if (options) {
  325. // copy the known options
  326. var fields = [
  327. 'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
  328. 'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
  329. 'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll', 'verticalScroll'
  330. ];
  331. util.selectiveExtend(fields, this.options, options);
  332. this.dom.rollingModeBtn.style.visibility = 'hidden';
  333. if (this.options.rtl) {
  334. this.dom.container.style.direction = "rtl";
  335. this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl';
  336. }
  337. if (this.options.verticalScroll) {
  338. if (this.options.rtl) {
  339. this.dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll';
  340. } else {
  341. this.dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll';
  342. }
  343. }
  344. if (typeof this.options.orientation !== 'object') {
  345. this.options.orientation = {item:undefined,axis:undefined};
  346. }
  347. if ('orientation' in options) {
  348. if (typeof options.orientation === 'string') {
  349. this.options.orientation = {
  350. item: options.orientation,
  351. axis: options.orientation
  352. };
  353. }
  354. else if (typeof options.orientation === 'object') {
  355. if ('item' in options.orientation) {
  356. this.options.orientation.item = options.orientation.item;
  357. }
  358. if ('axis' in options.orientation) {
  359. this.options.orientation.axis = options.orientation.axis;
  360. }
  361. }
  362. }
  363. if (this.options.orientation.axis === 'both') {
  364. if (!this.timeAxis2) {
  365. var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);
  366. timeAxis2.setOptions = function (options) {
  367. var _options = options ? util.extend({}, options) : {};
  368. _options.orientation = 'top'; // override the orientation option, always top
  369. TimeAxis.prototype.setOptions.call(timeAxis2, _options);
  370. };
  371. this.components.push(timeAxis2);
  372. }
  373. }
  374. else {
  375. if (this.timeAxis2) {
  376. var index = this.components.indexOf(this.timeAxis2);
  377. if (index !== -1) {
  378. this.components.splice(index, 1);
  379. }
  380. this.timeAxis2.destroy();
  381. this.timeAxis2 = null;
  382. }
  383. }
  384. // if the graph2d's drawPoints is a function delegate the callback to the onRender property
  385. if (typeof options.drawPoints == 'function') {
  386. options.drawPoints = {
  387. onRender: options.drawPoints
  388. };
  389. }
  390. if ('hiddenDates' in this.options) {
  391. DateUtil.convertHiddenOptions(this.options.moment, this.body, this.options.hiddenDates);
  392. }
  393. if ('clickToUse' in options) {
  394. if (options.clickToUse) {
  395. if (!this.activator) {
  396. this.activator = new Activator(this.dom.root);
  397. }
  398. }
  399. else {
  400. if (this.activator) {
  401. this.activator.destroy();
  402. delete this.activator;
  403. }
  404. }
  405. }
  406. if ('showCustomTime' in options) {
  407. throw new Error('Option `showCustomTime` is deprecated. Create a custom time bar via timeline.addCustomTime(time [, id])');
  408. }
  409. // enable/disable autoResize
  410. this._initAutoResize();
  411. }
  412. // propagate options to all components
  413. this.components.forEach(component => component.setOptions(options));
  414. // enable/disable configure
  415. if ('configure' in options) {
  416. if (!this.configurator) {
  417. this.configurator = this._createConfigurator();
  418. }
  419. this.configurator.setOptions(options.configure);
  420. // collect the settings of all components, and pass them to the configuration system
  421. var appliedOptions = util.deepExtend({}, this.options);
  422. this.components.forEach(function (component) {
  423. util.deepExtend(appliedOptions, component.options);
  424. });
  425. this.configurator.setModuleOptions({global: appliedOptions});
  426. }
  427. this._redraw();
  428. };
  429. /**
  430. * Returns true when the Timeline is active.
  431. * @returns {boolean}
  432. */
  433. Core.prototype.isActive = function () {
  434. return !this.activator || this.activator.active;
  435. };
  436. /**
  437. * Destroy the Core, clean up all DOM elements and event listeners.
  438. */
  439. Core.prototype.destroy = function () {
  440. // unbind datasets
  441. this.setItems(null);
  442. this.setGroups(null);
  443. // remove all event listeners
  444. this.off();
  445. // stop checking for changed size
  446. this._stopAutoResize();
  447. // remove from DOM
  448. if (this.dom.root.parentNode) {
  449. this.dom.root.parentNode.removeChild(this.dom.root);
  450. }
  451. this.dom = null;
  452. // remove Activator
  453. if (this.activator) {
  454. this.activator.destroy();
  455. delete this.activator;
  456. }
  457. // cleanup hammer touch events
  458. for (var event in this.listeners) {
  459. if (this.listeners.hasOwnProperty(event)) {
  460. delete this.listeners[event];
  461. }
  462. }
  463. this.listeners = null;
  464. this.hammer = null;
  465. // give all components the opportunity to cleanup
  466. this.components.forEach(component => component.destroy());
  467. this.body = null;
  468. };
  469. /**
  470. * Set a custom time bar
  471. * @param {Date} time
  472. * @param {number} [id=undefined] Optional id of the custom time bar to be adjusted.
  473. */
  474. Core.prototype.setCustomTime = function (time, id) {
  475. var customTimes = this.customTimes.filter(function (component) {
  476. return id === component.options.id;
  477. });
  478. if (customTimes.length === 0) {
  479. throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  480. }
  481. if (customTimes.length > 0) {
  482. customTimes[0].setCustomTime(time);
  483. }
  484. };
  485. /**
  486. * Retrieve the current custom time.
  487. * @param {number} [id=undefined] Id of the custom time bar.
  488. * @return {Date | undefined} customTime
  489. */
  490. Core.prototype.getCustomTime = function(id) {
  491. var customTimes = this.customTimes.filter(function (component) {
  492. return component.options.id === id;
  493. });
  494. if (customTimes.length === 0) {
  495. throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  496. }
  497. return customTimes[0].getCustomTime();
  498. };
  499. /**
  500. * Set a custom title for the custom time bar.
  501. * @param {string} [title] Custom title
  502. * @param {number} [id=undefined] Id of the custom time bar.
  503. * @returns {*}
  504. */
  505. Core.prototype.setCustomTimeTitle = function(title, id) {
  506. var customTimes = this.customTimes.filter(function (component) {
  507. return component.options.id === id;
  508. });
  509. if (customTimes.length === 0) {
  510. throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  511. }
  512. if (customTimes.length > 0) {
  513. return customTimes[0].setCustomTitle(title);
  514. }
  515. };
  516. /**
  517. * Retrieve meta information from an event.
  518. * Should be overridden by classes extending Core
  519. * @param {Event} event
  520. * @return {Object} An object with related information.
  521. */
  522. Core.prototype.getEventProperties = function (event) {
  523. return { event: event };
  524. };
  525. /**
  526. * Add custom vertical bar
  527. * @param {Date | string | number} [time] A Date, unix timestamp, or
  528. * ISO date string. Time point where
  529. * the new bar should be placed.
  530. * If not provided, `new Date()` will
  531. * be used.
  532. * @param {number | string} [id=undefined] Id of the new bar. Optional
  533. * @return {number | string} Returns the id of the new bar
  534. */
  535. Core.prototype.addCustomTime = function (time, id) {
  536. var timestamp = time !== undefined
  537. ? util.convert(time, 'Date').valueOf()
  538. : new Date();
  539. var exists = this.customTimes.some(function (customTime) {
  540. return customTime.options.id === id;
  541. });
  542. if (exists) {
  543. throw new Error('A custom time with id ' + JSON.stringify(id) + ' already exists');
  544. }
  545. var customTime = new CustomTime(this.body, util.extend({}, this.options, {
  546. time : timestamp,
  547. id : id
  548. }));
  549. this.customTimes.push(customTime);
  550. this.components.push(customTime);
  551. this._redraw();
  552. return id;
  553. };
  554. /**
  555. * Remove previously added custom bar
  556. * @param {int} id ID of the custom bar to be removed
  557. * [at]returns {boolean} True if the bar exists and is removed, false otherwise
  558. */
  559. Core.prototype.removeCustomTime = function (id) {
  560. var customTimes = this.customTimes.filter(function (bar) {
  561. return (bar.options.id === id);
  562. });
  563. if (customTimes.length === 0) {
  564. throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  565. }
  566. customTimes.forEach(function (customTime) {
  567. this.customTimes.splice(this.customTimes.indexOf(customTime), 1);
  568. this.components.splice(this.components.indexOf(customTime), 1);
  569. customTime.destroy();
  570. }.bind(this))
  571. };
  572. /**
  573. * Get the id's of the currently visible items.
  574. * @returns {Array} The ids of the visible items
  575. */
  576. Core.prototype.getVisibleItems = function() {
  577. return this.itemSet && this.itemSet.getVisibleItems() || [];
  578. };
  579. /**
  580. * Get the id's of the currently visible groups.
  581. * @returns {Array} The ids of the visible groups
  582. */
  583. Core.prototype.getVisibleGroups = function() {
  584. return this.itemSet && this.itemSet.getVisibleGroups() || [];
  585. };
  586. /**
  587. * Set Core window such that it fits all items
  588. * @param {Object} [options] Available options:
  589. * `animation: boolean | {duration: number, easingFunction: string}`
  590. * If true (default), the range is animated
  591. * smoothly to the new window. An object can be
  592. * provided to specify duration and easing function.
  593. * Default duration is 500 ms, and default easing
  594. * function is 'easeInOutQuad'.
  595. * @param {function} [callback] a callback funtion to be executed at the end of this function
  596. */
  597. Core.prototype.fit = function(options, callback) {
  598. var range = this.getDataRange();
  599. // skip range set if there is no min and max date
  600. if (range.min === null && range.max === null) {
  601. return;
  602. }
  603. // apply a margin of 1% left and right of the data
  604. var interval = range.max - range.min;
  605. var min = new Date(range.min.valueOf() - interval * 0.01);
  606. var max = new Date(range.max.valueOf() + interval * 0.01);
  607. var animation = (options && options.animation !== undefined) ? options.animation : true;
  608. this.range.setRange(min, max, { animation: animation }, callback);
  609. };
  610. /**
  611. * Calculate the data range of the items start and end dates
  612. * [at]returns {{min: [Date], max: [Date]}}
  613. * @protected
  614. */
  615. Core.prototype.getDataRange = function() {
  616. // must be implemented by Timeline and Graph2d
  617. throw new Error('Cannot invoke abstract method getDataRange');
  618. };
  619. /**
  620. * Set the visible window. Both parameters are optional, you can change only
  621. * start or only end. Syntax:
  622. *
  623. * TimeLine.setWindow(start, end)
  624. * TimeLine.setWindow(start, end, options)
  625. * TimeLine.setWindow(range)
  626. *
  627. * Where start and end can be a Date, number, or string, and range is an
  628. * object with properties start and end.
  629. *
  630. * @param {Date | number | string | Object} [start] Start date of visible window
  631. * @param {Date | number | string} [end] End date of visible window
  632. * @param {Object} [options] Available options:
  633. * `animation: boolean | {duration: number, easingFunction: string}`
  634. * If true (default), the range is animated
  635. * smoothly to the new window. An object can be
  636. * provided to specify duration and easing function.
  637. * Default duration is 500 ms, and default easing
  638. * function is 'easeInOutQuad'.
  639. * @param {function} [callback] a callback funtion to be executed at the end of this function
  640. */
  641. Core.prototype.setWindow = function(start, end, options, callback) {
  642. if (typeof arguments[2] == "function") {
  643. callback = arguments[2];
  644. options = {};
  645. }
  646. var animation;
  647. var range;
  648. if (arguments.length == 1) {
  649. range = arguments[0];
  650. animation = (range.animation !== undefined) ? range.animation : true;
  651. this.range.setRange(range.start, range.end, { animation: animation });
  652. }
  653. else if (arguments.length == 2 && typeof arguments[1] == "function") {
  654. range = arguments[0];
  655. callback = arguments[1];
  656. animation = (range.animation !== undefined) ? range.animation : true;
  657. this.range.setRange(range.start, range.end, { animation: animation }, callback);
  658. }
  659. else {
  660. animation = (options && options.animation !== undefined) ? options.animation : true;
  661. this.range.setRange(start, end, { animation: animation }, callback);
  662. }
  663. };
  664. /**
  665. * Move the window such that given time is centered on screen.
  666. * @param {Date | number | string} time
  667. * @param {Object} [options] Available options:
  668. * `animation: boolean | {duration: number, easingFunction: string}`
  669. * If true (default), the range is animated
  670. * smoothly to the new window. An object can be
  671. * provided to specify duration and easing function.
  672. * Default duration is 500 ms, and default easing
  673. * function is 'easeInOutQuad'.
  674. * @param {function} [callback] a callback funtion to be executed at the end of this function
  675. */
  676. Core.prototype.moveTo = function(time, options, callback) {
  677. if (typeof arguments[1] == "function") {
  678. callback = arguments[1];
  679. options = {};
  680. }
  681. var interval = this.range.end - this.range.start;
  682. var t = util.convert(time, 'Date').valueOf();
  683. var start = t - interval / 2;
  684. var end = t + interval / 2;
  685. var animation = (options && options.animation !== undefined) ? options.animation : true;
  686. this.range.setRange(start, end, { animation: animation }, callback);
  687. };
  688. /**
  689. * Get the visible window
  690. * @return {{start: Date, end: Date}} Visible range
  691. */
  692. Core.prototype.getWindow = function() {
  693. var range = this.range.getRange();
  694. return {
  695. start: new Date(range.start),
  696. end: new Date(range.end)
  697. };
  698. };
  699. /**
  700. * Zoom in the window such that given time is centered on screen.
  701. * @param {number} percentage - must be between [0..1]
  702. * @param {Object} [options] Available options:
  703. * `animation: boolean | {duration: number, easingFunction: string}`
  704. * If true (default), the range is animated
  705. * smoothly to the new window. An object can be
  706. * provided to specify duration and easing function.
  707. * Default duration is 500 ms, and default easing
  708. * function is 'easeInOutQuad'.
  709. * @param {function} [callback] a callback funtion to be executed at the end of this function
  710. */
  711. Core.prototype.zoomIn = function(percentage, options, callback) {
  712. if (!percentage || percentage < 0 || percentage > 1) return;
  713. if (typeof arguments[1] == "function") {
  714. callback = arguments[1];
  715. options = {};
  716. }
  717. var range = this.getWindow();
  718. var start = range.start.valueOf();
  719. var end = range.end.valueOf();
  720. var interval = end - start;
  721. var newInterval = interval / (1 + percentage);
  722. var distance = (interval - newInterval) / 2;
  723. var newStart = start + distance;
  724. var newEnd = end - distance;
  725. this.setWindow(newStart, newEnd, options, callback);
  726. };
  727. /**
  728. * Zoom out the window such that given time is centered on screen.
  729. * @param {number} percentage - must be between [0..1]
  730. * @param {Object} [options] Available options:
  731. * `animation: boolean | {duration: number, easingFunction: string}`
  732. * If true (default), the range is animated
  733. * smoothly to the new window. An object can be
  734. * provided to specify duration and easing function.
  735. * Default duration is 500 ms, and default easing
  736. * function is 'easeInOutQuad'.
  737. * @param {function} [callback] a callback funtion to be executed at the end of this function
  738. */
  739. Core.prototype.zoomOut = function(percentage, options, callback) {
  740. if (!percentage || percentage < 0 || percentage > 1) return
  741. if (typeof arguments[1] == "function") {
  742. callback = arguments[1];
  743. options = {};
  744. }
  745. var range = this.getWindow();
  746. var start = range.start.valueOf();
  747. var end = range.end.valueOf();
  748. var interval = end - start;
  749. var newStart = start - interval * percentage / 2;
  750. var newEnd = end + interval * percentage / 2;
  751. this.setWindow(newStart, newEnd, options, callback);
  752. };
  753. /**
  754. * Force a redraw. Can be overridden by implementations of Core
  755. *
  756. * Note: this function will be overridden on construction with a trottled version
  757. */
  758. Core.prototype.redraw = function() {
  759. this._redraw();
  760. };
  761. /**
  762. * Redraw for internal use. Redraws all components. See also the public
  763. * method redraw.
  764. * @protected
  765. */
  766. Core.prototype._redraw = function() {
  767. this.redrawCount++;
  768. var resized = false;
  769. var options = this.options;
  770. var props = this.props;
  771. var dom = this.dom;
  772. if (!dom || !dom.container || dom.root.offsetWidth == 0) return; // when destroyed, or invisible
  773. DateUtil.updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);
  774. // update class names
  775. if (options.orientation == 'top') {
  776. util.addClassName(dom.root, 'vis-top');
  777. util.removeClassName(dom.root, 'vis-bottom');
  778. }
  779. else {
  780. util.removeClassName(dom.root, 'vis-top');
  781. util.addClassName(dom.root, 'vis-bottom');
  782. }
  783. // update root width and height options
  784. dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
  785. dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
  786. dom.root.style.width = util.option.asSize(options.width, '');
  787. // calculate border widths
  788. props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
  789. props.border.right = props.border.left;
  790. props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
  791. props.border.bottom = props.border.top;
  792. props.borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
  793. props.borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
  794. // workaround for a bug in IE: the clientWidth of an element with
  795. // a height:0px and overflow:hidden is not calculated and always has value 0
  796. if (dom.centerContainer.clientHeight === 0) {
  797. props.border.left = props.border.top;
  798. props.border.right = props.border.left;
  799. }
  800. if (dom.root.clientHeight === 0) {
  801. props.borderRootWidth = props.borderRootHeight;
  802. }
  803. // calculate the heights. If any of the side panels is empty, we set the height to
  804. // minus the border width, such that the border will be invisible
  805. props.center.height = dom.center.offsetHeight;
  806. props.left.height = dom.left.offsetHeight;
  807. props.right.height = dom.right.offsetHeight;
  808. props.top.height = dom.top.clientHeight || -props.border.top;
  809. props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
  810. // TODO: compensate borders when any of the panels is empty.
  811. // apply auto height
  812. // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
  813. var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
  814. var autoHeight = props.top.height + contentHeight + props.bottom.height +
  815. props.borderRootHeight + props.border.top + props.border.bottom;
  816. dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
  817. // calculate heights of the content panels
  818. props.root.height = dom.root.offsetHeight;
  819. props.background.height = props.root.height - props.borderRootHeight;
  820. var containerHeight = props.root.height - props.top.height - props.bottom.height -
  821. props.borderRootHeight;
  822. props.centerContainer.height = containerHeight;
  823. props.leftContainer.height = containerHeight;
  824. props.rightContainer.height = props.leftContainer.height;
  825. // calculate the widths of the panels
  826. props.root.width = dom.root.offsetWidth;
  827. props.background.width = props.root.width - props.borderRootWidth;
  828. if (!this.initialDrawDone) {
  829. props.scrollbarWidth = util.getScrollBarWidth();
  830. }
  831. if (options.verticalScroll) {
  832. if (options.rtl) {
  833. props.left.width = dom.leftContainer.clientWidth || -props.border.left;
  834. props.right.width = dom.rightContainer.clientWidth + props.scrollbarWidth || -props.border.right;
  835. } else {
  836. props.left.width = dom.leftContainer.clientWidth + props.scrollbarWidth || -props.border.left;
  837. props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  838. }
  839. } else {
  840. props.left.width = dom.leftContainer.clientWidth || -props.border.left;
  841. props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  842. }
  843. this._setDOM();
  844. // update the scrollTop, feasible range for the offset can be changed
  845. // when the height of the Core or of the contents of the center changed
  846. var offset = this._updateScrollTop();
  847. // reposition the scrollable contents
  848. if (options.orientation.item != 'top') {
  849. offset += Math.max(props.centerContainer.height - props.center.height -
  850. props.border.top - props.border.bottom, 0);
  851. }
  852. dom.center.style.top = offset + 'px';
  853. // show shadows when vertical scrolling is available
  854. var visibilityTop = props.scrollTop == 0 ? 'hidden' : '';
  855. var visibilityBottom = props.scrollTop == props.scrollTopMin ? 'hidden' : '';
  856. dom.shadowTop.style.visibility = visibilityTop;
  857. dom.shadowBottom.style.visibility = visibilityBottom;
  858. dom.shadowTopLeft.style.visibility = visibilityTop;
  859. dom.shadowBottomLeft.style.visibility = visibilityBottom;
  860. dom.shadowTopRight.style.visibility = visibilityTop;
  861. dom.shadowBottomRight.style.visibility = visibilityBottom;
  862. if (options.verticalScroll) {
  863. dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll';
  864. dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll';
  865. dom.shadowTopRight.style.visibility = "hidden";
  866. dom.shadowBottomRight.style.visibility = "hidden";
  867. dom.shadowTopLeft.style.visibility = "hidden";
  868. dom.shadowBottomLeft.style.visibility = "hidden";
  869. dom.left.style.top = '0px';
  870. dom.right.style.top = '0px';
  871. }
  872. if (!options.verticalScroll || props.center.height < props.centerContainer.height) {
  873. dom.left.style.top = offset + 'px';
  874. dom.right.style.top = offset + 'px';
  875. dom.rightContainer.className = dom.rightContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
  876. dom.leftContainer.className = dom.leftContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
  877. props.left.width = dom.leftContainer.clientWidth || -props.border.left;
  878. props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  879. this._setDOM();
  880. }
  881. // enable/disable vertical panning
  882. var contentsOverflow = props.center.height > props.centerContainer.height;
  883. this.hammer.get('pan').set({
  884. direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
  885. });
  886. // redraw all components
  887. this.components.forEach(function (component) {
  888. resized = component.redraw() || resized;
  889. });
  890. var MAX_REDRAW = 5;
  891. if (resized) {
  892. if (this.redrawCount < MAX_REDRAW) {
  893. this.body.emitter.emit('_change');
  894. return;
  895. }
  896. else {
  897. console.log('WARNING: infinite loop in redraw?');
  898. }
  899. } else {
  900. this.redrawCount = 0;
  901. }
  902. //Emit public 'changed' event for UI updates, see issue #1592
  903. this.body.emitter.emit("changed");
  904. };
  905. Core.prototype._setDOM = function () {
  906. var props = this.props;
  907. var dom = this.dom;
  908. props.leftContainer.width = props.left.width;
  909. props.rightContainer.width = props.right.width;
  910. var centerWidth = props.root.width - props.left.width - props.right.width - props.borderRootWidth;
  911. props.center.width = centerWidth;
  912. props.centerContainer.width = centerWidth;
  913. props.top.width = centerWidth;
  914. props.bottom.width = centerWidth;
  915. // resize the panels
  916. dom.background.style.height = props.background.height + 'px';
  917. dom.backgroundVertical.style.height = props.background.height + 'px';
  918. dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
  919. dom.centerContainer.style.height = props.centerContainer.height + 'px';
  920. dom.leftContainer.style.height = props.leftContainer.height + 'px';
  921. dom.rightContainer.style.height = props.rightContainer.height + 'px';
  922. dom.background.style.width = props.background.width + 'px';
  923. dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
  924. dom.backgroundHorizontal.style.width = props.background.width + 'px';
  925. dom.centerContainer.style.width = props.center.width + 'px';
  926. dom.top.style.width = props.top.width + 'px';
  927. dom.bottom.style.width = props.bottom.width + 'px';
  928. // reposition the panels
  929. dom.background.style.left = '0';
  930. dom.background.style.top = '0';
  931. dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px';
  932. dom.backgroundVertical.style.top = '0';
  933. dom.backgroundHorizontal.style.left = '0';
  934. dom.backgroundHorizontal.style.top = props.top.height + 'px';
  935. dom.centerContainer.style.left = props.left.width + 'px';
  936. dom.centerContainer.style.top = props.top.height + 'px';
  937. dom.leftContainer.style.left = '0';
  938. dom.leftContainer.style.top = props.top.height + 'px';
  939. dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
  940. dom.rightContainer.style.top = props.top.height + 'px';
  941. dom.top.style.left = props.left.width + 'px';
  942. dom.top.style.top = '0';
  943. dom.bottom.style.left = props.left.width + 'px';
  944. dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
  945. dom.center.style.left = '0';
  946. dom.left.style.left = '0';
  947. dom.right.style.left = '0';
  948. };
  949. // TODO: deprecated since version 1.1.0, remove some day
  950. Core.prototype.repaint = function () {
  951. throw new Error('Function repaint is deprecated. Use redraw instead.');
  952. };
  953. /**
  954. * Set a current time. This can be used for example to ensure that a client's
  955. * time is synchronized with a shared server time.
  956. * Only applicable when option `showCurrentTime` is true.
  957. * @param {Date | string | number} time A Date, unix timestamp, or
  958. * ISO date string.
  959. */
  960. Core.prototype.setCurrentTime = function(time) {
  961. if (!this.currentTime) {
  962. throw new Error('Option showCurrentTime must be true');
  963. }
  964. this.currentTime.setCurrentTime(time);
  965. };
  966. /**
  967. * Get the current time.
  968. * Only applicable when option `showCurrentTime` is true.
  969. * @return {Date} Returns the current time.
  970. */
  971. Core.prototype.getCurrentTime = function() {
  972. if (!this.currentTime) {
  973. throw new Error('Option showCurrentTime must be true');
  974. }
  975. return this.currentTime.getCurrentTime();
  976. };
  977. /**
  978. * Convert a position on screen (pixels) to a datetime
  979. * @param {int} x Position on the screen in pixels
  980. * @return {Date} time The datetime the corresponds with given position x
  981. * @protected
  982. */
  983. // TODO: move this function to Range
  984. Core.prototype._toTime = function(x) {
  985. return DateUtil.toTime(this, x, this.props.center.width);
  986. };
  987. /**
  988. * Convert a position on the global screen (pixels) to a datetime
  989. * @param {int} x Position on the screen in pixels
  990. * @return {Date} time The datetime the corresponds with given position x
  991. * @protected
  992. */
  993. // TODO: move this function to Range
  994. Core.prototype._toGlobalTime = function(x) {
  995. return DateUtil.toTime(this, x, this.props.root.width);
  996. //var conversion = this.range.conversion(this.props.root.width);
  997. //return new Date(x / conversion.scale + conversion.offset);
  998. };
  999. /**
  1000. * Convert a datetime (Date object) into a position on the screen
  1001. * @param {Date} time A date
  1002. * @return {int} x The position on the screen in pixels which corresponds
  1003. * with the given date.
  1004. * @protected
  1005. */
  1006. // TODO: move this function to Range
  1007. Core.prototype._toScreen = function(time) {
  1008. return DateUtil.toScreen(this, time, this.props.center.width);
  1009. };
  1010. /**
  1011. * Convert a datetime (Date object) into a position on the root
  1012. * This is used to get the pixel density estimate for the screen, not the center panel
  1013. * @param {Date} time A date
  1014. * @return {int} x The position on root in pixels which corresponds
  1015. * with the given date.
  1016. * @protected
  1017. */
  1018. // TODO: move this function to Range
  1019. Core.prototype._toGlobalScreen = function(time) {
  1020. return DateUtil.toScreen(this, time, this.props.root.width);
  1021. //var conversion = this.range.conversion(this.props.root.width);
  1022. //return (time.valueOf() - conversion.offset) * conversion.scale;
  1023. };
  1024. /**
  1025. * Initialize watching when option autoResize is true
  1026. * @private
  1027. */
  1028. Core.prototype._initAutoResize = function () {
  1029. if (this.options.autoResize == true) {
  1030. this._startAutoResize();
  1031. }
  1032. else {
  1033. this._stopAutoResize();
  1034. }
  1035. };
  1036. /**
  1037. * Watch for changes in the size of the container. On resize, the Panel will
  1038. * automatically redraw itself.
  1039. * @private
  1040. */
  1041. Core.prototype._startAutoResize = function () {
  1042. var me = this;
  1043. this._stopAutoResize();
  1044. this._onResize = function() {
  1045. if (me.options.autoResize != true) {
  1046. // stop watching when the option autoResize is changed to false
  1047. me._stopAutoResize();
  1048. return;
  1049. }
  1050. if (me.dom.root) {
  1051. // check whether the frame is resized
  1052. // Note: we compare offsetWidth here, not clientWidth. For some reason,
  1053. // IE does not restore the clientWidth from 0 to the actual width after
  1054. // changing the timeline's container display style from none to visible
  1055. if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
  1056. (me.dom.root.offsetHeight != me.props.lastHeight)) {
  1057. me.props.lastWidth = me.dom.root.offsetWidth;
  1058. me.props.lastHeight = me.dom.root.offsetHeight;
  1059. me.props.scrollbarWidth = util.getScrollBarWidth();
  1060. me.body.emitter.emit('_change');
  1061. }
  1062. }
  1063. };
  1064. // add event listener to window resize
  1065. util.addEventListener(window, 'resize', this._onResize);
  1066. //Prevent initial unnecessary redraw
  1067. if (me.dom.root) {
  1068. me.props.lastWidth = me.dom.root.offsetWidth;
  1069. me.props.lastHeight = me.dom.root.offsetHeight;
  1070. }
  1071. this.watchTimer = setInterval(this._onResize, 1000);
  1072. };
  1073. /**
  1074. * Stop watching for a resize of the frame.
  1075. * @private
  1076. */
  1077. Core.prototype._stopAutoResize = function () {
  1078. if (this.watchTimer) {
  1079. clearInterval(this.watchTimer);
  1080. this.watchTimer = undefined;
  1081. }
  1082. // remove event listener on window.resize
  1083. if (this._onResize) {
  1084. util.removeEventListener(window, 'resize', this._onResize);
  1085. this._onResize = null;
  1086. }
  1087. };
  1088. /**
  1089. * Start moving the timeline vertically
  1090. * @param {Event} event
  1091. * @private
  1092. */
  1093. Core.prototype._onTouch = function (event) { // eslint-disable-line no-unused-vars
  1094. this.touch.allowDragging = true;
  1095. this.touch.initialScrollTop = this.props.scrollTop;
  1096. };
  1097. /**
  1098. * Start moving the timeline vertically
  1099. * @param {Event} event
  1100. * @private
  1101. */
  1102. Core.prototype._onPinch = function (event) { // eslint-disable-line no-unused-vars
  1103. this.touch.allowDragging = false;
  1104. };
  1105. /**
  1106. * Move the timeline vertically
  1107. * @param {Event} event
  1108. * @private
  1109. */
  1110. Core.prototype._onDrag = function (event) {
  1111. if (!event) return
  1112. // refuse to drag when we where pinching to prevent the timeline make a jump
  1113. // when releasing the fingers in opposite order from the touch screen
  1114. if (!this.touch.allowDragging) return;
  1115. var delta = event.deltaY;
  1116. var oldScrollTop = this._getScrollTop();
  1117. var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
  1118. if (this.options.verticalScroll) {
  1119. this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
  1120. this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
  1121. }
  1122. if (newScrollTop != oldScrollTop) {
  1123. this.emit("verticalDrag");
  1124. }
  1125. };
  1126. /**
  1127. * Apply a scrollTop
  1128. * @param {number} scrollTop
  1129. * @returns {number} scrollTop Returns the applied scrollTop
  1130. * @private
  1131. */
  1132. Core.prototype._setScrollTop = function (scrollTop) {
  1133. this.props.scrollTop = scrollTop;
  1134. this._updateScrollTop();
  1135. return this.props.scrollTop;
  1136. };
  1137. /**
  1138. * Update the current scrollTop when the height of the containers has been changed
  1139. * @returns {number} scrollTop Returns the applied scrollTop
  1140. * @private
  1141. */
  1142. Core.prototype._updateScrollTop = function () {
  1143. // recalculate the scrollTopMin
  1144. var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
  1145. if (scrollTopMin != this.props.scrollTopMin) {
  1146. // in case of bottom orientation, change the scrollTop such that the contents
  1147. // do not move relative to the time axis at the bottom
  1148. if (this.options.orientation.item != 'top') {
  1149. this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
  1150. }
  1151. this.props.scrollTopMin = scrollTopMin;
  1152. }
  1153. // limit the scrollTop to the feasible scroll range
  1154. if (this.props.scrollTop > 0) this.props.scrollTop = 0;
  1155. if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
  1156. if (this.options.verticalScroll) {
  1157. this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
  1158. this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
  1159. }
  1160. return this.props.scrollTop;
  1161. };
  1162. /**
  1163. * Get the current scrollTop
  1164. * @returns {number} scrollTop
  1165. * @private
  1166. */
  1167. Core.prototype._getScrollTop = function () {
  1168. return this.props.scrollTop;
  1169. };
  1170. /**
  1171. * Load a configurator
  1172. * [at]returns {Object}
  1173. * @private
  1174. */
  1175. Core.prototype._createConfigurator = function () {
  1176. throw new Error('Cannot invoke abstract method _createConfigurator');
  1177. };
  1178. module.exports = Core;