|
|
- var Emitter = require('emitter-component');
- var Hammer = require('../module/hammer');
- var util = require('../util');
- var DataSet = require('../DataSet');
- var DataView = require('../DataView');
- var Range = require('./Range');
- var ItemSet = require('./component/ItemSet');
- var Activator = require('../shared/Activator');
- var DateUtil = require('./DateUtil');
- var CustomTime = require('./component/CustomTime');
-
- /**
- * Create a timeline visualization
- * @param {HTMLElement} container
- * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
- * @param {Object} [options] See Core.setOptions for the available options.
- * @constructor
- */
- function Core () {}
-
- // turn Core into an event emitter
- Emitter(Core.prototype);
-
- /**
- * Create the main DOM for the Core: a root panel containing left, right,
- * top, bottom, content, and background panel.
- * @param {Element} container The container element where the Core will
- * be attached.
- * @private
- */
- Core.prototype._create = function (container) {
- this.dom = {};
-
- this.dom.root = document.createElement('div');
- this.dom.background = document.createElement('div');
- this.dom.backgroundVertical = document.createElement('div');
- this.dom.backgroundHorizontal = document.createElement('div');
- this.dom.centerContainer = document.createElement('div');
- this.dom.leftContainer = document.createElement('div');
- this.dom.rightContainer = document.createElement('div');
- this.dom.center = document.createElement('div');
- this.dom.left = document.createElement('div');
- this.dom.right = document.createElement('div');
- this.dom.top = document.createElement('div');
- this.dom.bottom = document.createElement('div');
- this.dom.shadowTop = document.createElement('div');
- this.dom.shadowBottom = document.createElement('div');
- this.dom.shadowTopLeft = document.createElement('div');
- this.dom.shadowBottomLeft = document.createElement('div');
- this.dom.shadowTopRight = document.createElement('div');
- this.dom.shadowBottomRight = document.createElement('div');
-
- this.dom.root.className = 'vis timeline root';
- this.dom.background.className = 'vispanel background';
- this.dom.backgroundVertical.className = 'vispanel background vertical';
- this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
- this.dom.centerContainer.className = 'vispanel center';
- this.dom.leftContainer.className = 'vispanel left';
- this.dom.rightContainer.className = 'vispanel right';
- this.dom.top.className = 'vispanel top';
- this.dom.bottom.className = 'vispanel bottom';
- this.dom.left.className = 'content';
- this.dom.center.className = 'content';
- this.dom.right.className = 'content';
- this.dom.shadowTop.className = 'shadow top';
- this.dom.shadowBottom.className = 'shadow bottom';
- this.dom.shadowTopLeft.className = 'shadow top';
- this.dom.shadowBottomLeft.className = 'shadow bottom';
- this.dom.shadowTopRight.className = 'shadow top';
- this.dom.shadowBottomRight.className = 'shadow bottom';
-
- this.dom.root.appendChild(this.dom.background);
- this.dom.root.appendChild(this.dom.backgroundVertical);
- this.dom.root.appendChild(this.dom.backgroundHorizontal);
- this.dom.root.appendChild(this.dom.centerContainer);
- this.dom.root.appendChild(this.dom.leftContainer);
- this.dom.root.appendChild(this.dom.rightContainer);
- this.dom.root.appendChild(this.dom.top);
- this.dom.root.appendChild(this.dom.bottom);
-
- this.dom.centerContainer.appendChild(this.dom.center);
- this.dom.leftContainer.appendChild(this.dom.left);
- this.dom.rightContainer.appendChild(this.dom.right);
-
- this.dom.centerContainer.appendChild(this.dom.shadowTop);
- this.dom.centerContainer.appendChild(this.dom.shadowBottom);
- this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
- this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
- this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
- this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
-
- this.on('rangechange', this.redraw.bind(this));
-
- var me = this;
- this.on('change', function (properties) {
- if (properties && properties.queue == true) {
- // redraw once on next tick
- if (!me._redrawTimer) {
- me._redrawTimer = setTimeout(function () {
- me._redrawTimer = null;
- me._redraw();
- }, 0)
- }
- }
- else {
- // redraw immediately
- me._redraw();
- }
- });
-
- // create event listeners for all interesting events, these events will be
- // emitted via emitter
- this.hammer = new Hammer(this.dom.root, {touchAction: 'pan-y'});
- this.hammer.get('pinch').set({enable: true});
- this.listeners = {};
-
- var events = [
- 'tap', 'doubletap', 'press',
- 'pinch',
- 'pan', 'panstart', 'panmove', 'panend'
- // TODO: cleanup
- //'touch', 'pinch',
- //'tap', 'doubletap', 'hold',
- //'dragstart', 'drag', 'dragend',
- //'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
- ];
- events.forEach(function (type) {
- var listener = function (event) {
- if (me.isActive()) {
- me.emit(type, event);
- }
- };
- me.hammer.on(type, listener);
- me.listeners[type] = listener;
- });
-
- // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
- this.hammer.on('hammer.input', function (event) {
- if (event.isFirst) {
- if (me.isActive()) {
- me.emit('touch', event);
- }
- }
- }.bind(this));
-
- function onMouseWheel(event) {
- if (me.isActive()) {
- me.emit('mousewheel', event);
- }
- }
- this.dom.root.addEventListener('mousewheel', onMouseWheel);
- this.dom.root.addEventListener('DOMMouseScroll', onMouseWheel);
-
- // size properties of each of the panels
- this.props = {
- root: {},
- background: {},
- centerContainer: {},
- leftContainer: {},
- rightContainer: {},
- center: {},
- left: {},
- right: {},
- top: {},
- bottom: {},
- border: {},
- scrollTop: 0,
- scrollTopMin: 0
- };
-
- this.redrawCount = 0;
-
- // attach the root panel to the provided container
- if (!container) throw new Error('No container provided');
- container.appendChild(this.dom.root);
- };
-
- /**
- * Set options. Options will be passed to all components loaded in the Timeline.
- * @param {Object} [options]
- * {String} orientation
- * Vertical orientation for the Timeline,
- * can be 'bottom' (default) or 'top'.
- * {String | Number} width
- * Width for the timeline, a number in pixels or
- * a css string like '1000px' or '75%'. '100%' by default.
- * {String | Number} height
- * Fixed height for the Timeline, a number in pixels or
- * a css string like '400px' or '75%'. If undefined,
- * The Timeline will automatically size such that
- * its contents fit.
- * {String | Number} minHeight
- * Minimum height for the Timeline, a number in pixels or
- * a css string like '400px' or '75%'.
- * {String | Number} maxHeight
- * Maximum height for the Timeline, a number in pixels or
- * a css string like '400px' or '75%'.
- * {Number | Date | String} start
- * Start date for the visible window
- * {Number | Date | String} end
- * End date for the visible window
- */
- Core.prototype.setOptions = function (options) {
- if (options) {
- // copy the known options
- var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hiddenDates'];
- util.selectiveExtend(fields, this.options, options);
-
- if ('hiddenDates' in this.options) {
- DateUtil.convertHiddenOptions(this.body, this.options.hiddenDates);
- }
-
- if ('clickToUse' in options) {
- if (options.clickToUse) {
- if (!this.activator) {
- this.activator = new Activator(this.dom.root);
- }
- }
- else {
- if (this.activator) {
- this.activator.destroy();
- delete this.activator;
- }
- }
- }
-
- // enable/disable autoResize
- this._initAutoResize();
- }
-
- // propagate options to all components
- this.components.forEach(function (component) {
- component.setOptions(options);
- });
-
- // TODO: remove deprecation error one day (deprecated since version 0.8.0)
- if (options && options.order) {
- throw new Error('Option order is deprecated. There is no replacement for this feature.');
- }
-
- // redraw everything
- this._redraw();
- };
-
- /**
- * Returns true when the Timeline is active.
- * @returns {boolean}
- */
- Core.prototype.isActive = function () {
- return !this.activator || this.activator.active;
- };
-
- /**
- * Destroy the Core, clean up all DOM elements and event listeners.
- */
- Core.prototype.destroy = function () {
- // unbind datasets
- this.clear();
-
- // remove all event listeners
- this.off();
-
- // stop checking for changed size
- this._stopAutoResize();
-
- // remove from DOM
- if (this.dom.root.parentNode) {
- this.dom.root.parentNode.removeChild(this.dom.root);
- }
- this.dom = null;
-
- // remove Activator
- if (this.activator) {
- this.activator.destroy();
- delete this.activator;
- }
-
- // cleanup hammer touch events
- for (var event in this.listeners) {
- if (this.listeners.hasOwnProperty(event)) {
- delete this.listeners[event];
- }
- }
- this.listeners = null;
- this.hammer = null;
-
- // give all components the opportunity to cleanup
- this.components.forEach(function (component) {
- component.destroy();
- });
-
- this.body = null;
- };
-
-
- /**
- * Set a custom time bar
- * @param {Date} time
- * @param {int} id
- */
- Core.prototype.setCustomTime = function (time, id) {
- if (!this.customTime) {
- throw new Error('Cannot get custom time: Custom time bar is not enabled');
- }
-
- var barId = id || 0;
-
- this.components.forEach(function (element, index, components) {
- if (element instanceof CustomTime && element.options.id === barId) {
- element.setCustomTime(time);
- }
- });
- };
-
- /**
- * Retrieve the current custom time.
- * @return {Date} customTime
- * @param {int} id
- */
- Core.prototype.getCustomTime = function(id) {
- if (!this.customTime) {
- throw new Error('Cannot get custom time: Custom time bar is not enabled');
- }
-
- var barId = id || 0,
- customTime = this.customTime.getCustomTime();
-
- this.components.forEach(function (element, index, components) {
- if (element instanceof CustomTime && element.options.id === barId) {
- customTime = element.getCustomTime();
- }
- });
-
- return customTime;
- };
-
- /**
- * Add custom vertical bar
- * @param {Date | String | Number} time A Date, unix timestamp, or
- * ISO date string. Time point where the new bar should be placed
- * @param {Number | String} ID of the new bar
- * @return {Number | String} ID of the new bar
- */
- Core.prototype.addCustomTime = function (time, id) {
- if (!this.currentTime) {
- throw new Error('Option showCurrentTime must be true');
- }
-
- if (time === undefined) {
- throw new Error('Time parameter for the custom bar must be provided');
- }
-
- var ts = util.convert(time, 'Date').valueOf(),
- numIds, customTime, customBarId;
-
- // All bar IDs are kept in 1 array, mixed types
- // Bar with ID 0 is the default bar.
- if (!this.customBarIds || this.customBarIds.constructor !== Array) {
- this.customBarIds = [0];
- }
-
- // If the ID is not provided, generate one, otherwise just use it
- if (id === undefined) {
-
- numIds = this.customBarIds.filter(function (element) {
- return util.isNumber(element);
- });
-
- customBarId = numIds.length > 0 ? Math.max.apply(null, numIds) + 1 : 1;
-
- } else {
-
- // Check for duplicates
- this.customBarIds.forEach(function (element) {
- if (element === id) {
- throw new Error('Custom time ID already exists');
- }
- });
-
- customBarId = id;
- }
-
- this.customBarIds.push(customBarId);
-
- customTime = new CustomTime(this.body, {
- showCustomTime : true,
- time : ts,
- id : customBarId
- });
-
- this.components.push(customTime);
- this.redraw();
-
- return customBarId;
- };
-
- /**
- * Remove previously added custom bar
- * @param {int} id ID of the custom bar to be removed
- * @return {boolean} True if the bar exists and is removed, false otherwise
- */
- Core.prototype.removeCustomTime = function (id) {
-
- var me = this;
-
- this.components.forEach(function (bar, index, components) {
- if (bar instanceof CustomTime && bar.options.id === id) {
- // Only the lines added by the user will be removed
- if (bar.options.id !== 0) {
- me.customBarIds.splice(me.customBarIds.indexOf(id), 1);
- components.splice(index, 1);
- bar.destroy();
- }
- }
- });
- };
-
-
- /**
- * Get the id's of the currently visible items.
- * @returns {Array} The ids of the visible items
- */
- Core.prototype.getVisibleItems = function() {
- return this.itemSet && this.itemSet.getVisibleItems() || [];
- };
-
-
-
- /**
- * Clear the Core. By Default, items, groups and options are cleared.
- * Example usage:
- *
- * timeline.clear(); // clear items, groups, and options
- * timeline.clear({options: true}); // clear options only
- *
- * @param {Object} [what] Optionally specify what to clear. By default:
- * {items: true, groups: true, options: true}
- */
- Core.prototype.clear = function(what) {
- // clear items
- if (!what || what.items) {
- this.setItems(null);
- }
-
- // clear groups
- if (!what || what.groups) {
- this.setGroups(null);
- }
-
- // clear options of timeline and of each of the components
- if (!what || what.options) {
- this.components.forEach(function (component) {
- component.setOptions(component.defaultOptions);
- });
-
- this.setOptions(this.defaultOptions); // this will also do a redraw
- }
- };
-
- /**
- * Set Core window such that it fits all items
- * @param {Object} [options] Available options:
- * `animate: boolean | number`
- * If true (default), the range is animated
- * smoothly to the new window.
- * If a number, the number is taken as duration
- * for the animation. Default duration is 500 ms.
- */
- Core.prototype.fit = function(options) {
- var range = this._getDataRange();
-
- // skip range set if there is no start and end date
- if (range.start === null && range.end === null) {
- return;
- }
-
- var animate = (options && options.animate !== undefined) ? options.animate : true;
- this.range.setRange(range.start, range.end, animate);
- };
-
- /**
- * Calculate the data range of the items and applies a 5% window around it.
- * @returns {{start: Date | null, end: Date | null}}
- * @protected
- */
- Core.prototype._getDataRange = function() {
- // apply the data range as range
- var dataRange = this.getItemRange();
-
- // add 5% space on both sides
- var start = dataRange.min;
- var end = dataRange.max;
- if (start != null && end != null) {
- var interval = (end.valueOf() - start.valueOf());
- if (interval <= 0) {
- // prevent an empty interval
- interval = 24 * 60 * 60 * 1000; // 1 day
- }
- start = new Date(start.valueOf() - interval * 0.05);
- end = new Date(end.valueOf() + interval * 0.05);
- }
-
- return {
- start: start,
- end: end
- }
- };
-
- /**
- * Set the visible window. Both parameters are optional, you can change only
- * start or only end. Syntax:
- *
- * TimeLine.setWindow(start, end)
- * TimeLine.setWindow(start, end, options)
- * TimeLine.setWindow(range)
- *
- * Where start and end can be a Date, number, or string, and range is an
- * object with properties start and end.
- *
- * @param {Date | Number | String | Object} [start] Start date of visible window
- * @param {Date | Number | String} [end] End date of visible window
- * @param {Object} [options] Available options:
- * `animate: boolean | number`
- * If true (default), the range is animated
- * smoothly to the new window.
- * If a number, the number is taken as duration
- * for the animation. Default duration is 500 ms.
- */
- Core.prototype.setWindow = function(start, end, options) {
- var animate;
- if (arguments.length == 1) {
- var range = arguments[0];
- animate = (range.animate !== undefined) ? range.animate : true;
- this.range.setRange(range.start, range.end, animate);
- }
- else {
- animate = (options && options.animate !== undefined) ? options.animate : true;
- this.range.setRange(start, end, animate);
- }
- };
-
- /**
- * Move the window such that given time is centered on screen.
- * @param {Date | Number | String} time
- * @param {Object} [options] Available options:
- * `animate: boolean | number`
- * If true (default), the range is animated
- * smoothly to the new window.
- * If a number, the number is taken as duration
- * for the animation. Default duration is 500 ms.
- */
- Core.prototype.moveTo = function(time, options) {
- var interval = this.range.end - this.range.start;
- var t = util.convert(time, 'Date').valueOf();
-
- var start = t - interval / 2;
- var end = t + interval / 2;
- var animate = (options && options.animate !== undefined) ? options.animate : true;
-
- this.range.setRange(start, end, animate);
- };
-
- /**
- * Get the visible window
- * @return {{start: Date, end: Date}} Visible range
- */
- Core.prototype.getWindow = function() {
- var range = this.range.getRange();
- return {
- start: new Date(range.start),
- end: new Date(range.end)
- };
- };
-
- /**
- * Force a redraw. Can be overridden by implementations of Core
- */
- Core.prototype.redraw = function() {
- this._redraw();
- };
-
- /**
- * Redraw for internal use. Redraws all components. See also the public
- * method redraw.
- * @protected
- */
- Core.prototype._redraw = function() {
- var resized = false;
- var options = this.options;
- var props = this.props;
- var dom = this.dom;
-
- if (!dom) return; // when destroyed
-
- DateUtil.updateHiddenDates(this.body, this.options.hiddenDates);
-
- // update class names
- if (options.orientation == 'top') {
- util.addClassName(dom.root, 'top');
- util.removeClassName(dom.root, 'bottom');
- }
- else {
- util.removeClassName(dom.root, 'top');
- util.addClassName(dom.root, 'bottom');
- }
-
- // update root width and height options
- dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
- dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
- dom.root.style.width = util.option.asSize(options.width, '');
-
- // calculate border widths
- props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
- props.border.right = props.border.left;
- props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
- props.border.bottom = props.border.top;
- var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
- var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
-
- // workaround for a bug in IE: the clientWidth of an element with
- // a height:0px and overflow:hidden is not calculated and always has value 0
- if (dom.centerContainer.clientHeight === 0) {
- props.border.left = props.border.top;
- props.border.right = props.border.left;
- }
- if (dom.root.clientHeight === 0) {
- borderRootWidth = borderRootHeight;
- }
-
- // calculate the heights. If any of the side panels is empty, we set the height to
- // minus the border width, such that the border will be invisible
- props.center.height = dom.center.offsetHeight;
- props.left.height = dom.left.offsetHeight;
- props.right.height = dom.right.offsetHeight;
- props.top.height = dom.top.clientHeight || -props.border.top;
- props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
-
- // TODO: compensate borders when any of the panels is empty.
-
- // apply auto height
- // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
- var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
- var autoHeight = props.top.height + contentHeight + props.bottom.height +
- borderRootHeight + props.border.top + props.border.bottom;
- dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
-
- // calculate heights of the content panels
- props.root.height = dom.root.offsetHeight;
- props.background.height = props.root.height - borderRootHeight;
- var containerHeight = props.root.height - props.top.height - props.bottom.height -
- borderRootHeight;
- props.centerContainer.height = containerHeight;
- props.leftContainer.height = containerHeight;
- props.rightContainer.height = props.leftContainer.height;
-
- // calculate the widths of the panels
- props.root.width = dom.root.offsetWidth;
- props.background.width = props.root.width - borderRootWidth;
- props.left.width = dom.leftContainer.clientWidth || -props.border.left;
- props.leftContainer.width = props.left.width;
- props.right.width = dom.rightContainer.clientWidth || -props.border.right;
- props.rightContainer.width = props.right.width;
- var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
- props.center.width = centerWidth;
- props.centerContainer.width = centerWidth;
- props.top.width = centerWidth;
- props.bottom.width = centerWidth;
-
- // resize the panels
- dom.background.style.height = props.background.height + 'px';
- dom.backgroundVertical.style.height = props.background.height + 'px';
- dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
- dom.centerContainer.style.height = props.centerContainer.height + 'px';
- dom.leftContainer.style.height = props.leftContainer.height + 'px';
- dom.rightContainer.style.height = props.rightContainer.height + 'px';
-
- dom.background.style.width = props.background.width + 'px';
- dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
- dom.backgroundHorizontal.style.width = props.background.width + 'px';
- dom.centerContainer.style.width = props.center.width + 'px';
- dom.top.style.width = props.top.width + 'px';
- dom.bottom.style.width = props.bottom.width + 'px';
-
- // reposition the panels
- dom.background.style.left = '0';
- dom.background.style.top = '0';
- dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px';
- dom.backgroundVertical.style.top = '0';
- dom.backgroundHorizontal.style.left = '0';
- dom.backgroundHorizontal.style.top = props.top.height + 'px';
- dom.centerContainer.style.left = props.left.width + 'px';
- dom.centerContainer.style.top = props.top.height + 'px';
- dom.leftContainer.style.left = '0';
- dom.leftContainer.style.top = props.top.height + 'px';
- dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
- dom.rightContainer.style.top = props.top.height + 'px';
- dom.top.style.left = props.left.width + 'px';
- dom.top.style.top = '0';
- dom.bottom.style.left = props.left.width + 'px';
- dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
-
- // update the scrollTop, feasible range for the offset can be changed
- // when the height of the Core or of the contents of the center changed
- this._updateScrollTop();
-
- // reposition the scrollable contents
- var offset = this.props.scrollTop;
- if (options.orientation == 'bottom') {
- offset += Math.max(this.props.centerContainer.height - this.props.center.height -
- this.props.border.top - this.props.border.bottom, 0);
- }
- dom.center.style.left = '0';
- dom.center.style.top = offset + 'px';
- dom.left.style.left = '0';
- dom.left.style.top = offset + 'px';
- dom.right.style.left = '0';
- dom.right.style.top = offset + 'px';
-
- // show shadows when vertical scrolling is available
- var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
- var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
- dom.shadowTop.style.visibility = visibilityTop;
- dom.shadowBottom.style.visibility = visibilityBottom;
- dom.shadowTopLeft.style.visibility = visibilityTop;
- dom.shadowBottomLeft.style.visibility = visibilityBottom;
- dom.shadowTopRight.style.visibility = visibilityTop;
- dom.shadowBottomRight.style.visibility = visibilityBottom;
-
- // redraw all components
- this.components.forEach(function (component) {
- resized = component.redraw() || resized;
- });
- if (resized) {
- // keep repainting until all sizes are settled
- var MAX_REDRAWS = 3; // maximum number of consecutive redraws
- if (this.redrawCount < MAX_REDRAWS) {
- this.redrawCount++;
- this._redraw();
- }
- else {
- console.log('WARNING: infinite loop in redraw?');
- }
- this.redrawCount = 0;
- }
-
- this.emit("finishedRedraw");
- };
-
- // TODO: deprecated since version 1.1.0, remove some day
- Core.prototype.repaint = function () {
- throw new Error('Function repaint is deprecated. Use redraw instead.');
- };
-
- /**
- * Set a current time. This can be used for example to ensure that a client's
- * time is synchronized with a shared server time.
- * Only applicable when option `showCurrentTime` is true.
- * @param {Date | String | Number} time A Date, unix timestamp, or
- * ISO date string.
- */
- Core.prototype.setCurrentTime = function(time) {
- if (!this.currentTime) {
- throw new Error('Option showCurrentTime must be true');
- }
-
- this.currentTime.setCurrentTime(time);
- };
-
- /**
- * Get the current time.
- * Only applicable when option `showCurrentTime` is true.
- * @return {Date} Returns the current time.
- */
- Core.prototype.getCurrentTime = function() {
- if (!this.currentTime) {
- throw new Error('Option showCurrentTime must be true');
- }
-
- return this.currentTime.getCurrentTime();
- };
-
- /**
- * Convert a position on screen (pixels) to a datetime
- * @param {int} x Position on the screen in pixels
- * @return {Date} time The datetime the corresponds with given position x
- * @private
- */
- // TODO: move this function to Range
- Core.prototype._toTime = function(x) {
- return DateUtil.toTime(this, x, this.props.center.width);
- };
-
- /**
- * Convert a position on the global screen (pixels) to a datetime
- * @param {int} x Position on the screen in pixels
- * @return {Date} time The datetime the corresponds with given position x
- * @private
- */
- // TODO: move this function to Range
- Core.prototype._toGlobalTime = function(x) {
- return DateUtil.toTime(this, x, this.props.root.width);
- //var conversion = this.range.conversion(this.props.root.width);
- //return new Date(x / conversion.scale + conversion.offset);
- };
-
- /**
- * Convert a datetime (Date object) into a position on the screen
- * @param {Date} time A date
- * @return {int} x The position on the screen in pixels which corresponds
- * with the given date.
- * @private
- */
- // TODO: move this function to Range
- Core.prototype._toScreen = function(time) {
- return DateUtil.toScreen(this, time, this.props.center.width);
- };
-
-
-
- /**
- * Convert a datetime (Date object) into a position on the root
- * This is used to get the pixel density estimate for the screen, not the center panel
- * @param {Date} time A date
- * @return {int} x The position on root in pixels which corresponds
- * with the given date.
- * @private
- */
- // TODO: move this function to Range
- Core.prototype._toGlobalScreen = function(time) {
- return DateUtil.toScreen(this, time, this.props.root.width);
- //var conversion = this.range.conversion(this.props.root.width);
- //return (time.valueOf() - conversion.offset) * conversion.scale;
- };
-
-
- /**
- * Initialize watching when option autoResize is true
- * @private
- */
- Core.prototype._initAutoResize = function () {
- if (this.options.autoResize == true) {
- this._startAutoResize();
- }
- else {
- this._stopAutoResize();
- }
- };
-
- /**
- * Watch for changes in the size of the container. On resize, the Panel will
- * automatically redraw itself.
- * @private
- */
- Core.prototype._startAutoResize = function () {
- var me = this;
-
- this._stopAutoResize();
-
- this._onResize = function() {
- if (me.options.autoResize != true) {
- // stop watching when the option autoResize is changed to false
- me._stopAutoResize();
- return;
- }
-
- if (me.dom.root) {
- // check whether the frame is resized
- // Note: we compare offsetWidth here, not clientWidth. For some reason,
- // IE does not restore the clientWidth from 0 to the actual width after
- // changing the timeline's container display style from none to visible
- if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
- (me.dom.root.offsetHeight != me.props.lastHeight)) {
- me.props.lastWidth = me.dom.root.offsetWidth;
- me.props.lastHeight = me.dom.root.offsetHeight;
-
- me.emit('change');
- }
- }
- };
-
- // add event listener to window resize
- util.addEventListener(window, 'resize', this._onResize);
-
- this.watchTimer = setInterval(this._onResize, 1000);
- };
-
- /**
- * Stop watching for a resize of the frame.
- * @private
- */
- Core.prototype._stopAutoResize = function () {
- if (this.watchTimer) {
- clearInterval(this.watchTimer);
- this.watchTimer = undefined;
- }
-
- // remove event listener on window.resize
- util.removeEventListener(window, 'resize', this._onResize);
- this._onResize = null;
- };
-
- /**
- * Apply a scrollTop
- * @param {Number} scrollTop
- * @returns {Number} scrollTop Returns the applied scrollTop
- * @private
- */
- Core.prototype._setScrollTop = function (scrollTop) {
- this.props.scrollTop = scrollTop;
- this._updateScrollTop();
- return this.props.scrollTop;
- };
-
- /**
- * Update the current scrollTop when the height of the containers has been changed
- * @returns {Number} scrollTop Returns the applied scrollTop
- * @private
- */
- Core.prototype._updateScrollTop = function () {
- // recalculate the scrollTopMin
- var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
- if (scrollTopMin != this.props.scrollTopMin) {
- // in case of bottom orientation, change the scrollTop such that the contents
- // do not move relative to the time axis at the bottom
- if (this.options.orientation == 'bottom') {
- this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
- }
- this.props.scrollTopMin = scrollTopMin;
- }
-
- // limit the scrollTop to the feasible scroll range
- if (this.props.scrollTop > 0) this.props.scrollTop = 0;
- if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
-
- return this.props.scrollTop;
- };
-
- /**
- * Get the current scrollTop
- * @returns {number} scrollTop
- * @private
- */
- Core.prototype._getScrollTop = function () {
- return this.props.scrollTop;
- };
-
- module.exports = Core;
|