Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
/**
* @file timeline.js
*
* @brief
* The Timeline is an interactive visualization chart to visualize events in
* time, having a start and end date.
* You can freely move and zoom in the timeline by dragging
* and scrolling in the Timeline. Items are optionally dragable. The time
* scale on the axis is adjusted automatically, and supports scales ranging
* from milliseconds to years.
*
* Timeline is part of the CHAP Links library.
*
* Timeline is tested on Firefox 3.6, Safari 5.0, Chrome 6.0, Opera 10.6, and
* Internet Explorer 6+.
*
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2015 Almende B.V.
*
* @author Jos de Jong,
* @date 2015-03-04
* @version 2.9.1
*/
/*
* i18n mods by github user iktuz (https://gist.github.com/iktuz/3749287/)
* added to v2.4.1 with da_DK language by @bjarkebech
*/
/*
* TODO
*
* Add zooming with pinching on Android
*
* Bug: when an item contains a javascript onclick or a link, this does not work
* when the item is not selected (when the item is being selected,
* it is redrawn, which cancels any onclick or link action)
* Bug: when an item contains an image without size, or a css max-width, it is not sized correctly
* Bug: neglect items when they have no valid start/end, instead of throwing an error
* Bug: Pinching on ipad does not work very well, sometimes the page will zoom when pinching vertically
* Bug: cannot set max width for an item, like div.timeline-event-content {white-space: normal; max-width: 100px;}
* Bug on IE in Quirks mode. When you have groups, and delete an item, the groups become invisible
*/
/**
* Declare a unique namespace for CHAP's Common Hybrid Visualisation Library,
* "links"
*/
if (typeof links === 'undefined') {
links = {};
// important: do not use var, as "var links = {};" will overwrite
// the existing links variable value with undefined in IE8, IE7.
}
/**
* Ensure the variable google exists
*/
if (typeof google === 'undefined') {
google = undefined;
// important: do not use var, as "var google = undefined;" will overwrite
// the existing google variable value with undefined in IE8, IE7.
}
// Internet Explorer 8 and older does not support Array.indexOf,
// so we define it here in that case
// http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/
if(!Array.prototype.indexOf) {
Array.prototype.indexOf = function(obj){
for(var i = 0; i < this.length; i++){
if(this[i] == obj){
return i;
}
}
return -1;
}
}
// Internet Explorer 8 and older does not support Array.forEach,
// so we define it here in that case
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn, scope) {
for(var i = 0, len = this.length; i < len; ++i) {
fn.call(scope || this, this[i], i, this);
}
}
}
/**
* @constructor links.Timeline
* The timeline is a visualization chart to visualize events in time.
*
* The timeline is developed in javascript as a Google Visualization Chart.
*
* @param {Element} container The DOM element in which the Timeline will
* be created. Normally a div element.
* @param {Object} options A name/value map containing settings for the
* timeline. Optional.
*/
links.Timeline = function(container, options) {
if (!container) {
// this call was probably only for inheritance, no constructor-code is required
return;
}
// create variables and set default values
this.dom = {};
this.conversion = {};
this.eventParams = {}; // stores parameters for mouse events
this.groups = [];
this.groupIndexes = {};
this.items = [];
this.renderQueue = {
show: [], // Items made visible but not yet added to DOM
hide: [], // Items currently visible but not yet removed from DOM
update: [] // Items with changed data but not yet adjusted DOM
};
this.renderedItems = []; // Items currently rendered in the DOM
this.clusterGenerator = new links.Timeline.ClusterGenerator(this);
this.currentClusters = [];
this.selection = undefined; // stores index and item which is currently selected
this.listeners = {}; // event listener callbacks
// Initialize sizes.
// Needed for IE (which gives an error when you try to set an undefined
// value in a style)
this.size = {
'actualHeight': 0,
'axis': {
'characterMajorHeight': 0,
'characterMajorWidth': 0,
'characterMinorHeight': 0,
'characterMinorWidth': 0,
'height': 0,
'labelMajorTop': 0,
'labelMinorTop': 0,
'line': 0,
'lineMajorWidth': 0,
'lineMinorHeight': 0,
'lineMinorTop': 0,
'lineMinorWidth': 0,
'top': 0
},
'contentHeight': 0,
'contentLeft': 0,
'contentWidth': 0,
'frameHeight': 0,
'frameWidth': 0,
'groupsLeft': 0,
'groupsWidth': 0,
'items': {
'top': 0
}
};
this.dom.container = container;
//
// Let's set the default options first
//
this.options = {
'width': "100%",
'height': "auto",
'minHeight': 0, // minimal height in pixels
'groupMinHeight': 0,
'autoHeight': true,
'eventMargin': 10, // minimal margin between events
'eventMarginAxis': 20, // minimal margin between events and the axis
'dragAreaWidth': 10, // pixels
'min': undefined,
'max': undefined,
'zoomMin': 10, // milliseconds
'zoomMax': 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
'moveable': true,
'zoomable': true,
'selectable': true,
'unselectable': true,
'editable': false,
'snapEvents': true,
'groupsChangeable': true,
'timeChangeable': true,
'showCurrentTime': true, // show a red bar displaying the current time
'showCustomTime': false, // show a blue, draggable bar displaying a custom time
'showMajorLabels': true,
'showMinorLabels': true,
'showNavigation': false,
'showButtonNew': false,
'groupsOnRight': false,
'groupsOrder' : true,
'axisOnTop': false,
'stackEvents': true,
'animate': true,
'animateZoom': true,
'cluster': false,
'clusterMaxItems': 5,
'style': 'box',
'customStackOrder': false, //a function(a,b) for determining stackorder amongst a group of items. Essentially a comparator, -ve value for "a before b" and vice versa
// i18n: Timeline only has built-in English text per default. Include timeline-locales.js to support more localized text.
'locale': 'en',
'MONTHS': ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
'MONTHS_SHORT': ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
'DAYS': ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
'DAYS_SHORT': ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
'ZOOM_IN': "Zoom in",
'ZOOM_OUT': "Zoom out",
'MOVE_LEFT': "Move left",
'MOVE_RIGHT': "Move right",
'NEW': "New",
'CREATE_NEW_EVENT': "Create new event"
};
//
// Now we can set the givenproperties
//
this.setOptions(options);
this.clientTimeOffset = 0; // difference between client time and the time
// set via Timeline.setCurrentTime()
var dom = this.dom;
// remove all elements from the container element.
while (dom.container.hasChildNodes()) {
dom.container.removeChild(dom.container.firstChild);
}
// create a step for drawing the axis
this.step = new links.Timeline.StepDate();
// add standard item types
this.itemTypes = {
box: links.Timeline.ItemBox,
range: links.Timeline.ItemRange,
floatingRange: links.Timeline.ItemFloatingRange,
dot: links.Timeline.ItemDot
};
// initialize data
this.data = [];
this.firstDraw = true;
// date interval must be initialized
this.setVisibleChartRange(undefined, undefined, false);
// render for the first time
this.render();
// fire the ready event
var me = this;
setTimeout(function () {
me.trigger('ready');
}, 0);
};
/**
* Main drawing logic. This is the function that needs to be called
* in the html page, to draw the timeline.
*
* A data table with the events must be provided, and an options table.
*
* @param {google.visualization.DataTable} data
* The data containing the events for the timeline.
* Object DataTable is defined in
* google.visualization.DataTable
* @param {Object} options A name/value map containing settings for the
* timeline. Optional. The use of options here
* is deprecated. Pass timeline options in the
* constructor or use setOptions()
*/
links.Timeline.prototype.draw = function(data, options) {
if (options) {
console.log("WARNING: Passing options in draw() is deprecated. Pass options to the constructur or use setOptions() instead!");
this.setOptions(options);
}
if (this.options.selectable) {
links.Timeline.addClassName(this.dom.frame, "timeline-selectable");
}
// read the data
this.setData(data);
if (this.firstDraw) {
this.setVisibleChartRangeAuto();
}
this.firstDraw = false;
};
/**
* Set options for the timeline.
* Timeline must be redrawn afterwards
* @param {Object} options A name/value map containing settings for the
* timeline. Optional.
*/
links.Timeline.prototype.setOptions = function(options) {
if (options) {
// retrieve parameter values
for (var i in options) {
if (options.hasOwnProperty(i)) {
this.options[i] = options[i];
}
}
// prepare i18n dependent on set locale
if (typeof links.locales !== 'undefined' && this.options.locale !== 'en') {
var localeOpts = links.locales[this.options.locale];
if(localeOpts) {
for (var l in localeOpts) {
if (localeOpts.hasOwnProperty(l)) {
this.options[l] = localeOpts[l];
}
}
}
}
// check for deprecated options
if (options.showButtonAdd != undefined) {
this.options.showButtonNew = options.showButtonAdd;
console.log('WARNING: Option showButtonAdd is deprecated. Use showButtonNew instead');
}
if (options.intervalMin != undefined) {
this.options.zoomMin = options.intervalMin;
console.log('WARNING: Option intervalMin is deprecated. Use zoomMin instead');
}
if (options.intervalMax != undefined) {
this.options.zoomMax = options.intervalMax;
console.log('WARNING: Option intervalMax is deprecated. Use zoomMax instead');
}
if (options.scale && options.step) {
this.step.setScale(options.scale, options.step);
}
}
// validate options
this.options.autoHeight = (this.options.height === "auto");
};
/**
* Get options for the timeline.
*
* @return the options object
*/
links.Timeline.prototype.getOptions = function() {
return this.options;
};
/**
* Add new type of items
* @param {String} typeName Name of new type
* @param {links.Timeline.Item} typeFactory Constructor of items
*/
links.Timeline.prototype.addItemType = function (typeName, typeFactory) {
this.itemTypes[typeName] = typeFactory;
};
/**
* Retrieve a map with the column indexes of the columns by column name.
* For example, the method returns the map
* {
* start: 0,
* end: 1,
* content: 2,
* group: undefined,
* className: undefined
* editable: undefined
* type: undefined
* }
* @param {google.visualization.DataTable} dataTable
* @type {Object} map
*/
links.Timeline.mapColumnIds = function (dataTable) {
var cols = {},
colCount = dataTable.getNumberOfColumns(),
allUndefined = true;
// loop over the columns, and map the column id's to the column indexes
for (var col = 0; col < colCount; col++) {
var id = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
cols[id] = col;
if (id == 'start' || id == 'end' || id == 'content' || id == 'group' ||
id == 'className' || id == 'editable' || id == 'type') {
allUndefined = false;
}
}
// if no labels or ids are defined, use the default mapping
// for start, end, content, group, className, editable, type
if (allUndefined) {
cols.start = 0;
cols.end = 1;
cols.content = 2;
if (colCount > 3) {cols.group = 3}
if (colCount > 4) {cols.className = 4}
if (colCount > 5) {cols.editable = 5}
if (colCount > 6) {cols.type = 6}
}
return cols;
};
/**
* Set data for the timeline
* @param {google.visualization.DataTable | Array} data
*/
links.Timeline.prototype.setData = function(data) {
// unselect any previously selected item
this.unselectItem();
if (!data) {
data = [];
}
// clear all data
this.stackCancelAnimation();
this.clearItems();
this.data = data;
var items = this.items;
this.deleteGroups();
if (google && google.visualization &&
data instanceof google.visualization.DataTable) {
// map the datatable columns
var cols = links.Timeline.mapColumnIds(data);
// read DataTable
for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
items.push(this.createItem({
'start': ((cols.start != undefined) ? data.getValue(row, cols.start) : undefined),
'end': ((cols.end != undefined) ? data.getValue(row, cols.end) : undefined),
'content': ((cols.content != undefined) ? data.getValue(row, cols.content) : undefined),
'group': ((cols.group != undefined) ? data.getValue(row, cols.group) : undefined),
'className': ((cols.className != undefined) ? data.getValue(row, cols.className) : undefined),
'editable': ((cols.editable != undefined) ? data.getValue(row, cols.editable) : undefined),
'type': ((cols.type != undefined) ? data.getValue(row, cols.type) : undefined)
}));
}
}
else if (links.Timeline.isArray(data)) {
// read JSON array
for (var row = 0, rows = data.length; row < rows; row++) {
var itemData = data[row];
var item = this.createItem(itemData);
items.push(item);
}
}
else {
throw "Unknown data type. DataTable or Array expected.";
}
// prepare data for clustering, by filtering and sorting by type
if (this.options.cluster) {
this.clusterGenerator.setData(this.items);
}
this.render({
animate: false
});
};
/**
* Return the original data table.
* @return {google.visualization.DataTable | Array} data
*/
links.Timeline.prototype.getData = function () {
return this.data;
};
/**
* Update the original data with changed start, end or group.
*
* @param {Number} index
* @param {Object} values An object containing some of the following parameters:
* {Date} start,
* {Date} end,
* {String} content,
* {String} group
*/
links.Timeline.prototype.updateData = function (index, values) {
var data = this.data,
prop;
if (google && google.visualization &&
data instanceof google.visualization.DataTable) {
// update the original google DataTable
var missingRows = (index + 1) - data.getNumberOfRows();
if (missingRows > 0) {
data.addRows(missingRows);
}
// map the column id's by name
var cols = links.Timeline.mapColumnIds(data);
// merge all fields from the provided data into the current data
for (prop in values) {
if (values.hasOwnProperty(prop)) {
var col = cols[prop];
if (col == undefined) {
// create new column
var value = values[prop];
var valueType = 'string';
if (typeof(value) == 'number') {valueType = 'number';}
else if (typeof(value) == 'boolean') {valueType = 'boolean';}
else if (value instanceof Date) {valueType = 'datetime';}
col = data.addColumn(valueType, prop);
}
data.setValue(index, col, values[prop]);
// TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)
}
}
}
else if (links.Timeline.isArray(data)) {
// update the original JSON table
var row = data[index];
if (row == undefined) {
row = {};
data[index] = row;
}
// merge all fields from the provided data into the current data
for (prop in values) {
if (values.hasOwnProperty(prop)) {
row[prop] = values[prop];
// TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)
}
}
}
else {
throw "Cannot update data, unknown type of data";
}
};
/**
* Find the item index from a given HTML element
* If no item index is found, undefined is returned
* @param {Element} element
* @return {Number | undefined} index
*/
links.Timeline.prototype.getItemIndex = function(element) {
var e = element,
dom = this.dom,
frame = dom.items.frame,
items = this.items,
index = undefined;
// try to find the frame where the items are located in
while (e.parentNode && e.parentNode !== frame) {
e = e.parentNode;
}
if (e.parentNode === frame) {
// yes! we have found the parent element of all items
// retrieve its id from the array with items
for (var i = 0, iMax = items.length; i < iMax; i++) {
if (items[i].dom === e) {
index = i;
break;
}
}
}
return index;
};
/**
* Find the cluster index from a given HTML element
* If no cluster index is found, undefined is returned
* @param {Element} element
* @return {Number | undefined} index
*/
links.Timeline.prototype.getClusterIndex = function(element) {
var e = element,
dom = this.dom,
frame = dom.items.frame,
clusters = this.clusters,
index = undefined;
if (this.clusters) {
// try to find the frame where the clusters are located in
while (e.parentNode && e.parentNode !== frame) {
e = e.parentNode;
}
if (e.parentNode === frame) {
// yes! we have found the parent element of all clusters
// retrieve its id from the array with clusters
for (var i = 0, iMax = clusters.length; i < iMax; i++) {
if (clusters[i].dom === e) {
index = i;
break;
}
}
}
}
return index;
};
/**
* Find all elements within the start and end range
* If no element is found, returns an empty array
* @param start time
* @param end time
* @return Array itemsInRange
*/
links.Timeline.prototype.getVisibleItems = function (start, end) {
var items = this.items;
var itemsInRange = [];
if (items) {
for (var i = 0, iMax = items.length; i < iMax; i++) {
var item = items[i];
if (item.end) {
// Time range object // NH use getLeft and getRight here
if (start <= item.start && item.end <= end) {
itemsInRange.push({"row": i});
}
} else {
// Point object
if (start <= item.start && item.start <= end) {
itemsInRange.push({"row": i});
}
}
}
}
// var sel = [];
// if (this.selection) {
// sel.push({"row": this.selection.index});
// }
// return sel;
return itemsInRange;
};
/**
* Set a new size for the timeline
* @param {string} width Width in pixels or percentage (for example "800px"
* or "50%")
* @param {string} height Height in pixels or percentage (for example "400px"
* or "30%")
*/
links.Timeline.prototype.setSize = function(width, height) {
if (width) {
this.options.width = width;
this.dom.frame.style.width = width;
}
if (height) {
this.options.height = height;
this.options.autoHeight = (this.options.height === "auto");
if (height !== "auto" ) {
this.dom.frame.style.height = height;
}
}
this.render({
animate: false
});
};
/**
* Set a new value for the visible range int the timeline.
* Set start undefined to include everything from the earliest date to end.
* Set end undefined to include everything from start to the last date.
* Example usage:
* myTimeline.setVisibleChartRange(new Date("2010-08-22"),
* new Date("2010-09-13"));
* @param {Date} start The start date for the timeline. optional
* @param {Date} end The end date for the timeline. optional
* @param {boolean} redraw Optional. If true (default) the Timeline is
* directly redrawn
*/
links.Timeline.prototype.setVisibleChartRange = function(start, end, redraw) {
var range = {};
if (!start || !end) {
// retrieve the date range of the items
range = this.getDataRange(true);
}
if (!start) {
if (end) {
if (range.min && range.min.valueOf() < end.valueOf()) {
// start of the data
start = range.min;
}
else {
// 7 days before the end
start = new Date(end.valueOf());
start.setDate(start.getDate() - 7);
}
}
else {
// default of 3 days ago
start = new Date();
start.setDate(start.getDate() - 3);
}
}
if (!end) {
if (range.max) {
// end of the data
end = range.max;
}
else {
// 7 days after start
end = new Date(start.valueOf());
end.setDate(end.getDate() + 7);
}
}
// prevent start Date <= end Date
if (end <= start) {
end = new Date(start.valueOf());
end.setDate(end.getDate() + 7);
}
// limit to the allowed range (don't let this do by applyRange,
// because that method will try to maintain the interval (end-start)
var min = this.options.min ? this.options.min : undefined; // date
if (min != undefined && start.valueOf() < min.valueOf()) {
start = new Date(min.valueOf()); // date
}
var max = this.options.max ? this.options.max : undefined; // date
if (max != undefined && end.valueOf() > max.valueOf()) {
end = new Date(max.valueOf()); // date
}
this.applyRange(start, end);
if (redraw == undefined || redraw == true) {
this.render({
animate: false
}); // TODO: optimize, no reflow needed
}
else {
this.recalcConversion();
}
};
/**
* Change the visible chart range such that all items become visible
*/
links.Timeline.prototype.setVisibleChartRangeAuto = function() {
if (this.options && (this.options.start || this.options.end)) {
this.setVisibleChartRange(this.options.start, this.options.end);
} else {
var range = this.getDataRange(true);
this.setVisibleChartRange(range.min, range.max);
}
};
/**
* Adjust the visible range such that the current time is located in the center
* of the timeline
*/
links.Timeline.prototype.setVisibleChartRangeNow = function() {
var now = new Date();
var diff = (this.end.valueOf() - this.start.valueOf());
var startNew = new Date(now.valueOf() - diff/2);
var endNew = new Date(startNew.valueOf() + diff);
this.setVisibleChartRange(startNew, endNew);
};
/**
* Retrieve the current visible range in the timeline.
* @return {Object} An object with start and end properties
*/
links.Timeline.prototype.getVisibleChartRange = function() {
return {
'start': new Date(this.start.valueOf()),
'end': new Date(this.end.valueOf())
};
};
/**
* Get the date range of the items.
* @param {boolean} [withMargin] If true, 5% of whitespace is added to the
* left and right of the range. Default is false.
* @return {Object} range An object with parameters min and max.
* - {Date} min is the lowest start date of the items
* - {Date} max is the highest start or end date of the items
* If no data is available, the values of min and max
* will be undefined
*/
links.Timeline.prototype.getDataRange = function (withMargin) {
var items = this.items,
min = undefined, // number
max = undefined; // number
if (items) {
for (var i = 0, iMax = items.length; i < iMax; i++) {
var item = items[i],
start = item.start != undefined ? item.start.valueOf() : undefined,
end = item.end != undefined ? item.end.valueOf() : start;
if (start != undefined) {
min = (min != undefined) ? Math.min(min.valueOf(), start.valueOf()) : start;
}
if (end != undefined) {
max = (max != undefined) ? Math.max(max.valueOf(), end.valueOf()) : end;
}
}
}
if (min && max && withMargin) {
// zoom out 5% such that you have a little white space on the left and right
var diff = (max - min);
min = min - diff * 0.05;
max = max + diff * 0.05;
}
return {
'min': min != undefined ? new Date(min) : undefined,
'max': max != undefined ? new Date(max) : undefined
};
};
/**
* Re-render (reflow and repaint) all components of the Timeline: frame, axis,
* items, ...
* @param {Object} [options] Available options:
* {boolean} renderTimesLeft Number of times the
* render may be repeated
* 5 times by default.
* {boolean} animate takes options.animate
* as default value
*/
links.Timeline.prototype.render = function(options) {
var frameResized = this.reflowFrame();
var axisResized = this.reflowAxis();
var groupsResized = this.reflowGroups();
var itemsResized = this.reflowItems();
var resized = (frameResized || axisResized || groupsResized || itemsResized);
// TODO: only stackEvents/filterItems when resized or changed. (gives a bootstrap issue).
// if (resized) {
var animate = this.options.animate;
if (options && options.animate != undefined) {
animate = options.animate;
}
this.recalcConversion();
this.clusterItems();
this.filterItems();
this.stackItems(animate);
this.recalcItems();
// TODO: only repaint when resized or when filterItems or stackItems gave a change?
var needsReflow = this.repaint();
// re-render once when needed (prevent endless re-render loop)
if (needsReflow) {
var renderTimesLeft = options ? options.renderTimesLeft : undefined;
if (renderTimesLeft == undefined) {
renderTimesLeft = 5;
}
if (renderTimesLeft > 0) {
this.render({
'animate': options ? options.animate: undefined,
'renderTimesLeft': (renderTimesLeft - 1)
});
}
}
};
/**
* Repaint all components of the Timeline
* @return {boolean} needsReflow Returns true if the DOM is changed such that
* a reflow is needed.
*/
links.Timeline.prototype.repaint = function() {
var frameNeedsReflow = this.repaintFrame();
var axisNeedsReflow = this.repaintAxis();
var groupsNeedsReflow = this.repaintGroups();
var itemsNeedsReflow = this.repaintItems();
this.repaintCurrentTime();
this.repaintCustomTime();
return (frameNeedsReflow || axisNeedsReflow || groupsNeedsReflow || itemsNeedsReflow);
};
/**
* Reflow the timeline frame
* @return {boolean} resized Returns true if any of the frame elements
* have been resized.
*/
links.Timeline.prototype.reflowFrame = function() {
var dom = this.dom,
options = this.options,
size = this.size,
resized = false;
// Note: IE7 has issues with giving frame.clientWidth, therefore I use offsetWidth instead
var frameWidth = dom.frame ? dom.frame.offsetWidth : 0,
frameHeight = dom.frame ? dom.frame.clientHeight : 0;
resized = resized || (size.frameWidth !== frameWidth);
resized = resized || (size.frameHeight !== frameHeight);
size.frameWidth = frameWidth;
size.frameHeight = frameHeight;
return resized;
};
/**
* repaint the Timeline frame
* @return {boolean} needsReflow Returns true if the DOM is changed such that
* a reflow is needed.
*/
links.Timeline.prototype.repaintFrame = function() {
var needsReflow = false,
dom = this.dom,
options = this.options,
size = this.size;
// main frame
if (!dom.frame) {
dom.frame = document.createElement("DIV");
dom.frame.className = "timeline-frame ui-widget ui-widget-content ui-corner-all";
dom.container.appendChild(dom.frame);
needsReflow = true;
}
var height = options.autoHeight ?
(size.actualHeight + "px") :
(options.height || "100%");
var width = options.width || "100%";
needsReflow = needsReflow || (dom.frame.style.height != height);
needsReflow = needsReflow || (dom.frame.style.width != width);
dom.frame.style.height = height;
dom.frame.style.width = width;
// contents
if (!dom.content) {
// create content box where the axis and items will be created
dom.content = document.createElement("DIV");
dom.content.className = "timeline-content";
dom.frame.appendChild(dom.content);
var timelines = document.createElement("DIV");
timelines.style.position = "absolute";
timelines.style.left = "0px";
timelines.style.top = "0px";
timelines.style.height = "100%";
timelines.style.width = "0px";
dom.content.appendChild(timelines);
dom.contentTimelines = timelines;
var params = this.eventParams,
me = this;
if (!params.onMouseDown) {
params.onMouseDown = function (event) {me.onMouseDown(event);};
links.Timeline.addEventListener(dom.content, "mousedown", params.onMouseDown);
}
if (!params.onTouchStart) {
params.onTouchStart = function (event) {me.onTouchStart(event);};
links.Timeline.addEventListener(dom.content, "touchstart", params.onTouchStart);
}
if (!params.onMouseWheel) {
params.onMouseWheel = function (event) {me.onMouseWheel(event);};
links.Timeline.addEventListener(dom.content, "mousewheel", params.onMouseWheel);
}
if (!params.onDblClick) {
params.onDblClick = function (event) {me.onDblClick(event);};
links.Timeline.addEventListener(dom.content, "dblclick", params.onDblClick);
}
needsReflow = true;
}
dom.content.style.left = size.contentLeft + "px";
dom.content.style.top = "0px";
dom.content.style.width = size.contentWidth + "px";
dom.content.style.height = size.frameHeight + "px";
this.repaintNavigation();
return needsReflow;
};
/**
* Reflow the timeline axis. Calculate its height, width, positioning, etc...
* @return {boolean} resized returns true if the axis is resized
*/
links.Timeline.prototype.reflowAxis = function() {
var resized = false,
dom = this.dom,
options = this.options,
size = this.size,
axisDom = dom.axis;
var characterMinorWidth = (axisDom && axisDom.characterMinor) ? axisDom.characterMinor.clientWidth : 0,
characterMinorHeight = (axisDom && axisDom.characterMinor) ? axisDom.characterMinor.clientHeight : 0,
characterMajorWidth = (axisDom && axisDom.characterMajor) ? axisDom.characterMajor.clientWidth : 0,
characterMajorHeight = (axisDom && axisDom.characterMajor) ? axisDom.characterMajor.clientHeight : 0,
axisHeight = (options.showMinorLabels ? characterMinorHeight : 0) +
(options.showMajorLabels ? characterMajorHeight : 0);
var axisTop = options.axisOnTop ? 0 : size.frameHeight - axisHeight,
axisLine = options.axisOnTop ? axisHeight : axisTop;
resized = resized || (size.axis.top !== axisTop);
resized = resized || (size.axis.line !== axisLine);
resized = resized || (size.axis.height !== axisHeight);
size.axis.top = axisTop;
size.axis.line = axisLine;
size.axis.height = axisHeight;
size.axis.labelMajorTop = options.axisOnTop ? 0 : axisLine +
(options.showMinorLabels ? characterMinorHeight : 0);
size.axis.labelMinorTop = options.axisOnTop ?
(options.showMajorLabels ? characterMajorHeight : 0) :
axisLine;
size.axis.lineMinorTop = options.axisOnTop ? size.axis.labelMinorTop : 0;
size.axis.lineMinorHeight = options.showMajorLabels ?
size.frameHeight - characterMajorHeight:
size.frameHeight;
if (axisDom && axisDom.minorLines && axisDom.minorLines.length) {
size.axis.lineMinorWidth = axisDom.minorLines[0].offsetWidth;
}
else {
size.axis.lineMinorWidth = 1;
}
if (axisDom && axisDom.majorLines && axisDom.majorLines.length) {
size.axis.lineMajorWidth = axisDom.majorLines[0].offsetWidth;
}
else {
size.axis.lineMajorWidth = 1;
}
resized = resized || (size.axis.characterMinorWidth !== characterMinorWidth);
resized = resized || (size.axis.characterMinorHeight !== characterMinorHeight);
resized = resized || (size.axis.characterMajorWidth !== characterMajorWidth);
resized = resized || (size.axis.characterMajorHeight !== characterMajorHeight);
size.axis.characterMinorWidth = characterMinorWidth;
size.axis.characterMinorHeight = characterMinorHeight;
size.axis.characterMajorWidth = characterMajorWidth;
size.axis.characterMajorHeight = characterMajorHeight;
var contentHeight = Math.max(size.frameHeight - axisHeight, 0);
size.contentLeft = options.groupsOnRight ? 0 : size.groupsWidth;
size.contentWidth = Math.max(size.frameWidth - size.groupsWidth, 0);
size.contentHeight = contentHeight;
return resized;
};
/**
* Redraw the timeline axis with minor and major labels
* @return {boolean} needsReflow Returns true if the DOM is changed such
* that a reflow is needed.
*/
links.Timeline.prototype.repaintAxis = function() {
var needsReflow = false,
dom = this.dom,
options = this.options,
size = this.size,
step = this.step;
var axis = dom.axis;
if (!axis) {
axis = {};
dom.axis = axis;
}
if (!size.axis.properties) {
size.axis.properties = {};
}
if (!axis.minorTexts) {
axis.minorTexts = [];
}
if (!axis.minorLines) {
axis.minorLines = [];
}
if (!axis.majorTexts) {
axis.majorTexts = [];
}
if (!axis.majorLines) {
axis.majorLines = [];
}
if (!axis.frame) {
axis.frame = document.createElement("DIV");
axis.frame.style.position = "absolute";
axis.frame.style.left = "0px";
axis.frame.style.top = "0px";
dom.content.appendChild(axis.frame);
}
// take axis offline
dom.content.removeChild(axis.frame);
axis.frame.style.width = (size.contentWidth) + "px";
axis.frame.style.height = (size.axis.height) + "px";
// the drawn axis is more wide than the actual visual part, such that
// the axis can be dragged without having to redraw it each time again.
var start = this.screenToTime(0);
var end = this.screenToTime(size.contentWidth);
// calculate minimum step (in milliseconds) based on character size
if (size.axis.characterMinorWidth) {
this.minimumStep = this.screenToTime(size.axis.characterMinorWidth * 6) -
this.screenToTime(0);
step.setRange(start, end, this.minimumStep);
}
var charsNeedsReflow = this.repaintAxisCharacters();
needsReflow = needsReflow || charsNeedsReflow;
// The current labels on the axis will be re-used (much better performance),
// therefore, the repaintAxis method uses the mechanism with
// repaintAxisStartOverwriting, repaintAxisEndOverwriting, and
// this.size.axis.properties is used.
this.repaintAxisStartOverwriting();
step.start();
var xFirstMajorLabel = undefined;
var max = 0;
while (!step.end() && max < 1000) {
max++;
var cur = step.getCurrent(),
x = this.timeToScreen(cur),
isMajor = step.isMajor();
if (options.showMinorLabels) {
this.repaintAxisMinorText(x, step.getLabelMinor(options));
}
if (isMajor && options.showMajorLabels) {
if (x > 0) {
if (xFirstMajorLabel == undefined) {
xFirstMajorLabel = x;
}
this.repaintAxisMajorText(x, step.getLabelMajor(options));
}
this.repaintAxisMajorLine(x);
}
else {
this.repaintAxisMinorLine(x);
}
step.next();
}
// create a major label on the left when needed
if (options.showMajorLabels) {
var leftTime = this.screenToTime(0),
leftText = this.step.getLabelMajor(options, leftTime),
width = leftText.length * size.axis.characterMajorWidth + 10; // upper bound estimation
if (xFirstMajorLabel == undefined || width < xFirstMajorLabel) {
this.repaintAxisMajorText(0, leftText, leftTime);
}
}
// cleanup left over labels
this.repaintAxisEndOverwriting();
this.repaintAxisHorizontal();
// put axis online
dom.content.insertBefore(axis.frame, dom.content.firstChild);
return needsReflow;
};
/**
* Create characters used to determine the size of text on the axis
* @return {boolean} needsReflow Returns true if the DOM is changed such that
* a reflow is needed.
*/
links.Timeline.prototype.repaintAxisCharacters = function () {
// calculate the width and height of a single character
// this is used to calculate the step size, and also the positioning of the
// axis
var needsReflow = false,
dom = this.dom,
axis = dom.axis,
text;
if (!axis.characterMinor) {
text = document.createTextNode("0");
var characterMinor = document.createElement("DIV");
characterMinor.className = "timeline-axis-text timeline-axis-text-minor";
characterMinor.appendChild(text);
characterMinor.style.position = "absolute";
characterMinor.style.visibility = "hidden";
characterMinor.style.paddingLeft = "0px";
characterMinor.style.paddingRight = "0px";
axis.frame.appendChild(characterMinor);
axis.characterMinor = characterMinor;
needsReflow = true;
}
if (!axis.characterMajor) {
text = document.createTextNode("0");
var characterMajor = document.createElement("DIV");
characterMajor.className = "timeline-axis-text timeline-axis-text-major";
characterMajor.appendChild(text);
characterMajor.style.position = "absolute";
characterMajor.style.visibility = "hidden";
characterMajor.style.paddingLeft = "0px";
characterMajor.style.paddingRight = "0px";
axis.frame.appendChild(characterMajor);
axis.characterMajor = characterMajor;
needsReflow = true;
}
return needsReflow;
};
/**
* Initialize redraw of the axis. All existing labels and lines will be
* overwritten and reused.
*/
links.Timeline.prototype.repaintAxisStartOverwriting = function () {
var properties = this.size.axis.properties;
properties.minorTextNum = 0;
properties.minorLineNum = 0;
properties.majorTextNum = 0;
properties.majorLineNum = 0;
};
/**
* End of overwriting HTML DOM elements of the axis.
* remaining elements will be removed
*/
links.Timeline.prototype.repaintAxisEndOverwriting = function () {
var dom = this.dom,
props = this.size.axis.properties,
frame = this.dom.axis.frame,
num;
// remove leftovers
var minorTexts = dom.axis.minorTexts;
num = props.minorTextNum;
while (minorTexts.length > num) {
var minorText = minorTexts[num];
frame.removeChild(minorText);
minorTexts.splice(num, 1);
}
var minorLines = dom.axis.minorLines;
num = props.minorLineNum;
while (minorLines.length > num) {
var minorLine = minorLines[num];
frame.removeChild(minorLine);
minorLines.splice(num, 1);
}
var majorTexts = dom.axis.majorTexts;
num = props.majorTextNum;
while (majorTexts.length > num) {
var majorText = majorTexts[num];
frame.removeChild(majorText);
majorTexts.splice(num, 1);
}
var majorLines = dom.axis.majorLines;
num = props.majorLineNum;
while (majorLines.length > num) {
var majorLine = majorLines[num];
frame.removeChild(majorLine);
majorLines.splice(num, 1);
}
};
/**
* Repaint the horizontal line and background of the axis
*/
links.Timeline.prototype.repaintAxisHorizontal = function() {
var axis = this.dom.axis,
size = this.size,
options = this.options;
// line behind all axis elements (possibly having a background color)
var hasAxis = (options.showMinorLabels || options.showMajorLabels);
if (hasAxis) {
if (!axis.backgroundLine) {
// create the axis line background (for a background color or so)
var backgroundLine = document.createElement("DIV");
backgroundLine.className = "timeline-axis";
backgroundLine.style.position = "absolute";
backgroundLine.style.left = "0px";
backgroundLine.style.width = "100%";
backgroundLine.style.border = "none";
axis.frame.insertBefore(backgroundLine, axis.frame.firstChild);
axis.backgroundLine = backgroundLine;
}
if (axis.backgroundLine) {
axis.backgroundLine.style.top = size.axis.top + "px";
axis.backgroundLine.style.height = size.axis.height + "px";
}
}
else {
if (axis.backgroundLine) {
axis.frame.removeChild(axis.backgroundLine);
delete axis.backgroundLine;
}
}
// line before all axis elements
if (hasAxis) {
if (axis.line) {
// put this line at the end of all childs
var line = axis.frame.removeChild(axis.line);
axis.frame.appendChild(line);
}
else {
// make the axis line
var line = document.createElement("DIV");
line.className = "timeline-axis";
line.style.position = "absolute";
line.style.left = "0px";
line.style.width = "100%";
line.style.height = "0px";
axis.frame.appendChild(line);
axis.line = line;
}
axis.line.style.top = size.axis.line + "px";
}
else {
if (axis.line && axis.line.parentElement) {
axis.frame.removeChild(axis.line);
delete axis.line;
}
}
};
/**
* Create a minor label for the axis at position x
* @param {Number} x
* @param {String} text
*/
links.Timeline.prototype.repaintAxisMinorText = function (x, text) {
var size = this.size,
dom = this.dom,
props = size.axis.properties,
frame = dom.axis.frame,
minorTexts = dom.axis.minorTexts,
index = props.minorTextNum,
label;
if (index < minorTexts.length) {
label = minorTexts[index]
}
else {
// create new label
var content = document.createTextNode("");
label = document.createElement("DIV");
label.appendChild(content);
label.className = "timeline-axis-text timeline-axis-text-minor";
label.style.position = "absolute";
frame.appendChild(label);
minorTexts.push(label);
}
label.childNodes[0].nodeValue = text;
label.style.left = x + "px";
label.style.top = size.axis.labelMinorTop + "px";
//label.title = title; // TODO: this is a heavy operation
props.minorTextNum++;
};
/**
* Create a minor line for the axis at position x
* @param {Number} x
*/
links.Timeline.prototype.repaintAxisMinorLine = function (x) {
var axis = this.size.axis,
dom = this.dom,
props = axis.properties,
frame = dom.axis.frame,
minorLines = dom.axis.minorLines,
index = props.minorLineNum,
line;
if (index < minorLines.length) {
line = minorLines[index];
}
else {
// create vertical line
line = document.createElement("DIV");
line.className = "timeline-axis-grid timeline-axis-grid-minor";
line.style.position = "absolute";
line.style.width = "0px";
frame.appendChild(line);
minorLines.push(line);
}
line.style.top = axis.lineMinorTop + "px";
line.style.height = axis.lineMinorHeight + "px";
line.style.left = (x - axis.lineMinorWidth/2) + "px";
props.minorLineNum++;
};
/**
* Create a Major label for the axis at position x
* @param {Number} x
* @param {String} text
*/
links.Timeline.prototype.repaintAxisMajorText = function (x, text) {
var size = this.size,
props = size.axis.properties,
frame = this.dom.axis.frame,
majorTexts = this.dom.axis.majorTexts,
index = props.majorTextNum,
label;
if (index < majorTexts.length) {
label = majorTexts[index];
}
else {
// create label
var content = document.createTextNode(text);
label = document.createElement("DIV");
label.className = "timeline-axis-text timeline-axis-text-major";
label.appendChild(content);
label.style.position = "absolute";
label.style.top = "0px";
frame.appendChild(label);
majorTexts.push(label);
}
label.childNodes[0].nodeValue = text;
label.style.top = size.axis.labelMajorTop + "px";
label.style.left = x + "px";
//label.title = title; // TODO: this is a heavy operation
props.majorTextNum ++;
};
/**
* Create a Major line for the axis at position x
* @param {Number} x
*/
links.Timeline.prototype.repaintAxisMajorLine = function (x) {
var size = this.size,
props = size.axis.properties,
axis = this.size.axis,
frame = this.dom.axis.frame,
majorLines = this.dom.axis.majorLines,
index = props.majorLineNum,
line;
if (index < majorLines.length) {
line = majorLines[index];
}
else {
// create vertical line
line = document.createElement("DIV");
line.className = "timeline-axis-grid timeline-axis-grid-major";
line.style.position = "absolute";
line.style.top = "0px";
line.style.width = "0px";
frame.appendChild(line);
majorLines.push(line);
}
line.style.left = (x - axis.lineMajorWidth/2) + "px";
line.style.height = size.frameHeight + "px";
props.majorLineNum ++;
};
/**
* Reflow all items, retrieve their actual size
* @return {boolean} resized returns true if any of the items is resized
*/
links.Timeline.prototype.reflowItems = function() {
var resized = false,
i,
iMax,
group,
groups = this.groups,
renderedItems = this.renderedItems;
if (groups) { // TODO: need to check if labels exists?
// loop through all groups to reset the items height
groups.forEach(function (group) {
group.itemsHeight = group.labelHeight || 0;
});
}
// loop through the width and height of all visible items
for (i = 0, iMax = renderedItems.length; i < iMax; i++) {
var item = renderedItems[i],
domItem = item.dom;
group = item.group;
if (domItem) {
// TODO: move updating width and height into item.reflow
var width = domItem ? domItem.clientWidth : 0;
var height = domItem ? domItem.clientHeight : 0;
resized = resized || (item.width != width);
resized = resized || (item.height != height);
item.width = width;
item.height = height;
//item.borderWidth = (domItem.offsetWidth - domItem.clientWidth - 2) / 2; // TODO: borderWidth
item.reflow();
}
if (group) {
group.itemsHeight = Math.max(this.options.groupMinHeight,group.itemsHeight ?
Math.max(group.itemsHeight, item.height) :
item.height);
}
}
return resized;
};
/**
* Recalculate item properties:
* - the height of each group.
* - the actualHeight, from the stacked items or the sum of the group heights
* @return {boolean} resized returns true if any of the items properties is
* changed
*/
links.Timeline.prototype.recalcItems = function () {
var resized = false,
i,
iMax,
item,
finalItem,
finalItems,
group,
groups = this.groups,
size = this.size,
options = this.options,
renderedItems = this.renderedItems;
var actualHeight = 0;
if (groups.length == 0) {
// calculate actual height of the timeline when there are no groups
// but stacked items
if (options.autoHeight || options.cluster) {
var min = 0,
max = 0;
if (this.stack && this.stack.finalItems) {
// adjust the offset of all finalItems when the actualHeight has been changed
finalItems = this.stack.finalItems;
finalItem = finalItems[0];
if (finalItem && finalItem.top) {
min = finalItem.top;
max = finalItem.top + finalItem.height;
}
for (i = 1, iMax = finalItems.length; i < iMax; i++) {
finalItem = finalItems[i];
min = Math.min(min, finalItem.top);
max = Math.max(max, finalItem.top + finalItem.height);
}
}
else {
item = renderedItems[0];
if (item && item.top) {
min = item.top;
max = item.top + item.height;
}
for (i = 1, iMax = renderedItems.length; i < iMax; i++) {
item = renderedItems[i];
if (item.top) {
min = Math.min(min, item.top);
max = Math.max(max, (item.top + item.height));
}
}
}
actualHeight = (max - min) + 2 * options.eventMarginAxis + size.axis.height;
if (actualHeight < options.minHeight) {
actualHeight = options.minHeight;
}
if (size.actualHeight != actualHeight && options.autoHeight && !options.axisOnTop) {
// adjust the offset of all items when the actualHeight has been changed
var diff = actualHeight - size.actualHeight;
if (this.stack && this.stack.finalItems) {
finalItems = this.stack.finalItems;
for (i = 0, iMax = finalItems.length; i < iMax; i++) {
finalItems[i].top += diff;
finalItems[i].item.top += diff;
}
}
else {
for (i = 0, iMax = renderedItems.length; i < iMax; i++) {
renderedItems[i].top += diff;
}
}
}
}
}
else {
// loop through all groups to get the height of each group, and the
// total height
actualHeight = size.axis.height + 2 * options.eventMarginAxis;
for (i = 0, iMax = groups.length; i < iMax; i++) {
group = groups[i];
//
// TODO: Do we want to apply a max height? how ?
//
var groupHeight = group.itemsHeight;
resized = resized || (groupHeight != group.height);
group.height = Math.max(groupHeight, options.groupMinHeight);
actualHeight += groups[i].height + options.eventMargin;
}
// calculate top positions of the group labels and lines
var eventMargin = options.eventMargin,
top = options.axisOnTop ?
options.eventMarginAxis + eventMargin/2 :
size.contentHeight - options.eventMarginAxis + eventMargin/ 2,
axisHeight = size.axis.height;
for (i = 0, iMax = groups.length; i < iMax; i++) {
group = groups[i];
if (options.axisOnTop) {
group.top = top + axisHeight;
group.labelTop = top + axisHeight + (group.height - group.labelHeight) / 2;
group.lineTop = top + axisHeight + group.height + eventMargin/2;
top += group.height + eventMargin;
}
else {
top -= group.height + eventMargin;
group.top = top;
group.labelTop = top + (group.height - group.labelHeight) / 2;
group.lineTop = top - eventMargin/2;
}
}
resized = true;
}
if (actualHeight < options.minHeight) {
actualHeight = options.minHeight;
}
resized = resized || (actualHeight != size.actualHeight);
size.actualHeight = actualHeight;
return resized;
};
/**
* This method clears the (internal) array this.items in a safe way: neatly
* cleaning up the DOM, and accompanying arrays this.renderedItems and
* the created clusters.
*/
links.Timeline.prototype.clearItems = function() {
// add all visible items to the list to be hidden
var hideItems = this.renderQueue.hide;
this.renderedItems.forEach(function (item) {
hideItems.push(item);
});
// clear the cluster generator
this.clusterGenerator.clear();
// actually clear the items
this.items = [];
};
/**
* Repaint all items
* @return {boolean} needsReflow Returns true if the DOM is changed such that
* a reflow is needed.
*/
links.Timeline.prototype.repaintItems = function() {
var i, iMax, item, index;
var needsReflow = false,
dom = this.dom,
size = this.size,
timeline = this,
renderedItems = this.renderedItems;
if (!dom.items) {
dom.items = {};
}
// draw the frame containing the items
var frame = dom.items.frame;
if (!frame) {
frame = document.createElement("DIV");
frame.style.position = "relative";
dom.content.appendChild(frame);
dom.items.frame = frame;
}
frame.style.left = "0px";
frame.style.top = size.items.top + "px";
frame.style.height = "0px";
// Take frame offline (for faster manipulation of the DOM)
dom.content.removeChild(frame);
// process the render queue with changes
var queue = this.renderQueue;
var newImageUrls = [];
needsReflow = needsReflow ||
(queue.show.length > 0) ||
(queue.update.length > 0) ||
(queue.hide.length > 0); // TODO: reflow needed on hide of items?
while (item = queue.show.shift()) {
item.showDOM(frame);
item.getImageUrls(newImageUrls);
renderedItems.push(item);
}
while (item = queue.update.shift()) {
item.updateDOM(frame);
item.getImageUrls(newImageUrls);
index = this.renderedItems.indexOf(item);
if (index == -1) {
renderedItems.push(item);
}
}
while (item = queue.hide.shift()) {
item.hideDOM(frame);
index = this.renderedItems.indexOf(item);
if (index != -1) {
renderedItems.splice(index, 1);
}
}
// reposition all visible items
renderedItems.forEach(function (item) {
item.updatePosition(timeline);
});
// redraw the delete button and dragareas of the selected item (if any)
this.repaintDeleteButton();
this.repaintDragAreas();
// put frame online again
dom.content.appendChild(frame);
if (newImageUrls.length) {
// retrieve all image sources from the items, and set a callback once
// all images are retrieved
var callback = function () {
timeline.render();
};
var sendCallbackWhenAlreadyLoaded = false;
links.imageloader.loadAll(newImageUrls, callback, sendCallbackWhenAlreadyLoaded);
}
return needsReflow;
};
/**
* Reflow the size of the groups
* @return {boolean} resized Returns true if any of the frame elements
* have been resized.
*/
links.Timeline.prototype.reflowGroups = function() {
var resized = false,
options = this.options,
size = this.size,
dom = this.dom;
// calculate the groups width and height
// TODO: only update when data is changed! -> use an updateSeq
var groupsWidth = 0;
// loop through all groups to get the labels width and height
var groups = this.groups;
var labels = this.dom.groups ? this.dom.groups.labels : [];
for (var i = 0, iMax = groups.length; i < iMax; i++) {
var group = groups[i];
var label = labels[i];
group.labelWidth = label ? label.clientWidth : 0;
group.labelHeight = label ? label.clientHeight : 0;
group.width = group.labelWidth; // TODO: group.width is redundant with labelWidth
groupsWidth = Math.max(groupsWidth, group.width);
}
// limit groupsWidth to the groups width in the options
if (options.groupsWidth !== undefined) {
groupsWidth = dom.groups && dom.groups.frame ? dom.groups.frame.clientWidth : 0;
}
// compensate for the border width. TODO: calculate the real border width
groupsWidth += 1;
var groupsLeft = options.groupsOnRight ? size.frameWidth - groupsWidth : 0;
resized = resized || (size.groupsWidth !== groupsWidth);
resized = resized || (size.groupsLeft !== groupsLeft);
size.groupsWidth = groupsWidth;
size.groupsLeft = groupsLeft;
return resized;
};
/**
* Redraw the group labels
*/
links.Timeline.prototype.repaintGroups = function() {
var dom = this.dom,
timeline = this,
options = this.options,
size = this.size,
groups = this.groups;
if (dom.groups === undefined) {
dom.groups = {};
}
var labels = dom.groups.labels;
if (!labels) {
labels = [];
dom.groups.labels = labels;
}
var labelLines = dom.groups.labelLines;
if (!labelLines) {
labelLines = [];
dom.groups.labelLines = labelLines;
}
var itemLines = dom.groups.itemLines;
if (!itemLines) {
itemLines = [];
dom.groups.itemLines = itemLines;
}
// create the frame for holding the groups
var frame = dom.groups.frame;
if (!frame) {
frame = document.createElement("DIV");
frame.className = "timeline-groups-axis";
frame.style.position = "absolute";
frame.style.overflow = "hidden";
frame.style.top = "0px";
frame.style.height = "100%";
dom.frame.appendChild(frame);
dom.groups.frame = frame;
}
frame.style.left = size.groupsLeft + "px";
frame.style.width = (options.groupsWidth !== undefined) ?
options.groupsWidth :
size.groupsWidth + "px";
// hide groups axis when there are no groups
if (groups.length == 0) {
frame.style.display = 'none';
}
else {
frame.style.display = '';
}
// TODO: only create/update groups when data is changed.
// create the items
var current = labels.length,
needed = groups.length;
// overwrite existing group labels
for (var i = 0, iMax = Math.min(current, needed); i < iMax; i++) {
var group = groups[i];
var label = labels[i];
label.innerHTML = this.getGroupName(group);
label.style.display = '';
}
// append new items when needed
for (var i = current; i < needed; i++) {
var group = groups[i];
// create text label
var label = document.createElement("DIV");
label.className = "timeline-groups-text";
label.style.position = "absolute";
if (options.groupsWidth === undefined) {
label.style.whiteSpace = "nowrap";
}
label.innerHTML = this.getGroupName(group);
frame.appendChild(label);
labels[i] = label;
// create the grid line between the group labels
var labelLine = document.createElement("DIV");
labelLine.className = "timeline-axis-grid timeline-axis-grid-minor";
labelLine.style.position = "absolute";
labelLine.style.left = "0px";
labelLine.style.width = "100%";
labelLine.style.height = "0px";
labelLine.style.borderTopStyle = "solid";
frame.appendChild(labelLine);
labelLines[i] = labelLine;
// create the grid line between the items
var itemLine = document.createElement("DIV");
itemLine.className = "timeline-axis-grid timeline-axis-grid-minor";
itemLine.style.position = "absolute";
itemLine.style.left = "0px";
itemLine.style.width = "100%";
itemLine.style.height = "0px";
itemLine.style.borderTopStyle = "solid";
dom.content.insertBefore(itemLine, dom.content.firstChild);
itemLines[i] = itemLine;
}
// remove redundant items from the DOM when needed
for (var i = needed; i < current; i++) {
var label = labels[i],
labelLine = labelLines[i],
itemLine = itemLines[i];
frame.removeChild(label);
frame.removeChild(labelLine);
dom.content.removeChild(itemLine);
}
labels.splice(needed, current - needed);
labelLines.splice(needed, current - needed);
itemLines.splice(needed, current - needed);
links.Timeline.addClassName(frame, options.groupsOnRight ? 'timeline-groups-axis-onright' : 'timeline-groups-axis-onleft');
// position the groups
for (var i = 0, iMax = groups.length; i < iMax; i++) {
var group = groups[i],
label = labels[i],
labelLine = labelLines[i],
itemLine = itemLines[i];
label.style.top = group.labelTop + "px";
labelLine.style.top = group.lineTop + "px";
itemLine.style.top = group.lineTop + "px";
itemLine.style.width = size.contentWidth + "px";
}
if (!dom.groups.background) {
// create the axis grid line background
var background = document.createElement("DIV");
background.className = "timeline-axis";
background.style.position = "absolute";
background.style.left = "0px";
background.style.width = "100%";
background.style.border = "none";
frame.appendChild(background);
dom.groups.background = background;
}
dom.groups.background.style.top = size.axis.top + 'px';
dom.groups.background.style.height = size.axis.height + 'px';
if (!dom.groups.line) {
// create the axis grid line
var line = document.createElement("DIV");
line.className = "timeline-axis";
line.style.position = "absolute";
line.style.left = "0px";
line.style.width = "100%";
line.style.height = "0px";
frame.appendChild(line);
dom.groups.line = line;
}
dom.groups.line.style.top = size.axis.line + 'px';
// create a callback when there are images which are not yet loaded
// TODO: more efficiently load images in the groups
if (dom.groups.frame && groups.length) {
var imageUrls = [];
links.imageloader.filterImageUrls(dom.groups.frame, imageUrls);
if (imageUrls.length) {
// retrieve all image sources from the items, and set a callback once
// all images are retrieved
var callback = function () {
timeline.render();
};
var sendCallbackWhenAlreadyLoaded = false;
links.imageloader.loadAll(imageUrls, callback, sendCallbackWhenAlreadyLoaded);
}
}
};
/**
* Redraw the current time bar
*/
links.Timeline.prototype.repaintCurrentTime = function() {
var options = this.options,
dom = this.dom,
size = this.size;
if (!options.showCurrentTime) {
if (dom.currentTime) {
dom.contentTimelines.removeChild(dom.currentTime);
delete dom.currentTime;
}
return;
}
if (!dom.currentTime) {
// create the current time bar
var currentTime = document.createElement("DIV");
currentTime.className = "timeline-currenttime";
currentTime.style.position = "absolute";
currentTime.style.top = "0px";
currentTime.style.height = "100%";
dom.contentTimelines.appendChild(currentTime);
dom.currentTime = currentTime;
}
var now = new Date();
var nowOffset = new Date(now.valueOf() + this.clientTimeOffset);
var x = this.timeToScreen(nowOffset);
var visible = (x > -size.contentWidth && x < 2 * size.contentWidth);
dom.currentTime.style.display = visible ? '' : 'none';
dom.currentTime.style.left = x + "px";
dom.currentTime.title = "Current time: " + nowOffset;
// start a timer to adjust for the new time
if (this.currentTimeTimer != undefined) {
clearTimeout(this.currentTimeTimer);
delete this.currentTimeTimer;
}
var timeline = this;
var onTimeout = function() {
timeline.repaintCurrentTime();
};
// the time equal to the width of one pixel, divided by 2 for more smoothness
var interval = 1 / this.conversion.factor / 2;
if (interval < 30) interval = 30;
this.currentTimeTimer = setTimeout(onTimeout, interval);
};
/**
* Redraw the custom time bar
*/
links.Timeline.prototype.repaintCustomTime = function() {
var options = this.options,
dom = this.dom,
size = this.size;
if (!options.showCustomTime) {
if (dom.customTime) {
dom.contentTimelines.removeChild(dom.customTime);
delete dom.customTime;
}
return;
}
if (!dom.customTime) {
var customTime = document.createElement("DIV");
customTime.className = "timeline-customtime";
customTime.style.position = "absolute";
customTime.style.top = "0px";
customTime.style.height = "100%";
var drag = document.createElement("DIV");
drag.style.position = "relative";
drag.style.top = "0px";
drag.style.left = "-10px";
drag.style.height = "100%";
drag.style.width = "20px";
customTime.appendChild(drag);
dom.contentTimelines.appendChild(customTime);
dom.customTime = customTime;
// initialize parameter
this.customTime = new Date();
}
var x = this.timeToScreen(this.customTime),
visible = (x > -size.contentWidth && x < 2 * size.contentWidth);
dom.customTime.style.display = visible ? '' : 'none';
dom.customTime.style.left = x + "px";
dom.customTime.title = "Time: " + this.customTime;
};
/**
* Redraw the delete button, on the top right of the currently selected item
* if there is no item selected, the button is hidden.
*/
links.Timeline.prototype.repaintDeleteButton = function () {
var timeline = this,
dom = this.dom,
frame = dom.items.frame;
var deleteButton = dom.items.deleteButton;
if (!deleteButton) {
// create a delete button
deleteButton = document.createElement("DIV");
deleteButton.className = "timeline-navigation-delete";
deleteButton.style.position = "absolute";
frame.appendChild(deleteButton);
dom.items.deleteButton = deleteButton;
}
var index = (this.selection && this.selection.index !== undefined) ? this.selection.index : -1,
item = (this.selection && this.selection.index !== undefined) ? this.items[index] : undefined;
if (item && item.rendered && this.isEditable(item)) {
var right = item.getRight(this),
top = item.top;
deleteButton.style.left = right + 'px';
deleteButton.style.top = top + 'px';
deleteButton.style.display = '';
frame.removeChild(deleteButton);
frame.appendChild(deleteButton);
}
else {
deleteButton.style.display = 'none';
}
};
/**
* Redraw the drag areas. When an item (ranges only) is selected,
* it gets a drag area on the left and right side, to change its width
*/
links.Timeline.prototype.repaintDragAreas = function () {
var timeline = this,
options = this.options,
dom = this.dom,
frame = this.dom.items.frame;
// create left drag area
var dragLeft = dom.items.dragLeft;
if (!dragLeft) {
dragLeft = document.createElement("DIV");
dragLeft.className="timeline-event-range-drag-left";
dragLeft.style.position = "absolute";
frame.appendChild(dragLeft);
dom.items.dragLeft = dragLeft;
}
// create right drag area
var dragRight = dom.items.dragRight;
if (!dragRight) {
dragRight = document.createElement("DIV");
dragRight.className="timeline-event-range-drag-right";
dragRight.style.position = "absolute";
frame.appendChild(dragRight);
dom.items.dragRight = dragRight;
}
// reposition left and right drag area
var index = (this.selection && this.selection.index !== undefined) ? this.selection.index : -1,
item = (this.selection && this.selection.index !== undefined) ? this.items[index] : undefined;
if (item && item.rendered && this.isEditable(item) &&
(item instanceof links.Timeline.ItemRange || item instanceof links.Timeline.ItemFloatingRange)) {
var left = item.getLeft(this), // NH change to getLeft
right = item.getRight(this), // NH change to getRight
top = item.top,
height = item.height;
dragLeft.style.left = left + 'px';
dragLeft.style.top = top + 'px';
dragLeft.style.width = options.dragAreaWidth + "px";
dragLeft.style.height = height + 'px';
dragLeft.style.display = '';
frame.removeChild(dragLeft);
frame.appendChild(dragLeft);
dragRight.style.left = (right - options.dragAreaWidth) + 'px';
dragRight.style.top = top + 'px';
dragRight.style.width = options.dragAreaWidth + "px";
dragRight.style.height = height + 'px';
dragRight.style.display = '';
frame.removeChild(dragRight);
frame.appendChild(dragRight);
}
else {
dragLeft.style.display = 'none';
dragRight.style.display = 'none';
}
};
/**
* Create the navigation buttons for zooming and moving
*/
links.Timeline.prototype.repaintNavigation = function () {
var timeline = this,
options = this.options,
dom = this.dom,
frame = dom.frame,
navBar = dom.navBar;
if (!navBar) {
var showButtonNew = options.showButtonNew && options.editable;
var showNavigation = options.showNavigation && (options.zoomable || options.moveable);
if (showNavigation || showButtonNew) {
// create a navigation bar containing the navigation buttons
navBar = document.createElement("DIV");
navBar.style.position = "absolute";
navBar.className = "timeline-navigation ui-widget ui-state-highlight ui-corner-all";
if (options.groupsOnRight) {
navBar.style.left = '10px';
}
else {
navBar.style.right = '10px';
}
if (options.axisOnTop) {
navBar.style.bottom = '10px';
}
else {
navBar.style.top = '10px';
}
dom.navBar = navBar;
frame.appendChild(navBar);
}
if (showButtonNew) {
// create a new in button
navBar.addButton = document.createElement("DIV");
navBar.addButton.className = "timeline-navigation-new";
navBar.addButton.title = options.CREATE_NEW_EVENT;
var addIconSpan = document.createElement("SPAN");
addIconSpan.className = "ui-icon ui-icon-circle-plus";
navBar.addButton.appendChild(addIconSpan);
var onAdd = function(event) {
links.Timeline.preventDefault(event);
links.Timeline.stopPropagation(event);
// create a new event at the center of the frame
var w = timeline.size.contentWidth;
var x = w / 2;
var xstart = timeline.screenToTime(x);
if (options.snapEvents) {
timeline.step.snap(xstart);
}
var content = options.NEW;
var group = timeline.groups.length ? timeline.groups[0].content : undefined;
var preventRender = true;
timeline.addItem({
'start': xstart,
'content': content,
'group': group
}, preventRender);
var index = (timeline.items.length - 1);
timeline.selectItem(index);
timeline.applyAdd = true;
// fire an add event.
// Note that the change can be canceled from within an event listener if
// this listener calls the method cancelAdd().
timeline.trigger('add');
if (timeline.applyAdd) {
// render and select the item
timeline.render({animate: false});
timeline.selectItem(index);
}
else {
// undo an add
timeline.deleteItem(index);
}
};
links.Timeline.addEventListener(navBar.addButton, "mousedown", onAdd);
navBar.appendChild(navBar.addButton);
}
if (showButtonNew && showNavigation) {
// create a separator line
links.Timeline.addClassName(navBar.addButton, 'timeline-navigation-new-line');
}
if (showNavigation) {
if (options.zoomable) {
// create a zoom in button
navBar.zoomInButton = document.createElement("DIV");
navBar.zoomInButton.className = "timeline-navigation-zoom-in";
navBar.zoomInButton.title = this.options.ZOOM_IN;
var ziIconSpan = document.createElement("SPAN");
ziIconSpan.className = "ui-icon ui-icon-circle-zoomin";
navBar.zoomInButton.appendChild(ziIconSpan);
var onZoomIn = function(event) {
links.Timeline.preventDefault(event);
links.Timeline.stopPropagation(event);
timeline.zoom(0.4);
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
};
links.Timeline.addEventListener(navBar.zoomInButton, "mousedown", onZoomIn);
navBar.appendChild(navBar.zoomInButton);
// create a zoom out button
navBar.zoomOutButton = document.createElement("DIV");
navBar.zoomOutButton.className = "timeline-navigation-zoom-out";
navBar.zoomOutButton.title = this.options.ZOOM_OUT;
var zoIconSpan = document.createElement("SPAN");
zoIconSpan.className = "ui-icon ui-icon-circle-zoomout";
navBar.zoomOutButton.appendChild(zoIconSpan);
var onZoomOut = function(event) {
links.Timeline.preventDefault(event);
links.Timeline.stopPropagation(event);
timeline.zoom(-0.4);
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
};
links.Timeline.addEventListener(navBar.zoomOutButton, "mousedown", onZoomOut);
navBar.appendChild(navBar.zoomOutButton);
}
if (options.moveable) {
// create a move left button
navBar.moveLeftButton = document.createElement("DIV");
navBar.moveLeftButton.className = "timeline-navigation-move-left";
navBar.moveLeftButton.title = this.options.MOVE_LEFT;
var mlIconSpan = document.createElement("SPAN");
mlIconSpan.className = "ui-icon ui-icon-circle-arrow-w";
navBar.moveLeftButton.appendChild(mlIconSpan);
var onMoveLeft = function(event) {
links.Timeline.preventDefault(event);
links.Timeline.stopPropagation(event);
timeline.move(-0.2);
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
};
links.Timeline.addEventListener(navBar.moveLeftButton, "mousedown", onMoveLeft);
navBar.appendChild(navBar.moveLeftButton);
// create a move right button
navBar.moveRightButton = document.createElement("DIV");
navBar.moveRightButton.className = "timeline-navigation-move-right";
navBar.moveRightButton.title = this.options.MOVE_RIGHT;
var mrIconSpan = document.createElement("SPAN");
mrIconSpan.className = "ui-icon ui-icon-circle-arrow-e";
navBar.moveRightButton.appendChild(mrIconSpan);
var onMoveRight = function(event) {
links.Timeline.preventDefault(event);
links.Timeline.stopPropagation(event);
timeline.move(0.2);
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
};
links.Timeline.addEventListener(navBar.moveRightButton, "mousedown", onMoveRight);
navBar.appendChild(navBar.moveRightButton);
}
}
}
};
/**
* Set current time. This function can be used to set the time in the client
* timeline equal with the time on a server.
* @param {Date} time
*/
links.Timeline.prototype.setCurrentTime = function(time) {
var now = new Date();
this.clientTimeOffset = (time.valueOf() - now.valueOf());
this.repaintCurrentTime();
};
/**
* Get current time. The time can have an offset from the real time, when
* the current time has been changed via the method setCurrentTime.
* @return {Date} time
*/
links.Timeline.prototype.getCurrentTime = function() {
var now = new Date();
return new Date(now.valueOf() + this.clientTimeOffset);
};
/**
* Set custom time.
* The custom time bar can be used to display events in past or future.
* @param {Date} time
*/
links.Timeline.prototype.setCustomTime = function(time) {
this.customTime = new Date(time.valueOf());
this.repaintCustomTime();
};
/**
* Retrieve the current custom time.
* @return {Date} customTime
*/
links.Timeline.prototype.getCustomTime = function() {
return new Date(this.customTime.valueOf());
};
/**
* Set a custom scale. Autoscaling will be disabled.
* For example setScale(SCALE.MINUTES, 5) will result
* in minor steps of 5 minutes, and major steps of an hour.
*
* @param {links.Timeline.StepDate.SCALE} scale
* A scale. Choose from SCALE.MILLISECOND,
* SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
* SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
* SCALE.YEAR.
* @param {int} step A step size, by default 1. Choose for
* example 1, 2, 5, or 10.
*/
links.Timeline.prototype.setScale = function(scale, step) {
this.step.setScale(scale, step);
this.render(); // TODO: optimize: only reflow/repaint axis
};
/**
* Enable or disable autoscaling
* @param {boolean} enable If true or not defined, autoscaling is enabled.
* If false, autoscaling is disabled.
*/
links.Timeline.prototype.setAutoScale = function(enable) {
this.step.setAutoScale(enable);
this.render(); // TODO: optimize: only reflow/repaint axis
};
/**
* Redraw the timeline
* Reloads the (linked) data table and redraws the timeline when resized.
* See also the method checkResize
*/
links.Timeline.prototype.redraw = function() {
this.setData(this.data);
};
/**
* Check if the timeline is resized, and if so, redraw the timeline.
* Useful when the webpage is resized.
*/
links.Timeline.prototype.checkResize = function() {
// TODO: re-implement the method checkResize, or better, make it redundant as this.render will be smarter
this.render();
};
/**
* Check whether a given item is editable
* @param {links.Timeline.Item} item
* @return {boolean} editable
*/
links.Timeline.prototype.isEditable = function (item) {
if (item) {
if (item.editable != undefined) {
return item.editable;
}
else {
return this.options.editable;
}
}
return false;
};
/**
* Calculate the factor and offset to convert a position on screen to the
* corresponding date and vice versa.
* After the method calcConversionFactor is executed once, the methods screenToTime and
* timeToScreen can be used.
*/
links.Timeline.prototype.recalcConversion = function() {
this.conversion.offset = this.start.valueOf();
this.conversion.factor = this.size.contentWidth /
(this.end.valueOf() - this.start.valueOf());
};
/**
* Convert a position on screen (pixels) to a datetime
* Before this method can be used, the method calcConversionFactor must be
* executed once.
* @param {int} x Position on the screen in pixels
* @return {Date} time The datetime the corresponds with given position x
*/
links.Timeline.prototype.screenToTime = function(x) {
var conversion = this.conversion;
return new Date(x / conversion.factor + conversion.offset);
};
/**
* Convert a datetime (Date object) into a position on the screen
* Before this method can be used, the method calcConversionFactor must be
* executed once.
* @param {Date} time A date
* @return {int} x The position on the screen in pixels which corresponds
* with the given date.
*/
links.Timeline.prototype.timeToScreen = function(time) {
var conversion = this.conversion;
return (time.valueOf() - conversion.offset) * conversion.factor;
};
/**
* Event handler for touchstart event on mobile devices
*/
links.Timeline.prototype.onTouchStart = function(event) {
var params = this.eventParams,
me = this;
if (params.touchDown) {
// if already moving, return
return;
}
params.touchDown = true;
params.zoomed = false;
this.onMouseDown(event);
if (!params.onTouchMove) {
params.onTouchMove = function (event) {me.onTouchMove(event);};
links.Timeline.addEventListener(document, "touchmove", params.onTouchMove);
}
if (!params.onTouchEnd) {
params.onTouchEnd = function (event) {me.onTouchEnd(event);};
links.Timeline.addEventListener(document, "touchend", params.onTouchEnd);
}
/* TODO
// check for double tap event
var delta = 500; // ms
var doubleTapStart = (new Date()).valueOf();
var target = links.Timeline.getTarget(event);
var doubleTapItem = this.getItemIndex(target);
if (params.doubleTapStart &&
(doubleTapStart - params.doubleTapStart) < delta &&
doubleTapItem == params.doubleTapItem) {
delete params.doubleTapStart;
delete params.doubleTapItem;
me.onDblClick(event);
params.touchDown = false;
}
params.doubleTapStart = doubleTapStart;
params.doubleTapItem = doubleTapItem;
*/
// store timing for double taps
var target = links.Timeline.getTarget(event);
var item = this.getItemIndex(target);
params.doubleTapStartPrev = params.doubleTapStart;
params.doubleTapStart = (new Date()).valueOf();
params.doubleTapItemPrev = params.doubleTapItem;
params.doubleTapItem = item;
links.Timeline.preventDefault(event);
};
/**
* Event handler for touchmove event on mobile devices
*/
links.Timeline.prototype.onTouchMove = function(event) {
var params = this.eventParams;
if (event.scale && event.scale !== 1) {
params.zoomed = true;
}
if (!params.zoomed) {
// move
this.onMouseMove(event);
}
else {
if (this.options.zoomable) {
// pinch
// TODO: pinch only supported on iPhone/iPad. Create something manually for Android?
params.zoomed = true;
var scale = event.scale,
oldWidth = (params.end.valueOf() - params.start.valueOf()),
newWidth = oldWidth / scale,
diff = newWidth - oldWidth,
start = new Date(parseInt(params.start.valueOf() - diff/2)),
end = new Date(parseInt(params.end.valueOf() + diff/2));
// TODO: determine zoom-around-date from touch positions?
this.setVisibleChartRange(start, end);
this.trigger("rangechange");
}
}
links.Timeline.preventDefault(event);
};
/**
* Event handler for touchend event on mobile devices
*/
links.Timeline.prototype.onTouchEnd = function(event) {
var params = this.eventParams;
var me = this;
params.touchDown = false;
if (params.zoomed) {
this.trigger("rangechanged");
}
if (params.onTouchMove) {
links.Timeline.removeEventListener(document, "touchmove", params.onTouchMove);
delete params.onTouchMove;
}
if (params.onTouchEnd) {
links.Timeline.removeEventListener(document, "touchend", params.onTouchEnd);
delete params.onTouchEnd;
}
this.onMouseUp(event);
// check for double tap event
var delta = 500; // ms
var doubleTapEnd = (new Date()).valueOf();
var target = links.Timeline.getTarget(event);
var doubleTapItem = this.getItemIndex(target);
if (params.doubleTapStartPrev &&
(doubleTapEnd - params.doubleTapStartPrev) < delta &&
params.doubleTapItem == params.doubleTapItemPrev) {
params.touchDown = true;
me.onDblClick(event);
params.touchDown = false;
}
links.Timeline.preventDefault(event);
};
/**
* Start a moving operation inside the provided parent element
* @param {Event} event The event that occurred (required for
* retrieving the mouse position)
*/
links.Timeline.prototype.onMouseDown = function(event) {
event = event || window.event;
var params = this.eventParams,
options = this.options,
dom = this.dom;
// only react on left mouse button down
var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
if (!leftButtonDown && !params.touchDown) {
return;
}
// get mouse position
params.mouseX = links.Timeline.getPageX(event);
params.mouseY = links.Timeline.getPageY(event);
params.frameLeft = links.Timeline.getAbsoluteLeft(this.dom.content);
params.frameTop = links.Timeline.getAbsoluteTop(this.dom.content);
params.previousLeft = 0;
params.previousOffset = 0;
params.moved = false;
params.start = new Date(this.start.valueOf());
params.end = new Date(this.end.valueOf());
params.target = links.Timeline.getTarget(event);
var dragLeft = (dom.items && dom.items.dragLeft) ? dom.items.dragLeft : undefined;
var dragRight = (dom.items && dom.items.dragRight) ? dom.items.dragRight : undefined;
params.itemDragLeft = (params.target === dragLeft);
params.itemDragRight = (params.target === dragRight);
if (params.itemDragLeft || params.itemDragRight) {
params.itemIndex = (this.selection && this.selection.index !== undefined) ? this.selection.index : undefined;
delete params.clusterIndex;
}
else {
params.itemIndex = this.getItemIndex(params.target);
params.clusterIndex = this.getClusterIndex(params.target);
}
params.customTime = (params.target === dom.customTime ||
params.target.parentNode === dom.customTime) ?
this.customTime :
undefined;
params.addItem = (options.editable && event.ctrlKey);
if (params.addItem) {
// create a new event at the current mouse position
var x = params.mouseX - params.frameLeft;
var y = params.mouseY - params.frameTop;
var xstart = this.screenToTime(x);
if (options.snapEvents) {
this.step.snap(xstart);
}
var xend = new Date(xstart.valueOf());
var content = options.NEW;
var group = this.getGroupFromHeight(y);
this.addItem({
'start': xstart,
'end': xend,
'content': content,
'group': this.getGroupName(group)
});
params.itemIndex = (this.items.length - 1);
delete params.clusterIndex;
this.selectItem(params.itemIndex);
params.itemDragRight = true;
}
var item = this.items[params.itemIndex];
var isSelected = this.isSelected(params.itemIndex);
params.editItem = isSelected && this.isEditable(item);
if (params.editItem) {
params.itemStart = item.start;
params.itemEnd = item.end;
params.itemGroup = item.group;
params.itemLeft = item.getLeft(this); // NH Use item.getLeft here
params.itemRight = item.getRight(this); // NH Use item.getRight here
}
else {
this.dom.frame.style.cursor = 'move';
}
if (!params.touchDown) {
// add event listeners to handle moving the contents
// we store the function onmousemove and onmouseup in the timeline, so we can
// remove the eventlisteners lateron in the function mouseUp()
var me = this;
if (!params.onMouseMove) {
params.onMouseMove = function (event) {me.onMouseMove(event);};
links.Timeline.addEventListener(document, "mousemove", params.onMouseMove);
}
if (!params.onMouseUp) {
params.onMouseUp = function (event) {me.onMouseUp(event);};
links.Timeline.addEventListener(document, "mouseup", params.onMouseUp);
}
links.Timeline.preventDefault(event);
}
};
/**
* Perform moving operating.
* This function activated from within the funcion links.Timeline.onMouseDown().
* @param {Event} event Well, eehh, the event
*/
links.Timeline.prototype.onMouseMove = function (event) {
event = event || window.event;
var params = this.eventParams,
size = this.size,
dom = this.dom,
options = this.options;
// calculate change in mouse position
var mouseX = links.Timeline.getPageX(event);
var mouseY = links.Timeline.getPageY(event);
if (params.mouseX == undefined) {
params.mouseX = mouseX;
}
if (params.mouseY == undefined) {
params.mouseY = mouseY;
}
var diffX = mouseX - params.mouseX;
var diffY = mouseY - params.mouseY;
// if mouse movement is big enough, register it as a "moved" event
if (Math.abs(diffX) >= 1) {
params.moved = true;
}
if (params.customTime) {
var x = this.timeToScreen(params.customTime);
var xnew = x + diffX;
this.customTime = this.screenToTime(xnew);
this.repaintCustomTime();
// fire a timechange event
this.trigger('timechange');
}
else if (params.editItem) {
var item = this.items[params.itemIndex],
left,
right;
if (params.itemDragLeft && options.timeChangeable) {
// move the start of the item
left = params.itemLeft + diffX;
right = params.itemRight;
item.start = this.screenToTime(left);
if (options.snapEvents) {
this.step.snap(item.start);
left = this.timeToScreen(item.start);
}
if (left > right) {
left = right;
item.start = this.screenToTime(left);
}
this.trigger('change');
}
else if (params.itemDragRight && options.timeChangeable) {
// move the end of the item
left = params.itemLeft;
right = params.itemRight + diffX;
item.end = this.screenToTime(right);
if (options.snapEvents) {
this.step.snap(item.end);
right = this.timeToScreen(item.end);
}
if (right < left) {
right = left;
item.end = this.screenToTime(right);
}
this.trigger('change');
}
else if (options.timeChangeable) {
// move the item
left = params.itemLeft + diffX;
item.start = this.screenToTime(left);
if (options.snapEvents) {
this.step.snap(item.start);
left = this.timeToScreen(item.start);
}
if (item.end) {
right = left + (params.itemRight - params.itemLeft);
item.end = this.screenToTime(right);
}
this.trigger('change');
}
item.setPosition(left, right);
var dragging = params.itemDragLeft || params.itemDragRight;
if (this.groups.length && !dragging) {
// move item from one group to another when needed
var y = mouseY - params.frameTop;
var group = this.getGroupFromHeight(y);
if (options.groupsChangeable && item.group !== group) {
// move item to the other group
var index = this.items.indexOf(item);
this.changeItem(index, {'group': this.getGroupName(group)});
}
else {
this.repaintDeleteButton();
this.repaintDragAreas();
}
}
else {
// TODO: does not work well in FF, forces redraw with every mouse move it seems
this.render(); // TODO: optimize, only redraw the items?
// Note: when animate==true, no redraw is needed here, its done by stackItems animation
}
}
else if (options.moveable) {
var interval = (params.end.valueOf() - params.start.valueOf());
var diffMillisecs = Math.round((-diffX) / size.contentWidth * interval);
var newStart = new Date(params.start.valueOf() + diffMillisecs);
var newEnd = new Date(params.end.valueOf() + diffMillisecs);
this.applyRange(newStart, newEnd);
// if the applied range is moved due to a fixed min or max,
// change the diffMillisecs accordingly
var appliedDiff = (this.start.valueOf() - newStart.valueOf());
if (appliedDiff) {
diffMillisecs += appliedDiff;
}
this.recalcConversion();
// move the items by changing the left position of their frame.
// this is much faster than repositioning all elements individually via the
// repaintFrame() function (which is done once at mouseup)
// note that we round diffX to prevent wrong positioning on millisecond scale
var previousLeft = params.previousLeft || 0;
var currentLeft = parseFloat(dom.items.frame.style.left) || 0;
var previousOffset = params.previousOffset || 0;
var frameOffset = previousOffset + (currentLeft - previousLeft);
var frameLeft = -diffMillisecs / interval * size.contentWidth + frameOffset;
dom.items.frame.style.left = (frameLeft) + "px";
// read the left again from DOM (IE8- rounds the value)
params.previousOffset = frameOffset;
params.previousLeft = parseFloat(dom.items.frame.style.left) || frameLeft;
this.repaintCurrentTime();
this.repaintCustomTime();
this.repaintAxis();
// fire a rangechange event
this.trigger('rangechange');
}
links.Timeline.preventDefault(event);
};
/**
* Stop moving operating.
* This function activated from within the funcion links.Timeline.onMouseDown().
* @param {event} event The event
*/
links.Timeline.prototype.onMouseUp = function (event) {
var params = this.eventParams,
options = this.options;
event = event || window.event;
this.dom.frame.style.cursor = 'auto';
// remove event listeners here, important for Safari
if (params.onMouseMove) {
links.Timeline.removeEventListener(document, "mousemove", params.onMouseMove);
delete params.onMouseMove;
}
if (params.onMouseUp) {
links.Timeline.removeEventListener(document, "mouseup", params.onMouseUp);
delete params.onMouseUp;
}
//links.Timeline.preventDefault(event);
if (params.customTime) {
// fire a timechanged event
this.trigger('timechanged');
}
else if (params.editItem) {
var item = this.items[params.itemIndex];
if (params.moved || params.addItem) {
this.applyChange = true;
this.applyAdd = true;
this.updateData(params.itemIndex, {
'start': item.start,
'end': item.end
});
// fire an add or changed event.
// Note that the change can be canceled from within an event listener if
// this listener calls the method cancelChange().
this.trigger(params.addItem ? 'add' : 'changed');
//retrieve item data again to include changes made to it in the triggered event handlers
item = this.items[params.itemIndex];
if (params.addItem) {
if (this.applyAdd) {
this.updateData(params.itemIndex, {
'start': item.start,
'end': item.end,
'content': item.content,
'group': this.getGroupName(item.group)
});
}
else {
// undo an add
this.deleteItem(params.itemIndex);
}
}
else {
if (this.applyChange) {
this.updateData(params.itemIndex, {
'start': item.start,
'end': item.end
});
}
else {
// undo a change
delete this.applyChange;
delete this.applyAdd;
var item = this.items[params.itemIndex],
domItem = item.dom;
item.start = params.itemStart;
item.end = params.itemEnd;
item.group = params.itemGroup;
// TODO: original group should be restored too
item.setPosition(params.itemLeft, params.itemRight);
this.updateData(params.itemIndex, {
'start': params.itemStart,
'end': params.itemEnd
});
}
}
// prepare data for clustering, by filtering and sorting by type
if (this.options.cluster) {
this.clusterGenerator.updateData();
}
this.render();
}
}
else {
if (!params.moved && !params.zoomed) {
// mouse did not move -> user has selected an item
if (params.target === this.dom.items.deleteButton) {
// delete item
if (this.selection && this.selection.index !== undefined) {
this.confirmDeleteItem(this.selection.index);
}
}
else if (options.selectable) {
// select/unselect item
if (params.itemIndex != undefined) {
if (!this.isSelected(params.itemIndex)) {
this.selectItem(params.itemIndex);
this.trigger('select');
}
}
else if(params.clusterIndex != undefined) {
this.selectCluster(params.clusterIndex);
this.trigger('select');
}
else {
if (options.unselectable) {
this.unselectItem();
this.trigger('select');
}
}
}
}
else {
// timeline is moved
// TODO: optimize: no need to reflow and cluster again?
this.render();
if ((params.moved && options.moveable) || (params.zoomed && options.zoomable) ) {
// fire a rangechanged event
this.trigger('rangechanged');
}
}
}
};
/**
* Double click event occurred for an item
* @param {Event} event
*/
links.Timeline.prototype.onDblClick = function (event) {
var params = this.eventParams,
options = this.options,
dom = this.dom,
size = this.size;
event = event || window.event;
if (params.itemIndex != undefined) {
var item = this.items[params.itemIndex];
if (item && this.isEditable(item)) {
// fire the edit event
this.trigger('edit');
}
}
else {
if (options.editable) {
// create a new item
// get mouse position
params.mouseX = links.Timeline.getPageX(event);
params.mouseY = links.Timeline.getPageY(event);
var x = params.mouseX - links.Timeline.getAbsoluteLeft(dom.content);
var y = params.mouseY - links.Timeline.getAbsoluteTop(dom.content);
// create a new event at the current mouse position
var xstart = this.screenToTime(x);
if (options.snapEvents) {
this.step.snap(xstart);
}
var content = options.NEW;
var group = this.getGroupFromHeight(y); // (group may be undefined)
var preventRender = true;
this.addItem({
'start': xstart,
'content': content,
'group': this.getGroupName(group)
}, preventRender);
params.itemIndex = (this.items.length - 1);
this.selectItem(params.itemIndex);
this.applyAdd = true;
// fire an add event.
// Note that the change can be canceled from within an event listener if
// this listener calls the method cancelAdd().
this.trigger('add');
if (this.applyAdd) {
// render and select the item
this.render({animate: false});
this.selectItem(params.itemIndex);
}
else {
// undo an add
this.deleteItem(params.itemIndex);
}
}
}
links.Timeline.preventDefault(event);
};
/**
* Event handler for mouse wheel event, used to zoom the timeline
* Code from http://adomas.org/javascript-mouse-wheel/
* @param {Event} event The event
*/
links.Timeline.prototype.onMouseWheel = function(event) {
if (!this.options.zoomable)
return;
if (!event) { /* For IE. */
event = window.event;
}
// retrieve delta
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /* Mozilla case. */
// In Mozilla, sign of delta is different than in IE.
// Also, delta is multiple of 3.
delta = -event.detail/3;
}
// If delta is nonzero, handle it.
// Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down.
if (delta) {
// TODO: on FireFox, the window is not redrawn within repeated scroll-events
// -> use a delayed redraw? Make a zoom queue?
var timeline = this;
var zoom = function () {
// perform the zoom action. Delta is normally 1 or -1
var zoomFactor = delta / 5.0;
var frameLeft = links.Timeline.getAbsoluteLeft(timeline.dom.content);
var mouseX = links.Timeline.getPageX(event);
var zoomAroundDate =
(mouseX != undefined && frameLeft != undefined) ?
timeline.screenToTime(mouseX - frameLeft) :
undefined;
timeline.zoom(zoomFactor, zoomAroundDate);
// fire a rangechange and a rangechanged event
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
};
var scroll = function () {
// Scroll the timeline
timeline.move(delta * -0.2);
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
};
if (event.shiftKey) {
scroll();
}
else {
zoom();
}
}
// Prevent default actions caused by mouse wheel.
// That might be ugly, but we handle scrolls somehow
// anyway, so don't bother here...
links.Timeline.preventDefault(event);
};
/**
* Zoom the timeline the given zoomfactor in or out. Start and end date will
* be adjusted, and the timeline will be redrawn. You can optionally give a
* date around which to zoom.
* For example, try zoomfactor = 0.1 or -0.1
* @param {Number} zoomFactor Zooming amount. Positive value will zoom in,
* negative value will zoom out
* @param {Date} zoomAroundDate Date around which will be zoomed. Optional
*/
links.Timeline.prototype.zoom = function(zoomFactor, zoomAroundDate) {
// if zoomAroundDate is not provided, take it half between start Date and end Date
if (zoomAroundDate == undefined) {
zoomAroundDate = new Date((this.start.valueOf() + this.end.valueOf()) / 2);
}
// prevent zoom factor larger than 1 or smaller than -1 (larger than 1 will
// result in a start>=end )
if (zoomFactor >= 1) {
zoomFactor = 0.9;
}
if (zoomFactor <= -1) {
zoomFactor = -0.9;
}
// adjust a negative factor such that zooming in with 0.1 equals zooming
// out with a factor -0.1
if (zoomFactor < 0) {
zoomFactor = zoomFactor / (1 + zoomFactor);
}
// zoom start Date and end Date relative to the zoomAroundDate
var startDiff = (this.start.valueOf() - zoomAroundDate);
var endDiff = (this.end.valueOf() - zoomAroundDate);
// calculate new dates
var newStart = new Date(this.start.valueOf() - startDiff * zoomFactor);
var newEnd = new Date(this.end.valueOf() - endDiff * zoomFactor);
// only zoom in when interval is larger than minimum interval (to prevent
// sliding to left/right when having reached the minimum zoom level)
var interval = (newEnd.valueOf() - newStart.valueOf());
var zoomMin = Number(this.options.zoomMin) || 10;
if (zoomMin < 10) {
zoomMin = 10;
}
if (interval >= zoomMin) {
this.applyRange(newStart, newEnd, zoomAroundDate);
this.render({
animate: this.options.animate && this.options.animateZoom
});
}
};
/**
* Move the timeline the given movefactor to the left or right. Start and end
* date will be adjusted, and the timeline will be redrawn.
* For example, try moveFactor = 0.1 or -0.1
* @param {Number} moveFactor Moving amount. Positive value will move right,
* negative value will move left
*/
links.Timeline.prototype.move = function(moveFactor) {
// zoom start Date and end Date relative to the zoomAroundDate
var diff = (this.end.valueOf() - this.start.valueOf());
// apply new dates
var newStart = new Date(this.start.valueOf() + diff * moveFactor);
var newEnd = new Date(this.end.valueOf() + diff * moveFactor);
this.applyRange(newStart, newEnd);
this.render(); // TODO: optimize, no need to reflow, only to recalc conversion and repaint
};
/**
* Apply a visible range. The range is limited to feasible maximum and minimum
* range.
* @param {Date} start
* @param {Date} end
* @param {Date} zoomAroundDate Optional. Date around which will be zoomed.
*/
links.Timeline.prototype.applyRange = function (start, end, zoomAroundDate) {
// calculate new start and end value
var startValue = start.valueOf(); // number
var endValue = end.valueOf(); // number
var interval = (endValue - startValue);
// determine maximum and minimum interval
var options = this.options;
var year = 1000 * 60 * 60 * 24 * 365;
var zoomMin = Number(options.zoomMin) || 10;
if (zoomMin < 10) {
zoomMin = 10;
}
var zoomMax = Number(options.zoomMax) || 10000 * year;
if (zoomMax > 10000 * year) {
zoomMax = 10000 * year;
}
if (zoomMax < zoomMin) {
zoomMax = zoomMin;
}
// determine min and max date value
var min = options.min ? options.min.valueOf() : undefined; // number
var max = options.max ? options.max.valueOf() : undefined; // number
if (min != undefined && max != undefined) {
if (min >= max) {
// empty range
var day = 1000 * 60 * 60 * 24;
max = min + day;
}
if (zoomMax > (max - min)) {
zoomMax = (max - min);
}
if (zoomMin > (max - min)) {
zoomMin = (max - min);
}
}
// prevent empty interval
if (startValue >= endValue) {
endValue += 1000 * 60 * 60 * 24;
}
// prevent too small scale
// TODO: IE has problems with milliseconds
if (interval < zoomMin) {
var diff = (zoomMin - interval);
var f = zoomAroundDate ? (zoomAroundDate.valueOf() - startValue) / interval : 0.5;
startValue -= Math.round(diff * f);
endValue += Math.round(diff * (1 - f));
}
// prevent too large scale
if (interval > zoomMax) {
var diff = (interval - zoomMax);
var f = zoomAroundDate ? (zoomAroundDate.valueOf() - startValue) / interval : 0.5;
startValue += Math.round(diff * f);
endValue -= Math.round(diff * (1 - f));
}
// prevent to small start date
if (min != undefined) {
var diff = (startValue - min);
if (diff < 0) {
startValue -= diff;
endValue -= diff;
}
}
// prevent to large end date
if (max != undefined) {
var diff = (max - endValue);
if (diff < 0) {
startValue += diff;
endValue += diff;
}
}
// apply new dates
this.start = new Date(startValue);
this.end = new Date(endValue);
};
/**
* Delete an item after a confirmation.
* The deletion can be cancelled by executing .cancelDelete() during the
* triggered event 'delete'.
* @param {int} index Index of the item to be deleted
*/
links.Timeline.prototype.confirmDeleteItem = function(index) {
this.applyDelete = true;
// select the event to be deleted
if (!this.isSelected(index)) {
this.selectItem(index);
}
// fire a delete event trigger.
// Note that the delete event can be canceled from within an event listener if
// this listener calls the method cancelChange().
this.trigger('delete');
if (this.applyDelete) {
this.deleteItem(index);
}
delete this.applyDelete;
};
/**
* Delete an item
* @param {int} index Index of the item to be deleted
* @param {boolean} [preventRender=false] Do not re-render timeline if true
* (optimization for multiple delete)
*/
links.Timeline.prototype.deleteItem = function(index, preventRender) {
if (index >= this.items.length) {
throw "Cannot delete row, index out of range";
}
if (this.selection && this.selection.index !== undefined) {
// adjust the selection
if (this.selection.index == index) {
// item to be deleted is selected
this.unselectItem();
}
else if (this.selection.index > index) {
// update selection index
this.selection.index--;
}
}
// actually delete the item and remove it from the DOM
var item = this.items.splice(index, 1)[0];
this.renderQueue.hide.push(item);
// delete the row in the original data table
if (this.data) {
if (google && google.visualization &&
this.data instanceof google.visualization.DataTable) {
this.data.removeRow(index);
}
else if (links.Timeline.isArray(this.data)) {
this.data.splice(index, 1);
}
else {
throw "Cannot delete row from data, unknown data type";
}
}
// prepare data for clustering, by filtering and sorting by type
if (this.options.cluster) {
this.clusterGenerator.updateData();
}
if (!preventRender) {
this.render();
}
};
/**
* Delete all items
*/
links.Timeline.prototype.deleteAllItems = function() {
this.unselectItem();
// delete the loaded items
this.clearItems();
// delete the groups
this.deleteGroups();
// empty original data table
if (this.data) {
if (google && google.visualization &&
this.data instanceof google.visualization.DataTable) {
this.data.removeRows(0, this.data.getNumberOfRows());
}
else if (links.Timeline.isArray(this.data)) {
this.data.splice(0, this.data.length);
}
else {
throw "Cannot delete row from data, unknown data type";
}
}
// prepare data for clustering, by filtering and sorting by type
if (this.options.cluster) {
this.clusterGenerator.updateData();
}
this.render();
};
/**
* Find the group from a given height in the timeline
* @param {Number} height Height in the timeline
* @return {Object | undefined} group The group object, or undefined if out
* of range
*/
links.Timeline.prototype.getGroupFromHeight = function(height) {
var i,
group,
groups = this.groups;
if (groups.length) {
if (this.options.axisOnTop) {
for (i = groups.length - 1; i >= 0; i--) {
group = groups[i];
if (height > group.top) {
return group;
}
}
}
else {
for (i = 0; i < groups.length; i++) {
group = groups[i];
if (height > group.top) {
return group;
}
}
}
return group; // return the last group
}
return undefined;
};
/**
* @constructor links.Timeline.Item
* @param {Object} data Object containing parameters start, end
* content, group, type, editable.
* @param {Object} [options] Options to set initial property values
* {Number} top
* {Number} left
* {Number} width
* {Number} height
*/
links.Timeline.Item = function (data, options) {
if (data) {
/* TODO: use parseJSONDate as soon as it is tested and working (in two directions)
this.start = links.Timeline.parseJSONDate(data.start);
this.end = links.Timeline.parseJSONDate(data.end);
*/
this.start = data.start;
this.end = data.end;
this.content = data.content;
this.className = data.className;
this.editable = data.editable;
this.group = data.group;
this.type = data.type;
}
this.top = 0;
this.left = 0;
this.width = 0;
this.height = 0;
this.lineWidth = 0;
this.dotWidth = 0;
this.dotHeight = 0;
this.rendered = false; // true when the item is draw in the Timeline DOM
if (options) {
// override the default properties
for (var option in options) {
if (options.hasOwnProperty(option)) {
this[option] = options[option];
}
}
}
};
/**
* Reflow the Item: retrieve its actual size from the DOM
* @return {boolean} resized returns true if the axis is resized
*/
links.Timeline.Item.prototype.reflow = function () {
// Should be implemented by sub-prototype
return false;
};
/**
* Append all image urls present in the items DOM to the provided array
* @param {String[]} imageUrls
*/
links.Timeline.Item.prototype.getImageUrls = function (imageUrls) {
if (this.dom) {
links.imageloader.filterImageUrls(this.dom, imageUrls);
}
};
/**
* Select the item
*/
links.Timeline.Item.prototype.select = function () {
// Should be implemented by sub-prototype
};
/**
* Unselect the item
*/
links.Timeline.Item.prototype.unselect = function () {
// Should be implemented by sub-prototype
};
/**
* Creates the DOM for the item, depending on its type
* @return {Element | undefined}
*/
links.Timeline.Item.prototype.createDOM = function () {
// Should be implemented by sub-prototype
};
/**
* Append the items DOM to the given HTML container. If items DOM does not yet
* exist, it will be created first.
* @param {Element} container
*/
links.Timeline.Item.prototype.showDOM = function (container) {
// Should be implemented by sub-prototype
};
/**
* Remove the items DOM from the current HTML container
* @param {Element} container
*/
links.Timeline.Item.prototype.hideDOM = function (container) {
// Should be implemented by sub-prototype
};
/**
* Update the DOM of the item. This will update the content and the classes
* of the item
*/
links.Timeline.Item.prototype.updateDOM = function () {
// Should be implemented by sub-prototype
};
/**
* Reposition the item, recalculate its left, top, and width, using the current
* range of the timeline and the timeline options.
* @param {links.Timeline} timeline
*/
links.Timeline.Item.prototype.updatePosition = function (timeline) {
// Should be implemented by sub-prototype
};
/**
* Check if the item is drawn in the timeline (i.e. the DOM of the item is
* attached to the frame. You may also just request the parameter item.rendered
* @return {boolean} rendered
*/
links.Timeline.Item.prototype.isRendered = function () {
return this.rendered;
};
/**
* Check if the item is located in the visible area of the timeline, and
* not part of a cluster
* @param {Date} start
* @param {Date} end
* @return {boolean} visible
*/
links.Timeline.Item.prototype.isVisible = function (start, end) {
// Should be implemented by sub-prototype
return false;
};
/**
* Reposition the item
* @param {Number} left
* @param {Number} right
*/
links.Timeline.Item.prototype.setPosition = function (left, right) {
// Should be implemented by sub-prototype
};
/**
* Calculate the left position of the item
* @param {links.Timeline} timeline
* @return {Number} left
*/
links.Timeline.Item.prototype.getLeft = function (timeline) {
// Should be implemented by sub-prototype
return 0;
};
/**
* Calculate the right position of the item
* @param {links.Timeline} timeline
* @return {Number} right
*/
links.Timeline.Item.prototype.getRight = function (timeline) {
// Should be implemented by sub-prototype
return 0;
};
/**
* Calculate the width of the item
* @param {links.Timeline} timeline
* @return {Number} width
*/
links.Timeline.Item.prototype.getWidth = function (timeline) {
// Should be implemented by sub-prototype
return this.width || 0; // last rendered width
};
/**
* @constructor links.Timeline.ItemBox
* @extends links.Timeline.Item
* @param {Object} data Object containing parameters start, end
* content, group, type, className, editable.
* @param {Object} [options] Options to set initial property values
* {Number} top
* {Number} left
* {Number} width
* {Number} height
*/
links.Timeline.ItemBox = function (data, options) {
links.Timeline.Item.call(this, data, options);
};
links.Timeline.ItemBox.prototype = new links.Timeline.Item();
/**
* Reflow the Item: retrieve its actual size from the DOM
* @return {boolean} resized returns true if the axis is resized
* @override
*/
links.Timeline.ItemBox.prototype.reflow = function () {
var dom = this.dom,
dotHeight = dom.dot.offsetHeight,
dotWidth = dom.dot.offsetWidth,
lineWidth = dom.line.offsetWidth,
resized = (
(this.dotHeight != dotHeight) ||
(this.dotWidth != dotWidth) ||
(this.lineWidth != lineWidth)
);
this.dotHeight = dotHeight;
this.dotWidth = dotWidth;
this.lineWidth = lineWidth;
return resized;
};
/**
* Select the item
* @override
*/
links.Timeline.ItemBox.prototype.select = function () {
var dom = this.dom;
links.Timeline.addClassName(dom, 'timeline-event-selected ui-state-active');
links.Timeline.addClassName(dom.line, 'timeline-event-selected ui-state-active');
links.Timeline.addClassName(dom.dot, 'timeline-event-selected ui-state-active');
};
/**
* Unselect the item
* @override
*/
links.Timeline.ItemBox.prototype.unselect = function () {
var dom = this.dom;
links.Timeline.removeClassName(dom, 'timeline-event-selected ui-state-active');
links.Timeline.removeClassName(dom.line, 'timeline-event-selected ui-state-active');
links.Timeline.removeClassName(dom.dot, 'timeline-event-selected ui-state-active');
};
/**
* Creates the DOM for the item, depending on its type
* @return {Element | undefined}
* @override
*/
links.Timeline.ItemBox.prototype.createDOM = function () {
// background box
var divBox = document.createElement("DIV");
divBox.style.position = "absolute";
divBox.style.left = this.left + "px";
divBox.style.top = this.top + "px";
// contents box (inside the background box). used for making margins
var divContent = document.createElement("DIV");
divContent.className = "timeline-event-content";
divContent.innerHTML = this.content;
divBox.appendChild(divContent);
// line to axis
var divLine = document.createElement("DIV");
divLine.style.position = "absolute";
divLine.style.width = "0px";
// important: the vertical line is added at the front of the list of elements,
// so it will be drawn behind all boxes and ranges
divBox.line = divLine;
// dot on axis
var divDot = document.createElement("DIV");
divDot.style.position = "absolute";
divDot.style.width = "0px";
divDot.style.height = "0px";
divBox.dot = divDot;
this.dom = divBox;
this.updateDOM();
return divBox;
};
/**
* Append the items DOM to the given HTML container. If items DOM does not yet
* exist, it will be created first.
* @param {Element} container
* @override
*/
links.Timeline.ItemBox.prototype.showDOM = function (container) {
var dom = this.dom;
if (!dom) {
dom = this.createDOM();
}
if (dom.parentNode != container) {
if (dom.parentNode) {
// container is changed. remove from old container
this.hideDOM();
}
// append to this container
container.appendChild(dom);
container.insertBefore(dom.line, container.firstChild);
// Note: line must be added in front of the this,
// such that it stays below all this
container.appendChild(dom.dot);
this.rendered = true;
}
};
/**
* Remove the items DOM from the current HTML container, but keep the DOM in
* memory
* @override
*/
links.Timeline.ItemBox.prototype.hideDOM = function () {
var dom = this.dom;
if (dom) {
if (dom.parentNode) {
dom.parentNode.removeChild(dom);
}
if (dom.line && dom.line.parentNode) {
dom.line.parentNode.removeChild(dom.line);
}
if (dom.dot && dom.dot.parentNode) {
dom.dot.parentNode.removeChild(dom.dot);
}
this.rendered = false;
}
};
/**
* Update the DOM of the item. This will update the content and the classes
* of the item
* @override
*/
links.Timeline.ItemBox.prototype.updateDOM = function () {
var divBox = this.dom;
if (divBox) {
var divLine = divBox.line;
var divDot = divBox.dot;
// update contents
divBox.firstChild.innerHTML = this.content;
// update class
divBox.className = "timeline-event timeline-event-box ui-widget ui-state-default";
divLine.className = "timeline-event timeline-event-line ui-widget ui-state-default";
divDot.className = "timeline-event timeline-event-dot ui-widget ui-state-default";
if (this.isCluster) {
links.Timeline.addClassName(divBox, 'timeline-event-cluster ui-widget-header');
links.Timeline.addClassName(divLine, 'timeline-event-cluster ui-widget-header');
links.Timeline.addClassName(divDot, 'timeline-event-cluster ui-widget-header');
}
// add item specific class name when provided
if (this.className) {
links.Timeline.addClassName(divBox, this.className);
links.Timeline.addClassName(divLine, this.className);
links.Timeline.addClassName(divDot, this.className);
}
// TODO: apply selected className?
}
};
/**
* Reposition the item, recalculate its left, top, and width, using the current
* range of the timeline and the timeline options.
* @param {links.Timeline} timeline
* @override
*/
links.Timeline.ItemBox.prototype.updatePosition = function (timeline) {
var dom = this.dom;
if (dom) {
var left = timeline.timeToScreen(this.start),
axisOnTop = timeline.options.axisOnTop,
axisTop = timeline.size.axis.top,
axisHeight = timeline.size.axis.height,
boxAlign = (timeline.options.box && timeline.options.box.align) ?
timeline.options.box.align : undefined;
dom.style.top = this.top + "px";
if (boxAlign == 'right') {
dom.style.left = (left - this.width) + "px";
}
else if (boxAlign == 'left') {
dom.style.left = (left) + "px";
}
else { // default or 'center'
dom.style.left = (left - this.width/2) + "px";
}
var line = dom.line;
var dot = dom.dot;
line.style.left = (left - this.lineWidth/2) + "px";
dot.style.left = (left - this.dotWidth/2) + "px";
if (axisOnTop) {
line.style.top = axisHeight + "px";
line.style.height = Math.max(this.top - axisHeight, 0) + "px";
dot.style.top = (axisHeight - this.dotHeight/2) + "px";
}
else {
line.style.top = (this.top + this.height) + "px";
line.style.height = Math.max(axisTop - this.top - this.height, 0) + "px";
dot.style.top = (axisTop - this.dotHeight/2) + "px";
}
}
};
/**
* Check if the item is visible in the timeline, and not part of a cluster
* @param {Date} start
* @param {Date} end
* @return {Boolean} visible
* @override
*/
links.Timeline.ItemBox.prototype.isVisible = function (start, end) {
if (this.cluster) {
return false;
}
return (this.start > start) && (this.start < end);
};
/**
* Reposition the item
* @param {Number} left
* @param {Number} right
* @override
*/
links.Timeline.ItemBox.prototype.setPosition = function (left, right) {
var dom = this.dom;
dom.style.left = (left - this.width / 2) + "px";
dom.line.style.left = (left - this.lineWidth / 2) + "px";
dom.dot.style.left = (left - this.dotWidth / 2) + "px";
if (this.group) {
this.top = this.group.top;
dom.style.top = this.top + 'px';
}
};
/**
* Calculate the left position of the item
* @param {links.Timeline} timeline
* @return {Number} left
* @override
*/
links.Timeline.ItemBox.prototype.getLeft = function (timeline) {
var boxAlign = (timeline.options.box && timeline.options.box.align) ?
timeline.options.box.align : undefined;
var left = timeline.timeToScreen(this.start);
if (boxAlign == 'right') {
left = left - width;
}
else { // default or 'center'
left = (left - this.width / 2);
}
return left;
};
/**
* Calculate the right position of the item
* @param {links.Timeline} timeline
* @return {Number} right
* @override
*/
links.Timeline.ItemBox.prototype.getRight = function (timeline) {
var boxAlign = (timeline.options.box && timeline.options.box.align) ?
timeline.options.box.align : undefined;
var left = timeline.timeToScreen(this.start);
var right;
if (boxAlign == 'right') {
right = left;
}
else if (boxAlign == 'left') {
right = (left + this.width);
}
else { // default or 'center'
right = (left + this.width / 2);
}
return right;
};
/**
* @constructor links.Timeline.ItemRange
* @extends links.Timeline.Item
* @param {Object} data Object containing parameters start, end
* content, group, type, className, editable.
* @param {Object} [options] Options to set initial property values
* {Number} top
* {Number} left
* {Number} width
* {Number} height
*/
links.Timeline.ItemRange = function (data, options) {
links.Timeline.Item.call(this, data, options);
};
links.Timeline.ItemRange.prototype = new links.Timeline.Item();
/**
* Select the item
* @override
*/
links.Timeline.ItemRange.prototype.select = function () {
var dom = this.dom;
links.Timeline.addClassName(dom, 'timeline-event-selected ui-state-active');
};
/**
* Unselect the item
* @override
*/
links.Timeline.ItemRange.prototype.unselect = function () {
var dom = this.dom;
links.Timeline.removeClassName(dom, 'timeline-event-selected ui-state-active');
};
/**
* Creates the DOM for the item, depending on its type
* @return {Element | undefined}
* @override
*/
links.Timeline.ItemRange.prototype.createDOM = function () {
// background box
var divBox = document.createElement("DIV");
divBox.style.position = "absolute";
// contents box
var divContent = document.createElement("DIV");
divContent.className = "timeline-event-content";
divBox.appendChild(divContent);
this.dom = divBox;
this.updateDOM();
return divBox;
};
/**
* Append the items DOM to the given HTML container. If items DOM does not yet
* exist, it will be created first.
* @param {Element} container
* @override
*/
links.Timeline.ItemRange.prototype.showDOM = function (container) {
var dom = this.dom;
if (!dom) {
dom = this.createDOM();
}
if (dom.parentNode != container) {
if (dom.parentNode) {
// container changed. remove the item from the old container
this.hideDOM();
}
// append to the new container
container.appendChild(dom);
this.rendered = true;
}
};
/**
* Remove the items DOM from the current HTML container
* The DOM will be kept in memory
* @override
*/
links.Timeline.ItemRange.prototype.hideDOM = function () {
var dom = this.dom;
if (dom) {
if (dom.parentNode) {
dom.parentNode.removeChild(dom);
}
this.rendered = false;
}
};
/**
* Update the DOM of the item. This will update the content and the classes
* of the item
* @override
*/
links.Timeline.ItemRange.prototype.updateDOM = function () {
var divBox = this.dom;
if (divBox) {
// update contents
divBox.firstChild.innerHTML = this.content;
// update class
divBox.className = "timeline-event timeline-event-range ui-widget ui-state-default";
if (this.isCluster) {
links.Timeline.addClassName(divBox, 'timeline-event-cluster ui-widget-header');
}
// add item specific class name when provided
if (this.className) {
links.Timeline.addClassName(divBox, this.className);
}
// TODO: apply selected className?
}
};
/**
* Reposition the item, recalculate its left, top, and width, using the current
* range of the timeline and the timeline options. *
* @param {links.Timeline} timeline
* @override
*/
links.Timeline.ItemRange.prototype.updatePosition = function (timeline) {
var dom = this.dom;
if (dom) {
var contentWidth = timeline.size.contentWidth,
left = timeline.timeToScreen(this.start),
right = timeline.timeToScreen(this.end);
// limit the width of the this, as browsers cannot draw very wide divs
if (left < -contentWidth) {
left = -contentWidth;
}
if (right > 2 * contentWidth) {
right = 2 * contentWidth;
}
dom.style.top = this.top + "px";
dom.style.left = left + "px";
//dom.style.width = Math.max(right - left - 2 * this.borderWidth, 1) + "px"; // TODO: borderWidth
dom.style.width = Math.max(right - left, 1) + "px";
}
};
/**
* Check if the item is visible in the timeline, and not part of a cluster
* @param {Number} start
* @param {Number} end
* @return {boolean} visible
* @override
*/
links.Timeline.ItemRange.prototype.isVisible = function (start, end) {
if (this.cluster) {
return false;
}
return (this.end > start)
&& (this.start < end);
};
/**
* Reposition the item
* @param {Number} left
* @param {Number} right
* @override
*/
links.Timeline.ItemRange.prototype.setPosition = function (left, right) {
var dom = this.dom;
dom.style.left = left + 'px';
dom.style.width = (right - left) + 'px';
if (this.group) {
this.top = this.group.top;
dom.style.top = this.top + 'px';
}
};
/**
* Calculate the left position of the item
* @param {links.Timeline} timeline
* @return {Number} left
* @override
*/
links.Timeline.ItemRange.prototype.getLeft = function (timeline) {
return timeline.timeToScreen(this.start);
};
/**
* Calculate the right position of the item
* @param {links.Timeline} timeline
* @return {Number} right
* @override
*/
links.Timeline.ItemRange.prototype.getRight = function (timeline) {
return timeline.timeToScreen(this.end);
};
/**
* Calculate the width of the item
* @param {links.Timeline} timeline
* @return {Number} width
* @override
*/
links.Timeline.ItemRange.prototype.getWidth = function (timeline) {
return timeline.timeToScreen(this.end) - timeline.timeToScreen(this.start);
};
/**
* @constructor links.Timeline.ItemFloatingRange
* @extends links.Timeline.Item
* @param {Object} data Object containing parameters start, end
* content, group, type, className, editable.
* @param {Object} [options] Options to set initial property values
* {Number} top
* {Number} left
* {Number} width
* {Number} height
*/
links.Timeline.ItemFloatingRange = function (data, options) {
links.Timeline.Item.call(this, data, options);
};
links.Timeline.ItemFloatingRange.prototype = new links.Timeline.Item();
/**
* Select the item
* @override
*/
links.Timeline.ItemFloatingRange.prototype.select = function () {
var dom = this.dom;
links.Timeline.addClassName(dom, 'timeline-event-selected ui-state-active');
};
/**
* Unselect the item
* @override
*/
links.Timeline.ItemFloatingRange.prototype.unselect = function () {
var dom = this.dom;
links.Timeline.removeClassName(dom, 'timeline-event-selected ui-state-active');
};
/**
* Creates the DOM for the item, depending on its type
* @return {Element | undefined}
* @override
*/
links.Timeline.ItemFloatingRange.prototype.createDOM = function () {
// background box
var divBox = document.createElement("DIV");
divBox.style.position = "absolute";
// contents box
var divContent = document.createElement("DIV");
divContent.className = "timeline-event-content";
divBox.appendChild(divContent);
this.dom = divBox;
this.updateDOM();
return divBox;
};
/**
* Append the items DOM to the given HTML container. If items DOM does not yet
* exist, it will be created first.
* @param {Element} container
* @override
*/
links.Timeline.ItemFloatingRange.prototype.showDOM = function (container) {
var dom = this.dom;
if (!dom) {
dom = this.createDOM();
}
if (dom.parentNode != container) {
if (dom.parentNode) {
// container changed. remove the item from the old container
this.hideDOM();
}
// append to the new container
container.appendChild(dom);
this.rendered = true;
}
};
/**
* Remove the items DOM from the current HTML container
* The DOM will be kept in memory
* @override
*/
links.Timeline.ItemFloatingRange.prototype.hideDOM = function () {
var dom = this.dom;
if (dom) {
if (dom.parentNode) {
dom.parentNode.removeChild(dom);
}
this.rendered = false;
}
};
/**
* Update the DOM of the item. This will update the content and the classes
* of the item
* @override
*/
links.Timeline.ItemFloatingRange.prototype.updateDOM = function () {
var divBox = this.dom;
if (divBox) {
// update contents
divBox.firstChild.innerHTML = this.content;
// update class
divBox.className = "timeline-event timeline-event-range ui-widget ui-state-default";
if (this.isCluster) {
links.Timeline.addClassName(divBox, 'timeline-event-cluster ui-widget-header');
}
// add item specific class name when provided
if (this.className) {
links.Timeline.addClassName(divBox, this.className);
}
// TODO: apply selected className?
}
};
/**
* Reposition the item, recalculate its left, top, and width, using the current
* range of the timeline and the timeline options. *
* @param {links.Timeline} timeline
* @override
*/
links.Timeline.ItemFloatingRange.prototype.updatePosition = function (timeline) {
var dom = this.dom;
if (dom) {
var contentWidth = timeline.size.contentWidth,
left = this.getLeft(timeline), // NH use getLeft
right = this.getRight(timeline); // NH use getRight;
// limit the width of the this, as browsers cannot draw very wide divs
if (left < -contentWidth) {
left = -contentWidth;
}
if (right > 2 * contentWidth) {
right = 2 * contentWidth;
}
dom.style.top = this.top + "px";
dom.style.left = left + "px";
//dom.style.width = Math.max(right - left - 2 * this.borderWidth, 1) + "px"; // TODO: borderWidth
dom.style.width = Math.max(right - left, 1) + "px";
}
};
/**
* Check if the item is visible in the timeline, and not part of a cluster
* @param {Number} start
* @param {Number} end
* @return {boolean} visible
* @override
*/
links.Timeline.ItemFloatingRange.prototype.isVisible = function (start, end) {
if (this.cluster) {
return false;
}
// NH check for no end value
if (this.end && this.start) {
return (this.end > start)
&& (this.start < end);
} else if (this.start) {
return (this.start < end);
} else if (this.end) {
return (this.end > start);
} else {return true;}
};
/**
* Reposition the item
* @param {Number} left
* @param {Number} right
* @override
*/
links.Timeline.ItemFloatingRange.prototype.setPosition = function (left, right) {
var dom = this.dom;
dom.style.left = left + 'px';
dom.style.width = (right - left) + 'px';
if (this.group) {
this.top = this.group.top;
dom.style.top = this.top + 'px';
}
};
/**
* Calculate the left position of the item
* @param {links.Timeline} timeline
* @return {Number} left
* @override
*/
links.Timeline.ItemFloatingRange.prototype.getLeft = function (timeline) {
// NH check for no start value
if (this.start) {
return timeline.timeToScreen(this.start);
} else {
return 0;
}
};
/**
* Calculate the right position of the item
* @param {links.Timeline} timeline
* @return {Number} right
* @override
*/
links.Timeline.ItemFloatingRange.prototype.getRight = function (timeline) {
// NH check for no end value
if (this.end) {
return timeline.timeToScreen(this.end);
} else {
return timeline.size.contentWidth;
}
};
/**
* Calculate the width of the item
* @param {links.Timeline} timeline
* @return {Number} width
* @override
*/
links.Timeline.ItemFloatingRange.prototype.getWidth = function (timeline) {
return this.getRight(timeline) - this.getLeft(timeline);
};
/**
* @constructor links.Timeline.ItemDot
* @extends links.Timeline.Item
* @param {Object} data Object containing parameters start, end
* content, group, type, className, editable.
* @param {Object} [options] Options to set initial property values
* {Number} top
* {Number} left
* {Number} width
* {Number} height
*/
links.Timeline.ItemDot = function (data, options) {
links.Timeline.Item.call(this, data, options);
};
links.Timeline.ItemDot.prototype = new links.Timeline.Item();
/**
* Reflow the Item: retrieve its actual size from the DOM
* @return {boolean} resized returns true if the axis is resized
* @override
*/
links.Timeline.ItemDot.prototype.reflow = function () {
var dom = this.dom,
dotHeight = dom.dot.offsetHeight,
dotWidth = dom.dot.offsetWidth,
contentHeight = dom.content.offsetHeight,
resized = (
(this.dotHeight != dotHeight) ||
(this.dotWidth != dotWidth) ||
(this.contentHeight != contentHeight)
);
this.dotHeight = dotHeight;
this.dotWidth = dotWidth;
this.contentHeight = contentHeight;
return resized;
};
/**
* Select the item
* @override
*/
links.Timeline.ItemDot.prototype.select = function () {
var dom = this.dom;
links.Timeline.addClassName(dom, 'timeline-event-selected ui-state-active');
};
/**
* Unselect the item
* @override
*/
links.Timeline.ItemDot.prototype.unselect = function () {
var dom = this.dom;
links.Timeline.removeClassName(dom, 'timeline-event-selected ui-state-active');
};
/**
* Creates the DOM for the item, depending on its type
* @return {Element | undefined}
* @override
*/
links.Timeline.ItemDot.prototype.createDOM = function () {
// background box
var divBox = document.createElement("DIV");
divBox.style.position = "absolute";
// contents box, right from the dot
var divContent = document.createElement("DIV");
divContent.className = "timeline-event-content";
divBox.appendChild(divContent);
// dot at start
var divDot = document.createElement("DIV");
divDot.style.position = "absolute";
divDot.style.width = "0px";
divDot.style.height = "0px";
divBox.appendChild(divDot);
divBox.content = divContent;
divBox.dot = divDot;
this.dom = divBox;
this.updateDOM();
return divBox;
};
/**
* Append the items DOM to the given HTML container. If items DOM does not yet
* exist, it will be created first.
* @param {Element} container
* @override
*/
links.Timeline.ItemDot.prototype.showDOM = function (container) {
var dom = this.dom;
if (!dom) {
dom = this.createDOM();
}
if (dom.parentNode != container) {
if (dom.parentNode) {
// container changed. remove it from old container first
this.hideDOM();
}
// append to container
container.appendChild(dom);
this.rendered = true;
}
};
/**
* Remove the items DOM from the current HTML container
* @override
*/
links.Timeline.ItemDot.prototype.hideDOM = function () {
var dom = this.dom;
if (dom) {
if (dom.parentNode) {
dom.parentNode.removeChild(dom);
}
this.rendered = false;
}
};
/**
* Update the DOM of the item. This will update the content and the classes
* of the item
* @override
*/
links.Timeline.ItemDot.prototype.updateDOM = function () {
if (this.dom) {
var divBox = this.dom;
var divDot = divBox.dot;
// update contents
divBox.firstChild.innerHTML = this.content;
// update classes
divBox.className = "timeline-event-dot-container";
divDot.className = "timeline-event timeline-event-dot ui-widget ui-state-default";
if (this.isCluster) {
links.Timeline.addClassName(divBox, 'timeline-event-cluster ui-widget-header');
links.Timeline.addClassName(divDot, 'timeline-event-cluster ui-widget-header');
}
// add item specific class name when provided
if (this.className) {
links.Timeline.addClassName(divBox, this.className);
links.Timeline.addClassName(divDot, this.className);
}
// TODO: apply selected className?
}
};
/**
* Reposition the item, recalculate its left, top, and width, using the current
* range of the timeline and the timeline options. *
* @param {links.Timeline} timeline
* @override
*/
links.Timeline.ItemDot.prototype.updatePosition = function (timeline) {
var dom = this.dom;
if (dom) {
var left = timeline.timeToScreen(this.start);
dom.style.top = this.top + "px";
dom.style.left = (left - this.dotWidth / 2) + "px";
dom.content.style.marginLeft = (1.5 * this.dotWidth) + "px";
//dom.content.style.marginRight = (0.5 * this.dotWidth) + "px"; // TODO
dom.dot.style.top = ((this.height - this.dotHeight) / 2) + "px";
}
};
/**
* Check if the item is visible in the timeline, and not part of a cluster.
* @param {Date} start
* @param {Date} end
* @return {boolean} visible
* @override
*/
links.Timeline.ItemDot.prototype.isVisible = function (start, end) {
if (this.cluster) {
return false;
}
return (this.start > start)
&& (this.start < end);
};
/**
* Reposition the item
* @param {Number} left
* @param {Number} right
* @override
*/
links.Timeline.ItemDot.prototype.setPosition = function (left, right) {
var dom = this.dom;
dom.style.left = (left - this.dotWidth / 2) + "px";
if (this.group) {
this.top = this.group.top;
dom.style.top = this.top + 'px';
}
};
/**
* Calculate the left position of the item
* @param {links.Timeline} timeline
* @return {Number} left
* @override
*/
links.Timeline.ItemDot.prototype.getLeft = function (timeline) {
return timeline.timeToScreen(this.start);
};
/**
* Calculate the right position of the item
* @param {links.Timeline} timeline
* @return {Number} right
* @override
*/
links.Timeline.ItemDot.prototype.getRight = function (timeline) {
return timeline.timeToScreen(this.start) + this.width;
};
/**
* Retrieve the properties of an item.
* @param {Number} index
* @return {Object} itemData Object containing item properties:
* {Date} start (required),
* {Date} end (optional),
* {String} content (required),
* {String} group (optional),
* {String} className (optional)
* {boolean} editable (optional)
* {String} type (optional)
*/
links.Timeline.prototype.getItem = function (index) {
if (index >= this.items.length) {
throw "Cannot get item, index out of range";
}
// take the original data as start, includes foreign fields
var data = this.data,
itemData;
if (google && google.visualization &&
data instanceof google.visualization.DataTable) {
// map the datatable columns
var cols = links.Timeline.mapColumnIds(data);
itemData = {};
for (var col in cols) {
if (cols.hasOwnProperty(col)) {
itemData[col] = this.data.getValue(index, cols[col]);
}
}
}
else if (links.Timeline.isArray(this.data)) {
// read JSON array
itemData = links.Timeline.clone(this.data[index]);
}
else {
throw "Unknown data type. DataTable or Array expected.";
}
// override the data with current settings of the item (should be the same)
var item = this.items[index];
itemData.start = new Date(item.start.valueOf());
if (item.end) {
itemData.end = new Date(item.end.valueOf());
}
itemData.content = item.content;
if (item.group) {
itemData.group = this.getGroupName(item.group);
}
if (item.className) {
itemData.className = item.className;
}
if (typeof item.editable !== 'undefined') {
itemData.editable = item.editable;
}
if (item.type) {
itemData.type = item.type;
}
return itemData;
};
/**
* Retrieve the properties of a cluster.
* @param {Number} index
* @return {Object} clusterdata Object containing cluster properties:
* {Date} start (required),
* {String} type (optional)
* {Array} array with item data as is in getItem()
*/
links.Timeline.prototype.getCluster = function (index) {
if (index >= this.clusters.length) {
throw "Cannot get cluster, index out of range";
}
var clusterData = {},
cluster = this.clusters[index],
clusterItems = cluster.items;
clusterData.start = new Date(cluster.start.valueOf());
if (cluster.type) {
clusterData.type = cluster.type;
}
// push cluster item data
clusterData.items = [];
for(var i = 0; i < clusterItems.length; i++){
for(var j = 0; j < this.items.length; j++){
// TODO could be nicer to be able to have the item index into the cluster
if(this.items[j] == clusterItems[i])
{
clusterData.items.push(this.getItem(j));
break;
}
}
}
return clusterData;
};
/**
* Add a new item.
* @param {Object} itemData Object containing item properties:
* {Date} start (required),
* {Date} end (optional),
* {String} content (required),
* {String} group (optional)
* {String} className (optional)
* {Boolean} editable (optional)
* {String} type (optional)
* @param {boolean} [preventRender=false] Do not re-render timeline if true
*/
links.Timeline.prototype.addItem = function (itemData, preventRender) {
var itemsData = [
itemData
];
this.addItems(itemsData, preventRender);
};
/**
* Add new items.
* @param {Array} itemsData An array containing Objects.
* The objects must have the following parameters:
* {Date} start,
* {Date} end,
* {String} content with text or HTML code,
* {String} group (optional)
* {String} className (optional)
* {String} editable (optional)
* {String} type (optional)
* @param {boolean} [preventRender=false] Do not re-render timeline if true
*/
links.Timeline.prototype.addItems = function (itemsData, preventRender) {
var timeline = this,
items = this.items;
// append the items
itemsData.forEach(function (itemData) {
var index = items.length;
items.push(timeline.createItem(itemData));
timeline.updateData(index, itemData);
// note: there is no need to add the item to the renderQueue, that
// will be done when this.render() is executed and all items are
// filtered again.
});
// prepare data for clustering, by filtering and sorting by type
if (this.options.cluster) {
this.clusterGenerator.updateData();
}
if (!preventRender) {
this.render({
animate: false
});
}
};
/**
* Create an item object, containing all needed parameters
* @param {Object} itemData Object containing parameters start, end
* content, group.
* @return {Object} item
*/
links.Timeline.prototype.createItem = function(itemData) {
var type = itemData.type || (itemData.end ? 'range' : this.options.style);
var data = links.Timeline.clone(itemData);
data.type = type;
data.group = this.getGroup(itemData.group);
// TODO: optimize this, when creating an item, all data is copied twice...
// TODO: is initialTop needed?
var initialTop,
options = this.options;
if (options.axisOnTop) {
initialTop = this.size.axis.height + options.eventMarginAxis + options.eventMargin / 2;
}
else {
initialTop = this.size.contentHeight - options.eventMarginAxis - options.eventMargin / 2;
}
if (type in this.itemTypes) {
return new this.itemTypes[type](data, {'top': initialTop})
}
console.log('ERROR: Unknown event type "' + type + '"');
return new links.Timeline.Item(data, {
'top': initialTop
});
};
/**
* Edit an item
* @param {Number} index
* @param {Object} itemData Object containing item properties:
* {Date} start (required),
* {Date} end (optional),
* {String} content (required),
* {String} group (optional)
* @param {boolean} [preventRender=false] Do not re-render timeline if true
*/
links.Timeline.prototype.changeItem = function (index, itemData, preventRender) {
var oldItem = this.items[index];
if (!oldItem) {
throw "Cannot change item, index out of range";
}
// replace item, merge the changes
var newItem = this.createItem({
'start': itemData.hasOwnProperty('start') ? itemData.start : oldItem.start,
'end': itemData.hasOwnProperty('end') ? itemData.end : oldItem.end,
'content': itemData.hasOwnProperty('content') ? itemData.content : oldItem.content,
'group': itemData.hasOwnProperty('group') ? itemData.group : this.getGroupName(oldItem.group),
'className': itemData.hasOwnProperty('className') ? itemData.className : oldItem.className,
'editable': itemData.hasOwnProperty('editable') ? itemData.editable : oldItem.editable,
'type': itemData.hasOwnProperty('type') ? itemData.type : (itemData.end ? 'range' : 'box')
});
this.items[index] = newItem;
// append the changes to the render queue
this.renderQueue.hide.push(oldItem);
this.renderQueue.show.push(newItem);
// update the original data table
this.updateData(index, itemData);
// prepare data for clustering, by filtering and sorting by type
if (this.options.cluster) {
this.clusterGenerator.updateData();
}
if (!preventRender) {
// redraw timeline
this.render({
animate: false
});
if (this.selection && this.selection.index == index) {
newItem.select();
}
}
};
/**
* Delete all groups
*/
links.Timeline.prototype.deleteGroups = function () {
this.groups = [];
this.groupIndexes = {};
};
/**
* Get a group by the group name. When the group does not exist,
* it will be created.
* @param {String} groupName the name of the group
* @return {Object} groupObject
*/
links.Timeline.prototype.getGroup = function (groupName) {
var groups = this.groups,
groupIndexes = this.groupIndexes,
groupObj = undefined;
var groupIndex = groupIndexes[groupName];
if (groupIndex == undefined && groupName != undefined) { // not null or undefined
groupObj = {
'content': groupName,
'labelTop': 0,
'lineTop': 0
// note: this object will lateron get addition information,
// such as height and width of the group
};
groups.push(groupObj);
// sort the groups
if (this.options.groupsOrder == true) {
groups = groups.sort(function (a, b) {
if (a.content > b.content) {
return 1;
}
if (a.content < b.content) {
return -1;
}
return 0;
});
} else if (typeof(this.options.groupsOrder) == "function") {
groups = groups.sort(this.options.groupsOrder)
}
// rebuilt the groupIndexes
for (var i = 0, iMax = groups.length; i < iMax; i++) {
groupIndexes[groups[i].content] = i;
}
}
else {
groupObj = groups[groupIndex];
}
return groupObj;
};
/**
* Get the group name from a group object.
* @param {Object} groupObj
* @return {String} groupName the name of the group, or undefined when group
* was not provided
*/
links.Timeline.prototype.getGroupName = function (groupObj) {
return groupObj ? groupObj.content : undefined;
};
/**
* Cancel a change item
* This method can be called insed an event listener which catches the "change"
* event. The changed event position will be undone.
*/
links.Timeline.prototype.cancelChange = function () {
this.applyChange = false;
};
/**
* Cancel deletion of an item
* This method can be called insed an event listener which catches the "delete"
* event. Deletion of the event will be undone.
*/
links.Timeline.prototype.cancelDelete = function () {
this.applyDelete = false;
};
/**
* Cancel creation of a new item
* This method can be called insed an event listener which catches the "new"
* event. Creation of the new the event will be undone.
*/
links.Timeline.prototype.cancelAdd = function () {
this.applyAdd = false;
};
/**
* Select an event. The visible chart range will be moved such that the selected
* event is placed in the middle.
* For example selection = [{row: 5}];
* @param {Array} selection An array with a column row, containing the row
* number (the id) of the event to be selected.
* @return {boolean} true if selection is succesfully set, else false.
*/
links.Timeline.prototype.setSelection = function(selection) {
if (selection != undefined && selection.length > 0) {
if (selection[0].row != undefined) {
var index = selection[0].row;
if (this.items[index]) {
var item = this.items[index];
this.selectItem(index);
// move the visible chart range to the selected event.
var start = item.start;
var end = item.end;
var middle; // number
if (end != undefined) {
middle = (end.valueOf() + start.valueOf()) / 2;
} else {
middle = start.valueOf();
}
var diff = (this.end.valueOf() - this.start.valueOf()),
newStart = new Date(middle - diff/2),
newEnd = new Date(middle + diff/2);
this.setVisibleChartRange(newStart, newEnd);
return true;
}
}
}
else {
// unselect current selection
this.unselectItem();
}
return false;
};
/**
* Retrieve the currently selected event
* @return {Array} sel An array with a column row, containing the row number
* of the selected event. If there is no selection, an
* empty array is returned.
*/
links.Timeline.prototype.getSelection = function() {
var sel = [];
if (this.selection) {
if(this.selection.index !== undefined)
{
sel.push({"row": this.selection.index});
} else {
sel.push({"cluster": this.selection.cluster});
}
}
return sel;
};
/**
* Select an item by its index
* @param {Number} index
*/
links.Timeline.prototype.selectItem = function(index) {
this.unselectItem();
this.selection = undefined;
if (this.items[index] != undefined) {
var item = this.items[index],
domItem = item.dom;
this.selection = {
'index': index
};
if (item && item.dom) {
// TODO: move adjusting the domItem to the item itself
if (this.isEditable(item)) {
item.dom.style.cursor = 'move';
}
item.select();
}
this.repaintDeleteButton();
this.repaintDragAreas();
}
};
/**
* Select an cluster by its index
* @param {Number} index
*/
links.Timeline.prototype.selectCluster = function(index) {
this.unselectItem();
this.selection = undefined;
if (this.clusters[index] != undefined) {
this.selection = {
'cluster': index
};
this.repaintDeleteButton();
this.repaintDragAreas();
}
};
/**
* Check if an item is currently selected
* @param {Number} index
* @return {boolean} true if row is selected, else false
*/
links.Timeline.prototype.isSelected = function (index) {
return (this.selection && this.selection.index == index);
};
/**
* Unselect the currently selected event (if any)
*/
links.Timeline.prototype.unselectItem = function() {
if (this.selection && this.selection.index !== undefined) {
var item = this.items[this.selection.index];
if (item && item.dom) {
var domItem = item.dom;
domItem.style.cursor = '';
item.unselect();
}
this.selection = undefined;
this.repaintDeleteButton();
this.repaintDragAreas();
}
};
/**
* Stack the items such that they don't overlap. The items will have a minimal
* distance equal to options.eventMargin.
* @param {boolean | undefined} animate if animate is true, the items are
* moved to their new position animated
* defaults to false.
*/
links.Timeline.prototype.stackItems = function(animate) {
if (animate == undefined) {
animate = false;
}
// calculate the order and final stack position of the items
var stack = this.stack;
if (!stack) {
stack = {};
this.stack = stack;
}
stack.sortedItems = this.stackOrder(this.renderedItems);
stack.finalItems = this.stackCalculateFinal(stack.sortedItems);
if (animate || stack.timer) {
// move animated to the final positions
var timeline = this;
var step = function () {
var arrived = timeline.stackMoveOneStep(stack.sortedItems,
stack.finalItems);
timeline.repaint();
if (!arrived) {
stack.timer = setTimeout(step, 30);
}
else {
delete stack.timer;
}
};
if (!stack.timer) {
stack.timer = setTimeout(step, 30);
}
}
else {
// move immediately to the final positions
this.stackMoveToFinal(stack.sortedItems, stack.finalItems);
}
};
/**
* Cancel any running animation
*/
links.Timeline.prototype.stackCancelAnimation = function() {
if (this.stack && this.stack.timer) {
clearTimeout(this.stack.timer);
delete this.stack.timer;
}
};
links.Timeline.prototype.getItemsByGroup = function(items) {
var itemsByGroup = {};
for (var i = 0; i < items.length; ++i) {
var item = items[i];
var group = "undefined";
if (item.group) {
if (item.group.content) {
group = item.group.content;
} else {
group = item.group;
}
}
if (!itemsByGroup[group]) {
itemsByGroup[group] = [];
}
itemsByGroup[group].push(item);
}
return itemsByGroup;
};
/**
* Order the items in the array this.items. The default order is determined via:
* - Ranges go before boxes and dots.
* - The item with the oldest start time goes first
* If a custom function has been provided via the stackorder option, then this will be used.
* @param {Array} items Array with items
* @return {Array} sortedItems Array with sorted items
*/
links.Timeline.prototype.stackOrder = function(items) {
// TODO: store the sorted items, to have less work later on
var sortedItems = items.concat([]);
//if a customer stack order function exists, use it.
var f = this.options.customStackOrder && (typeof this.options.customStackOrder === 'function') ? this.options.customStackOrder : function (a, b)
{
if ((a instanceof links.Timeline.ItemRange || a instanceof links.Timeline.ItemFloatingRange) &&
!(b instanceof links.Timeline.ItemRange || b instanceof links.Timeline.ItemFloatingRange)) {
return -1;
}
if (!(a instanceof links.Timeline.ItemRange || a instanceof links.Timeline.ItemFloatingRange) &&
(b instanceof links.Timeline.ItemRange || b instanceof links.Timeline.ItemFloatingRange)) {
return 1;
}
return (a.left - b.left);
};
sortedItems.sort(f);
return sortedItems;
};
/**
* Adjust vertical positions of the events such that they don't overlap each
* other.
* @param {timeline.Item[]} items
* @return {Object[]} finalItems
*/
links.Timeline.prototype.stackCalculateFinal = function(items) {
var size = this.size,
options = this.options,
axisOnTop = options.axisOnTop,
eventMargin = options.eventMargin,
eventMarginAxis = options.eventMarginAxis,
groupBase = (axisOnTop)
? size.axis.height + eventMarginAxis + eventMargin/2
: size.contentHeight - eventMarginAxis - eventMargin/2,
groupedItems, groupFinalItems, finalItems = [];
groupedItems = this.getItemsByGroup(items);
//
// groupedItems contains all items by group, plus it may contain an
// additional "undefined" group which contains all items with no group. We
// first process the grouped items, and then the ungrouped
//
for (j = 0; j topNow) ? 1 : -1);
if (Math.abs(diff) > 4) step = diff / 4;
var topNew = parseInt(topNow + step);
if (topNew != topFinal) {
arrived = false;
}
item.top = topNew;
item.bottom = item.top + item.height;
}
else {
item.top = finalItem.top;
item.bottom = finalItem.bottom;
}
item.left = finalItem.left;
item.right = finalItem.right;
}
return arrived;
};
/**
* Move the events from their current position to the final position
* @param {Array} currentItems Array with the real items and their current
* positions
* @param {Array} finalItems Array with objects containing the final
* positions of the items
*/
links.Timeline.prototype.stackMoveToFinal = function(currentItems, finalItems) {
// Put the events directly at there final position
for (var i = 0, iMax = finalItems.length; i < iMax; i++) {
var finalItem = finalItems[i],
current = finalItem.item;
current.left = finalItem.left;
current.top = finalItem.top;
current.right = finalItem.right;
current.bottom = finalItem.bottom;
}
};
/**
* Check if the destiny position of given item overlaps with any
* of the other items from index itemStart to itemEnd.
* @param {Array} items Array with items
* @param {int} itemIndex Number of the item to be checked for overlap
* @param {int} itemStart First item to be checked.
* @param {int} itemEnd Last item to be checked.
* @return {Object} colliding item, or undefined when no collisions
*/
links.Timeline.prototype.stackItemsCheckOverlap = function(items, itemIndex,
itemStart, itemEnd) {
var eventMargin = this.options.eventMargin,
collision = this.collision;
// we loop from end to start, as we suppose that the chance of a
// collision is larger for items at the end, so check these first.
var item1 = items[itemIndex];
for (var i = itemEnd; i >= itemStart; i--) {
var item2 = items[i];
if (collision(item1, item2, eventMargin)) {
if (i != itemIndex) {
return item2;
}
}
}
return undefined;
};
/**
* Test if the two provided items collide
* The items must have parameters left, right, top, and bottom.
* @param {Element} item1 The first item
* @param {Element} item2 The second item
* @param {Number} margin A minimum required margin. Optional.
* If margin is provided, the two items will be
* marked colliding when they overlap or
* when the margin between the two is smaller than
* the requested margin.
* @return {boolean} true if item1 and item2 collide, else false
*/
links.Timeline.prototype.collision = function(item1, item2, margin) {
// set margin if not specified
if (margin == undefined) {
margin = 0;
}
// calculate if there is overlap (collision)
return (item1.left - margin < item2.right &&
item1.right + margin > item2.left &&
item1.top - margin < item2.bottom &&
item1.bottom + margin > item2.top);
};
/**
* fire an event
* @param {String} event The name of an event, for example "rangechange" or "edit"
*/
links.Timeline.prototype.trigger = function (event) {
// built up properties
var properties = null;
switch (event) {
case 'rangechange':
case 'rangechanged':
properties = {
'start': new Date(this.start.valueOf()),
'end': new Date(this.end.valueOf())
};
break;
case 'timechange':
case 'timechanged':
properties = {
'time': new Date(this.customTime.valueOf())
};
break;
}
// trigger the links event bus
links.events.trigger(this, event, properties);
// trigger the google event bus
if (google && google.visualization) {
google.visualization.events.trigger(this, event, properties);
}
};
/**
* Cluster the events
*/
links.Timeline.prototype.clusterItems = function () {
if (!this.options.cluster) {
return;
}
var clusters = this.clusterGenerator.getClusters(this.conversion.factor, this.options.clusterMaxItems);
if (this.clusters != clusters) {
// cluster level changed
var queue = this.renderQueue;
// remove the old clusters from the scene
if (this.clusters) {
this.clusters.forEach(function (cluster) {
queue.hide.push(cluster);
// unlink the items
cluster.items.forEach(function (item) {
item.cluster = undefined;
});
});
}
// append the new clusters
clusters.forEach(function (cluster) {
// don't add to the queue.show here, will be done in .filterItems()
// link all items to the cluster
cluster.items.forEach(function (item) {
item.cluster = cluster;
});
});
this.clusters = clusters;
}
};
/**
* Filter the visible events
*/
links.Timeline.prototype.filterItems = function () {
var queue = this.renderQueue,
window = (this.end - this.start),
start = new Date(this.start.valueOf() - window),
end = new Date(this.end.valueOf() + window);
function filter (arr) {
arr.forEach(function (item) {
var rendered = item.rendered;
var visible = item.isVisible(start, end);
if (rendered != visible) {
if (rendered) {
queue.hide.push(item); // item is rendered but no longer visible
}
if (visible && (queue.show.indexOf(item) == -1)) {
queue.show.push(item); // item is visible but neither rendered nor queued up to be rendered
}
}
});
}
// filter all items and all clusters
filter(this.items);
if (this.clusters) {
filter(this.clusters);
}
};
/** ------------------------------------------------------------------------ **/
/**
* @constructor links.Timeline.ClusterGenerator
* Generator which creates clusters of items, based on the visible range in
* the Timeline. There is a set of cluster levels which is cached.
* @param {links.Timeline} timeline
*/
links.Timeline.ClusterGenerator = function (timeline) {
this.timeline = timeline;
this.clear();
};
/**
* Clear all cached clusters and data, and initialize all variables
*/
links.Timeline.ClusterGenerator.prototype.clear = function () {
// cache containing created clusters for each cluster level
this.items = [];
this.groups = {};
this.clearCache();
};
/**
* Clear the cached clusters
*/
links.Timeline.ClusterGenerator.prototype.clearCache = function () {
// cache containing created clusters for each cluster level
this.cache = {};
this.cacheLevel = -1;
this.cache[this.cacheLevel] = [];
};
/**
* Set the items to be clustered.
* This will clear cached clusters.
* @param {Item[]} items
* @param {Object} [options] Available options:
* {boolean} applyOnChangedLevel
* If true (default), the changed data is applied
* as soon the cluster level changes. If false,
* The changed data is applied immediately
*/
links.Timeline.ClusterGenerator.prototype.setData = function (items, options) {
this.items = items || [];
this.dataChanged = true;
this.applyOnChangedLevel = true;
if (options && options.applyOnChangedLevel) {
this.applyOnChangedLevel = options.applyOnChangedLevel;
}
// console.log('clustergenerator setData applyOnChangedLevel=' + this.applyOnChangedLevel); // TODO: cleanup
};
/**
* Update the current data set: clear cache, and recalculate the clustering for
* the current level
*/
links.Timeline.ClusterGenerator.prototype.updateData = function () {
this.dataChanged = true;
this.applyOnChangedLevel = false;
};
/**
* Filter the items per group.
* @private
*/
links.Timeline.ClusterGenerator.prototype.filterData = function () {
// filter per group
var items = this.items || [];
var groups = {};
this.groups = groups;
// split the items per group
items.forEach(function (item) {
// put the item in the correct group
var groupName = item.group ? item.group.content : '';
var group = groups[groupName];
if (!group) {
group = [];
groups[groupName] = group;
}
group.push(item);
// calculate the center of the item
if (item.start) {
if (item.end) {
// range
item.center = (item.start.valueOf() + item.end.valueOf()) / 2;
}
else {
// box, dot
item.center = item.start.valueOf();
}
}
});
// sort the items per group
for (var groupName in groups) {
if (groups.hasOwnProperty(groupName)) {
groups[groupName].sort(function (a, b) {
return (a.center - b.center);
});
}
}
this.dataChanged = false;
};
/**
* Cluster the events which are too close together
* @param {Number} scale The scale of the current window,
* defined as (windowWidth / (endDate - startDate))
* @return {Item[]} clusters
*/
links.Timeline.ClusterGenerator.prototype.getClusters = function (scale, maxItems) {
var level = -1,
granularity = 2, // TODO: what granularity is needed for the cluster levels?
timeWindow = 0; // milliseconds
if (scale > 0) {
level = Math.round(Math.log(100 / scale) / Math.log(granularity));
timeWindow = Math.pow(granularity, level);
}
// clear the cache when and re-filter the data when needed.
if (this.dataChanged) {
var levelChanged = (level != this.cacheLevel);
var applyDataNow = this.applyOnChangedLevel ? levelChanged : true;
if (applyDataNow) {
// TODO: currently drawn clusters should be removed! mark them as invisible?
this.clearCache();
this.filterData();
// console.log('clustergenerator: cache cleared...'); // TODO: cleanup
}
}
this.cacheLevel = level;
var clusters = this.cache[level];
if (!clusters) {
// console.log('clustergenerator: create cluster level ' + level); // TODO: cleanup
clusters = [];
// TODO: spit this method, it is too large
for (var groupName in this.groups) {
if (this.groups.hasOwnProperty(groupName)) {
var items = this.groups[groupName];
var iMax = items.length;
var i = 0;
while (i < iMax) {
// find all items around current item, within the timeWindow
var item = items[i];
var neighbors = 1; // start at 1, to include itself)
// loop through items left from the current item
var j = i - 1;
while (j >= 0 && (item.center - items[j].center) < timeWindow / 2) {
if (!items[j].cluster) {
neighbors++;
}
j--;
}
// loop through items right from the current item
var k = i + 1;
while (k < items.length && (items[k].center - item.center) < timeWindow / 2) {
neighbors++;
k++;
}
// loop through the created clusters
var l = clusters.length - 1;
while (l >= 0 && (item.center - clusters[l].center) < timeWindow / 2) {
if (item.group == clusters[l].group) {
neighbors++;
}
l--;
}
// aggregate until the number of items is within maxItems
if (neighbors > maxItems) {
// too busy in this window.
var num = neighbors - maxItems + 1;
var clusterItems = [];
// append the items to the cluster,
// and calculate the average start for the cluster
var avg = undefined; // number. average of all start dates
var min = undefined; // number. minimum of all start dates
var max = undefined; // number. maximum of all start and end dates
var containsRanges = false;
var count = 0;
var m = i;
while (clusterItems.length < num && m < items.length) {
var p = items[m];
var start = p.start.valueOf();
var end = p.end ? p.end.valueOf() : p.start.valueOf();
clusterItems.push(p);
if (count) {
// calculate new average (use fractions to prevent overflow)
avg = (count / (count + 1)) * avg + (1 / (count + 1)) * p.center;
}
else {
avg = p.center;
}
min = (min != undefined) ? Math.min(min, start) : start;
max = (max != undefined) ? Math.max(max, end) : end;
containsRanges = containsRanges || (p instanceof links.Timeline.ItemRange || p instanceof links.Timeline.ItemFloatingRange);
count++;
m++;
}
var cluster;
var title = 'Cluster containing ' + count +
' events. Zoom in to see the individual events.';
var content = '
' + count + ' events
';
var group = item.group ? item.group.content : undefined;
if (containsRanges) {
// boxes and/or ranges
cluster = this.timeline.createItem({
'start': new Date(min),
'end': new Date(max),
'content': content,
'group': group
});
}
else {
// boxes only
cluster = this.timeline.createItem({
'start': new Date(avg),
'content': content,
'group': group
});
}
cluster.isCluster = true;
cluster.items = clusterItems;
cluster.items.forEach(function (item) {
item.cluster = cluster;
});
clusters.push(cluster);
i += num;
}
else {
delete item.cluster;
i += 1;
}
}
}
}
this.cache[level] = clusters;
}
return clusters;
};
/** ------------------------------------------------------------------------ **/
/**
* Event listener (singleton)
*/
links.events = links.events || {
'listeners': [],
/**
* Find a single listener by its object
* @param {Object} object
* @return {Number} index -1 when not found
*/
'indexOf': function (object) {
var listeners = this.listeners;
for (var i = 0, iMax = this.listeners.length; i < iMax; i++) {
var listener = listeners[i];
if (listener && listener.object == object) {
return i;
}
}
return -1;
},
/**
* Add an event listener
* @param {Object} object
* @param {String} event The name of an event, for example 'select'
* @param {function} callback The callback method, called when the
* event takes place
*/
'addListener': function (object, event, callback) {
var index = this.indexOf(object);
var listener = this.listeners[index];
if (!listener) {
listener = {
'object': object,
'events': {}
};
this.listeners.push(listener);
}
var callbacks = listener.events[event];
if (!callbacks) {
callbacks = [];
listener.events[event] = callbacks;
}
// add the callback if it does not yet exist
if (callbacks.indexOf(callback) == -1) {
callbacks.push(callback);
}
},
/**
* Remove an event listener
* @param {Object} object
* @param {String} event The name of an event, for example 'select'
* @param {function} callback The registered callback method
*/
'removeListener': function (object, event, callback) {
var index = this.indexOf(object);
var listener = this.listeners[index];
if (listener) {
var callbacks = listener.events[event];
if (callbacks) {
var index = callbacks.indexOf(callback);
if (index != -1) {
callbacks.splice(index, 1);
}
// remove the array when empty
if (callbacks.length == 0) {
delete listener.events[event];
}
}
// count the number of registered events. remove listener when empty
var count = 0;
var events = listener.events;
for (var e in events) {
if (events.hasOwnProperty(e)) {
count++;
}
}
if (count == 0) {
delete this.listeners[index];
}
}
},
/**
* Remove all registered event listeners
*/
'removeAllListeners': function () {
this.listeners = [];
},
/**
* Trigger an event. All registered event handlers will be called
* @param {Object} object
* @param {String} event
* @param {Object} properties (optional)
*/
'trigger': function (object, event, properties) {
var index = this.indexOf(object);
var listener = this.listeners[index];
if (listener) {
var callbacks = listener.events[event];
if (callbacks) {
for (var i = 0, iMax = callbacks.length; i < iMax; i++) {
callbacks[i](properties);
}
}
}
}
};
/** ------------------------------------------------------------------------ **/
/**
* @constructor links.Timeline.StepDate
* The class StepDate is an iterator for dates. You provide a start date and an
* end date. The class itself determines the best scale (step size) based on the
* provided start Date, end Date, and minimumStep.
*
* If minimumStep is provided, the step size is chosen as close as possible
* to the minimumStep but larger than minimumStep. If minimumStep is not
* provided, the scale is set to 1 DAY.
* The minimumStep should correspond with the onscreen size of about 6 characters
*
* Alternatively, you can set a scale by hand.
* After creation, you can initialize the class by executing start(). Then you
* can iterate from the start date to the end date via next(). You can check if
* the end date is reached with the function end(). After each step, you can
* retrieve the current date via get().
* The class step has scales ranging from milliseconds, seconds, minutes, hours,
* days, to years.
*
* Version: 1.2
*
* @param {Date} start The start date, for example new Date(2010, 9, 21)
* or new Date(2010, 9, 21, 23, 45, 00)
* @param {Date} end The end date
* @param {Number} minimumStep Optional. Minimum step size in milliseconds
*/
links.Timeline.StepDate = function(start, end, minimumStep) {
// variables
this.current = new Date();
this._start = new Date();
this._end = new Date();
this.autoScale = true;
this.scale = links.Timeline.StepDate.SCALE.DAY;
this.step = 1;
// initialize the range
this.setRange(start, end, minimumStep);
};
/// enum scale
links.Timeline.StepDate.SCALE = {
MILLISECOND: 1,
SECOND: 2,
MINUTE: 3,
HOUR: 4,
DAY: 5,
WEEKDAY: 6,
MONTH: 7,
YEAR: 8
};
/**
* Set a new range
* If minimumStep is provided, the step size is chosen as close as possible
* to the minimumStep but larger than minimumStep. If minimumStep is not
* provided, the scale is set to 1 DAY.
* The minimumStep should correspond with the onscreen size of about 6 characters
* @param {Date} start The start date and time.
* @param {Date} end The end date and time.
* @param {int} minimumStep Optional. Minimum step size in milliseconds
*/
links.Timeline.StepDate.prototype.setRange = function(start, end, minimumStep) {
if (!(start instanceof Date) || !(end instanceof Date)) {
//throw "No legal start or end date in method setRange";
return;
}
this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
if (this.autoScale) {
this.setMinimumStep(minimumStep);
}
};
/**
* Set the step iterator to the start date.
*/
links.Timeline.StepDate.prototype.start = function() {
this.current = new Date(this._start.valueOf());
this.roundToMinor();
};
/**
* Round the current date to the first minor date value
* This must be executed once when the current date is set to start Date
*/
links.Timeline.StepDate.prototype.roundToMinor = function() {
// round to floor
// IMPORTANT: we have no breaks in this switch! (this is no bug)
//noinspection FallthroughInSwitchStatementJS
switch (this.scale) {
case links.Timeline.StepDate.SCALE.YEAR:
this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
this.current.setMonth(0);
case links.Timeline.StepDate.SCALE.MONTH: this.current.setDate(1);
case links.Timeline.StepDate.SCALE.DAY: // intentional fall through
case links.Timeline.StepDate.SCALE.WEEKDAY: this.current.setHours(0);
case links.Timeline.StepDate.SCALE.HOUR: this.current.setMinutes(0);
case links.Timeline.StepDate.SCALE.MINUTE: this.current.setSeconds(0);
case links.Timeline.StepDate.SCALE.SECOND: this.current.setMilliseconds(0);
//case links.Timeline.StepDate.SCALE.MILLISECOND: // nothing to do for milliseconds
}
if (this.step != 1) {
// round down to the first minor value that is a multiple of the current step size
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND: this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step); break;
case links.Timeline.StepDate.SCALE.SECOND: this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
case links.Timeline.StepDate.SCALE.MINUTE: this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
case links.Timeline.StepDate.SCALE.HOUR: this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
case links.Timeline.StepDate.SCALE.WEEKDAY: // intentional fall through
case links.Timeline.StepDate.SCALE.DAY: this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
case links.Timeline.StepDate.SCALE.MONTH: this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step); break;
case links.Timeline.StepDate.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
default: break;
}
}
};
/**
* Check if the end date is reached
* @return {boolean} true if the current date has passed the end date
*/
links.Timeline.StepDate.prototype.end = function () {
return (this.current.valueOf() > this._end.valueOf());
};
/**
* Do the next step
*/
links.Timeline.StepDate.prototype.next = function() {
var prev = this.current.valueOf();
// Two cases, needed to prevent issues with switching daylight savings
// (end of March and end of October)
if (this.current.getMonth() < 6) {
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND:
this.current = new Date(this.current.valueOf() + this.step); break;
case links.Timeline.StepDate.SCALE.SECOND: this.current = new Date(this.current.valueOf() + this.step * 1000); break;
case links.Timeline.StepDate.SCALE.MINUTE: this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
case links.Timeline.StepDate.SCALE.HOUR:
this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
// in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
var h = this.current.getHours();
this.current.setHours(h - (h % this.step));
break;
case links.Timeline.StepDate.SCALE.WEEKDAY: // intentional fall through
case links.Timeline.StepDate.SCALE.DAY: this.current.setDate(this.current.getDate() + this.step); break;
case links.Timeline.StepDate.SCALE.MONTH: this.current.setMonth(this.current.getMonth() + this.step); break;
case links.Timeline.StepDate.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() + this.step); break;
default: break;
}
}
else {
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND: this.current = new Date(this.current.valueOf() + this.step); break;
case links.Timeline.StepDate.SCALE.SECOND: this.current.setSeconds(this.current.getSeconds() + this.step); break;
case links.Timeline.StepDate.SCALE.MINUTE: this.current.setMinutes(this.current.getMinutes() + this.step); break;
case links.Timeline.StepDate.SCALE.HOUR: this.current.setHours(this.current.getHours() + this.step); break;
case links.Timeline.StepDate.SCALE.WEEKDAY: // intentional fall through
case links.Timeline.StepDate.SCALE.DAY: this.current.setDate(this.current.getDate() + this.step); break;
case links.Timeline.StepDate.SCALE.MONTH: this.current.setMonth(this.current.getMonth() + this.step); break;
case links.Timeline.StepDate.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() + this.step); break;
default: break;
}
}
if (this.step != 1) {
// round down to the correct major value
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND: if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0); break;
case links.Timeline.StepDate.SCALE.SECOND: if(this.current.getSeconds() < this.step) this.current.setSeconds(0); break;
case links.Timeline.StepDate.SCALE.MINUTE: if(this.current.getMinutes() < this.step) this.current.setMinutes(0); break;
case links.Timeline.StepDate.SCALE.HOUR: if(this.current.getHours() < this.step) this.current.setHours(0); break;
case links.Timeline.StepDate.SCALE.WEEKDAY: // intentional fall through
case links.Timeline.StepDate.SCALE.DAY: if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
case links.Timeline.StepDate.SCALE.MONTH: if(this.current.getMonth() < this.step) this.current.setMonth(0); break;
case links.Timeline.StepDate.SCALE.YEAR: break; // nothing to do for year
default: break;
}
}
// safety mechanism: if current time is still unchanged, move to the end
if (this.current.valueOf() == prev) {
this.current = new Date(this._end.valueOf());
}
};
/**
* Get the current datetime
* @return {Date} current The current date
*/
links.Timeline.StepDate.prototype.getCurrent = function() {
return this.current;
};
/**
* Set a custom scale. Autoscaling will be disabled.
* For example setScale(SCALE.MINUTES, 5) will result
* in minor steps of 5 minutes, and major steps of an hour.
*
* @param {links.Timeline.StepDate.SCALE} newScale
* A scale. Choose from SCALE.MILLISECOND,
* SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
* SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
* SCALE.YEAR.
* @param {Number} newStep A step size, by default 1. Choose for
* example 1, 2, 5, or 10.
*/
links.Timeline.StepDate.prototype.setScale = function(newScale, newStep) {
this.scale = newScale;
if (newStep > 0) {
this.step = newStep;
}
this.autoScale = false;
};
/**
* Enable or disable autoscaling
* @param {boolean} enable If true, autoascaling is set true
*/
links.Timeline.StepDate.prototype.setAutoScale = function (enable) {
this.autoScale = enable;
};
/**
* Automatically determine the scale that bests fits the provided minimum step
* @param {Number} minimumStep The minimum step size in milliseconds
*/
links.Timeline.StepDate.prototype.setMinimumStep = function(minimumStep) {
if (minimumStep == undefined) {
return;
}
var stepYear = (1000 * 60 * 60 * 24 * 30 * 12);
var stepMonth = (1000 * 60 * 60 * 24 * 30);
var stepDay = (1000 * 60 * 60 * 24);
var stepHour = (1000 * 60 * 60);
var stepMinute = (1000 * 60);
var stepSecond = (1000);
var stepMillisecond= (1);
// find the smallest step that is larger than the provided minimumStep
if (stepYear*1000 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 1000;}
if (stepYear*500 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 500;}
if (stepYear*100 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 100;}
if (stepYear*50 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 50;}
if (stepYear*10 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 10;}
if (stepYear*5 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 5;}
if (stepYear > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.YEAR; this.step = 1;}
if (stepMonth*3 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MONTH; this.step = 3;}
if (stepMonth > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MONTH; this.step = 1;}
if (stepDay*5 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.DAY; this.step = 5;}
if (stepDay*2 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.DAY; this.step = 2;}
if (stepDay > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.DAY; this.step = 1;}
if (stepDay/2 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.WEEKDAY; this.step = 1;}
if (stepHour*4 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.HOUR; this.step = 4;}
if (stepHour > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.HOUR; this.step = 1;}
if (stepMinute*15 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MINUTE; this.step = 15;}
if (stepMinute*10 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MINUTE; this.step = 10;}
if (stepMinute*5 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MINUTE; this.step = 5;}
if (stepMinute > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MINUTE; this.step = 1;}
if (stepSecond*15 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.SECOND; this.step = 15;}
if (stepSecond*10 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.SECOND; this.step = 10;}
if (stepSecond*5 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.SECOND; this.step = 5;}
if (stepSecond > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.SECOND; this.step = 1;}
if (stepMillisecond*200 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MILLISECOND; this.step = 200;}
if (stepMillisecond*100 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MILLISECOND; this.step = 100;}
if (stepMillisecond*50 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MILLISECOND; this.step = 50;}
if (stepMillisecond*10 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MILLISECOND; this.step = 10;}
if (stepMillisecond*5 > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MILLISECOND; this.step = 5;}
if (stepMillisecond > minimumStep) {this.scale = links.Timeline.StepDate.SCALE.MILLISECOND; this.step = 1;}
};
/**
* Snap a date to a rounded value. The snap intervals are dependent on the
* current scale and step.
* @param {Date} date the date to be snapped
*/
links.Timeline.StepDate.prototype.snap = function(date) {
if (this.scale == links.Timeline.StepDate.SCALE.YEAR) {
var year = date.getFullYear() + Math.round(date.getMonth() / 12);
date.setFullYear(Math.round(year / this.step) * this.step);
date.setMonth(0);
date.setDate(0);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
}
else if (this.scale == links.Timeline.StepDate.SCALE.MONTH) {
if (date.getDate() > 15) {
date.setDate(1);
date.setMonth(date.getMonth() + 1);
// important: first set Date to 1, after that change the month.
}
else {
date.setDate(1);
}
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
}
else if (this.scale == links.Timeline.StepDate.SCALE.DAY ||
this.scale == links.Timeline.StepDate.SCALE.WEEKDAY) {
switch (this.step) {
case 5:
case 2:
date.setHours(Math.round(date.getHours() / 24) * 24); break;
default:
date.setHours(Math.round(date.getHours() / 12) * 12); break;
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
}
else if (this.scale == links.Timeline.StepDate.SCALE.HOUR) {
switch (this.step) {
case 4:
date.setMinutes(Math.round(date.getMinutes() / 60) * 60); break;
default:
date.setMinutes(Math.round(date.getMinutes() / 30) * 30); break;
}
date.setSeconds(0);
date.setMilliseconds(0);
} else if (this.scale == links.Timeline.StepDate.SCALE.MINUTE) {
switch (this.step) {
case 15:
case 10:
date.setMinutes(Math.round(date.getMinutes() / 5) * 5);
date.setSeconds(0);
break;
case 5:
date.setSeconds(Math.round(date.getSeconds() / 60) * 60); break;
default:
date.setSeconds(Math.round(date.getSeconds() / 30) * 30); break;
}
date.setMilliseconds(0);
}
else if (this.scale == links.Timeline.StepDate.SCALE.SECOND) {
switch (this.step) {
case 15:
case 10:
date.setSeconds(Math.round(date.getSeconds() / 5) * 5);
date.setMilliseconds(0);
break;
case 5:
date.setMilliseconds(Math.round(date.getMilliseconds() / 1000) * 1000); break;
default:
date.setMilliseconds(Math.round(date.getMilliseconds() / 500) * 500); break;
}
}
else if (this.scale == links.Timeline.StepDate.SCALE.MILLISECOND) {
var step = this.step > 5 ? this.step / 2 : 1;
date.setMilliseconds(Math.round(date.getMilliseconds() / step) * step);
}
};
/**
* Check if the current step is a major step (for example when the step
* is DAY, a major step is each first day of the MONTH)
* @return {boolean} true if current date is major, else false.
*/
links.Timeline.StepDate.prototype.isMajor = function() {
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND:
return (this.current.getMilliseconds() == 0);
case links.Timeline.StepDate.SCALE.SECOND:
return (this.current.getSeconds() == 0);
case links.Timeline.StepDate.SCALE.MINUTE:
return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
// Note: this is no bug. Major label is equal for both minute and hour scale
case links.Timeline.StepDate.SCALE.HOUR:
return (this.current.getHours() == 0);
case links.Timeline.StepDate.SCALE.WEEKDAY: // intentional fall through
case links.Timeline.StepDate.SCALE.DAY:
return (this.current.getDate() == 1);
case links.Timeline.StepDate.SCALE.MONTH:
return (this.current.getMonth() == 0);
case links.Timeline.StepDate.SCALE.YEAR:
return false;
default:
return false;
}
};
/**
* Returns formatted text for the minor axislabel, depending on the current
* date and the scale. For example when scale is MINUTE, the current time is
* formatted as "hh:mm".
* @param {Object} options
* @param {Date} [date] custom date. if not provided, current date is taken
*/
links.Timeline.StepDate.prototype.getLabelMinor = function(options, date) {
if (date == undefined) {
date = this.current;
}
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND: return String(date.getMilliseconds());
case links.Timeline.StepDate.SCALE.SECOND: return String(date.getSeconds());
case links.Timeline.StepDate.SCALE.MINUTE:
return this.addZeros(date.getHours(), 2) + ":" + this.addZeros(date.getMinutes(), 2);
case links.Timeline.StepDate.SCALE.HOUR:
return this.addZeros(date.getHours(), 2) + ":" + this.addZeros(date.getMinutes(), 2);
case links.Timeline.StepDate.SCALE.WEEKDAY: return options.DAYS_SHORT[date.getDay()] + ' ' + date.getDate();
case links.Timeline.StepDate.SCALE.DAY: return String(date.getDate());
case links.Timeline.StepDate.SCALE.MONTH: return options.MONTHS_SHORT[date.getMonth()]; // month is zero based
case links.Timeline.StepDate.SCALE.YEAR: return String(date.getFullYear());
default: return "";
}
};
/**
* Returns formatted text for the major axislabel, depending on the current
* date and the scale. For example when scale is MINUTE, the major scale is
* hours, and the hour will be formatted as "hh".
* @param {Object} options
* @param {Date} [date] custom date. if not provided, current date is taken
*/
links.Timeline.StepDate.prototype.getLabelMajor = function(options, date) {
if (date == undefined) {
date = this.current;
}
switch (this.scale) {
case links.Timeline.StepDate.SCALE.MILLISECOND:
return this.addZeros(date.getHours(), 2) + ":" +
this.addZeros(date.getMinutes(), 2) + ":" +
this.addZeros(date.getSeconds(), 2);
case links.Timeline.StepDate.SCALE.SECOND:
return date.getDate() + " " +
options.MONTHS[date.getMonth()] + " " +
this.addZeros(date.getHours(), 2) + ":" +
this.addZeros(date.getMinutes(), 2);
case links.Timeline.StepDate.SCALE.MINUTE:
return options.DAYS[date.getDay()] + " " +
date.getDate() + " " +
options.MONTHS[date.getMonth()] + " " +
date.getFullYear();
case links.Timeline.StepDate.SCALE.HOUR:
return options.DAYS[date.getDay()] + " " +
date.getDate() + " " +
options.MONTHS[date.getMonth()] + " " +
date.getFullYear();
case links.Timeline.StepDate.SCALE.WEEKDAY:
case links.Timeline.StepDate.SCALE.DAY:
return options.MONTHS[date.getMonth()] + " " +
date.getFullYear();
case links.Timeline.StepDate.SCALE.MONTH:
return String(date.getFullYear());
default:
return "";
}
};
/**
* Add leading zeros to the given value to match the desired length.
* For example addZeros(123, 5) returns "00123"
* @param {int} value A value
* @param {int} len Desired final length
* @return {string} value with leading zeros
*/
links.Timeline.StepDate.prototype.addZeros = function(value, len) {
var str = "" + value;
while (str.length < len) {
str = "0" + str;
}
return str;
};
/** ------------------------------------------------------------------------ **/
/**
* Image Loader service.
* can be used to get a callback when a certain image is loaded
*
*/
links.imageloader = (function () {
var urls = {}; // the loaded urls
var callbacks = {}; // the urls currently being loaded. Each key contains
// an array with callbacks
/**
* Check if an image url is loaded
* @param {String} url
* @return {boolean} loaded True when loaded, false when not loaded
* or when being loaded
*/
function isLoaded (url) {
if (urls[url] == true) {
return true;
}
var image = new Image();
image.src = url;
if (image.complete) {
return true;
}
return false;
}
/**
* Check if an image url is being loaded
* @param {String} url
* @return {boolean} loading True when being loaded, false when not loading
* or when already loaded
*/
function isLoading (url) {
return (callbacks[url] != undefined);
}
/**
* Load given image url
* @param {String} url
* @param {function} callback
* @param {boolean} sendCallbackWhenAlreadyLoaded optional
*/
function load (url, callback, sendCallbackWhenAlreadyLoaded) {
if (sendCallbackWhenAlreadyLoaded == undefined) {
sendCallbackWhenAlreadyLoaded = true;
}
if (isLoaded(url)) {
if (sendCallbackWhenAlreadyLoaded) {
callback(url);
}
return;
}
if (isLoading(url) && !sendCallbackWhenAlreadyLoaded) {
return;
}
var c = callbacks[url];
if (!c) {
var image = new Image();
image.src = url;
c = [];
callbacks[url] = c;
image.onload = function (event) {
urls[url] = true;
delete callbacks[url];
for (var i = 0; i < c.length; i++) {
c[i](url);
}
}
}
if (c.indexOf(callback) == -1) {
c.push(callback);
}
}
/**
* Load a set of images, and send a callback as soon as all images are
* loaded
* @param {String[]} urls
* @param {function } callback
* @param {boolean} sendCallbackWhenAlreadyLoaded
*/
function loadAll (urls, callback, sendCallbackWhenAlreadyLoaded) {
// list all urls which are not yet loaded
var urlsLeft = [];
urls.forEach(function (url) {
if (!isLoaded(url)) {
urlsLeft.push(url);
}
});
if (urlsLeft.length) {
// there are unloaded images
var countLeft = urlsLeft.length;
urlsLeft.forEach(function (url) {
load(url, function () {
countLeft--;
if (countLeft == 0) {
// done!
callback();
}
}, sendCallbackWhenAlreadyLoaded);
});
}
else {
// we are already done!
if (sendCallbackWhenAlreadyLoaded) {
callback();
}
}
}
/**
* Recursively retrieve all image urls from the images located inside a given
* HTML element
* @param {Node} elem
* @param {String[]} urls Urls will be added here (no duplicates)
*/
function filterImageUrls (elem, urls) {
var child = elem.firstChild;
while (child) {
if (child.tagName == 'IMG') {
var url = child.src;
if (urls.indexOf(url) == -1) {
urls.push(url);
}
}
filterImageUrls(child, urls);
child = child.nextSibling;
}
}
return {
'isLoaded': isLoaded,
'isLoading': isLoading,
'load': load,
'loadAll': loadAll,
'filterImageUrls': filterImageUrls
};
})();
/** ------------------------------------------------------------------------ **/
/**
* Add and event listener. Works for all browsers
* @param {Element} element An html element
* @param {string} action The action, for example "click",
* without the prefix "on"
* @param {function} listener The callback function to be executed
* @param {boolean} useCapture
*/
links.Timeline.addEventListener = function (element, action, listener, useCapture) {
if (element.addEventListener) {
if (useCapture === undefined)
useCapture = false;
if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
action = "DOMMouseScroll"; // For Firefox
}
element.addEventListener(action, listener, useCapture);
} else {
element.attachEvent("on" + action, listener); // IE browsers
}
};
/**
* Remove an event listener from an element
* @param {Element} element An html dom element
* @param {string} action The name of the event, for example "mousedown"
* @param {function} listener The listener function
* @param {boolean} useCapture
*/
links.Timeline.removeEventListener = function(element, action, listener, useCapture) {
if (element.removeEventListener) {
// non-IE browsers
if (useCapture === undefined)
useCapture = false;
if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
action = "DOMMouseScroll"; // For Firefox
}
element.removeEventListener(action, listener, useCapture);
} else {
// IE browsers
element.detachEvent("on" + action, listener);
}
};
/**
* Get HTML element which is the target of the event
* @param {Event} event
* @return {Element} target element
*/
links.Timeline.getTarget = function (event) {
// code from http://www.quirksmode.org/js/events_properties.html
if (!event) {
event = window.event;
}
var target;
if (event.target) {
target = event.target;
}
else if (event.srcElement) {
target = event.srcElement;
}
if (target.nodeType != undefined && target.nodeType == 3) {
// defeat Safari bug
target = target.parentNode;
}
return target;
};
/**
* Stop event propagation
*/
links.Timeline.stopPropagation = function (event) {
if (!event)
event = window.event;
if (event.stopPropagation) {
event.stopPropagation(); // non-IE browsers
}
else {
event.cancelBubble = true; // IE browsers
}
};
/**
* Cancels the event if it is cancelable, without stopping further propagation of the event.
*/
links.Timeline.preventDefault = function (event) {
if (!event)
event = window.event;
if (event.preventDefault) {
event.preventDefault(); // non-IE browsers
}
else {
event.returnValue = false; // IE browsers
}
};
/**
* Retrieve the absolute left value of a DOM element
* @param {Element} elem A dom element, for example a div
* @return {number} left The absolute left position of this element
* in the browser page.
*/
links.Timeline.getAbsoluteLeft = function(elem) {
var doc = document.documentElement;
var body = document.body;
var left = elem.offsetLeft;
var e = elem.offsetParent;
while (e != null && e != body && e != doc) {
left += e.offsetLeft;
left -= e.scrollLeft;
e = e.offsetParent;
}
return left;
};
/**
* Retrieve the absolute top value of a DOM element
* @param {Element} elem A dom element, for example a div
* @return {number} top The absolute top position of this element
* in the browser page.
*/
links.Timeline.getAbsoluteTop = function(elem) {
var doc = document.documentElement;
var body = document.body;
var top = elem.offsetTop;
var e = elem.offsetParent;
while (e != null && e != body && e != doc) {
top += e.offsetTop;
top -= e.scrollTop;
e = e.offsetParent;
}
return top;
};
/**
* Get the absolute, vertical mouse position from an event.
* @param {Event} event
* @return {Number} pageY
*/
links.Timeline.getPageY = function (event) {
if (('targetTouches' in event) && event.targetTouches.length) {
event = event.targetTouches[0];
}
if ('pageY' in event) {
return event.pageY;
}
// calculate pageY from clientY
var clientY = event.clientY;
var doc = document.documentElement;
var body = document.body;
return clientY +
( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
( doc && doc.clientTop || body && body.clientTop || 0 );
};
/**
* Get the absolute, horizontal mouse position from an event.
* @param {Event} event
* @return {Number} pageX
*/
links.Timeline.getPageX = function (event) {
if (('targetTouches' in event) && event.targetTouches.length) {
event = event.targetTouches[0];
}
if ('pageX' in event) {
return event.pageX;
}
// calculate pageX from clientX
var clientX = event.clientX;
var doc = document.documentElement;
var body = document.body;
return clientX +
( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
( doc && doc.clientLeft || body && body.clientLeft || 0 );
};
/**
* Adds one or more className's to the given elements style
* @param {Element} elem
* @param {String} className
*/
links.Timeline.addClassName = function(elem, className) {
var classes = elem.className.split(' ');
var classesToAdd = className.split(' ');
var added = false;
for (var i=0; i
