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.
998 lines
34 KiB
998 lines
34 KiB
var Emitter = require('emitter-component');
|
|
var Hammer = require('../module/hammer');
|
|
var hammerUtil = require('../hammerUtil');
|
|
var util = require('../util');
|
|
var DataSet = require('../DataSet');
|
|
var DataView = require('../DataView');
|
|
var Range = require('./Range');
|
|
var ItemSet = require('./component/ItemSet');
|
|
var TimeAxis = require('./component/TimeAxis');
|
|
var Activator = require('../shared/Activator');
|
|
var DateUtil = require('./DateUtil');
|
|
var CustomTime = require('./component/CustomTime');
|
|
|
|
/**
|
|
* Create a timeline visualization
|
|
* @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.
|
|
* @protected
|
|
*/
|
|
Core.prototype._create = function (container) {
|
|
this.dom = {};
|
|
|
|
this.dom.container = container;
|
|
|
|
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';
|
|
this.dom.background.className = 'vis-panel vis-background';
|
|
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
|
|
this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
|
|
this.dom.centerContainer.className = 'vis-panel vis-center';
|
|
this.dom.leftContainer.className = 'vis-panel vis-left';
|
|
this.dom.rightContainer.className = 'vis-panel vis-right';
|
|
this.dom.top.className = 'vis-panel vis-top';
|
|
this.dom.bottom.className = 'vis-panel vis-bottom';
|
|
this.dom.left.className = 'vis-content';
|
|
this.dom.center.className = 'vis-content';
|
|
this.dom.right.className = 'vis-content';
|
|
this.dom.shadowTop.className = 'vis-shadow vis-top';
|
|
this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
|
|
this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
|
|
this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
|
|
this.dom.shadowTopRight.className = 'vis-shadow vis-top';
|
|
this.dom.shadowBottomRight.className = 'vis-shadow vis-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));
|
|
this.on('touch', this._onTouch.bind(this));
|
|
this.on('pan', this._onDrag.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);
|
|
this.hammer.get('pinch').set({enable: true});
|
|
this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
|
|
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)
|
|
hammerUtil.onTouch(this.hammer, function (event) {
|
|
me.emit('touch', event);
|
|
}.bind(this));
|
|
|
|
// emulate a release event (emitted after a pan, pinch, tap, or press)
|
|
hammerUtil.onRelease(this.hammer, function (event) {
|
|
me.emit('release', 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.customTimes = [];
|
|
|
|
// store state information needed for touch events
|
|
this.touch = {};
|
|
|
|
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', 'clickToUse', 'dataAttributes', 'hiddenDates'];
|
|
util.selectiveExtend(fields, this.options, options);
|
|
|
|
if ('orientation' in options) {
|
|
if (typeof options.orientation === 'string') {
|
|
this.options.orientation = {
|
|
item: options.orientation,
|
|
axis: options.orientation
|
|
};
|
|
}
|
|
else if (typeof options.orientation === 'object') {
|
|
if ('item' in options.orientation) {
|
|
this.options.orientation.item = options.orientation.item;
|
|
}
|
|
if ('axis' in options.orientation) {
|
|
this.options.orientation.axis = options.orientation.axis;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.options.orientation.axis === 'both') {
|
|
if (!this.timeAxis2) {
|
|
var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);
|
|
timeAxis2.setOptions = function (options) {
|
|
var _options = options ? util.extend({}, options) : {};
|
|
_options.orientation = 'top'; // override the orientation option, always top
|
|
TimeAxis.prototype.setOptions.call(timeAxis2, _options);
|
|
};
|
|
this.components.push(timeAxis2);
|
|
}
|
|
}
|
|
else {
|
|
if (this.timeAxis2) {
|
|
var index = this.components.indexOf(this.timeAxis2);
|
|
if (index !== -1) {
|
|
this.components.splice(index, 1);
|
|
}
|
|
this.timeAxis2.destroy();
|
|
this.timeAxis2 = null;
|
|
}
|
|
}
|
|
|
|
// if the graph2d's drawPoints is a function delegate the callback to the onRender property
|
|
if (typeof options.drawPoints == 'function') {
|
|
options.drawPoints = {
|
|
onRender: options.drawPoints
|
|
};
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ('showCustomTime' in options) {
|
|
throw new Error('Option `showCustomTime` is deprecated. Create a custom time bar via timeline.addCustomTime(time [, id])');
|
|
}
|
|
|
|
// enable/disable autoResize
|
|
this._initAutoResize();
|
|
}
|
|
|
|
// propagate options to all components
|
|
this.components.forEach(component => component.setOptions(options));
|
|
|
|
// enable/disable configure
|
|
if ('configure' in options) {
|
|
if (!this.configurator) {
|
|
this.configurator = this._createConfigurator();
|
|
}
|
|
|
|
this.configurator.setOptions(options.configure);
|
|
|
|
// collect the settings of all components, and pass them to the configuration system
|
|
var appliedOptions = util.deepExtend({}, this.options);
|
|
this.components.forEach(function (component) {
|
|
util.deepExtend(appliedOptions, component.options);
|
|
});
|
|
this.configurator.setModuleOptions({global: appliedOptions});
|
|
}
|
|
|
|
// 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.setItems(null);
|
|
this.setGroups(null);
|
|
|
|
// 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(component => component.destroy());
|
|
|
|
this.body = null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Set a custom time bar
|
|
* @param {Date} time
|
|
* @param {number} [id=undefined] Optional id of the custom time bar to be adjusted.
|
|
*/
|
|
Core.prototype.setCustomTime = function (time, id) {
|
|
var customTimes = this.customTimes.filter(function (component) {
|
|
return id === component.options.id;
|
|
});
|
|
|
|
if (customTimes.length === 0) {
|
|
throw new Error('No custom time bar found with id ' + JSON.stringify(id))
|
|
}
|
|
|
|
if (customTimes.length > 0) {
|
|
customTimes[0].setCustomTime(time);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Retrieve the current custom time.
|
|
* @param {number} [id=undefined] Id of the custom time bar.
|
|
* @return {Date | undefined} customTime
|
|
*/
|
|
Core.prototype.getCustomTime = function(id) {
|
|
var customTimes = this.customTimes.filter(function (component) {
|
|
return component.options.id === id;
|
|
});
|
|
|
|
if (customTimes.length === 0) {
|
|
throw new Error('No custom time bar found with id ' + JSON.stringify(id))
|
|
}
|
|
return customTimes[0].getCustomTime();
|
|
};
|
|
|
|
/**
|
|
* Retrieve meta information from an event.
|
|
* Should be overridden by classes extending Core
|
|
* @param {Event} event
|
|
* @return {Object} An object with related information.
|
|
*/
|
|
Core.prototype.getEventProperties = function (event) {
|
|
return { event: event };
|
|
};
|
|
|
|
/**
|
|
* 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.
|
|
* If not provided, `new Date()` will
|
|
* be used.
|
|
* @param {Number | String} [id=undefined] Id of the new bar. Optional
|
|
* @return {Number | String} Returns the id of the new bar
|
|
*/
|
|
Core.prototype.addCustomTime = function (time, id) {
|
|
var timestamp = time !== undefined
|
|
? util.convert(time, 'Date').valueOf()
|
|
: new Date();
|
|
|
|
var exists = this.customTimes.some(function (customTime) {
|
|
return customTime.options.id === id;
|
|
});
|
|
if (exists) {
|
|
throw new Error('A custom time with id ' + JSON.stringify(id) + ' already exists');
|
|
}
|
|
|
|
var customTime = new CustomTime(this.body, {
|
|
time : timestamp,
|
|
id : id
|
|
});
|
|
|
|
this.customTimes.push(customTime);
|
|
this.components.push(customTime);
|
|
this.redraw();
|
|
|
|
return id;
|
|
};
|
|
|
|
/**
|
|
* 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 customTimes = this.customTimes.filter(function (bar) {
|
|
return (bar.options.id === id);
|
|
});
|
|
|
|
if (customTimes.length === 0) {
|
|
throw new Error('No custom time bar found with id ' + JSON.stringify(id))
|
|
}
|
|
|
|
customTimes.forEach(function (customTime) {
|
|
this.customTimes.splice(this.customTimes.indexOf(customTime), 1);
|
|
this.components.splice(this.components.indexOf(customTime), 1);
|
|
customTime.destroy();
|
|
}.bind(this))
|
|
};
|
|
|
|
|
|
/**
|
|
* 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() || [];
|
|
};
|
|
|
|
/**
|
|
* Set Core window such that it fits all items
|
|
* @param {Object} [options] Available options:
|
|
* `animation: boolean | {duration: number, easingFunction: string}`
|
|
* If true (default), the range is animated
|
|
* smoothly to the new window. An object can be
|
|
* provided to specify duration and easing function.
|
|
* Default duration is 500 ms, and default easing
|
|
* function is 'easeInOutQuad'.
|
|
*/
|
|
Core.prototype.fit = function(options) {
|
|
var range = this.getDataRange();
|
|
|
|
// skip range set if there is no min and max date
|
|
if (range.min === null && range.max === null) {
|
|
return;
|
|
}
|
|
|
|
// apply a margin of 1% left and right of the data
|
|
var interval = range.max - range.min;
|
|
var min = new Date(range.min.valueOf() - interval * 0.01);
|
|
var max = new Date(range.max.valueOf() + interval * 0.01);
|
|
|
|
var animation = (options && options.animation !== undefined) ? options.animation : true;
|
|
this.range.setRange(min, max, animation);
|
|
};
|
|
|
|
/**
|
|
* Calculate the data range of the items start and end dates
|
|
* @returns {{min: Date | null, max: Date | null}}
|
|
* @protected
|
|
*/
|
|
Core.prototype.getDataRange = function() {
|
|
// must be implemented by Timeline and Graph2d
|
|
throw new Error('Cannot invoke abstract method getDataRange');
|
|
};
|
|
|
|
/**
|
|
* 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:
|
|
* `animation: boolean | {duration: number, easingFunction: string}`
|
|
* If true (default), the range is animated
|
|
* smoothly to the new window. An object can be
|
|
* provided to specify duration and easing function.
|
|
* Default duration is 500 ms, and default easing
|
|
* function is 'easeInOutQuad'.
|
|
*/
|
|
Core.prototype.setWindow = function(start, end, options) {
|
|
var animation;
|
|
if (arguments.length == 1) {
|
|
var range = arguments[0];
|
|
animation = (range.animation !== undefined) ? range.animation : true;
|
|
this.range.setRange(range.start, range.end, animation);
|
|
}
|
|
else {
|
|
animation = (options && options.animation !== undefined) ? options.animation : true;
|
|
this.range.setRange(start, end, animation);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Move the window such that given time is centered on screen.
|
|
* @param {Date | Number | String} time
|
|
* @param {Object} [options] Available options:
|
|
* `animation: boolean | {duration: number, easingFunction: string}`
|
|
* If true (default), the range is animated
|
|
* smoothly to the new window. An object can be
|
|
* provided to specify duration and easing function.
|
|
* Default duration is 500 ms, and default easing
|
|
* function is 'easeInOutQuad'.
|
|
*/
|
|
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 animation = (options && options.animation !== undefined) ? options.animation : true;
|
|
|
|
this.range.setRange(start, end, animation);
|
|
};
|
|
|
|
/**
|
|
* 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, 'vis-top');
|
|
util.removeClassName(dom.root, 'vis-bottom');
|
|
}
|
|
else {
|
|
util.removeClassName(dom.root, 'vis-top');
|
|
util.addClassName(dom.root, 'vis-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.item != 'top') {
|
|
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;
|
|
}
|
|
};
|
|
|
|
// 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
|
|
* @protected
|
|
*/
|
|
// 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
|
|
* @protected
|
|
*/
|
|
// 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.
|
|
* @protected
|
|
*/
|
|
// 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.
|
|
* @protected
|
|
*/
|
|
// 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;
|
|
};
|
|
|
|
/**
|
|
* Start moving the timeline vertically
|
|
* @param {Event} event
|
|
* @private
|
|
*/
|
|
Core.prototype._onTouch = function (event) {
|
|
this.touch.allowDragging = true;
|
|
this.touch.initialScrollTop = this.props.scrollTop;
|
|
};
|
|
|
|
/**
|
|
* Start moving the timeline vertically
|
|
* @param {Event} event
|
|
* @private
|
|
*/
|
|
Core.prototype._onPinch = function (event) {
|
|
this.touch.allowDragging = false;
|
|
};
|
|
|
|
/**
|
|
* Move the timeline vertically
|
|
* @param {Event} event
|
|
* @private
|
|
*/
|
|
Core.prototype._onDrag = function (event) {
|
|
// refuse to drag when we where pinching to prevent the timeline make a jump
|
|
// when releasing the fingers in opposite order from the touch screen
|
|
if (!this.touch.allowDragging) return;
|
|
|
|
var delta = event.deltaY;
|
|
|
|
var oldScrollTop = this._getScrollTop();
|
|
var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
|
|
|
|
|
|
if (newScrollTop != oldScrollTop) {
|
|
this._redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
|
|
this.emit("verticalDrag");
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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.item != 'top') {
|
|
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;
|
|
};
|
|
|
|
/**
|
|
* Load a configurator
|
|
* @return {Object}
|
|
* @private
|
|
*/
|
|
Core.prototype._createConfigurator = function () {
|
|
throw new Error('Cannot invoke abstract method _createConfigurator');
|
|
};
|
|
|
|
module.exports = Core;
|