- The Timeline is an interactive visualization chart to visualize events in time.
- The events can take place on a single date, or have a start and end date (a range).
- You can freely move and zoom in the timeline by dragging and scrolling in the
- Timeline. Events can be created, edited, and deleted in the timeline.
- The time scale on the axis is adjusted automatically, and supports scales ranging
- from milliseconds to years.
-
-
-
- When the timeline is defined as editable (and groupsChangeable and timeChangeable are set accordingly), events can be moved to another time
- by dragging them. By double clicking, the contents of an event can be changed.
- An event can be deleted by clicking the delete button on the upper right.
- A new event can be added in different
- ways: by double clicking in the timeline, or by keeping the Ctrl key down and
- clicking or dragging in the timeline, or by clicking the add button in the
- upper left of the timeline, and then clicking or dragging at the right location
- in the timeline.
-
-
-
-
- The Timeline is developed as a Google Visualization Chart in javascript.
- It runs in every browser without additional requirements.
- There is a GWT wrapper available to use the Timeline in GWT (Google Web Toolkit),
- you can find relevant documentation here.
-
-
-
- The Timeline is designed to display up to 1000 events smoothly on any modern browser.
-
-
-
Example
-
- Here a timeline example. Click and drag to move the timeline, scroll to zoom the timeline.
-
-
- More examples can be found in the examples directory.
-
-
-
-
-
<html>
- <head>
- <title>Timeline demo</title>
-
- <style>
- body {font: 10pt arial;}
- </style>
-
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript" src="../timeline.js"></script>
- <link rel="stylesheet" type="text/css" href="../timeline.css">
-
- <script type="text/javascript">
- google.load("visualization", "1");
-
- // Set callback to run when API is loaded
- google.setOnLoadCallback(drawVisualization);
-
- // Called when the Visualization API is loaded.
- function drawVisualization() {
- // Create and populate a data table.
- var data = new google.visualization.DataTable();
- data.addColumn('datetime', 'start');
- data.addColumn('datetime', 'end');
- data.addColumn('string', 'content');
-
- data.addRows([
- [new Date(2010,7,23), , 'Conversation<br>' +
- '<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
- [new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
- '<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
- [new Date(2010,7,24,16,0,0), , 'Report'],
- [new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
- [new Date(2010,7,28), , 'Memo<br>' +
- '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
- [new Date(2010,7,29), , 'Phone call<br>' +
- '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
- [new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
- [new Date(2010,8,4,12,0,0), , 'Report<br>' +
- '<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
- ]);
-
- // specify options
- var options = {
- "width": "100%",
- "height": "99%",
- "style": "box" // optional
- };
-
- // Instantiate our timeline object.
- var timeline = new links.Timeline(document.getElementById('mytimeline'));
-
- // Draw our timeline with the created data and options
- timeline.draw(data, options);
- }
- </script>
- </head>
-
- <body>
- <div id="mytimeline"></div>
- </body>
-</html>
-
-
-
-
Loading
-
-
- To load the Timeline, download the file
- timeline.zip
- and unzip it in a sub directory timeline on your html page.
- Include the two downloaded files (timeline.js and timeline.css) in the head of your html code.
- When you use a Google DataTable for providing the data,
- the Google API must be included too.
-
- Note that the Google API is only available online, so it is not possible
- to use it in an offline application.
-
- When the Google API is used, the google visualization tools needs to be
- loaded. This is not needed when using a JSON Array as data type.
-
-
google.load("visualization", "1");
-google.setOnLoadCallback(drawTimeline);
-function drawTimeline() {
- // load data and create the timeline here
-}
-
-
-The class name of the Timeline is links.Timeline
-
var timeline = new links.Timeline(container);
-
-After being loaded, the timeline can be drawn via the method draw,
-provided with data and options.
-
timeline.draw(data, options);
-
- where data is a DataTable or a JSON Array,
- and options is a name-value map in the JSON format.
-
-
-
- The Timeline stores a link to the original data table, and applies changes
- made from within the Timeline to this data table.
- When the data table is changed externally, the Timeline can be updated by executing
- redraw(). The Timeline can be linked to an other/new table
- via draw(data) (without providing options).
- When the website layout has been changed or resized, use checkResize()
- to update the size of the timeline.
-
-
-
-
Data Format
-
- The Timeline supports two data types: a JSON Array or a Google DataTable.
-
-
-
-
JSON
-
- The Timeline supports a JSON Array as data format. The Array must contain
- JSON Objects with fields start, end (optional),
- content, group (optional), and
- className (optional).
- When JSON is used as data format (instead of Google DataTable), the
- Timeline can be used offline.
-
-
-
- A table is constructed as:
-
-
-
-var data = [];
-
-data.push({
- 'start': new Date(2010, 7, 15),
- 'end': new Date(2010, 8, 2), // end is optional
- 'content': 'Trajectory A'
- // Optional: a field 'group'
- // Optional: a field 'className'
- // Optional: a field 'editable'
-});
-
-
-
-
Google DataTable
-
- The Timeline requires a data table with two required and three optional
- columns.
- It is possible to use a Google DataTable or DataView, and the data
- can be queried from an external data source using Google Query.
- Note that the needed Google API is only available online and cannot be
- downloaded for offline usage.
-
-
-
- A table is constructed as:
-
-
-
-var data = new google.visualization.DataTable();
-data.addColumn('datetime', 'start');
-data.addColumn('datetime', 'end');
-data.addColumn('string', 'content');
-// Optional: a column 'group'
-// Optional: a column 'className'
-// Optional: a column 'editable'
-// Optional: a column 'type'
-
-data.addRow([new Date(2010,7,15), new Date(2010,8,2), "Trajectory A"]);
-// ...
-
-
-
- The Timeline checks the type of the columns by first reading the
- column id, and if not provided read the column label.
- If both the column id's and label's are undefined, the Timeline will use
- column 0 as start, column 1 as end, column 2 as content, column 3 as group,
- column 4 as className, and column 5 as editable.
-
-
-
Fields
-
-
- The fields are defined as:
-
-
-
-
-
Name
-
Type
-
Required
-
Description
-
-
-
start
-
Date
-
yes*
-
- The start date of the event, for example new Date(2010,2,23).
-
-
- Remark: Months in the JavaScript Date object are zero-based,
- so new Date(2010,2,23) represents 23th of March, 2010.
-
- * If the type is set to floatingRange, the start is optional.
-
-
-
-
end
-
Date
-
no
-
The end date of the event. The end date is optional, and can be left null.
- If end date is provided, the event is displayed as a range.
- If not, the event is displayed as a box.
-
-
-
content
-
String
-
yes
-
The contents of the event. This can be plain text or html code.
-
-
-
group
-
any type
-
no
-
This field is optional. When the group column is provided,
- all events with the same group are placed on one line.
- A vertical axis is displayed showing the groups.
- Grouping events can be useful for example when showing availability of multiple
- people, rooms, or other resources next to each other.
-
- If none of the events has a group,
- the events will be drawn on top of the horizontal axis.
- When events overlap each other, the will be stacked automatically.
-
-
-
-
className
-
String
-
no
-
This field is optional. A className can be used to give events
- and individual css style. For example, when an event has className
- 'red', one can define a css style
-
- .red {
- background-color: red;
- border-color: dark-red;
- }
- .
- Depending on how you apply your css styles, it may be needed to
- (re)define the style for selected events
- (class timeline-event-selected).
- More details on how to style events can be found in the section
- Styles.
-
-
-
-
editable
-
Boolean
-
no
-
This field is optional. By providing the field editable, events
- can be made editable or read-only on an individual basis.
- If editable is true, the event can be edited and deleted.
- The editable setting of an individual event overwrites the global
- setting options.editable. So when the Timeline as a whole is
- read-only, individual events may be made editable, and vice versa.
-
-
-
-
type
-
String
-
no
-
Type of the event, optional. Available values: "box", "range", "dot", "floatingRange".
- By default, the type is "range" for events having a start and end
- date, and "box" for events with a start date. This default can be
- overwritten by the global option "style".
-
-
-
-
-
Custom fields
-
-It is possible to add custom fields to items. The Timeline will ignore them and leave
-them intact. When retrieving an item via getItem, these custom fields
-will be returned along with the known fields.
-
-
-
Configuration Options
-
-
- Options can be used to customize the timeline. Options are defined as a JSON object.
- All options are optional.
-
When true, events are moved animated when resizing or moving them.
- This is very pleasing for the eye, but does require more computational power.
-
-
-
animateZoom
-
boolean
-
true
-
When true, events are moved animated when zooming the Timeline.
- This looks cool, but does require more computational power.
-
-
-
-
axisOnTop
-
boolean
-
false
-
If false (default), the horizontal axis is drawn at the bottom.
- If true, the axis is drawn on top.
-
-
-
-
cluster
-
boolean
-
false
-
If true, events will be clustered together when zooming out.
- This keeps the Timeline clear and fast also with a larger amount of
- events.
- experimental
-
-
-
-
-
clusterMaxItems
-
Number
-
5
-
The maximum quantity of items that can be shown outside a cluster. Setting a low value is useful to limit the
- height of the container element. This value must be at least one.
- experimental
-
-
-
-
-
customStackOrder
-
function
-
none
-
Provide a custom sort function to order the items. The order of the
- items is determining the way they are stacked. The function
- customStackOrder is called with two parameters, both of type
- `timeline.Item`.
-
-
-
-
-
box.align
-
String
-
"center"
-
Alignment of items with style "box". Available values are
- "center" (default), "left", or "right").
-
-
-
-
dragAreaWidth
-
Number
-
10
-
The width of the drag areas in pixels.
- When an event range is selected, it has a drag area on the left and right
- side, with which the start or end time of the even can be manipulated.
-
-
-
-
editable
-
boolean
-
false
-
If true, the events can be edited, created and deleted.
- Events can only be editable when th option selectable is true
- (default). When editable is true, the Timeline can fire events
- change, changed, edit,
- add, delete.
-
- This global setting editable can be overwritten for individual events
- by providing the events with a field editable,
- as described in section Data Format.
-
-
-
-
-
end
-
Date
-
none
-
The initial end date for the axis of the timeline.
- If not provided, the latest date present in the events is taken as end date.
-
-
-
-
eventMargin
-
int
-
10
-
The minimal margin in pixels between events.
-
-
-
eventMarginAxis
-
int
-
10
-
The minimal margin in pixels between events and the horizontal axis.
-
-
-
-
groupsChangeable
-
boolean
-
false
-
If true, items can be moved from one group to another.
- Only applicable when groups are used. See also option timeChangeable.
-
-
-
groupsOnRight
-
boolean
-
false
-
If false, the groups legend is drawn at the left side of the timeline.
- If true, the groups legend is drawn on the right side.
-
-
-
-
groupsOrder
-
boolean | function
-
true
-
- Allows to customize the way groups are ordered.
- When true (default), groups will be ordered alphabetically.
- When false, groups will not be ordered at all.
- When a function, groups will be ordered using this sort function.
- While sorting, the sort function is called with two groups to compare
- as parameters, and the function must return 0 when a and b are equal,
- a value larger than 0 when a is larger than b,
- and a value smaller than 0 when a is smaller than b.
-
-
-
-
-
groupsWidth
-
string
-
none
-
By default, the width of the groups legend is adjusted to the group
- names. A fixed width can be set for the groups legend by specifying the
- groupsWidth as a string, for example "200px".
-
-
-
-
groupMinHeight
-
int
-
0
-
The minimum height of each individual group even if they have no items.
- The group height is set as the greatest value between items height and the groupMinHeight.
-
-
-
-
height
-
string
-
"auto"
-
The height of the timeline in pixels, as a percentage, or "auto".
- When the height is set to "auto", the height of the timeline is automatically
- adjusted to fit the contents. If not, it is possible that events get stacked
- so high, that they are not visible in the timeline.
- When height is set to "auto", a minimum height can be specified with the
- option minHeight.
-
-
-
-
-
locale
-
string
-
"en"
-
Choose locale for the Timeline.
- The Built-in locale is english (en).
- More locales are available in the file timeline-locales.js:
-
-
-
Arabic, ar (aliases: ar_AR)
-
Catalan, ca (aliases: ca_ES)
-
Brazilian Portuguese, pt_BR
-
Chinese, zh (aliases: zh_CN, zh_TR)
-
Danish, da (aliases: da_DK)
-
Dutch, nl (aliases: nl_NL, nl_BE)
-
English, en (aliases: en_US, en_UK)
-
Finnish, fi (aliases: fi_FI)
-
French, fr (aliases: fr_FR, fr_BE, fr_CA)
-
German, de (aliases: de_DE, de_CH)
-
Hungarian, hu (aliases: hu_HU)
-
Japanese, ja (aliases: ja_JA)
-
Korean, ko (aliases: ko_KO)
-
Portuguese, pt (aliases: pt_PT)
-
Russian, ru (aliases: ru_RU)
-
Spanish, es (aliases: es_ES)
-
Turkish, tr (aliases: tr_TR)
-
-
-
-
-
-
max
-
Date
-
none
-
Set a maximum Date for the visible range.
- It will not be possible to move beyond this maximum.
- The maximum date itself is excluded.
-
-
-
-
-
min
-
Date
-
none
-
Set a minimum Date for the visible range.
- It will not be possible to move beyond this minimum.
-
-
-
-
-
minHeight
-
Number
-
0
-
Specifies a minimum height for the Timeline in pixels.
- Useful when height is set to "auto".
-
-
-
-
-
moveable
-
boolean
-
true
-
If true, the timeline is movable.
- When the timeline moved, the rangechange events are fired.
-
-
-
-
scale
-
links.Timeline.StepDate.SCALE
-
none
-
Set a custom scale. Automatic scaling will be disabled.
- Both options scale and step must be set.
-
- For example scale=SCALE.MINUTES and step=5 will result in minor steps of
- 5 minutes, and major steps of an hour.
- Available scales: MILLISECOND, SECOND,
- MINUTE, HOUR, WEEKDAY,
- DAY, MONTH, YEAR.
- As step size, choose for example 1, 2, 5, or 10.
-
-
-
-
selectable
-
boolean
-
true
-
If true, the events on the timeline are selectable.
- When an event is selected, the select event is fired.
-
-
-
-
-
snapEvents
-
boolean
-
true
-
If true, the start and end of an event will be snapped nice integer
- values when moving or resizing the event.
-
-
-
-
-
stackEvents
-
boolean
-
true
-
If true, the events are stacked above each other to prevent overlapping events.
- This option cannot be used in combination with grouped events.
-
-
-
start
-
Date
-
none
-
The initial start date for the axis of the timeline.
- If not provided, the earliest date present in the events is taken as start date.
-
-
-
-
step
-
number
-
none
-
See option scale.
-
-
-
-
-
style
-
string
-
"box"
-
Specifies the style for the timeline events.
- Choose from "dot" or "box".
- Note that the content of the events may contain additional html formatting.
- It is possible to implement custom styles using the method addItemType.
-
-
-
-
-
showCurrentTime
-
boolean
-
true
-
If true, the timeline shows a red, vertical line displaying the current
- time. This time can be synchronized with a server via the method
- setCurrentTime.
-
-
-
showCustomTime
-
boolean
-
false
-
If true, the timeline shows a blue vertical line displaying a custom
- time. This line can be dragged by the user.
- The custom time can be utilized to show a state in the past or in the future.
- When the custom time bar is dragged by the user, an event is triggered, on
- which the contents of the timeline can be changed in to the state at that
- moment in time.
-
-
-
-
showMajorLabels
-
boolean
-
true
-
By default, the timeline shows both minor and major date labels on the
- horizontal axis.
- For example the minor labels show minutes and the major labels show hours.
- When showMajorLabels is false, no major labels
- are shown.
-
-
-
showMinorLabels
-
boolean
-
true
-
By default, the timeline shows both minor and major date labels on the
- horizontal axis.
- For example the minor labels show minutes and the major labels show hours.
- When showMinorLabels is false, no minor labels
- are shown. When both showMajorLabels and
- showMinorLabels are false, no horizontal axis will be
- visible.
-
-
-
-
showButtonNew
-
boolean
-
false
-
Show the button "Create new event" in the a navigation menu.
- Only applicable when option `editable` is true.
-
-
-
showNavigation
-
boolean
-
false
-
Show a navigation menu with buttons to move and zoom the timeline.
- The zoom buttons are only visible when option `zoomable` is true,
- and and move buttons are only visible when option `moveable` is true.
-
-
-
-
-
timeChangeable
-
boolean
-
true
-
If false, items can not be moved or dragged horizontally (neither start time nor end time is changable).
- This is useful when items should be editable but can only be changed regarding group or content (typical use case: scheduling events). See also the option groupsChangeable.
-
-
-
-
-
unselectable
-
boolean
-
true
-
If true, a selected event on the timeline can be un unselected.
- If false, a selected event cannot be unselected unless when selecting
- an other event. This means that as soon as the Timeline has a selected
- event, it will remain in a state where there is always an event selected.
- See also the option selectable.
-
-
-
-
-
width
-
string
-
"100%"
-
The width of the timeline in pixels or as a percentage.
-
-
-
-
zoomable
-
boolean
-
true
-
If true, the timeline is zoomable.
- When the timeline is zoomed, the rangechange event is fired.
-
-
-
-
-
zoomMax
-
Number
-
315360000000000
-
Set a maximum zoom interval for the visible range in milliseconds.
- It will not be possible to zoom out further than this maximum.
- Default value equals about 10000 years.
-
-
-
-
-
zoomMin
-
Number
-
10
-
Set a minimum zoom interval for the visible range in milliseconds.
- It will not be possible to zoom in further than this minimum.
-
-
-
-
-
-
-
Methods
-
- The Timeline supports the following methods.
-
-
-
-
-
Method
-
Return Type
-
Description
-
-
-
-
addItem(properties)
-
none
-
Add an item to the Timeline.
- The provided parameter properties is an Object,
- containing parameters start (Date), end (Date),
- content (String), group (String),
- className (String), and editable (Boolean).
- Parameters start and content are required,
- the others are optional.
-
-
-
-
addItemType(typeName, typeFactory)
-
none
-
Add a custom item type to the Timeline, extending the built-in types
- "box" and "dot".
- Parameter typeName is a String,
- and typeFactory is a constructor implementing the abstract
- prototype links.Timeline.Item. To use a custom type,
- specify the option style with the name of the custom type.
-
-
- See
- example25_new_item_type.html
- for an example, or study the implementations of links.Timeline.ItemBox,
- links.Timeline.ItemRange,
- and links.Timeline.ItemDot in the sourcecode of the Timeline.
-
-
-
-
-
-
-
cancelAdd()
-
none
-
An add event can be canceled by calling the method
- cancelAdd from within an event listener that listens for
- add events. This is useful when additions need to be approved.
-
-
-
-
-
cancelChange()
-
none
-
A changed event can be canceled by calling the method
- cancelChange from within an event listener that listens for
- changed events. This is useful when changes need to be approved.
-
-
-
-
-
cancelDelete()
-
none
-
A delete event can be canceled by calling the method
- cancelDelete from within an event listener that listens for
- delete events. This is useful when deletions need to be
- approved.
-
-
-
-
-
changeItem(index, properties)
-
none
-
Change properties of an existing item in the Timeline.
- index (Number) is the index of the item.
- The provided parameter properties is an Object,
- and can contain parameters start (Date),
- end (Date), content (String),
- group (String), className (String),
- and editable (Boolean).
-
-
-
-
-
checkResize()
-
none
-
Check if the timeline container is resized, and if so, resize the timeline.
- Useful when the webpage is resized.
-
-
-
-
deleteAllItems()
-
none
-
Delete all items from the timeline.
-
-
-
-
-
deleteItem(index, preventRender)
-
none
-
Delete an existing item.
- index (Number) is the index of the item.
- preventRender (Boolean) is optional parameter to prevent re-render timeline immediately after delete (for multiple deletions). Default is false.
-
-
-
-
-
draw(data, options)
-
none
-
Loads data, sets options, adjusts the visible range,
- and lastly (re)draws the Timeline.
- data is a Google DataTable or a JSON Array.
- options is an (optional) JSON Object containing values for options.
-
-
-
-
-
getCluster(index)
-
Object
-
Retrieve the properties of a single cluster. The returned object can
- contain parameters start (Date), and items that has
- each item contained in the cluster. Each item have the same properties as in a call to
- getItem.
-
-
-
-
getCustomTime()
-
Date
-
Retrieve the custom time.
- Only applicable when the option showCustomTime is true.
-
- time is a Date object.
-
-
-
-
-
getData()
-
Google DataTable or JSON Array
-
Retrieve the current datatable from the Timeline.
-
-
-
-
getItem(index)
-
Object
-
Retrieve the properties of a single item. The returned object can
- contain parameters start (Date), end (Date),
- content (String), group (String).
-
-
-
-
getSelection()
-
Array of selection elements
-
Standard getSelection() implementation.
- Returns an array with one or multiple selections. Each selection contains
- the property row (if an item is selected) or cluster if
- a cluster is selected.
-
-
-
-
-
getVisibleChartRange()
-
An object with start and end properties
-
Returns an object with start and end properties,
- which each one of them is a Date object,
- representing the currently visible time range.
-
-
-
-
getVisibleItems(start, end)
-
Array of row indices
-
Returns an array of item indices whose range or value falls within the
- start and end properties, which each one of
- them is a Date object.
-
-
-
-
-
redraw()
-
none
-
Redraw the timeline.
- Reloads the (linked) data table and redraws the timeline when resized.
- See also the method checkResize.
-
-
-
-
setAutoScale(enable)
-
none
-
Enable or disable autoscaling.
- If enable true or not defined, autoscaling is enabled.
- If false, autoscaling is disabled.
-
-
-
-
-
setCurrentTime(time)
-
none
-
Adjust the current time of the timeline. This can for example be
- changed to match the time of a server or a time offset of another time zone.
- time is a Date object.
-
-
-
-
-
setCustomTime(time)
-
none
-
Adjust the custom time in the timeline.
- Only applicable when the option showCustomTime is true.
- time is a Date object.
-
-
-
-
-
setData(data)
-
none
-
Set new data in the Timeline. All settings (such as visible range) stay
- unchanged, and the timeline must be redrawn afterwards with the method
- redraw.
- data is a Google DataTable object or a JSON Array.
-
-
-
-
-
setSelection(selection)
-
none
-
Standard setSelection(selection) implementation.
- selection is an array with selection elements. The timeline
- accepts only one selection element, which must have the property row.
- The visible chart range will be moved such that the selected event is placed in the middle.
- To unselect all items, use set selection with an empty array.
- Example usage: timeline.setSelection([{row: 3}]);.
-
-
-
-
-
setSize(width, height)
-
none
-
Parameters width and height are strings,
- containing a new size for the timeline. Size can be provided in pixels
- or in percentages.
-
-
-
-
setScale(scale, step)
-
none
-
Set a custom scale. Automatic scaling will be disabled.
- For example setScale(SCALE.MINUTES, 5) will result in minor steps of
- 5 minutes, and major steps of an hour.
- Available scales: MILLISECOND, SECOND,
- MINUTE, HOUR, WEEKDAY,
- DAY, MONTH, YEAR.
- As step size, choose for example 1, 2, 5, or 10.
-
-
-
-
-
setVisibleChartRange(start, end)
-
none
-
Sets the visible range (zoom) to the specified range.
- Accepts two parameters of type Date that represent the first and last times
- of the wanted selected visible range.
- Set start to null to include everything from the earliest date to end;
- set end to null to include everything from start to the last date.
-
-
-
-
setVisibleChartRangeNow()
-
none
-
Move the visible range such that the current time is located in the
- center of the timeline. This method does not trigger a
- rangechange event.
-
-
-
-
setVisibleChartRangeAuto()
-
none
-
Adjust the visible time range such that all events are visible.
-
-
-
-
move(moveFactor)
-
none
-
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.
- moveFactor is a Number that determines the moving amount.
- A positive value will move right, a negative value will move left.
-
-
-
-
-
zoom(zoomFactor, zoomAroundDate)
-
none
-
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.
- zoomFactor is a Number that determines the zooming amount.
- Positive value will zoom in, negative value will zoom out.
- zoomAroundDate is a Date around which to zoom and it is optional.
-
-
-
-
-
Events
-
-
- The Timeline fires events after an event is selected, the visible range changed,
- or when an event is changed. The events can be cached by creating a listener.
- Listeners can be registered using the event messages from the Google API
- or event messages from the CHAP Links library.
-
-
- Here an example on how to catch a select event.
-
-
-
-function onselect() {
- var sel = mytimeline.getSelection();
- if (sel.length) {
- if (sel[0].row != undefined) {
- var row = sel[0].row;
- document.title = "event " + row + " selected";
- }
- }
-}
-
-google.visualization.events.addListener(mytimeline, 'select', onselect);
-// Or, when not using the Google API:
-// links.events.addListener(mytimeline, 'select', onselect);
-
-
-
- The following events are available.
-
-
-
-
-
-
-
-
-
name
-
Description
-
Properties
-
-
-
-
-
add
-
An event is about the be added.
- Fired after the user has clicked the button "Add event" and created a new
- event by clicking or moving an event into the Timeline.
-
- The selected row can be retrieved via the method getSelection,
- and new start and end data can be read in the according row in the data table.
-
- The add event can be canceled by calling the method
- cancelAdd from within the event listener. This is useful
- when additions need to be approved.
-
-
- none
-
-
-
-
-
change
-
The properties of an event are changing.
- Fired repeatedly while the user is modifying the start date or end
- date of an event by moving (dragging) the event in the Timeline.
-
- The selected row can be retrieved via the method getSelection,
- and new start and end data can be read in the according row in the data table.
-
-
-
- none
-
-
-
-
-
changed
-
The properties of an event changed.
- Fired after the user modified the start date or end date of an event
- by moving (dragging) the event in the Timeline.
-
- The selected row can be retrieved via the method getSelection,
- and new start and end data can be read in the according row in the data table.
-
- The changed event can be canceled by calling the method
- cancelChange from within the event listener. This is useful
- when changes need to be approved.
-
-
- none
-
-
-
-
-
edit
-
An event is about to be edited.
- This event is fired when the user double clicks on an event.
- The selected row can be retrieved via the method getSelection.
-
-
- none
-
-
-
-
-
delete
-
An event is about to be deleted.
- Fired after the user clicked the "Delete Event" button on the right of
- an event.
-
- The selected row can be retrieved via the method getSelection,
- and new start and end data can be read in the according row in the data table.
-
- The delete event can be canceled by calling the method
- cancelDelete from within the event listener. This is useful
- when deletions need to be approved.
-
-
- none
-
-
-
-
-
rangechange
-
Visible range is changing. Fired repeatedly while the user is modifying
- the visible time by moving (dragging) the timeline, or by zooming (scrolling),
- but not after a call to setVisibleChartRange or
- setRangeToCurrentTime methods.
- The new range can be retrieved by calling getVisibleChartRange
- method.
-
-
-
start: Date. The start time of the visible range.
-
end: Date. The end time of the visible range.
-
-
-
-
-
rangechanged
-
Visible range has been changed. Fired once after the user has modified
- the visible time by moving (dragging) the timeline, or by zooming (scrolling),
- but not after a call to setVisibleChartRange or
- setRangeToCurrentTime methods.
- The new range can be retrieved by calling getVisibleChartRange
- method.
-
-
-
start: Date. The start time of the visible range.
-
end: Date. The end time of the visible range.
-
-
-
-
-
-
ready
-
The chart is ready for external method calls.
- If you want to interact with the chart, and call methods after you draw it,
- you should set up a listener for this event before you call the draw method,
- and call them only after the event was fired.
-
none
-
-
-
-
select
-
When the user clicks on an event or a cluster on the timeline,
- the corresponding row in the data table is selected.
- The visualization then fires this event.
-
- The selected row or cluster can be retrieved via the method getSelection.
-
-
none
-
-
-
-
timechange
-
The custom time bar is changing. Fired repeatedly when the user is
- dragging the blue custom time bar, but not after a call to the
- setCustomTime method.
- The new custom time can be retrieved by calling getCustomTime
- method.
-
-
-
time: Date. The new custom time.
-
-
-
-
-
timechanged
-
The custom time bar has been changed. Fired once after the user has
- dragged the blue custom time bar, but not after a call to the
- setCustomTime method. The new custom time can be retrieved by
- calling getCustomTime method.
-
-
-
time: Date. The new custom time.
-
-
-
-
-
-
-
Styles
-
- All parts of the Timeline have a class name and a default css style.
- The styles can be overwritten, which enables full customization of the layout
- of the Timeline.
-
-
-
For example, to change the border and background color of all events, include the
- following code inside the head of your html code or in a separate stylesheet.
The axis has two grid lines: minor and major. When the scale is in days,
- each day gets a minor grid line, and each month a major grid line.
-
- border-color: #e5e5e5;
-
-
-
-
-
div.timeline-axis-grid-major
-
See div.timeline-axis-grid-major
-
- border-color: #bfbfbf;
-
-
-
-
-
div.timeline-axis-text
-
Both div.timeline-axis-text-minor and div.timeline-axis-text-major have
- also the class div.timeline-axis-text. Use this class to set font styles
- for both classes at once.
All different events (box, dot, range, line) get the class
- div.timeline-event-selected when they are currently selected.
- Use this class to visually show the currently selected event.
Divs with the class div.timeline-event-dot are used
- when the option style="dot" is used: a dot is drawn left from the event text.
- Dots are also drawn with style="box", to draw the dot at the axis below each event.
When option style="box" is used (the default value), each event
- is drawn as a box with a vertical line towards the axis. This line has the
- class div.timeline-event-line.
- Most of jQuery widgets are theme aware in terms of jQuery Themeroller CSS framework.
- If you would like to make the Timeline aware of jQuery themes, please include in your page a Themeroller theme of your choice
- (ui.theme.css) and the CSS file timeline-theme.css. The file timeline.css should not be included.
- These two files are enough to style the Timeline according to the selected theme.
-
-
-
-
Data Policy
-
- All code and data are processed and rendered in the browser. No data is sent to any server.
-
- Clear all cached clusters and data, and initialize all variables
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- clearCache()
-
-
-
- Clear the cached clusters
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {Item[]}
- getClusters(scale, maxItems)
-
-
-
- Cluster the events which are too close together
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}scale
-
-
-
The scale of the current window,
- defined as (windowWidth / (endDate - startDate))
-
-
- maxItems
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{Item[]} clusters
-
-
-
-
-
-
-
-
-
-
-
-
- setData(items, options)
-
-
-
- Set the items to be clustered.
-This will clear cached clusters.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Item[]}items
-
-
-
-
-
- {Object}options
- Optional
-
-
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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- updateData()
-
-
-
- Update the current data set: clear cache, and recalculate the clustering for
-the current level
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Documentation generated by JsDoc Toolkit 2.3.2 on Wed Mar 04 2015 09:58:28 GMT+0100 (CET)
-
- Remove the items DOM from the current HTML container
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Element}container
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- isRendered()
-
-
-
- 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
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} rendered
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- isVisible(start, end)
-
-
-
- Check if the item is located in the visible area of the timeline, and
-not part of a cluster
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}start
-
-
-
-
-
- {Date}end
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} visible
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- reflow()
-
-
-
- Reflow the Item: retrieve its actual size from the DOM
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} resized returns true if the axis is resized
-
-
-
-
-
-
-
-
-
-
-
-
- select()
-
-
-
- Select the item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setPosition(left, right)
-
-
-
- Reposition the item
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}left
-
-
-
-
-
- {Number}right
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- showDOM(container)
-
-
-
- Append the items DOM to the given HTML container. If items DOM does not yet
-exist, it will be created first.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Element}container
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- unselect()
-
-
-
- Unselect the item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- updateDOM()
-
-
-
- Update the DOM of the item. This will update the content and the classes
-of the item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- updatePosition(timeline)
-
-
-
- Reposition the item, recalculate its left, top, and width, using the current
-range of the timeline and the timeline options.
-
-
-
The start date, for example new Date(2010, 9, 21)
- or new Date(2010, 9, 21, 23, 45, 00)
-
-
- {Date}end
-
-
-
The end date
-
-
- {Number}minimumStep
-
-
-
Optional. Minimum step size in milliseconds
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Method Detail
-
-
-
-
-
- {string}
- addZeros(value, len)
-
-
-
- Add leading zeros to the given value to match the desired length.
-For example addZeros(123, 5) returns "00123"
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {int}value
-
-
-
A value
-
-
- {int}len
-
-
-
Desired final length
-
-
-
-
-
-
-
-
-
Returns:
-
-
{string} value with leading zeros
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- end()
-
-
-
- Check if the end date is reached
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} true if the current date has passed the end date
-
-
-
-
-
-
-
-
-
-
-
- {Date}
- getCurrent()
-
-
-
- Get the current datetime
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{Date} current The current date
-
-
-
-
-
-
-
-
-
-
-
-
- getLabelMajor(options, date)
-
-
-
- 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".
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Object}options
-
-
-
-
-
- {Date}date
- Optional
-
-
custom date. if not provided, current date is taken
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- getLabelMinor(options, date)
-
-
-
- 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".
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Object}options
-
-
-
-
-
- {Date}date
- Optional
-
-
custom date. if not provided, current date is taken
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- isMajor()
-
-
-
- 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)
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} true if current date is major, else false.
-
-
-
-
-
-
-
-
-
-
-
-
- next()
-
-
-
- Do the next step
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setAutoScale(enable)
-
-
-
- Enable or disable autoscaling
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {boolean}enable
-
-
-
If true, autoascaling is set true
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setMinimumStep(minimumStep)
-
-
-
- Automatically determine the scale that bests fits the provided minimum step
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}minimumStep
-
-
-
The minimum step size in milliseconds
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setRange(start, end, minimumStep)
-
-
-
- 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
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}start
-
-
-
The start date and time.
-
-
- {Date}end
-
-
-
The end date and time.
-
-
- {int}minimumStep
-
-
-
Optional. Minimum step size in milliseconds
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setScale(newScale, newStep)
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {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.
-
-
- {Number}newStep
-
-
-
A step size, by default 1. Choose for
- example 1, 2, 5, or 10.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- snap(date)
-
-
-
- Snap a date to a rounded value. The snap intervals are dependent on the
-current scale and step.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}date
-
-
-
the date to be snapped
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- start()
-
-
-
- Set the step iterator to the start date.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Documentation generated by JsDoc Toolkit 2.3.2 on Wed Mar 04 2015 09:58:28 GMT+0100 (CET)
-
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.
Convert a datetime (Date object) into a position on the screen
-Before this method can be used, the method calcConversionFactor must be
-executed once.
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)
- Apply a visible range. The range is limited to feasible maximum and minimum
-range.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}start
-
-
-
-
-
- {Date}end
-
-
-
-
-
- {Date}zoomAroundDate
-
-
-
Optional. Date around which will be zoomed.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- cancelAdd()
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- cancelChange()
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- cancelDelete()
-
-
-
- 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.
-
-
-
- Check if the timeline is resized, and if so, redraw the timeline.
-Useful when the webpage is resized.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- clearItems()
-
-
-
- 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.
-
-
-
- Test if the two provided items collide
-The items must have parameters left, right, top, and bottom.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Element}item1
-
-
-
The first item
-
-
- {Element}item2
-
-
-
The second item
-
-
- {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.
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} true if item1 and item2 collide, else false
-
-
-
-
-
-
-
-
-
-
-
-
- confirmDeleteItem(index)
-
-
-
- Delete an item after a confirmation.
-The deletion can be cancelled by executing .cancelDelete() during the
-triggered event 'delete'.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {int}index
-
-
-
Index of the item to be deleted
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {Object}
- createItem(itemData)
-
-
-
- Create an item object, containing all needed parameters
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Object}itemData
-
-
-
Object containing parameters start, end
- content, group.
Do not re-render timeline if true
- (optimization for multiple delete)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- draw(data, options)
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {google.visualization.DataTable}data
-
-
-
The data containing the events for the timeline.
- Object DataTable is defined in
- google.visualization.DataTable
-
-
- {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()
- Retrieve the absolute top value of a DOM element
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Element}elem
-
-
-
A dom element, for example a div
-
-
-
-
-
-
-
-
-
Returns:
-
-
{number} top The absolute top position of this element
- in the browser page.
-
-
-
-
-
-
-
-
-
-
-
- {Object}
- getCluster(index)
-
-
-
- Retrieve the properties of a cluster.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}index
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{Object} clusterdata Object containing cluster properties:
- {Date} start (required),
- {String} type (optional)
- {Array} array with item data as is in getItem()
If true, 5% of whitespace is added to the
- left and right of the range. Default is false.
-
-
-
-
-
-
-
-
-
Returns:
-
-
{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
-
-
-
-
-
-
-
-
-
-
-
- {Object}
- getGroup(groupName)
-
-
-
- Get a group by the group name. When the group does not exist,
-it will be created.
-
-
-
- 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
- }
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {google.visualization.DataTable}dataTable
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- move(moveFactor)
-
-
-
- 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
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}moveFactor
-
-
-
Moving amount. Positive value will move right,
- negative value will move left
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onDblClick(event)
-
-
-
- Double click event occurred for an item
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Event}event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onMouseDown(event)
-
-
-
- Start a moving operation inside the provided parent element
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Event}event
-
-
-
The event that occurred (required for
- retrieving the mouse position)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onMouseMove(event)
-
-
-
- Perform moving operating.
-This function activated from within the funcion links.Timeline.onMouseDown().
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Event}event
-
-
-
Well, eehh, the event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onMouseUp(event)
-
-
-
- Stop moving operating.
-This function activated from within the funcion links.Timeline.onMouseDown().
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {event}event
-
-
-
The event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onMouseWheel(event)
-
-
-
- Event handler for mouse wheel event, used to zoom the timeline
-Code from http://adomas.org/javascript-mouse-wheel/
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Event}event
-
-
-
The event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onTouchEnd(event)
-
-
-
- Event handler for touchend event on mobile devices
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onTouchMove(event)
-
-
-
- Event handler for touchmove event on mobile devices
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- onTouchStart(event)
-
-
-
- Event handler for touchstart event on mobile devices
-
-
-
Date object to be parsed. Can be:
- - a Date object like new Date(),
- - a long like 1356970529389,
- an ISO String like "2012-12-31T16:16:07.213Z",
- or a .Net Date string like
- "\/Date(1356970529389)\/"
- Cancels the event if it is cancelable, without stopping further propagation of the event.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- event
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- recalcConversion()
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- recalcItems()
-
-
-
- Recalculate item properties:
-- the height of each group.
-- the actualHeight, from the stacked items or the sum of the group heights
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} resized returns true if any of the items properties is
- changed
-
-
-
-
-
-
-
-
-
-
-
-
- redraw()
-
-
-
- Redraw the timeline
-Reloads the (linked) data table and redraws the timeline when resized.
-See also the method checkResize
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- reflowAxis()
-
-
-
- Reflow the timeline axis. Calculate its height, width, positioning, etc...
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} resized returns true if the axis is resized
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- reflowFrame()
-
-
-
- Reflow the timeline frame
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} resized Returns true if any of the frame elements
- have been resized.
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- reflowGroups()
-
-
-
- Reflow the size of the groups
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} resized Returns true if any of the frame elements
- have been resized.
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- reflowItems()
-
-
-
- Reflow all items, retrieve their actual size
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} resized returns true if any of the items is resized
- Re-render (reflow and repaint) all components of the Timeline: frame, axis,
-items, ...
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Object}options
- Optional
-
-
Available options:
- {boolean} renderTimesLeft Number of times the
- render may be repeated
- 5 times by default.
- {boolean} animate takes options.animate
- as default value
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- repaint()
-
-
-
- Repaint all components of the Timeline
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} needsReflow Returns true if the DOM is changed such that
- a reflow is needed.
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- repaintAxis()
-
-
-
- Redraw the timeline axis with minor and major labels
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} needsReflow Returns true if the DOM is changed such
- that a reflow is needed.
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- repaintAxisCharacters()
-
-
-
- Create characters used to determine the size of text on the axis
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} needsReflow Returns true if the DOM is changed such that
- a reflow is needed.
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisEndOverwriting()
-
-
-
- End of overwriting HTML DOM elements of the axis.
-remaining elements will be removed
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisHorizontal()
-
-
-
- Repaint the horizontal line and background of the axis
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisMajorLine(x)
-
-
-
- Create a Major line for the axis at position x
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}x
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisMajorText(x, text)
-
-
-
- Create a Major label for the axis at position x
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}x
-
-
-
-
-
- {String}text
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisMinorLine(x)
-
-
-
- Create a minor line for the axis at position x
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}x
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisMinorText(x, text)
-
-
-
- Create a minor label for the axis at position x
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}x
-
-
-
-
-
- {String}text
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintAxisStartOverwriting()
-
-
-
- Initialize redraw of the axis. All existing labels and lines will be
-overwritten and reused.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintCurrentTime()
-
-
-
- Redraw the current time bar
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintCustomTime()
-
-
-
- Redraw the custom time bar
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintDeleteButton()
-
-
-
- Redraw the delete button, on the top right of the currently selected item
-if there is no item selected, the button is hidden.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- repaintDragAreas()
-
-
-
- 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- repaintFrame()
-
-
-
- repaint the Timeline frame
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} needsReflow Returns true if the DOM is changed such that
- a reflow is needed.
-
-
-
-
-
-
-
-
-
-
-
-
- repaintGroups()
-
-
-
- Redraw the group labels
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- repaintItems()
-
-
-
- Repaint all items
-
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{boolean} needsReflow Returns true if the DOM is changed such that
- a reflow is needed.
-
-
-
-
-
-
-
-
-
-
-
-
- repaintNavigation()
-
-
-
- Create the navigation buttons for zooming and moving
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {Date}
- screenToTime(x)
-
-
-
- Convert a position on screen (pixels) to a datetime
-Before this method can be used, the method calcConversionFactor must be
-executed once.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {int}x
-
-
-
Position on the screen in pixels
-
-
-
-
-
-
-
-
-
Returns:
-
-
{Date} time The datetime the corresponds with given position x
-
-
-
-
-
-
-
-
-
-
-
-
- selectCluster(index)
-
-
-
- Select an cluster by its index
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}index
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- selectItem(index)
-
-
-
- Select an item by its index
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}index
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setAutoScale(enable)
-
-
-
- Enable or disable autoscaling
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {boolean}enable
-
-
-
If true or not defined, autoscaling is enabled.
- If false, autoscaling is disabled.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setCurrentTime(time)
-
-
-
- Set current time. This function can be used to set the time in the client
-timeline equal with the time on a server.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}time
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setCustomTime(time)
-
-
-
- Set custom time.
-The custom time bar can be used to display events in past or future.
-
-
-
- Set options for the timeline.
-Timeline must be redrawn afterwards
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Object}options
-
-
-
A name/value map containing settings for the
- timeline. Optional.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setScale(scale, step)
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {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.
-
-
- {int}step
-
-
-
A step size, by default 1. Choose for
- example 1, 2, 5, or 10.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {boolean}
- setSelection(selection)
-
-
-
- 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}];
-
-
-
- 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"));
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}start
-
-
-
The start date for the timeline. optional
-
-
- {Date}end
-
-
-
The end date for the timeline. optional
-
-
- {boolean}redraw
-
-
-
Optional. If true (default) the Timeline is
- directly redrawn
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setVisibleChartRangeAuto()
-
-
-
- Change the visible chart range such that all items become visible
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setVisibleChartRangeNow()
-
-
-
- Adjust the visible range such that the current time is located in the center
-of the timeline
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {Object[]}
- stackCalculateFinal(items)
-
-
-
- Adjust vertical positions of the events such that they don't overlap each
-other.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {timeline.Item[]}items
-
-
-
-
-
-
-
-
-
-
-
-
Returns:
-
-
{Object[]} finalItems
-
-
-
-
-
-
-
-
-
-
-
-
- stackCancelAnimation()
-
-
-
- Cancel any running animation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- stackItems(animate)
-
-
-
- Stack the items such that they don't overlap. The items will have a minimal
-distance equal to options.eventMargin.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {boolean | undefined}animate
-
-
-
if animate is true, the items are
- moved to their new position animated
- defaults to false.
- 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.
-
-
-
- Convert a datetime (Date object) into a position on the screen
-Before this method can be used, the method calcConversionFactor must be
-executed once.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Date}time
-
-
-
A date
-
-
-
-
-
-
-
-
-
Returns:
-
-
{int} x The position on the screen in pixels which corresponds
- with the given date.
-
-
-
-
-
-
-
-
-
-
-
-
- trigger(event)
-
-
-
- fire an event
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {String}event
-
-
-
The name of an event, for example "rangechange" or "edit"
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- unselectItem()
-
-
-
- Unselect the currently selected event (if any)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- updateData(index, values)
-
-
-
- Update the original data with changed start, end or group.
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}index
-
-
-
-
-
- {Object}values
-
-
-
An object containing some of the following parameters:
- {Date} start,
- {Date} end,
- {String} content,
- {String} group
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- zoom(zoomFactor, zoomAroundDate)
-
-
-
- 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
-
-
-
-
-
-
-
-
-
Parameters:
-
-
- {Number}zoomFactor
-
-
-
Zooming amount. Positive value will zoom in,
- negative value will zoom out
-
-
- {Date}zoomAroundDate
-
-
-
Date around which will be zoomed. Optional
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Documentation generated by JsDoc Toolkit 2.3.2 on Wed Mar 04 2015 09:58:28 GMT+0100 (CET)
-
1/**
- 2 * @file timeline.js
- 3 *
- 4 * @brief
- 5 * The Timeline is an interactive visualization chart to visualize events in
- 6 * time, having a start and end date.
- 7 * You can freely move and zoom in the timeline by dragging
- 8 * and scrolling in the Timeline. Items are optionally dragable. The time
- 9 * scale on the axis is adjusted automatically, and supports scales ranging
- 10 * from milliseconds to years.
- 11 *
- 12 * Timeline is part of the CHAP Links library.
- 13 *
- 14 * Timeline is tested on Firefox 3.6, Safari 5.0, Chrome 6.0, Opera 10.6, and
- 15 * Internet Explorer 6+.
- 16 *
- 17 * @license
- 18 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- 19 * use this file except in compliance with the License. You may obtain a copy
- 20 * of the License at
- 21 *
- 22 * http://www.apache.org/licenses/LICENSE-2.0
- 23 *
- 24 * Unless required by applicable law or agreed to in writing, software
- 25 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- 26 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- 27 * License for the specific language governing permissions and limitations under
- 28 * the License.
- 29 *
- 30 * Copyright (c) 2011-2015 Almende B.V.
- 31 *
- 32 * @author Jos de Jong, <jos@almende.org>
- 33 * @date 2015-03-04
- 34 * @version 2.9.1
- 35 */
- 36
- 37/*
- 38 * i18n mods by github user iktuz (https://gist.github.com/iktuz/3749287/)
- 39 * added to v2.4.1 with da_DK language by @bjarkebech
- 40 */
- 41
- 42/*
- 43 * TODO
- 44 *
- 45 * Add zooming with pinching on Android
- 46 *
- 47 * Bug: when an item contains a javascript onclick or a link, this does not work
- 48 * when the item is not selected (when the item is being selected,
- 49 * it is redrawn, which cancels any onclick or link action)
- 50 * Bug: when an item contains an image without size, or a css max-width, it is not sized correctly
- 51 * Bug: neglect items when they have no valid start/end, instead of throwing an error
- 52 * Bug: Pinching on ipad does not work very well, sometimes the page will zoom when pinching vertically
- 53 * Bug: cannot set max width for an item, like div.timeline-event-content {white-space: normal; max-width: 100px;}
- 54 * Bug on IE in Quirks mode. When you have groups, and delete an item, the groups become invisible
- 55 */
- 56
- 57/**
- 58 * Declare a unique namespace for CHAP's Common Hybrid Visualisation Library,
- 59 * "links"
- 60 */
- 61if(typeoflinks==='undefined'){
- 62links={};
- 63// important: do not use var, as "var links = {};" will overwrite
- 64// the existing links variable value with undefined in IE8, IE7.
- 65}
- 66
- 67
- 68/**
- 69 * Ensure the variable google exists
- 70 */
- 71if(typeofgoogle==='undefined'){
- 72google=undefined;
- 73// important: do not use var, as "var google = undefined;" will overwrite
- 74// the existing google variable value with undefined in IE8, IE7.
- 75}
- 76
- 77
- 78
- 79// Internet Explorer 8 and older does not support Array.indexOf,
- 80// so we define it here in that case
- 81// http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/
- 82if(!Array.prototype.indexOf){
- 83Array.prototype.indexOf=function(obj){
- 84for(vari=0;i<this.length;i++){
- 85if(this[i]==obj){
- 86returni;
- 87}
- 88}
- 89return-1;
- 90}
- 91}
- 92
- 93// Internet Explorer 8 and older does not support Array.forEach,
- 94// so we define it here in that case
- 95// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
- 96if(!Array.prototype.forEach){
- 97Array.prototype.forEach=function(fn,scope){
- 98for(vari=0,len=this.length;i<len;++i){
- 99fn.call(scope||this,this[i],i,this);
-100}
-101}
-102}
-103
-104
-105/**
-106 * @constructor links.Timeline
-107 * The timeline is a visualization chart to visualize events in time.
-108 *
-109 * The timeline is developed in javascript as a Google Visualization Chart.
-110 *
-111 * @param {Element} container The DOM element in which the Timeline will
-112 * be created. Normally a div element.
-113 * @param {Object} options A name/value map containing settings for the
-114 * timeline. Optional.
-115 */
-116links.Timeline=function(container,options){
-117if(!container){
-118// this call was probably only for inheritance, no constructor-code is required
-119return;
-120}
-121
-122// create variables and set default values
-123this.dom={};
-124this.conversion={};
-125this.eventParams={};// stores parameters for mouse events
-126this.groups=[];
-127this.groupIndexes={};
-128this.items=[];
-129this.renderQueue={
-130show:[],// Items made visible but not yet added to DOM
-131hide:[],// Items currently visible but not yet removed from DOM
-132update:[]// Items with changed data but not yet adjusted DOM
-133};
-134this.renderedItems=[];// Items currently rendered in the DOM
-135this.clusterGenerator=newlinks.Timeline.ClusterGenerator(this);
-136this.currentClusters=[];
-137this.selection=undefined;// stores index and item which is currently selected
-138
-139this.listeners={};// event listener callbacks
-140
-141// Initialize sizes.
-142// Needed for IE (which gives an error when you try to set an undefined
-143// value in a style)
-144this.size={
-145'actualHeight':0,
-146'axis':{
-147'characterMajorHeight':0,
-148'characterMajorWidth':0,
-149'characterMinorHeight':0,
-150'characterMinorWidth':0,
-151'height':0,
-152'labelMajorTop':0,
-153'labelMinorTop':0,
-154'line':0,
-155'lineMajorWidth':0,
-156'lineMinorHeight':0,
-157'lineMinorTop':0,
-158'lineMinorWidth':0,
-159'top':0
-160},
-161'contentHeight':0,
-162'contentLeft':0,
-163'contentWidth':0,
-164'frameHeight':0,
-165'frameWidth':0,
-166'groupsLeft':0,
-167'groupsWidth':0,
-168'items':{
-169'top':0
-170}
-171};
-172
-173this.dom.container=container;
-174
-175//
-176// Let's set the default options first
-177//
-178this.options={
-179'width':"100%",
-180'height':"auto",
-181'minHeight':0,// minimal height in pixels
-182'groupMinHeight':0,
-183'autoHeight':true,
-184
-185'eventMargin':10,// minimal margin between events
-186'eventMarginAxis':20,// minimal margin between events and the axis
-187'dragAreaWidth':10,// pixels
-188
-189'min':undefined,
-190'max':undefined,
-191'zoomMin':10,// milliseconds
-192'zoomMax':1000*60*60*24*365*10000,// milliseconds
-193
-194'moveable':true,
-195'zoomable':true,
-196'selectable':true,
-197'unselectable':true,
-198'editable':false,
-199'snapEvents':true,
-200'groupsChangeable':true,
-201'timeChangeable':true,
-202
-203'showCurrentTime':true,// show a red bar displaying the current time
-204'showCustomTime':false,// show a blue, draggable bar displaying a custom time
-205'showMajorLabels':true,
-206'showMinorLabels':true,
-207'showNavigation':false,
-208'showButtonNew':false,
-209'groupsOnRight':false,
-210'groupsOrder':true,
-211'axisOnTop':false,
-212'stackEvents':true,
-213'animate':true,
-214'animateZoom':true,
-215'cluster':false,
-216'clusterMaxItems':5,
-217'style':'box',
-218'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
-219
-220// i18n: Timeline only has built-in English text per default. Include timeline-locales.js to support more localized text.
-221'locale':'en',
-222'MONTHS':["January","February","March","April","May","June","July","August","September","October","November","December"],
-223'MONTHS_SHORT':["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
-224'DAYS':["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
-225'DAYS_SHORT':["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
-226'ZOOM_IN':"Zoom in",
-227'ZOOM_OUT':"Zoom out",
-228'MOVE_LEFT':"Move left",
-229'MOVE_RIGHT':"Move right",
-230'NEW':"New",
-231'CREATE_NEW_EVENT':"Create new event"
-232};
-233
-234//
-235// Now we can set the givenproperties
-236//
-237this.setOptions(options);
-238
-239this.clientTimeOffset=0;// difference between client time and the time
-240// set via Timeline.setCurrentTime()
-241vardom=this.dom;
-242
-243// remove all elements from the container element.
-244while(dom.container.hasChildNodes()){
-245dom.container.removeChild(dom.container.firstChild);
-246}
-247
-248// create a step for drawing the axis
-249this.step=newlinks.Timeline.StepDate();
-250
-251// add standard item types
-252this.itemTypes={
-253box:links.Timeline.ItemBox,
-254range:links.Timeline.ItemRange,
-255floatingRange:links.Timeline.ItemFloatingRange,
-256dot:links.Timeline.ItemDot
-257};
-258
-259// initialize data
-260this.data=[];
-261this.firstDraw=true;
-262
-263// date interval must be initialized
-264this.setVisibleChartRange(undefined,undefined,false);
-265
-266// render for the first time
-267this.render();
-268
-269// fire the ready event
-270varme=this;
-271setTimeout(function(){
-272me.trigger('ready');
-273},0);
-274};
-275
-276
-277/**
-278 * Main drawing logic. This is the function that needs to be called
-279 * in the html page, to draw the timeline.
-280 *
-281 * A data table with the events must be provided, and an options table.
-282 *
-283 * @param {google.visualization.DataTable} data
-284 * The data containing the events for the timeline.
-285 * Object DataTable is defined in
-286 * google.visualization.DataTable
-287 * @param {Object} options A name/value map containing settings for the
-288 * timeline. Optional. The use of options here
-289 * is deprecated. Pass timeline options in the
-290 * constructor or use setOptions()
-291 */
-292links.Timeline.prototype.draw=function(data,options){
-293if(options){
-294console.log("WARNING: Passing options in draw() is deprecated. Pass options to the constructur or use setOptions() instead!");
-295this.setOptions(options);
-296}
-297
-298if(this.options.selectable){
-299links.Timeline.addClassName(this.dom.frame,"timeline-selectable");
-300}
-301
-302// read the data
-303this.setData(data);
-304
-305if(this.firstDraw){
-306this.setVisibleChartRangeAuto();
-307}
-308
-309this.firstDraw=false;
-310};
-311
-312
-313/**
-314 * Set options for the timeline.
-315 * Timeline must be redrawn afterwards
-316 * @param {Object} options A name/value map containing settings for the
-317 * timeline. Optional.
-318 */
-319links.Timeline.prototype.setOptions=function(options){
-320if(options){
-321// retrieve parameter values
-322for(variinoptions){
-323if(options.hasOwnProperty(i)){
-324this.options[i]=options[i];
-325}
-326}
-327
-328// prepare i18n dependent on set locale
-329if(typeoflinks.locales!=='undefined'&&this.options.locale!=='en'){
-330varlocaleOpts=links.locales[this.options.locale];
-331if(localeOpts){
-332for(varlinlocaleOpts){
-333if(localeOpts.hasOwnProperty(l)){
-334this.options[l]=localeOpts[l];
-335}
-336}
-337}
-338}
-339
-340// check for deprecated options
-341if(options.showButtonAdd!=undefined){
-342this.options.showButtonNew=options.showButtonAdd;
-343console.log('WARNING: Option showButtonAdd is deprecated. Use showButtonNew instead');
-344}
-345if(options.intervalMin!=undefined){
-346this.options.zoomMin=options.intervalMin;
-347console.log('WARNING: Option intervalMin is deprecated. Use zoomMin instead');
-348}
-349if(options.intervalMax!=undefined){
-350this.options.zoomMax=options.intervalMax;
-351console.log('WARNING: Option intervalMax is deprecated. Use zoomMax instead');
-352}
-353
-354if(options.scale&&options.step){
-355this.step.setScale(options.scale,options.step);
-356}
-357}
-358
-359// validate options
-360this.options.autoHeight=(this.options.height==="auto");
-361};
-362
-363/**
-364 * Get options for the timeline.
-365 *
-366 * @return the options object
-367 */
-368links.Timeline.prototype.getOptions=function(){
-369returnthis.options;
-370};
-371
-372/**
-373 * Add new type of items
-374 * @param {String} typeName Name of new type
-375 * @param {links.Timeline.Item} typeFactory Constructor of items
-376 */
-377links.Timeline.prototype.addItemType=function(typeName,typeFactory){
-378this.itemTypes[typeName]=typeFactory;
-379};
-380
-381/**
-382 * Retrieve a map with the column indexes of the columns by column name.
-383 * For example, the method returns the map
-384 * {
-385 * start: 0,
-386 * end: 1,
-387 * content: 2,
-388 * group: undefined,
-389 * className: undefined
-390 * editable: undefined
-391 * type: undefined
-392 * }
-393 * @param {google.visualization.DataTable} dataTable
-394 * @type {Object} map
-395 */
-396links.Timeline.mapColumnIds=function(dataTable){
-397varcols={},
-398colCount=dataTable.getNumberOfColumns(),
-399allUndefined=true;
-400
-401// loop over the columns, and map the column id's to the column indexes
-402for(varcol=0;col<colCount;col++){
-403varid=dataTable.getColumnId(col)||dataTable.getColumnLabel(col);
-404cols[id]=col;
-405if(id=='start'||id=='end'||id=='content'||id=='group'||
-406id=='className'||id=='editable'||id=='type'){
-407allUndefined=false;
-408}
-409}
-410
-411// if no labels or ids are defined, use the default mapping
-412// for start, end, content, group, className, editable, type
-413if(allUndefined){
-414cols.start=0;
-415cols.end=1;
-416cols.content=2;
-417if(colCount>3){cols.group=3}
-418if(colCount>4){cols.className=4}
-419if(colCount>5){cols.editable=5}
-420if(colCount>6){cols.type=6}
-421}
-422
-423returncols;
-424};
-425
-426/**
-427 * Set data for the timeline
-428 * @param {google.visualization.DataTable | Array} data
-429 */
-430links.Timeline.prototype.setData=function(data){
-431// unselect any previously selected item
-432this.unselectItem();
-433
-434if(!data){
-435data=[];
-436}
-437
-438// clear all data
-439this.stackCancelAnimation();
-440this.clearItems();
-441this.data=data;
-442varitems=this.items;
-443this.deleteGroups();
-444
-445if(google&&google.visualization&&
-446datainstanceofgoogle.visualization.DataTable){
-447// map the datatable columns
-448varcols=links.Timeline.mapColumnIds(data);
-449
-450// read DataTable
-451for(varrow=0,rows=data.getNumberOfRows();row<rows;row++){
-452items.push(this.createItem({
-453'start':((cols.start!=undefined)?data.getValue(row,cols.start):undefined),
-454'end':((cols.end!=undefined)?data.getValue(row,cols.end):undefined),
-455'content':((cols.content!=undefined)?data.getValue(row,cols.content):undefined),
-456'group':((cols.group!=undefined)?data.getValue(row,cols.group):undefined),
-457'className':((cols.className!=undefined)?data.getValue(row,cols.className):undefined),
-458'editable':((cols.editable!=undefined)?data.getValue(row,cols.editable):undefined),
-459'type':((cols.type!=undefined)?data.getValue(row,cols.type):undefined)
-460}));
-461}
-462}
-463elseif(links.Timeline.isArray(data)){
-464// read JSON array
-465for(varrow=0,rows=data.length;row<rows;row++){
-466varitemData=data[row];
-467varitem=this.createItem(itemData);
-468items.push(item);
-469}
-470}
-471else{
-472throw"Unknown data type. DataTable or Array expected.";
-473}
-474
-475// prepare data for clustering, by filtering and sorting by type
-476if(this.options.cluster){
-477this.clusterGenerator.setData(this.items);
-478}
-479
-480this.render({
-481animate:false
-482});
-483};
-484
-485/**
-486 * Return the original data table.
-487 * @return {google.visualization.DataTable | Array} data
-488 */
-489links.Timeline.prototype.getData=function(){
-490returnthis.data;
-491};
-492
-493
-494/**
-495 * Update the original data with changed start, end or group.
-496 *
-497 * @param {Number} index
-498 * @param {Object} values An object containing some of the following parameters:
-499 * {Date} start,
-500 * {Date} end,
-501 * {String} content,
-502 * {String} group
-503 */
-504links.Timeline.prototype.updateData=function(index,values){
-505vardata=this.data,
-506prop;
-507
-508if(google&&google.visualization&&
-509datainstanceofgoogle.visualization.DataTable){
-510// update the original google DataTable
-511varmissingRows=(index+1)-data.getNumberOfRows();
-512if(missingRows>0){
-513data.addRows(missingRows);
-514}
-515
-516// map the column id's by name
-517varcols=links.Timeline.mapColumnIds(data);
-518
-519// merge all fields from the provided data into the current data
-520for(propinvalues){
-521if(values.hasOwnProperty(prop)){
-522varcol=cols[prop];
-523if(col==undefined){
-524// create new column
-525varvalue=values[prop];
-526varvalueType='string';
-527if(typeof(value)=='number'){valueType='number';}
-528elseif(typeof(value)=='boolean'){valueType='boolean';}
-529elseif(valueinstanceofDate){valueType='datetime';}
-530col=data.addColumn(valueType,prop);
-531}
-532data.setValue(index,col,values[prop]);
-533
-534// TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)
-535}
-536}
-537}
-538elseif(links.Timeline.isArray(data)){
-539// update the original JSON table
-540varrow=data[index];
-541if(row==undefined){
-542row={};
-543data[index]=row;
-544}
-545
-546// merge all fields from the provided data into the current data
-547for(propinvalues){
-548if(values.hasOwnProperty(prop)){
-549row[prop]=values[prop];
-550
-551// TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)
-552}
-553}
-554}
-555else{
-556throw"Cannot update data, unknown type of data";
-557}
-558};
-559
-560/**
-561 * Find the item index from a given HTML element
-562 * If no item index is found, undefined is returned
-563 * @param {Element} element
-564 * @return {Number | undefined} index
-565 */
-566links.Timeline.prototype.getItemIndex=function(element){
-567vare=element,
-568dom=this.dom,
-569frame=dom.items.frame,
-570items=this.items,
-571index=undefined;
-572
-573// try to find the frame where the items are located in
-574while(e.parentNode&&e.parentNode!==frame){
-575e=e.parentNode;
-576}
-577
-578if(e.parentNode===frame){
-579// yes! we have found the parent element of all items
-580// retrieve its id from the array with items
-581for(vari=0,iMax=items.length;i<iMax;i++){
-582if(items[i].dom===e){
-583index=i;
-584break;
-585}
-586}
-587}
-588
-589returnindex;
-590};
-591
-592
-593/**
-594 * Find the cluster index from a given HTML element
-595 * If no cluster index is found, undefined is returned
-596 * @param {Element} element
-597 * @return {Number | undefined} index
-598 */
-599links.Timeline.prototype.getClusterIndex=function(element){
-600vare=element,
-601dom=this.dom,
-602frame=dom.items.frame,
-603clusters=this.clusters,
-604index=undefined;
-605
-606if(this.clusters){
-607// try to find the frame where the clusters are located in
-608while(e.parentNode&&e.parentNode!==frame){
-609e=e.parentNode;
-610}
-611
-612if(e.parentNode===frame){
-613// yes! we have found the parent element of all clusters
-614// retrieve its id from the array with clusters
-615for(vari=0,iMax=clusters.length;i<iMax;i++){
-616if(clusters[i].dom===e){
-617index=i;
-618break;
-619}
-620}
-621}
-622}
-623
-624returnindex;
-625};
-626
-627/**
-628 * Find all elements within the start and end range
-629 * If no element is found, returns an empty array
-630 * @param start time
-631 * @param end time
-632 * @return Array itemsInRange
-633 */
-634links.Timeline.prototype.getVisibleItems=function(start,end){
-635varitems=this.items;
-636varitemsInRange=[];
-637
-638if(items){
-639for(vari=0,iMax=items.length;i<iMax;i++){
-640varitem=items[i];
-641if(item.end){
-642// Time range object // NH use getLeft and getRight here
-643if(start<=item.start&&item.end<=end){
-644itemsInRange.push({"row":i});
-645}
-646}else{
-647// Point object
-648if(start<=item.start&&item.start<=end){
-649itemsInRange.push({"row":i});
-650}
-651}
-652}
-653}
-654
-655// var sel = [];
-656// if (this.selection) {
-657// sel.push({"row": this.selection.index});
-658// }
-659// return sel;
-660
-661returnitemsInRange;
-662};
-663
-664
-665/**
-666 * Set a new size for the timeline
-667 * @param {string} width Width in pixels or percentage (for example "800px"
-668 * or "50%")
-669 * @param {string} height Height in pixels or percentage (for example "400px"
-670 * or "30%")
-671 */
-672links.Timeline.prototype.setSize=function(width,height){
-673if(width){
-674this.options.width=width;
-675this.dom.frame.style.width=width;
-676}
-677if(height){
-678this.options.height=height;
-679this.options.autoHeight=(this.options.height==="auto");
-680if(height!=="auto"){
-681this.dom.frame.style.height=height;
-682}
-683}
-684
-685this.render({
-686animate:false
-687});
-688};
-689
-690
-691/**
-692 * Set a new value for the visible range int the timeline.
-693 * Set start undefined to include everything from the earliest date to end.
-694 * Set end undefined to include everything from start to the last date.
-695 * Example usage:
-696 * myTimeline.setVisibleChartRange(new Date("2010-08-22"),
-697 * new Date("2010-09-13"));
-698 * @param {Date} start The start date for the timeline. optional
-699 * @param {Date} end The end date for the timeline. optional
-700 * @param {boolean} redraw Optional. If true (default) the Timeline is
-701 * directly redrawn
-702 */
-703links.Timeline.prototype.setVisibleChartRange=function(start,end,redraw){
-704varrange={};
-705if(!start||!end){
-706// retrieve the date range of the items
-707range=this.getDataRange(true);
-708}
-709
-710if(!start){
-711if(end){
-712if(range.min&&range.min.valueOf()<end.valueOf()){
-713// start of the data
-714start=range.min;
-715}
-716else{
-717// 7 days before the end
-718start=newDate(end.valueOf());
-719start.setDate(start.getDate()-7);
-720}
-721}
-722else{
-723// default of 3 days ago
-724start=newDate();
-725start.setDate(start.getDate()-3);
-726}
-727}
-728
-729if(!end){
-730if(range.max){
-731// end of the data
-732end=range.max;
-733}
-734else{
-735// 7 days after start
-736end=newDate(start.valueOf());
-737end.setDate(end.getDate()+7);
-738}
-739}
-740
-741// prevent start Date <= end Date
-742if(end<=start){
-743end=newDate(start.valueOf());
-744end.setDate(end.getDate()+7);
-745}
-746
-747// limit to the allowed range (don't let this do by applyRange,
-748// because that method will try to maintain the interval (end-start)
-749varmin=this.options.min?this.options.min:undefined;// date
-750if(min!=undefined&&start.valueOf()<min.valueOf()){
-751start=newDate(min.valueOf());// date
-752}
-753varmax=this.options.max?this.options.max:undefined;// date
-754if(max!=undefined&&end.valueOf()>max.valueOf()){
-755end=newDate(max.valueOf());// date
-756}
-757
-758this.applyRange(start,end);
-759
-760if(redraw==undefined||redraw==true){
-761this.render({
-762animate:false
-763});// TODO: optimize, no reflow needed
-764}
-765else{
-766this.recalcConversion();
-767}
-768};
-769
-770
-771/**
-772 * Change the visible chart range such that all items become visible
-773 */
-774links.Timeline.prototype.setVisibleChartRangeAuto=function(){
-775varrange=this.getDataRange(true);
-776this.setVisibleChartRange(range.min,range.max);
-777};
-778
-779/**
-780 * Adjust the visible range such that the current time is located in the center
-781 * of the timeline
-782 */
-783links.Timeline.prototype.setVisibleChartRangeNow=function(){
-784varnow=newDate();
-785
-786vardiff=(this.end.valueOf()-this.start.valueOf());
-787
-788varstartNew=newDate(now.valueOf()-diff/2);
-789varendNew=newDate(startNew.valueOf()+diff);
-790this.setVisibleChartRange(startNew,endNew);
-791};
-792
-793
-794/**
-795 * Retrieve the current visible range in the timeline.
-796 * @return {Object} An object with start and end properties
-797 */
-798links.Timeline.prototype.getVisibleChartRange=function(){
-799return{
-800'start':newDate(this.start.valueOf()),
-801'end':newDate(this.end.valueOf())
-802};
-803};
-804
-805/**
-806 * Get the date range of the items.
-807 * @param {boolean} [withMargin] If true, 5% of whitespace is added to the
-808 * left and right of the range. Default is false.
-809 * @return {Object} range An object with parameters min and max.
-810 * - {Date} min is the lowest start date of the items
-811 * - {Date} max is the highest start or end date of the items
-812 * If no data is available, the values of min and max
-813 * will be undefined
-814 */
-815links.Timeline.prototype.getDataRange=function(withMargin){
-816varitems=this.items,
-817min=undefined,// number
-818max=undefined;// number
-819
-820if(items){
-821for(vari=0,iMax=items.length;i<iMax;i++){
-822varitem=items[i],
-823start=item.start!=undefined?item.start.valueOf():undefined,
-824end=item.end!=undefined?item.end.valueOf():start;
-825
-826if(start!=undefined){
-827min=(min!=undefined)?Math.min(min.valueOf(),start.valueOf()):start;
-828}
-829
-830if(end!=undefined){
-831max=(max!=undefined)?Math.max(max.valueOf(),end.valueOf()):end;
-832}
-833}
-834}
-835
-836if(min&&max&&withMargin){
-837// zoom out 5% such that you have a little white space on the left and right
-838vardiff=(max-min);
-839min=min-diff*0.05;
-840max=max+diff*0.05;
-841}
-842
-843return{
-844'min':min!=undefined?newDate(min):undefined,
-845'max':max!=undefined?newDate(max):undefined
-846};
-847};
-848
-849/**
-850 * Re-render (reflow and repaint) all components of the Timeline: frame, axis,
-851 * items, ...
-852 * @param {Object} [options] Available options:
-853 * {boolean} renderTimesLeft Number of times the
-854 * render may be repeated
-855 * 5 times by default.
-856 * {boolean} animate takes options.animate
-857 * as default value
-858 */
-859links.Timeline.prototype.render=function(options){
-860varframeResized=this.reflowFrame();
-861varaxisResized=this.reflowAxis();
-862vargroupsResized=this.reflowGroups();
-863varitemsResized=this.reflowItems();
-864varresized=(frameResized||axisResized||groupsResized||itemsResized);
-865
-866// TODO: only stackEvents/filterItems when resized or changed. (gives a bootstrap issue).
-867// if (resized) {
-868varanimate=this.options.animate;
-869if(options&&options.animate!=undefined){
-870animate=options.animate;
-871}
-872
-873this.recalcConversion();
-874this.clusterItems();
-875this.filterItems();
-876this.stackItems(animate);
-877this.recalcItems();
-878
-879// TODO: only repaint when resized or when filterItems or stackItems gave a change?
-880varneedsReflow=this.repaint();
-881
-882// re-render once when needed (prevent endless re-render loop)
-883if(needsReflow){
-884varrenderTimesLeft=options?options.renderTimesLeft:undefined;
-885if(renderTimesLeft==undefined){
-886renderTimesLeft=5;
-887}
-888if(renderTimesLeft>0){
-889this.render({
-890'animate':options?options.animate:undefined,
-891'renderTimesLeft':(renderTimesLeft-1)
-892});
-893}
-894}
-895};
-896
-897/**
-898 * Repaint all components of the Timeline
-899 * @return {boolean} needsReflow Returns true if the DOM is changed such that
-900 * a reflow is needed.
-901 */
-902links.Timeline.prototype.repaint=function(){
-903varframeNeedsReflow=this.repaintFrame();
-904varaxisNeedsReflow=this.repaintAxis();
-905vargroupsNeedsReflow=this.repaintGroups();
-906varitemsNeedsReflow=this.repaintItems();
-907this.repaintCurrentTime();
-908this.repaintCustomTime();
-909
-910return(frameNeedsReflow||axisNeedsReflow||groupsNeedsReflow||itemsNeedsReflow);
-911};
-912
-913/**
-914 * Reflow the timeline frame
-915 * @return {boolean} resized Returns true if any of the frame elements
-916 * have been resized.
-917 */
-918links.Timeline.prototype.reflowFrame=function(){
-919vardom=this.dom,
-920options=this.options,
-921size=this.size,
-922resized=false;
-923
-924// Note: IE7 has issues with giving frame.clientWidth, therefore I use offsetWidth instead
-925varframeWidth=dom.frame?dom.frame.offsetWidth:0,
-926frameHeight=dom.frame?dom.frame.clientHeight:0;
-927
-928resized=resized||(size.frameWidth!==frameWidth);
-929resized=resized||(size.frameHeight!==frameHeight);
-930size.frameWidth=frameWidth;
-931size.frameHeight=frameHeight;
-932
-933returnresized;
-934};
-935
-936/**
-937 * repaint the Timeline frame
-938 * @return {boolean} needsReflow Returns true if the DOM is changed such that
-939 * a reflow is needed.
-940 */
-941links.Timeline.prototype.repaintFrame=function(){
-942varneedsReflow=false,
-943dom=this.dom,
-944options=this.options,
-945size=this.size;
-946
-947// main frame
-948if(!dom.frame){
-949dom.frame=document.createElement("DIV");
-950dom.frame.className="timeline-frame ui-widget ui-widget-content ui-corner-all";
-951dom.container.appendChild(dom.frame);
-952needsReflow=true;
-953}
-954
-955varheight=options.autoHeight?
-956(size.actualHeight+"px"):
-957(options.height||"100%");
-958varwidth=options.width||"100%";
-959needsReflow=needsReflow||(dom.frame.style.height!=height);
-960needsReflow=needsReflow||(dom.frame.style.width!=width);
-961dom.frame.style.height=height;
-962dom.frame.style.width=width;
-963
-964// contents
-965if(!dom.content){
-966// create content box where the axis and items will be created
-967dom.content=document.createElement("DIV");
-968dom.content.className="timeline-content";
-969dom.frame.appendChild(dom.content);
-970
-971vartimelines=document.createElement("DIV");
-972timelines.style.position="absolute";
-973timelines.style.left="0px";
-974timelines.style.top="0px";
-975timelines.style.height="100%";
-976timelines.style.width="0px";
-977dom.content.appendChild(timelines);
-978dom.contentTimelines=timelines;
-979
-980varparams=this.eventParams,
-981me=this;
-982if(!params.onMouseDown){
-983params.onMouseDown=function(event){me.onMouseDown(event);};
-984links.Timeline.addEventListener(dom.content,"mousedown",params.onMouseDown);
-985}
-986if(!params.onTouchStart){
-987params.onTouchStart=function(event){me.onTouchStart(event);};
-988links.Timeline.addEventListener(dom.content,"touchstart",params.onTouchStart);
-989}
-990if(!params.onMouseWheel){
-991params.onMouseWheel=function(event){me.onMouseWheel(event);};
-992links.Timeline.addEventListener(dom.content,"mousewheel",params.onMouseWheel);
-993}
-994if(!params.onDblClick){
-995params.onDblClick=function(event){me.onDblClick(event);};
-996links.Timeline.addEventListener(dom.content,"dblclick",params.onDblClick);
-997}
-998
-999needsReflow=true;
-1000}
-1001dom.content.style.left=size.contentLeft+"px";
-1002dom.content.style.top="0px";
-1003dom.content.style.width=size.contentWidth+"px";
-1004dom.content.style.height=size.frameHeight+"px";
-1005
-1006this.repaintNavigation();
-1007
-1008returnneedsReflow;
-1009};
-1010
-1011/**
-1012 * Reflow the timeline axis. Calculate its height, width, positioning, etc...
-1013 * @return {boolean} resized returns true if the axis is resized
-1014 */
-1015links.Timeline.prototype.reflowAxis=function(){
-1016varresized=false,
-1017dom=this.dom,
-1018options=this.options,
-1019size=this.size,
-1020axisDom=dom.axis;
-1021
-1022varcharacterMinorWidth=(axisDom&&axisDom.characterMinor)?axisDom.characterMinor.clientWidth:0,
-1023characterMinorHeight=(axisDom&&axisDom.characterMinor)?axisDom.characterMinor.clientHeight:0,
-1024characterMajorWidth=(axisDom&&axisDom.characterMajor)?axisDom.characterMajor.clientWidth:0,
-1025characterMajorHeight=(axisDom&&axisDom.characterMajor)?axisDom.characterMajor.clientHeight:0,
-1026axisHeight=(options.showMinorLabels?characterMinorHeight:0)+
-1027(options.showMajorLabels?characterMajorHeight:0);
-1028
-1029varaxisTop=options.axisOnTop?0:size.frameHeight-axisHeight,
-1030axisLine=options.axisOnTop?axisHeight:axisTop;
-1031
-1032resized=resized||(size.axis.top!==axisTop);
-1033resized=resized||(size.axis.line!==axisLine);
-1034resized=resized||(size.axis.height!==axisHeight);
-1035size.axis.top=axisTop;
-1036size.axis.line=axisLine;
-1037size.axis.height=axisHeight;
-1038size.axis.labelMajorTop=options.axisOnTop?0:axisLine+
-1039(options.showMinorLabels?characterMinorHeight:0);
-1040size.axis.labelMinorTop=options.axisOnTop?
-1041(options.showMajorLabels?characterMajorHeight:0):
-1042axisLine;
-1043size.axis.lineMinorTop=options.axisOnTop?size.axis.labelMinorTop:0;
-1044size.axis.lineMinorHeight=options.showMajorLabels?
-1045size.frameHeight-characterMajorHeight:
-1046size.frameHeight;
-1047if(axisDom&&axisDom.minorLines&&axisDom.minorLines.length){
-1048size.axis.lineMinorWidth=axisDom.minorLines[0].offsetWidth;
-1049}
-1050else{
-1051size.axis.lineMinorWidth=1;
-1052}
-1053if(axisDom&&axisDom.majorLines&&axisDom.majorLines.length){
-1054size.axis.lineMajorWidth=axisDom.majorLines[0].offsetWidth;
-1055}
-1056else{
-1057size.axis.lineMajorWidth=1;
-1058}
-1059
-1060resized=resized||(size.axis.characterMinorWidth!==characterMinorWidth);
-1061resized=resized||(size.axis.characterMinorHeight!==characterMinorHeight);
-1062resized=resized||(size.axis.characterMajorWidth!==characterMajorWidth);
-1063resized=resized||(size.axis.characterMajorHeight!==characterMajorHeight);
-1064size.axis.characterMinorWidth=characterMinorWidth;
-1065size.axis.characterMinorHeight=characterMinorHeight;
-1066size.axis.characterMajorWidth=characterMajorWidth;
-1067size.axis.characterMajorHeight=characterMajorHeight;
-1068
-1069varcontentHeight=Math.max(size.frameHeight-axisHeight,0);
-1070size.contentLeft=options.groupsOnRight?0:size.groupsWidth;
-1071size.contentWidth=Math.max(size.frameWidth-size.groupsWidth,0);
-1072size.contentHeight=contentHeight;
-1073
-1074returnresized;
-1075};
-1076
-1077/**
-1078 * Redraw the timeline axis with minor and major labels
-1079 * @return {boolean} needsReflow Returns true if the DOM is changed such
-1080 * that a reflow is needed.
-1081 */
-1082links.Timeline.prototype.repaintAxis=function(){
-1083varneedsReflow=false,
-1084dom=this.dom,
-1085options=this.options,
-1086size=this.size,
-1087step=this.step;
-1088
-1089varaxis=dom.axis;
-1090if(!axis){
-1091axis={};
-1092dom.axis=axis;
-1093}
-1094if(!size.axis.properties){
-1095size.axis.properties={};
-1096}
-1097if(!axis.minorTexts){
-1098axis.minorTexts=[];
-1099}
-1100if(!axis.minorLines){
-1101axis.minorLines=[];
-1102}
-1103if(!axis.majorTexts){
-1104axis.majorTexts=[];
-1105}
-1106if(!axis.majorLines){
-1107axis.majorLines=[];
-1108}
-1109
-1110if(!axis.frame){
-1111axis.frame=document.createElement("DIV");
-1112axis.frame.style.position="absolute";
-1113axis.frame.style.left="0px";
-1114axis.frame.style.top="0px";
-1115dom.content.appendChild(axis.frame);
-1116}
-1117
-1118// take axis offline
-1119dom.content.removeChild(axis.frame);
-1120
-1121axis.frame.style.width=(size.contentWidth)+"px";
-1122axis.frame.style.height=(size.axis.height)+"px";
-1123
-1124// the drawn axis is more wide than the actual visual part, such that
-1125// the axis can be dragged without having to redraw it each time again.
-1126varstart=this.screenToTime(0);
-1127varend=this.screenToTime(size.contentWidth);
-1128
-1129// calculate minimum step (in milliseconds) based on character size
-1130if(size.axis.characterMinorWidth){
-1131this.minimumStep=this.screenToTime(size.axis.characterMinorWidth*6)-
-1132this.screenToTime(0);
-1133
-1134step.setRange(start,end,this.minimumStep);
-1135}
-1136
-1137varcharsNeedsReflow=this.repaintAxisCharacters();
-1138needsReflow=needsReflow||charsNeedsReflow;
-1139
-1140// The current labels on the axis will be re-used (much better performance),
-1141// therefore, the repaintAxis method uses the mechanism with
-1142// repaintAxisStartOverwriting, repaintAxisEndOverwriting, and
-1143// this.size.axis.properties is used.
-1144this.repaintAxisStartOverwriting();
-1145
-1146step.start();
-1147varxFirstMajorLabel=undefined;
-1148varmax=0;
-1149while(!step.end()&&max<1000){
-1150max++;
-1151varcur=step.getCurrent(),
-1152x=this.timeToScreen(cur),
-1153isMajor=step.isMajor();
-1154
-1155if(options.showMinorLabels){
-1156this.repaintAxisMinorText(x,step.getLabelMinor(options));
-1157}
-1158
-1159if(isMajor&&options.showMajorLabels){
-1160if(x>0){
-1161if(xFirstMajorLabel==undefined){
-1162xFirstMajorLabel=x;
-1163}
-1164this.repaintAxisMajorText(x,step.getLabelMajor(options));
-1165}
-1166this.repaintAxisMajorLine(x);
-1167}
-1168else{
-1169this.repaintAxisMinorLine(x);
-1170}
-1171
-1172step.next();
-1173}
-1174
-1175// create a major label on the left when needed
-1176if(options.showMajorLabels){
-1177varleftTime=this.screenToTime(0),
-1178leftText=this.step.getLabelMajor(options,leftTime),
-1179width=leftText.length*size.axis.characterMajorWidth+10;// upper bound estimation
-1180
-1181if(xFirstMajorLabel==undefined||width<xFirstMajorLabel){
-1182this.repaintAxisMajorText(0,leftText,leftTime);
-1183}
-1184}
-1185
-1186// cleanup left over labels
-1187this.repaintAxisEndOverwriting();
-1188
-1189this.repaintAxisHorizontal();
-1190
-1191// put axis online
-1192dom.content.insertBefore(axis.frame,dom.content.firstChild);
-1193
-1194returnneedsReflow;
-1195};
-1196
-1197/**
-1198 * Create characters used to determine the size of text on the axis
-1199 * @return {boolean} needsReflow Returns true if the DOM is changed such that
-1200 * a reflow is needed.
-1201 */
-1202links.Timeline.prototype.repaintAxisCharacters=function(){
-1203// calculate the width and height of a single character
-1204// this is used to calculate the step size, and also the positioning of the
-1205// axis
-1206varneedsReflow=false,
-1207dom=this.dom,
-1208axis=dom.axis,
-1209text;
-1210
-1211if(!axis.characterMinor){
-1212text=document.createTextNode("0");
-1213varcharacterMinor=document.createElement("DIV");
-1214characterMinor.className="timeline-axis-text timeline-axis-text-minor";
-1215characterMinor.appendChild(text);
-1216characterMinor.style.position="absolute";
-1217characterMinor.style.visibility="hidden";
-1218characterMinor.style.paddingLeft="0px";
-1219characterMinor.style.paddingRight="0px";
-1220axis.frame.appendChild(characterMinor);
-1221
-1222axis.characterMinor=characterMinor;
-1223needsReflow=true;
-1224}
-1225
-1226if(!axis.characterMajor){
-1227text=document.createTextNode("0");
-1228varcharacterMajor=document.createElement("DIV");
-1229characterMajor.className="timeline-axis-text timeline-axis-text-major";
-1230characterMajor.appendChild(text);
-1231characterMajor.style.position="absolute";
-1232characterMajor.style.visibility="hidden";
-1233characterMajor.style.paddingLeft="0px";
-1234characterMajor.style.paddingRight="0px";
-1235axis.frame.appendChild(characterMajor);
-1236
-1237axis.characterMajor=characterMajor;
-1238needsReflow=true;
-1239}
-1240
-1241returnneedsReflow;
-1242};
-1243
-1244/**
-1245 * Initialize redraw of the axis. All existing labels and lines will be
-1246 * overwritten and reused.
-1247 */
-1248links.Timeline.prototype.repaintAxisStartOverwriting=function(){
-1249varproperties=this.size.axis.properties;
-1250
-1251properties.minorTextNum=0;
-1252properties.minorLineNum=0;
-1253properties.majorTextNum=0;
-1254properties.majorLineNum=0;
-1255};
-1256
-1257/**
-1258 * End of overwriting HTML DOM elements of the axis.
-1259 * remaining elements will be removed
-1260 */
-1261links.Timeline.prototype.repaintAxisEndOverwriting=function(){
-1262vardom=this.dom,
-1263props=this.size.axis.properties,
-1264frame=this.dom.axis.frame,
-1265num;
-1266
-1267// remove leftovers
-1268varminorTexts=dom.axis.minorTexts;
-1269num=props.minorTextNum;
-1270while(minorTexts.length>num){
-1271varminorText=minorTexts[num];
-1272frame.removeChild(minorText);
-1273minorTexts.splice(num,1);
-1274}
-1275
-1276varminorLines=dom.axis.minorLines;
-1277num=props.minorLineNum;
-1278while(minorLines.length>num){
-1279varminorLine=minorLines[num];
-1280frame.removeChild(minorLine);
-1281minorLines.splice(num,1);
-1282}
-1283
-1284varmajorTexts=dom.axis.majorTexts;
-1285num=props.majorTextNum;
-1286while(majorTexts.length>num){
-1287varmajorText=majorTexts[num];
-1288frame.removeChild(majorText);
-1289majorTexts.splice(num,1);
-1290}
-1291
-1292varmajorLines=dom.axis.majorLines;
-1293num=props.majorLineNum;
-1294while(majorLines.length>num){
-1295varmajorLine=majorLines[num];
-1296frame.removeChild(majorLine);
-1297majorLines.splice(num,1);
-1298}
-1299};
-1300
-1301/**
-1302 * Repaint the horizontal line and background of the axis
-1303 */
-1304links.Timeline.prototype.repaintAxisHorizontal=function(){
-1305varaxis=this.dom.axis,
-1306size=this.size,
-1307options=this.options;
-1308
-1309// line behind all axis elements (possibly having a background color)
-1310varhasAxis=(options.showMinorLabels||options.showMajorLabels);
-1311if(hasAxis){
-1312if(!axis.backgroundLine){
-1313// create the axis line background (for a background color or so)
-1314varbackgroundLine=document.createElement("DIV");
-1315backgroundLine.className="timeline-axis";
-1316backgroundLine.style.position="absolute";
-1317backgroundLine.style.left="0px";
-1318backgroundLine.style.width="100%";
-1319backgroundLine.style.border="none";
-1320axis.frame.insertBefore(backgroundLine,axis.frame.firstChild);
-1321
-1322axis.backgroundLine=backgroundLine;
-1323}
-1324
-1325if(axis.backgroundLine){
-1326axis.backgroundLine.style.top=size.axis.top+"px";
-1327axis.backgroundLine.style.height=size.axis.height+"px";
-1328}
-1329}
-1330else{
-1331if(axis.backgroundLine){
-1332axis.frame.removeChild(axis.backgroundLine);
-1333deleteaxis.backgroundLine;
-1334}
-1335}
-1336
-1337// line before all axis elements
-1338if(hasAxis){
-1339if(axis.line){
-1340// put this line at the end of all childs
-1341varline=axis.frame.removeChild(axis.line);
-1342axis.frame.appendChild(line);
-1343}
-1344else{
-1345// make the axis line
-1346varline=document.createElement("DIV");
-1347line.className="timeline-axis";
-1348line.style.position="absolute";
-1349line.style.left="0px";
-1350line.style.width="100%";
-1351line.style.height="0px";
-1352axis.frame.appendChild(line);
-1353
-1354axis.line=line;
-1355}
-1356
-1357axis.line.style.top=size.axis.line+"px";
-1358}
-1359else{
-1360if(axis.line&&axis.line.parentElement){
-1361axis.frame.removeChild(axis.line);
-1362deleteaxis.line;
-1363}
-1364}
-1365};
-1366
-1367/**
-1368 * Create a minor label for the axis at position x
-1369 * @param {Number} x
-1370 * @param {String} text
-1371 */
-1372links.Timeline.prototype.repaintAxisMinorText=function(x,text){
-1373varsize=this.size,
-1374dom=this.dom,
-1375props=size.axis.properties,
-1376frame=dom.axis.frame,
-1377minorTexts=dom.axis.minorTexts,
-1378index=props.minorTextNum,
-1379label;
-1380
-1381if(index<minorTexts.length){
-1382label=minorTexts[index]
-1383}
-1384else{
-1385// create new label
-1386varcontent=document.createTextNode("");
-1387label=document.createElement("DIV");
-1388label.appendChild(content);
-1389label.className="timeline-axis-text timeline-axis-text-minor";
-1390label.style.position="absolute";
-1391
-1392frame.appendChild(label);
-1393
-1394minorTexts.push(label);
-1395}
-1396
-1397label.childNodes[0].nodeValue=text;
-1398label.style.left=x+"px";
-1399label.style.top=size.axis.labelMinorTop+"px";
-1400//label.title = title; // TODO: this is a heavy operation
-1401
-1402props.minorTextNum++;
-1403};
-1404
-1405/**
-1406 * Create a minor line for the axis at position x
-1407 * @param {Number} x
-1408 */
-1409links.Timeline.prototype.repaintAxisMinorLine=function(x){
-1410varaxis=this.size.axis,
-1411dom=this.dom,
-1412props=axis.properties,
-1413frame=dom.axis.frame,
-1414minorLines=dom.axis.minorLines,
-1415index=props.minorLineNum,
-1416line;
-1417
-1418if(index<minorLines.length){
-1419line=minorLines[index];
-1420}
-1421else{
-1422// create vertical line
-1423line=document.createElement("DIV");
-1424line.className="timeline-axis-grid timeline-axis-grid-minor";
-1425line.style.position="absolute";
-1426line.style.width="0px";
-1427
-1428frame.appendChild(line);
-1429minorLines.push(line);
-1430}
-1431
-1432line.style.top=axis.lineMinorTop+"px";
-1433line.style.height=axis.lineMinorHeight+"px";
-1434line.style.left=(x-axis.lineMinorWidth/2)+"px";
-1435
-1436props.minorLineNum++;
-1437};
-1438
-1439/**
-1440 * Create a Major label for the axis at position x
-1441 * @param {Number} x
-1442 * @param {String} text
-1443 */
-1444links.Timeline.prototype.repaintAxisMajorText=function(x,text){
-1445varsize=this.size,
-1446props=size.axis.properties,
-1447frame=this.dom.axis.frame,
-1448majorTexts=this.dom.axis.majorTexts,
-1449index=props.majorTextNum,
-1450label;
-1451
-1452if(index<majorTexts.length){
-1453label=majorTexts[index];
-1454}
-1455else{
-1456// create label
-1457varcontent=document.createTextNode(text);
-1458label=document.createElement("DIV");
-1459label.className="timeline-axis-text timeline-axis-text-major";
-1460label.appendChild(content);
-1461label.style.position="absolute";
-1462label.style.top="0px";
-1463
-1464frame.appendChild(label);
-1465majorTexts.push(label);
-1466}
-1467
-1468label.childNodes[0].nodeValue=text;
-1469label.style.top=size.axis.labelMajorTop+"px";
-1470label.style.left=x+"px";
-1471//label.title = title; // TODO: this is a heavy operation
-1472
-1473props.majorTextNum++;
-1474};
-1475
-1476/**
-1477 * Create a Major line for the axis at position x
-1478 * @param {Number} x
-1479 */
-1480links.Timeline.prototype.repaintAxisMajorLine=function(x){
-1481varsize=this.size,
-1482props=size.axis.properties,
-1483axis=this.size.axis,
-1484frame=this.dom.axis.frame,
-1485majorLines=this.dom.axis.majorLines,
-1486index=props.majorLineNum,
-1487line;
-1488
-1489if(index<majorLines.length){
-1490line=majorLines[index];
-1491}
-1492else{
-1493// create vertical line
-1494line=document.createElement("DIV");
-1495line.className="timeline-axis-grid timeline-axis-grid-major";
-1496line.style.position="absolute";
-1497line.style.top="0px";
-1498line.style.width="0px";
-1499
-1500frame.appendChild(line);
-1501majorLines.push(line);
-1502}
-1503
-1504line.style.left=(x-axis.lineMajorWidth/2)+"px";
-1505line.style.height=size.frameHeight+"px";
-1506
-1507props.majorLineNum++;
-1508};
-1509
-1510/**
-1511 * Reflow all items, retrieve their actual size
-1512 * @return {boolean} resized returns true if any of the items is resized
-1513 */
-1514links.Timeline.prototype.reflowItems=function(){
-1515varresized=false,
-1516i,
-1517iMax,
-1518group,
-1519groups=this.groups,
-1520renderedItems=this.renderedItems;
-1521
-1522if(groups){// TODO: need to check if labels exists?
-1523// loop through all groups to reset the items height
-1524groups.forEach(function(group){
-1525group.itemsHeight=group.labelHeight||0;
-1526});
-1527}
-1528
-1529// loop through the width and height of all visible items
-1530for(i=0,iMax=renderedItems.length;i<iMax;i++){
-1531varitem=renderedItems[i],
-1532domItem=item.dom;
-1533group=item.group;
-1534
-1535if(domItem){
-1536// TODO: move updating width and height into item.reflow
-1537varwidth=domItem?domItem.clientWidth:0;
-1538varheight=domItem?domItem.clientHeight:0;
-1539resized=resized||(item.width!=width);
-1540resized=resized||(item.height!=height);
-1541item.width=width;
-1542item.height=height;
-1543//item.borderWidth = (domItem.offsetWidth - domItem.clientWidth - 2) / 2; // TODO: borderWidth
-1544item.reflow();
-1545}
-1546
-1547if(group){
-1548group.itemsHeight=Math.max(this.options.groupMinHeight,group.itemsHeight?
-1549Math.max(group.itemsHeight,item.height):
-1550item.height);
-1551}
-1552}
-1553
-1554returnresized;
-1555};
-1556
-1557/**
-1558 * Recalculate item properties:
-1559 * - the height of each group.
-1560 * - the actualHeight, from the stacked items or the sum of the group heights
-1561 * @return {boolean} resized returns true if any of the items properties is
-1562 * changed
-1563 */
-1564links.Timeline.prototype.recalcItems=function(){
-1565varresized=false,
-1566i,
-1567iMax,
-1568item,
-1569finalItem,
-1570finalItems,
-1571group,
-1572groups=this.groups,
-1573size=this.size,
-1574options=this.options,
-1575renderedItems=this.renderedItems;
-1576
-1577varactualHeight=0;
-1578if(groups.length==0){
-1579// calculate actual height of the timeline when there are no groups
-1580// but stacked items
-1581if(options.autoHeight||options.cluster){
-1582varmin=0,
-1583max=0;
-1584
-1585if(this.stack&&this.stack.finalItems){
-1586// adjust the offset of all finalItems when the actualHeight has been changed
-1587finalItems=this.stack.finalItems;
-1588finalItem=finalItems[0];
-1589if(finalItem&&finalItem.top){
-1590min=finalItem.top;
-1591max=finalItem.top+finalItem.height;
-1592}
-1593for(i=1,iMax=finalItems.length;i<iMax;i++){
-1594finalItem=finalItems[i];
-1595min=Math.min(min,finalItem.top);
-1596max=Math.max(max,finalItem.top+finalItem.height);
-1597}
-1598}
-1599else{
-1600item=renderedItems[0];
-1601if(item&&item.top){
-1602min=item.top;
-1603max=item.top+item.height;
-1604}
-1605for(i=1,iMax=renderedItems.length;i<iMax;i++){
-1606item=renderedItems[i];
-1607if(item.top){
-1608min=Math.min(min,item.top);
-1609max=Math.max(max,(item.top+item.height));
-1610}
-1611}
-1612}
-1613
-1614actualHeight=(max-min)+2*options.eventMarginAxis+size.axis.height;
-1615if(actualHeight<options.minHeight){
-1616actualHeight=options.minHeight;
-1617}
-1618
-1619if(size.actualHeight!=actualHeight&&options.autoHeight&&!options.axisOnTop){
-1620// adjust the offset of all items when the actualHeight has been changed
-1621vardiff=actualHeight-size.actualHeight;
-1622if(this.stack&&this.stack.finalItems){
-1623finalItems=this.stack.finalItems;
-1624for(i=0,iMax=finalItems.length;i<iMax;i++){
-1625finalItems[i].top+=diff;
-1626finalItems[i].item.top+=diff;
-1627}
-1628}
-1629else{
-1630for(i=0,iMax=renderedItems.length;i<iMax;i++){
-1631renderedItems[i].top+=diff;
-1632}
-1633}
-1634}
-1635}
-1636}
-1637else{
-1638// loop through all groups to get the height of each group, and the
-1639// total height
-1640actualHeight=size.axis.height+2*options.eventMarginAxis;
-1641for(i=0,iMax=groups.length;i<iMax;i++){
-1642group=groups[i];
-1643
-1644//
-1645// TODO: Do we want to apply a max height? how ?
-1646//
-1647vargroupHeight=group.itemsHeight;
-1648resized=resized||(groupHeight!=group.height);
-1649group.height=Math.max(groupHeight,options.groupMinHeight);
-1650
-1651actualHeight+=groups[i].height+options.eventMargin;
-1652}
-1653
-1654// calculate top positions of the group labels and lines
-1655vareventMargin=options.eventMargin,
-1656top=options.axisOnTop?
-1657options.eventMarginAxis+eventMargin/2:
-1658size.contentHeight-options.eventMarginAxis+eventMargin/2,
-1659axisHeight=size.axis.height;
-1660
-1661for(i=0,iMax=groups.length;i<iMax;i++){
-1662group=groups[i];
-1663if(options.axisOnTop){
-1664group.top=top+axisHeight;
-1665group.labelTop=top+axisHeight+(group.height-group.labelHeight)/2;
-1666group.lineTop=top+axisHeight+group.height+eventMargin/2;
-1667top+=group.height+eventMargin;
-1668}
-1669else{
-1670top-=group.height+eventMargin;
-1671group.top=top;
-1672group.labelTop=top+(group.height-group.labelHeight)/2;
-1673group.lineTop=top-eventMargin/2;
-1674}
-1675}
-1676
-1677resized=true;
-1678}
-1679
-1680if(actualHeight<options.minHeight){
-1681actualHeight=options.minHeight;
-1682}
-1683resized=resized||(actualHeight!=size.actualHeight);
-1684size.actualHeight=actualHeight;
-1685
-1686returnresized;
-1687};
-1688
-1689/**
-1690 * This method clears the (internal) array this.items in a safe way: neatly
-1691 * cleaning up the DOM, and accompanying arrays this.renderedItems and
-1692 * the created clusters.
-1693 */
-1694links.Timeline.prototype.clearItems=function(){
-1695// add all visible items to the list to be hidden
-1696varhideItems=this.renderQueue.hide;
-1697this.renderedItems.forEach(function(item){
-1698hideItems.push(item);
-1699});
-1700
-1701// clear the cluster generator
-1702this.clusterGenerator.clear();
-1703
-1704// actually clear the items
-1705this.items=[];
-1706};
-1707
-1708/**
-1709 * Repaint all items
-1710 * @return {boolean} needsReflow Returns true if the DOM is changed such that
-1711 * a reflow is needed.
-1712 */
-1713links.Timeline.prototype.repaintItems=function(){
-1714vari,iMax,item,index;
-1715
-1716varneedsReflow=false,
-1717dom=this.dom,
-1718size=this.size,
-1719timeline=this,
-1720renderedItems=this.renderedItems;
-1721
-1722if(!dom.items){
-1723dom.items={};
-1724}
-1725
-1726// draw the frame containing the items
-1727varframe=dom.items.frame;
-1728if(!frame){
-1729frame=document.createElement("DIV");
-1730frame.style.position="relative";
-1731dom.content.appendChild(frame);
-1732dom.items.frame=frame;
-1733}
-1734
-1735frame.style.left="0px";
-1736frame.style.top=size.items.top+"px";
-1737frame.style.height="0px";
-1738
-1739// Take frame offline (for faster manipulation of the DOM)
-1740dom.content.removeChild(frame);
-1741
-1742// process the render queue with changes
-1743varqueue=this.renderQueue;
-1744varnewImageUrls=[];
-1745needsReflow=needsReflow||
-1746(queue.show.length>0)||
-1747(queue.update.length>0)||
-1748(queue.hide.length>0);// TODO: reflow needed on hide of items?
-1749
-1750while(item=queue.show.shift()){
-1751item.showDOM(frame);
-1752item.getImageUrls(newImageUrls);
-1753renderedItems.push(item);
-1754}
-1755while(item=queue.update.shift()){
-1756item.updateDOM(frame);
-1757item.getImageUrls(newImageUrls);
-1758index=this.renderedItems.indexOf(item);
-1759if(index==-1){
-1760renderedItems.push(item);
-1761}
-1762}
-1763while(item=queue.hide.shift()){
-1764item.hideDOM(frame);
-1765index=this.renderedItems.indexOf(item);
-1766if(index!=-1){
-1767renderedItems.splice(index,1);
-1768}
-1769}
-1770
-1771// reposition all visible items
-1772renderedItems.forEach(function(item){
-1773item.updatePosition(timeline);
-1774});
-1775
-1776// redraw the delete button and dragareas of the selected item (if any)
-1777this.repaintDeleteButton();
-1778this.repaintDragAreas();
-1779
-1780// put frame online again
-1781dom.content.appendChild(frame);
-1782
-1783if(newImageUrls.length){
-1784// retrieve all image sources from the items, and set a callback once
-1785// all images are retrieved
-1786varcallback=function(){
-1787timeline.render();
-1788};
-1789varsendCallbackWhenAlreadyLoaded=false;
-1790links.imageloader.loadAll(newImageUrls,callback,sendCallbackWhenAlreadyLoaded);
-1791}
-1792
-1793returnneedsReflow;
-1794};
-1795
-1796/**
-1797 * Reflow the size of the groups
-1798 * @return {boolean} resized Returns true if any of the frame elements
-1799 * have been resized.
-1800 */
-1801links.Timeline.prototype.reflowGroups=function(){
-1802varresized=false,
-1803options=this.options,
-1804size=this.size,
-1805dom=this.dom;
-1806
-1807// calculate the groups width and height
-1808// TODO: only update when data is changed! -> use an updateSeq
-1809vargroupsWidth=0;
-1810
-1811// loop through all groups to get the labels width and height
-1812vargroups=this.groups;
-1813varlabels=this.dom.groups?this.dom.groups.labels:[];
-1814for(vari=0,iMax=groups.length;i<iMax;i++){
-1815vargroup=groups[i];
-1816varlabel=labels[i];
-1817group.labelWidth=label?label.clientWidth:0;
-1818group.labelHeight=label?label.clientHeight:0;
-1819group.width=group.labelWidth;// TODO: group.width is redundant with labelWidth
-1820
-1821groupsWidth=Math.max(groupsWidth,group.width);
-1822}
-1823
-1824// limit groupsWidth to the groups width in the options
-1825if(options.groupsWidth!==undefined){
-1826groupsWidth=dom.groups&&dom.groups.frame?dom.groups.frame.clientWidth:0;
-1827}
-1828
-1829// compensate for the border width. TODO: calculate the real border width
-1830groupsWidth+=1;
-1831
-1832vargroupsLeft=options.groupsOnRight?size.frameWidth-groupsWidth:0;
-1833resized=resized||(size.groupsWidth!==groupsWidth);
-1834resized=resized||(size.groupsLeft!==groupsLeft);
-1835size.groupsWidth=groupsWidth;
-1836size.groupsLeft=groupsLeft;
-1837
-1838returnresized;
-1839};
-1840
-1841/**
-1842 * Redraw the group labels
-1843 */
-1844links.Timeline.prototype.repaintGroups=function(){
-1845vardom=this.dom,
-1846timeline=this,
-1847options=this.options,
-1848size=this.size,
-1849groups=this.groups;
-1850
-1851if(dom.groups===undefined){
-1852dom.groups={};
-1853}
-1854
-1855varlabels=dom.groups.labels;
-1856if(!labels){
-1857labels=[];
-1858dom.groups.labels=labels;
-1859}
-1860varlabelLines=dom.groups.labelLines;
-1861if(!labelLines){
-1862labelLines=[];
-1863dom.groups.labelLines=labelLines;
-1864}
-1865varitemLines=dom.groups.itemLines;
-1866if(!itemLines){
-1867itemLines=[];
-1868dom.groups.itemLines=itemLines;
-1869}
-1870
-1871// create the frame for holding the groups
-1872varframe=dom.groups.frame;
-1873if(!frame){
-1874frame=document.createElement("DIV");
-1875frame.className="timeline-groups-axis";
-1876frame.style.position="absolute";
-1877frame.style.overflow="hidden";
-1878frame.style.top="0px";
-1879frame.style.height="100%";
-1880
-1881dom.frame.appendChild(frame);
-1882dom.groups.frame=frame;
-1883}
-1884
-1885frame.style.left=size.groupsLeft+"px";
-1886frame.style.width=(options.groupsWidth!==undefined)?
-1887options.groupsWidth:
-1888size.groupsWidth+"px";
-1889
-1890// hide groups axis when there are no groups
-1891if(groups.length==0){
-1892frame.style.display='none';
-1893}
-1894else{
-1895frame.style.display='';
-1896}
-1897
-1898// TODO: only create/update groups when data is changed.
-1899
-1900// create the items
-1901varcurrent=labels.length,
-1902needed=groups.length;
-1903
-1904// overwrite existing group labels
-1905for(vari=0,iMax=Math.min(current,needed);i<iMax;i++){
-1906vargroup=groups[i];
-1907varlabel=labels[i];
-1908label.innerHTML=this.getGroupName(group);
-1909label.style.display='';
-1910}
-1911
-1912// append new items when needed
-1913for(vari=current;i<needed;i++){
-1914vargroup=groups[i];
-1915
-1916// create text label
-1917varlabel=document.createElement("DIV");
-1918label.className="timeline-groups-text";
-1919label.style.position="absolute";
-1920if(options.groupsWidth===undefined){
-1921label.style.whiteSpace="nowrap";
-1922}
-1923label.innerHTML=this.getGroupName(group);
-1924frame.appendChild(label);
-1925labels[i]=label;
-1926
-1927// create the grid line between the group labels
-1928varlabelLine=document.createElement("DIV");
-1929labelLine.className="timeline-axis-grid timeline-axis-grid-minor";
-1930labelLine.style.position="absolute";
-1931labelLine.style.left="0px";
-1932labelLine.style.width="100%";
-1933labelLine.style.height="0px";
-1934labelLine.style.borderTopStyle="solid";
-1935frame.appendChild(labelLine);
-1936labelLines[i]=labelLine;
-1937
-1938// create the grid line between the items
-1939varitemLine=document.createElement("DIV");
-1940itemLine.className="timeline-axis-grid timeline-axis-grid-minor";
-1941itemLine.style.position="absolute";
-1942itemLine.style.left="0px";
-1943itemLine.style.width="100%";
-1944itemLine.style.height="0px";
-1945itemLine.style.borderTopStyle="solid";
-1946dom.content.insertBefore(itemLine,dom.content.firstChild);
-1947itemLines[i]=itemLine;
-1948}
-1949
-1950// remove redundant items from the DOM when needed
-1951for(vari=needed;i<current;i++){
-1952varlabel=labels[i],
-1953labelLine=labelLines[i],
-1954itemLine=itemLines[i];
-1955
-1956frame.removeChild(label);
-1957frame.removeChild(labelLine);
-1958dom.content.removeChild(itemLine);
-1959}
-1960labels.splice(needed,current-needed);
-1961labelLines.splice(needed,current-needed);
-1962itemLines.splice(needed,current-needed);
-1963
-1964links.Timeline.addClassName(frame,options.groupsOnRight?'timeline-groups-axis-onright':'timeline-groups-axis-onleft');
-1965
-1966// position the groups
-1967for(vari=0,iMax=groups.length;i<iMax;i++){
-1968vargroup=groups[i],
-1969label=labels[i],
-1970labelLine=labelLines[i],
-1971itemLine=itemLines[i];
-1972
-1973label.style.top=group.labelTop+"px";
-1974labelLine.style.top=group.lineTop+"px";
-1975itemLine.style.top=group.lineTop+"px";
-1976itemLine.style.width=size.contentWidth+"px";
-1977}
-1978
-1979if(!dom.groups.background){
-1980// create the axis grid line background
-1981varbackground=document.createElement("DIV");
-1982background.className="timeline-axis";
-1983background.style.position="absolute";
-1984background.style.left="0px";
-1985background.style.width="100%";
-1986background.style.border="none";
-1987
-1988frame.appendChild(background);
-1989dom.groups.background=background;
-1990}
-1991dom.groups.background.style.top=size.axis.top+'px';
-1992dom.groups.background.style.height=size.axis.height+'px';
-1993
-1994if(!dom.groups.line){
-1995// create the axis grid line
-1996varline=document.createElement("DIV");
-1997line.className="timeline-axis";
-1998line.style.position="absolute";
-1999line.style.left="0px";
-2000line.style.width="100%";
-2001line.style.height="0px";
-2002
-2003frame.appendChild(line);
-2004dom.groups.line=line;
-2005}
-2006dom.groups.line.style.top=size.axis.line+'px';
-2007
-2008// create a callback when there are images which are not yet loaded
-2009// TODO: more efficiently load images in the groups
-2010if(dom.groups.frame&&groups.length){
-2011varimageUrls=[];
-2012links.imageloader.filterImageUrls(dom.groups.frame,imageUrls);
-2013if(imageUrls.length){
-2014// retrieve all image sources from the items, and set a callback once
-2015// all images are retrieved
-2016varcallback=function(){
-2017timeline.render();
-2018};
-2019varsendCallbackWhenAlreadyLoaded=false;
-2020links.imageloader.loadAll(imageUrls,callback,sendCallbackWhenAlreadyLoaded);
-2021}
-2022}
-2023};
-2024
-2025
-2026/**
-2027 * Redraw the current time bar
-2028 */
-2029links.Timeline.prototype.repaintCurrentTime=function(){
-2030varoptions=this.options,
-2031dom=this.dom,
-2032size=this.size;
-2033
-2034if(!options.showCurrentTime){
-2035if(dom.currentTime){
-2036dom.contentTimelines.removeChild(dom.currentTime);
-2037deletedom.currentTime;
-2038}
-2039
-2040return;
-2041}
-2042
-2043if(!dom.currentTime){
-2044// create the current time bar
-2045varcurrentTime=document.createElement("DIV");
-2046currentTime.className="timeline-currenttime";
-2047currentTime.style.position="absolute";
-2048currentTime.style.top="0px";
-2049currentTime.style.height="100%";
-2050
-2051dom.contentTimelines.appendChild(currentTime);
-2052dom.currentTime=currentTime;
-2053}
-2054
-2055varnow=newDate();
-2056varnowOffset=newDate(now.valueOf()+this.clientTimeOffset);
-2057varx=this.timeToScreen(nowOffset);
-2058
-2059varvisible=(x>-size.contentWidth&&x<2*size.contentWidth);
-2060dom.currentTime.style.display=visible?'':'none';
-2061dom.currentTime.style.left=x+"px";
-2062dom.currentTime.title="Current time: "+nowOffset;
-2063
-2064// start a timer to adjust for the new time
-2065if(this.currentTimeTimer!=undefined){
-2066clearTimeout(this.currentTimeTimer);
-2067deletethis.currentTimeTimer;
-2068}
-2069vartimeline=this;
-2070varonTimeout=function(){
-2071timeline.repaintCurrentTime();
-2072};
-2073// the time equal to the width of one pixel, divided by 2 for more smoothness
-2074varinterval=1/this.conversion.factor/2;
-2075if(interval<30)interval=30;
-2076this.currentTimeTimer=setTimeout(onTimeout,interval);
-2077};
-2078
-2079/**
-2080 * Redraw the custom time bar
-2081 */
-2082links.Timeline.prototype.repaintCustomTime=function(){
-2083varoptions=this.options,
-2084dom=this.dom,
-2085size=this.size;
-2086
-2087if(!options.showCustomTime){
-2088if(dom.customTime){
-2089dom.contentTimelines.removeChild(dom.customTime);
-2090deletedom.customTime;
-2091}
-2092
-2093return;
-2094}
-2095
-2096if(!dom.customTime){
-2097varcustomTime=document.createElement("DIV");
-2098customTime.className="timeline-customtime";
-2099customTime.style.position="absolute";
-2100customTime.style.top="0px";
-2101customTime.style.height="100%";
-2102
-2103vardrag=document.createElement("DIV");
-2104drag.style.position="relative";
-2105drag.style.top="0px";
-2106drag.style.left="-10px";
-2107drag.style.height="100%";
-2108drag.style.width="20px";
-2109customTime.appendChild(drag);
-2110
-2111dom.contentTimelines.appendChild(customTime);
-2112dom.customTime=customTime;
-2113
-2114// initialize parameter
-2115this.customTime=newDate();
-2116}
-2117
-2118varx=this.timeToScreen(this.customTime),
-2119visible=(x>-size.contentWidth&&x<2*size.contentWidth);
-2120dom.customTime.style.display=visible?'':'none';
-2121dom.customTime.style.left=x+"px";
-2122dom.customTime.title="Time: "+this.customTime;
-2123};
-2124
-2125
-2126/**
-2127 * Redraw the delete button, on the top right of the currently selected item
-2128 * if there is no item selected, the button is hidden.
-2129 */
-2130links.Timeline.prototype.repaintDeleteButton=function(){
-2131vartimeline=this,
-2132dom=this.dom,
-2133frame=dom.items.frame;
-2134
-2135vardeleteButton=dom.items.deleteButton;
-2136if(!deleteButton){
-2137// create a delete button
-2138deleteButton=document.createElement("DIV");
-2139deleteButton.className="timeline-navigation-delete";
-2140deleteButton.style.position="absolute";
-2141
-2142frame.appendChild(deleteButton);
-2143dom.items.deleteButton=deleteButton;
-2144}
-2145
-2146varindex=(this.selection&&this.selection.index!==undefined)?this.selection.index:-1,
-2147item=(this.selection&&this.selection.index!==undefined)?this.items[index]:undefined;
-2148if(item&&item.rendered&&this.isEditable(item)){
-2149varright=item.getRight(this),
-2150top=item.top;
-2151
-2152deleteButton.style.left=right+'px';
-2153deleteButton.style.top=top+'px';
-2154deleteButton.style.display='';
-2155frame.removeChild(deleteButton);
-2156frame.appendChild(deleteButton);
-2157}
-2158else{
-2159deleteButton.style.display='none';
-2160}
-2161};
-2162
-2163
-2164/**
-2165 * Redraw the drag areas. When an item (ranges only) is selected,
-2166 * it gets a drag area on the left and right side, to change its width
-2167 */
-2168links.Timeline.prototype.repaintDragAreas=function(){
-2169vartimeline=this,
-2170options=this.options,
-2171dom=this.dom,
-2172frame=this.dom.items.frame;
-2173
-2174// create left drag area
-2175vardragLeft=dom.items.dragLeft;
-2176if(!dragLeft){
-2177dragLeft=document.createElement("DIV");
-2178dragLeft.className="timeline-event-range-drag-left";
-2179dragLeft.style.position="absolute";
-2180
-2181frame.appendChild(dragLeft);
-2182dom.items.dragLeft=dragLeft;
-2183}
-2184
-2185// create right drag area
-2186vardragRight=dom.items.dragRight;
-2187if(!dragRight){
-2188dragRight=document.createElement("DIV");
-2189dragRight.className="timeline-event-range-drag-right";
-2190dragRight.style.position="absolute";
-2191
-2192frame.appendChild(dragRight);
-2193dom.items.dragRight=dragRight;
-2194}
-2195
-2196// reposition left and right drag area
-2197varindex=(this.selection&&this.selection.index!==undefined)?this.selection.index:-1,
-2198item=(this.selection&&this.selection.index!==undefined)?this.items[index]:undefined;
-2199if(item&&item.rendered&&this.isEditable(item)&&
-2200(iteminstanceoflinks.Timeline.ItemRange||iteminstanceoflinks.Timeline.ItemFloatingRange)){
-2201varleft=item.getLeft(this),// NH change to getLeft
-2202right=item.getRight(this),// NH change to getRight
-2203top=item.top,
-2204height=item.height;
-2205
-2206dragLeft.style.left=left+'px';
-2207dragLeft.style.top=top+'px';
-2208dragLeft.style.width=options.dragAreaWidth+"px";
-2209dragLeft.style.height=height+'px';
-2210dragLeft.style.display='';
-2211frame.removeChild(dragLeft);
-2212frame.appendChild(dragLeft);
-2213
-2214dragRight.style.left=(right-options.dragAreaWidth)+'px';
-2215dragRight.style.top=top+'px';
-2216dragRight.style.width=options.dragAreaWidth+"px";
-2217dragRight.style.height=height+'px';
-2218dragRight.style.display='';
-2219frame.removeChild(dragRight);
-2220frame.appendChild(dragRight);
-2221}
-2222else{
-2223dragLeft.style.display='none';
-2224dragRight.style.display='none';
-2225}
-2226};
-2227
-2228/**
-2229 * Create the navigation buttons for zooming and moving
-2230 */
-2231links.Timeline.prototype.repaintNavigation=function(){
-2232vartimeline=this,
-2233options=this.options,
-2234dom=this.dom,
-2235frame=dom.frame,
-2236navBar=dom.navBar;
-2237
-2238if(!navBar){
-2239varshowButtonNew=options.showButtonNew&&options.editable;
-2240varshowNavigation=options.showNavigation&&(options.zoomable||options.moveable);
-2241if(showNavigation||showButtonNew){
-2242// create a navigation bar containing the navigation buttons
-2243navBar=document.createElement("DIV");
-2244navBar.style.position="absolute";
-2245navBar.className="timeline-navigation ui-widget ui-state-highlight ui-corner-all";
-2246if(options.groupsOnRight){
-2247navBar.style.left='10px';
-2248}
-2249else{
-2250navBar.style.right='10px';
-2251}
-2252if(options.axisOnTop){
-2253navBar.style.bottom='10px';
-2254}
-2255else{
-2256navBar.style.top='10px';
-2257}
-2258dom.navBar=navBar;
-2259frame.appendChild(navBar);
-2260}
-2261
-2262if(showButtonNew){
-2263// create a new in button
-2264navBar.addButton=document.createElement("DIV");
-2265navBar.addButton.className="timeline-navigation-new";
-2266navBar.addButton.title=options.CREATE_NEW_EVENT;
-2267varaddIconSpan=document.createElement("SPAN");
-2268addIconSpan.className="ui-icon ui-icon-circle-plus";
-2269navBar.addButton.appendChild(addIconSpan);
-2270
-2271varonAdd=function(event){
-2272links.Timeline.preventDefault(event);
-2273links.Timeline.stopPropagation(event);
-2274
-2275// create a new event at the center of the frame
-2276varw=timeline.size.contentWidth;
-2277varx=w/2;
-2278varxstart=timeline.screenToTime(x);
-2279if(options.snapEvents){
-2280timeline.step.snap(xstart);
-2281}
-2282
-2283varcontent=options.NEW;
-2284vargroup=timeline.groups.length?timeline.groups[0].content:undefined;
-2285varpreventRender=true;
-2286timeline.addItem({
-2287'start':xstart,
-2288'content':content,
-2289'group':group
-2290},preventRender);
-2291varindex=(timeline.items.length-1);
-2292timeline.selectItem(index);
-2293
-2294timeline.applyAdd=true;
-2295
-2296// fire an add event.
-2297// Note that the change can be canceled from within an event listener if
-2298// this listener calls the method cancelAdd().
-2299timeline.trigger('add');
-2300
-2301if(timeline.applyAdd){
-2302// render and select the item
-2303timeline.render({animate:false});
-2304timeline.selectItem(index);
-2305}
-2306else{
-2307// undo an add
-2308timeline.deleteItem(index);
-2309}
-2310};
-2311links.Timeline.addEventListener(navBar.addButton,"mousedown",onAdd);
-2312navBar.appendChild(navBar.addButton);
-2313}
-2314
-2315if(showButtonNew&&showNavigation){
-2316// create a separator line
-2317links.Timeline.addClassName(navBar.addButton,'timeline-navigation-new-line');
-2318}
-2319
-2320if(showNavigation){
-2321if(options.zoomable){
-2322// create a zoom in button
-2323navBar.zoomInButton=document.createElement("DIV");
-2324navBar.zoomInButton.className="timeline-navigation-zoom-in";
-2325navBar.zoomInButton.title=this.options.ZOOM_IN;
-2326varziIconSpan=document.createElement("SPAN");
-2327ziIconSpan.className="ui-icon ui-icon-circle-zoomin";
-2328navBar.zoomInButton.appendChild(ziIconSpan);
-2329
-2330varonZoomIn=function(event){
-2331links.Timeline.preventDefault(event);
-2332links.Timeline.stopPropagation(event);
-2333timeline.zoom(0.4);
-2334timeline.trigger("rangechange");
-2335timeline.trigger("rangechanged");
-2336};
-2337links.Timeline.addEventListener(navBar.zoomInButton,"mousedown",onZoomIn);
-2338navBar.appendChild(navBar.zoomInButton);
-2339
-2340// create a zoom out button
-2341navBar.zoomOutButton=document.createElement("DIV");
-2342navBar.zoomOutButton.className="timeline-navigation-zoom-out";
-2343navBar.zoomOutButton.title=this.options.ZOOM_OUT;
-2344varzoIconSpan=document.createElement("SPAN");
-2345zoIconSpan.className="ui-icon ui-icon-circle-zoomout";
-2346navBar.zoomOutButton.appendChild(zoIconSpan);
-2347
-2348varonZoomOut=function(event){
-2349links.Timeline.preventDefault(event);
-2350links.Timeline.stopPropagation(event);
-2351timeline.zoom(-0.4);
-2352timeline.trigger("rangechange");
-2353timeline.trigger("rangechanged");
-2354};
-2355links.Timeline.addEventListener(navBar.zoomOutButton,"mousedown",onZoomOut);
-2356navBar.appendChild(navBar.zoomOutButton);
-2357}
-2358
-2359if(options.moveable){
-2360// create a move left button
-2361navBar.moveLeftButton=document.createElement("DIV");
-2362navBar.moveLeftButton.className="timeline-navigation-move-left";
-2363navBar.moveLeftButton.title=this.options.MOVE_LEFT;
-2364varmlIconSpan=document.createElement("SPAN");
-2365mlIconSpan.className="ui-icon ui-icon-circle-arrow-w";
-2366navBar.moveLeftButton.appendChild(mlIconSpan);
-2367
-2368varonMoveLeft=function(event){
-2369links.Timeline.preventDefault(event);
-2370links.Timeline.stopPropagation(event);
-2371timeline.move(-0.2);
-2372timeline.trigger("rangechange");
-2373timeline.trigger("rangechanged");
-2374};
-2375links.Timeline.addEventListener(navBar.moveLeftButton,"mousedown",onMoveLeft);
-2376navBar.appendChild(navBar.moveLeftButton);
-2377
-2378// create a move right button
-2379navBar.moveRightButton=document.createElement("DIV");
-2380navBar.moveRightButton.className="timeline-navigation-move-right";
-2381navBar.moveRightButton.title=this.options.MOVE_RIGHT;
-2382varmrIconSpan=document.createElement("SPAN");
-2383mrIconSpan.className="ui-icon ui-icon-circle-arrow-e";
-2384navBar.moveRightButton.appendChild(mrIconSpan);
-2385
-2386varonMoveRight=function(event){
-2387links.Timeline.preventDefault(event);
-2388links.Timeline.stopPropagation(event);
-2389timeline.move(0.2);
-2390timeline.trigger("rangechange");
-2391timeline.trigger("rangechanged");
-2392};
-2393links.Timeline.addEventListener(navBar.moveRightButton,"mousedown",onMoveRight);
-2394navBar.appendChild(navBar.moveRightButton);
-2395}
-2396}
-2397}
-2398};
-2399
-2400
-2401/**
-2402 * Set current time. This function can be used to set the time in the client
-2403 * timeline equal with the time on a server.
-2404 * @param {Date} time
-2405 */
-2406links.Timeline.prototype.setCurrentTime=function(time){
-2407varnow=newDate();
-2408this.clientTimeOffset=(time.valueOf()-now.valueOf());
-2409
-2410this.repaintCurrentTime();
-2411};
-2412
-2413/**
-2414 * Get current time. The time can have an offset from the real time, when
-2415 * the current time has been changed via the method setCurrentTime.
-2416 * @return {Date} time
-2417 */
-2418links.Timeline.prototype.getCurrentTime=function(){
-2419varnow=newDate();
-2420returnnewDate(now.valueOf()+this.clientTimeOffset);
-2421};
-2422
-2423
-2424/**
-2425 * Set custom time.
-2426 * The custom time bar can be used to display events in past or future.
-2427 * @param {Date} time
-2428 */
-2429links.Timeline.prototype.setCustomTime=function(time){
-2430this.customTime=newDate(time.valueOf());
-2431this.repaintCustomTime();
-2432};
-2433
-2434/**
-2435 * Retrieve the current custom time.
-2436 * @return {Date} customTime
-2437 */
-2438links.Timeline.prototype.getCustomTime=function(){
-2439returnnewDate(this.customTime.valueOf());
-2440};
-2441
-2442/**
-2443 * Set a custom scale. Autoscaling will be disabled.
-2444 * For example setScale(SCALE.MINUTES, 5) will result
-2445 * in minor steps of 5 minutes, and major steps of an hour.
-2446 *
-2447 * @param {links.Timeline.StepDate.SCALE} scale
-2448 * A scale. Choose from SCALE.MILLISECOND,
-2449 * SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
-2450 * SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
-2451 * SCALE.YEAR.
-2452 * @param {int} step A step size, by default 1. Choose for
-2453 * example 1, 2, 5, or 10.
-2454 */
-2455links.Timeline.prototype.setScale=function(scale,step){
-2456this.step.setScale(scale,step);
-2457this.render();// TODO: optimize: only reflow/repaint axis
-2458};
-2459
-2460/**
-2461 * Enable or disable autoscaling
-2462 * @param {boolean} enable If true or not defined, autoscaling is enabled.
-2463 * If false, autoscaling is disabled.
-2464 */
-2465links.Timeline.prototype.setAutoScale=function(enable){
-2466this.step.setAutoScale(enable);
-2467this.render();// TODO: optimize: only reflow/repaint axis
-2468};
-2469
-2470/**
-2471 * Redraw the timeline
-2472 * Reloads the (linked) data table and redraws the timeline when resized.
-2473 * See also the method checkResize
-2474 */
-2475links.Timeline.prototype.redraw=function(){
-2476this.setData(this.data);
-2477};
-2478
-2479
-2480/**
-2481 * Check if the timeline is resized, and if so, redraw the timeline.
-2482 * Useful when the webpage is resized.
-2483 */
-2484links.Timeline.prototype.checkResize=function(){
-2485// TODO: re-implement the method checkResize, or better, make it redundant as this.render will be smarter
-2486this.render();
-2487};
-2488
-2489/**
-2490 * Check whether a given item is editable
-2491 * @param {links.Timeline.Item} item
-2492 * @return {boolean} editable
-2493 */
-2494links.Timeline.prototype.isEditable=function(item){
-2495if(item){
-2496if(item.editable!=undefined){
-2497returnitem.editable;
-2498}
-2499else{
-2500returnthis.options.editable;
-2501}
-2502}
-2503returnfalse;
-2504};
-2505
-2506/**
-2507 * Calculate the factor and offset to convert a position on screen to the
-2508 * corresponding date and vice versa.
-2509 * After the method calcConversionFactor is executed once, the methods screenToTime and
-2510 * timeToScreen can be used.
-2511 */
-2512links.Timeline.prototype.recalcConversion=function(){
-2513this.conversion.offset=this.start.valueOf();
-2514this.conversion.factor=this.size.contentWidth/
-2515(this.end.valueOf()-this.start.valueOf());
-2516};
-2517
-2518
-2519/**
-2520 * Convert a position on screen (pixels) to a datetime
-2521 * Before this method can be used, the method calcConversionFactor must be
-2522 * executed once.
-2523 * @param {int} x Position on the screen in pixels
-2524 * @return {Date} time The datetime the corresponds with given position x
-2525 */
-2526links.Timeline.prototype.screenToTime=function(x){
-2527varconversion=this.conversion;
-2528returnnewDate(x/conversion.factor+conversion.offset);
-2529};
-2530
-2531/**
-2532 * Convert a datetime (Date object) into a position on the screen
-2533 * Before this method can be used, the method calcConversionFactor must be
-2534 * executed once.
-2535 * @param {Date} time A date
-2536 * @return {int} x The position on the screen in pixels which corresponds
-2537 * with the given date.
-2538 */
-2539links.Timeline.prototype.timeToScreen=function(time){
-2540varconversion=this.conversion;
-2541return(time.valueOf()-conversion.offset)*conversion.factor;
-2542};
-2543
-2544
-2545
-2546/**
-2547 * Event handler for touchstart event on mobile devices
-2548 */
-2549links.Timeline.prototype.onTouchStart=function(event){
-2550varparams=this.eventParams,
-2551me=this;
-2552
-2553if(params.touchDown){
-2554// if already moving, return
-2555return;
-2556}
-2557
-2558params.touchDown=true;
-2559params.zoomed=false;
-2560
-2561this.onMouseDown(event);
-2562
-2563if(!params.onTouchMove){
-2564params.onTouchMove=function(event){me.onTouchMove(event);};
-2565links.Timeline.addEventListener(document,"touchmove",params.onTouchMove);
-2566}
-2567if(!params.onTouchEnd){
-2568params.onTouchEnd=function(event){me.onTouchEnd(event);};
-2569links.Timeline.addEventListener(document,"touchend",params.onTouchEnd);
-2570}
-2571
-2572/* TODO
-2573 // check for double tap event
-2574 var delta = 500; // ms
-2575 var doubleTapStart = (new Date()).valueOf();
-2576 var target = links.Timeline.getTarget(event);
-2577 var doubleTapItem = this.getItemIndex(target);
-2578 if (params.doubleTapStart &&
-2579 (doubleTapStart - params.doubleTapStart) < delta &&
-2580 doubleTapItem == params.doubleTapItem) {
-2581 delete params.doubleTapStart;
-2582 delete params.doubleTapItem;
-2583 me.onDblClick(event);
-2584 params.touchDown = false;
-2585 }
-2586 params.doubleTapStart = doubleTapStart;
-2587 params.doubleTapItem = doubleTapItem;
-2588 */
-2589// store timing for double taps
-2590vartarget=links.Timeline.getTarget(event);
-2591varitem=this.getItemIndex(target);
-2592params.doubleTapStartPrev=params.doubleTapStart;
-2593params.doubleTapStart=(newDate()).valueOf();
-2594params.doubleTapItemPrev=params.doubleTapItem;
-2595params.doubleTapItem=item;
-2596
-2597links.Timeline.preventDefault(event);
-2598};
-2599
-2600/**
-2601 * Event handler for touchmove event on mobile devices
-2602 */
-2603links.Timeline.prototype.onTouchMove=function(event){
-2604varparams=this.eventParams;
-2605
-2606if(event.scale&&event.scale!==1){
-2607params.zoomed=true;
-2608}
-2609
-2610if(!params.zoomed){
-2611// move
-2612this.onMouseMove(event);
-2613}
-2614else{
-2615if(this.options.zoomable){
-2616// pinch
-2617// TODO: pinch only supported on iPhone/iPad. Create something manually for Android?
-2618params.zoomed=true;
-2619
-2620varscale=event.scale,
-2621oldWidth=(params.end.valueOf()-params.start.valueOf()),
-2622newWidth=oldWidth/scale,
-2623diff=newWidth-oldWidth,
-2624start=newDate(parseInt(params.start.valueOf()-diff/2)),
-2625end=newDate(parseInt(params.end.valueOf()+diff/2));
-2626
-2627// TODO: determine zoom-around-date from touch positions?
-2628
-2629this.setVisibleChartRange(start,end);
-2630this.trigger("rangechange");
-2631}
-2632}
-2633
-2634links.Timeline.preventDefault(event);
-2635};
-2636
-2637/**
-2638 * Event handler for touchend event on mobile devices
-2639 */
-2640links.Timeline.prototype.onTouchEnd=function(event){
-2641varparams=this.eventParams;
-2642varme=this;
-2643params.touchDown=false;
-2644
-2645if(params.zoomed){
-2646this.trigger("rangechanged");
-2647}
-2648
-2649if(params.onTouchMove){
-2650links.Timeline.removeEventListener(document,"touchmove",params.onTouchMove);
-2651deleteparams.onTouchMove;
-2652
-2653}
-2654if(params.onTouchEnd){
-2655links.Timeline.removeEventListener(document,"touchend",params.onTouchEnd);
-2656deleteparams.onTouchEnd;
-2657}
-2658
-2659this.onMouseUp(event);
-2660
-2661// check for double tap event
-2662vardelta=500;// ms
-2663vardoubleTapEnd=(newDate()).valueOf();
-2664vartarget=links.Timeline.getTarget(event);
-2665vardoubleTapItem=this.getItemIndex(target);
-2666if(params.doubleTapStartPrev&&
-2667(doubleTapEnd-params.doubleTapStartPrev)<delta&&
-2668params.doubleTapItem==params.doubleTapItemPrev){
-2669params.touchDown=true;
-2670me.onDblClick(event);
-2671params.touchDown=false;
-2672}
-2673
-2674links.Timeline.preventDefault(event);
-2675};
-2676
-2677
-2678/**
-2679 * Start a moving operation inside the provided parent element
-2680 * @param {Event} event The event that occurred (required for
-2681 * retrieving the mouse position)
-2682 */
-2683links.Timeline.prototype.onMouseDown=function(event){
-2684event=event||window.event;
-2685
-2686varparams=this.eventParams,
-2687options=this.options,
-2688dom=this.dom;
-2689
-2690// only react on left mouse button down
-2691varleftButtonDown=event.which?(event.which==1):(event.button==1);
-2692if(!leftButtonDown&&!params.touchDown){
-2693return;
-2694}
-2695
-2696// get mouse position
-2697params.mouseX=links.Timeline.getPageX(event);
-2698params.mouseY=links.Timeline.getPageY(event);
-2699params.frameLeft=links.Timeline.getAbsoluteLeft(this.dom.content);
-2700params.frameTop=links.Timeline.getAbsoluteTop(this.dom.content);
-2701params.previousLeft=0;
-2702params.previousOffset=0;
-2703
-2704params.moved=false;
-2705params.start=newDate(this.start.valueOf());
-2706params.end=newDate(this.end.valueOf());
-2707
-2708params.target=links.Timeline.getTarget(event);
-2709vardragLeft=(dom.items&&dom.items.dragLeft)?dom.items.dragLeft:undefined;
-2710vardragRight=(dom.items&&dom.items.dragRight)?dom.items.dragRight:undefined;
-2711params.itemDragLeft=(params.target===dragLeft);
-2712params.itemDragRight=(params.target===dragRight);
-2713
-2714if(params.itemDragLeft||params.itemDragRight){
-2715params.itemIndex=(this.selection&&this.selection.index!==undefined)?this.selection.index:undefined;
-2716deleteparams.clusterIndex;
-2717}
-2718else{
-2719params.itemIndex=this.getItemIndex(params.target);
-2720params.clusterIndex=this.getClusterIndex(params.target);
-2721}
-2722
-2723params.customTime=(params.target===dom.customTime||
-2724params.target.parentNode===dom.customTime)?
-2725this.customTime:
-2726undefined;
-2727
-2728params.addItem=(options.editable&&event.ctrlKey);
-2729if(params.addItem){
-2730// create a new event at the current mouse position
-2731varx=params.mouseX-params.frameLeft;
-2732vary=params.mouseY-params.frameTop;
-2733
-2734varxstart=this.screenToTime(x);
-2735if(options.snapEvents){
-2736this.step.snap(xstart);
-2737}
-2738varxend=newDate(xstart.valueOf());
-2739varcontent=options.NEW;
-2740vargroup=this.getGroupFromHeight(y);
-2741this.addItem({
-2742'start':xstart,
-2743'end':xend,
-2744'content':content,
-2745'group':this.getGroupName(group)
-2746});
-2747params.itemIndex=(this.items.length-1);
-2748deleteparams.clusterIndex;
-2749this.selectItem(params.itemIndex);
-2750params.itemDragRight=true;
-2751}
-2752
-2753varitem=this.items[params.itemIndex];
-2754varisSelected=this.isSelected(params.itemIndex);
-2755params.editItem=isSelected&&this.isEditable(item);
-2756if(params.editItem){
-2757params.itemStart=item.start;
-2758params.itemEnd=item.end;
-2759params.itemGroup=item.group;
-2760params.itemLeft=item.getLeft(this);// NH Use item.getLeft here
-2761params.itemRight=item.getRight(this);// NH Use item.getRight here
-2762}
-2763else{
-2764this.dom.frame.style.cursor='move';
-2765}
-2766if(!params.touchDown){
-2767// add event listeners to handle moving the contents
-2768// we store the function onmousemove and onmouseup in the timeline, so we can
-2769// remove the eventlisteners lateron in the function mouseUp()
-2770varme=this;
-2771if(!params.onMouseMove){
-2772params.onMouseMove=function(event){me.onMouseMove(event);};
-2773links.Timeline.addEventListener(document,"mousemove",params.onMouseMove);
-2774}
-2775if(!params.onMouseUp){
-2776params.onMouseUp=function(event){me.onMouseUp(event);};
-2777links.Timeline.addEventListener(document,"mouseup",params.onMouseUp);
-2778}
-2779
-2780links.Timeline.preventDefault(event);
-2781}
-2782};
-2783
-2784
-2785/**
-2786 * Perform moving operating.
-2787 * This function activated from within the funcion links.Timeline.onMouseDown().
-2788 * @param {Event} event Well, eehh, the event
-2789 */
-2790links.Timeline.prototype.onMouseMove=function(event){
-2791event=event||window.event;
-2792
-2793varparams=this.eventParams,
-2794size=this.size,
-2795dom=this.dom,
-2796options=this.options;
-2797
-2798// calculate change in mouse position
-2799varmouseX=links.Timeline.getPageX(event);
-2800varmouseY=links.Timeline.getPageY(event);
-2801
-2802if(params.mouseX==undefined){
-2803params.mouseX=mouseX;
-2804}
-2805if(params.mouseY==undefined){
-2806params.mouseY=mouseY;
-2807}
-2808
-2809vardiffX=mouseX-params.mouseX;
-2810vardiffY=mouseY-params.mouseY;
-2811
-2812// if mouse movement is big enough, register it as a "moved" event
-2813if(Math.abs(diffX)>=1){
-2814params.moved=true;
-2815}
-2816
-2817if(params.customTime){
-2818varx=this.timeToScreen(params.customTime);
-2819varxnew=x+diffX;
-2820this.customTime=this.screenToTime(xnew);
-2821this.repaintCustomTime();
-2822
-2823// fire a timechange event
-2824this.trigger('timechange');
-2825}
-2826elseif(params.editItem){
-2827varitem=this.items[params.itemIndex],
-2828left,
-2829right;
-2830
-2831if(params.itemDragLeft&&options.timeChangeable){
-2832// move the start of the item
-2833left=params.itemLeft+diffX;
-2834right=params.itemRight;
-2835
-2836item.start=this.screenToTime(left);
-2837if(options.snapEvents){
-2838this.step.snap(item.start);
-2839left=this.timeToScreen(item.start);
-2840}
-2841
-2842if(left>right){
-2843left=right;
-2844item.start=this.screenToTime(left);
-2845}
-2846this.trigger('change');
-2847}
-2848elseif(params.itemDragRight&&options.timeChangeable){
-2849// move the end of the item
-2850left=params.itemLeft;
-2851right=params.itemRight+diffX;
-2852
-2853item.end=this.screenToTime(right);
-2854if(options.snapEvents){
-2855this.step.snap(item.end);
-2856right=this.timeToScreen(item.end);
-2857}
-2858
-2859if(right<left){
-2860right=left;
-2861item.end=this.screenToTime(right);
-2862}
-2863this.trigger('change');
-2864}
-2865elseif(options.timeChangeable){
-2866// move the item
-2867left=params.itemLeft+diffX;
-2868item.start=this.screenToTime(left);
-2869if(options.snapEvents){
-2870this.step.snap(item.start);
-2871left=this.timeToScreen(item.start);
-2872}
-2873
-2874if(item.end){
-2875right=left+(params.itemRight-params.itemLeft);
-2876item.end=this.screenToTime(right);
-2877}
-2878this.trigger('change');
-2879}
-2880
-2881item.setPosition(left,right);
-2882
-2883vardragging=params.itemDragLeft||params.itemDragRight;
-2884if(this.groups.length&&!dragging){
-2885// move item from one group to another when needed
-2886vary=mouseY-params.frameTop;
-2887vargroup=this.getGroupFromHeight(y);
-2888if(options.groupsChangeable&&item.group!==group){
-2889// move item to the other group
-2890varindex=this.items.indexOf(item);
-2891this.changeItem(index,{'group':this.getGroupName(group)});
-2892}
-2893else{
-2894this.repaintDeleteButton();
-2895this.repaintDragAreas();
-2896}
-2897}
-2898else{
-2899// TODO: does not work well in FF, forces redraw with every mouse move it seems
-2900this.render();// TODO: optimize, only redraw the items?
-2901// Note: when animate==true, no redraw is needed here, its done by stackItems animation
-2902}
-2903}
-2904elseif(options.moveable){
-2905varinterval=(params.end.valueOf()-params.start.valueOf());
-2906vardiffMillisecs=Math.round((-diffX)/size.contentWidth*interval);
-2907varnewStart=newDate(params.start.valueOf()+diffMillisecs);
-2908varnewEnd=newDate(params.end.valueOf()+diffMillisecs);
-2909this.applyRange(newStart,newEnd);
-2910// if the applied range is moved due to a fixed min or max,
-2911// change the diffMillisecs accordingly
-2912varappliedDiff=(this.start.valueOf()-newStart.valueOf());
-2913if(appliedDiff){
-2914diffMillisecs+=appliedDiff;
-2915}
-2916
-2917this.recalcConversion();
-2918
-2919// move the items by changing the left position of their frame.
-2920// this is much faster than repositioning all elements individually via the
-2921// repaintFrame() function (which is done once at mouseup)
-2922// note that we round diffX to prevent wrong positioning on millisecond scale
-2923varpreviousLeft=params.previousLeft||0;
-2924varcurrentLeft=parseFloat(dom.items.frame.style.left)||0;
-2925varpreviousOffset=params.previousOffset||0;
-2926varframeOffset=previousOffset+(currentLeft-previousLeft);
-2927varframeLeft=-diffMillisecs/interval*size.contentWidth+frameOffset;
-2928
-2929dom.items.frame.style.left=(frameLeft)+"px";
-2930
-2931// read the left again from DOM (IE8- rounds the value)
-2932params.previousOffset=frameOffset;
-2933params.previousLeft=parseFloat(dom.items.frame.style.left)||frameLeft;
-2934
-2935this.repaintCurrentTime();
-2936this.repaintCustomTime();
-2937this.repaintAxis();
-2938
-2939// fire a rangechange event
-2940this.trigger('rangechange');
-2941}
-2942
-2943links.Timeline.preventDefault(event);
-2944};
-2945
-2946
-2947/**
-2948 * Stop moving operating.
-2949 * This function activated from within the funcion links.Timeline.onMouseDown().
-2950 * @param {event} event The event
-2951 */
-2952links.Timeline.prototype.onMouseUp=function(event){
-2953varparams=this.eventParams,
-2954options=this.options;
-2955
-2956event=event||window.event;
-2957
-2958this.dom.frame.style.cursor='auto';
-2959
-2960// remove event listeners here, important for Safari
-2961if(params.onMouseMove){
-2962links.Timeline.removeEventListener(document,"mousemove",params.onMouseMove);
-2963deleteparams.onMouseMove;
-2964}
-2965if(params.onMouseUp){
-2966links.Timeline.removeEventListener(document,"mouseup",params.onMouseUp);
-2967deleteparams.onMouseUp;
-2968}
-2969//links.Timeline.preventDefault(event);
-2970
-2971if(params.customTime){
-2972// fire a timechanged event
-2973this.trigger('timechanged');
-2974}
-2975elseif(params.editItem){
-2976varitem=this.items[params.itemIndex];
-2977
-2978if(params.moved||params.addItem){
-2979this.applyChange=true;
-2980this.applyAdd=true;
-2981
-2982this.updateData(params.itemIndex,{
-2983'start':item.start,
-2984'end':item.end
-2985});
-2986
-2987// fire an add or changed event.
-2988// Note that the change can be canceled from within an event listener if
-2989// this listener calls the method cancelChange().
-2990this.trigger(params.addItem?'add':'changed');
-2991
-2992//retrieve item data again to include changes made to it in the triggered event handlers
-2993item=this.items[params.itemIndex];
-2994
-2995if(params.addItem){
-2996if(this.applyAdd){
-2997this.updateData(params.itemIndex,{
-2998'start':item.start,
-2999'end':item.end,
-3000'content':item.content,
-3001'group':this.getGroupName(item.group)
-3002});
-3003}
-3004else{
-3005// undo an add
-3006this.deleteItem(params.itemIndex);
-3007}
-3008}
-3009else{
-3010if(this.applyChange){
-3011this.updateData(params.itemIndex,{
-3012'start':item.start,
-3013'end':item.end
-3014});
-3015}
-3016else{
-3017// undo a change
-3018deletethis.applyChange;
-3019deletethis.applyAdd;
-3020
-3021varitem=this.items[params.itemIndex],
-3022domItem=item.dom;
-3023
-3024item.start=params.itemStart;
-3025item.end=params.itemEnd;
-3026item.group=params.itemGroup;
-3027// TODO: original group should be restored too
-3028item.setPosition(params.itemLeft,params.itemRight);
-3029
-3030this.updateData(params.itemIndex,{
-3031'start':params.itemStart,
-3032'end':params.itemEnd
-3033});
-3034}
-3035}
-3036
-3037// prepare data for clustering, by filtering and sorting by type
-3038if(this.options.cluster){
-3039this.clusterGenerator.updateData();
-3040}
-3041
-3042this.render();
-3043}
-3044}
-3045else{
-3046if(!params.moved&&!params.zoomed){
-3047// mouse did not move -> user has selected an item
-3048
-3049if(params.target===this.dom.items.deleteButton){
-3050// delete item
-3051if(this.selection&&this.selection.index!==undefined){
-3052this.confirmDeleteItem(this.selection.index);
-3053}
-3054}
-3055elseif(options.selectable){
-3056// select/unselect item
-3057if(params.itemIndex!=undefined){
-3058if(!this.isSelected(params.itemIndex)){
-3059this.selectItem(params.itemIndex);
-3060this.trigger('select');
-3061}
-3062}
-3063elseif(params.clusterIndex!=undefined){
-3064this.selectCluster(params.clusterIndex);
-3065this.trigger('select');
-3066}
-3067else{
-3068if(options.unselectable){
-3069this.unselectItem();
-3070this.trigger('select');
-3071}
-3072}
-3073}
-3074}
-3075else{
-3076// timeline is moved
-3077// TODO: optimize: no need to reflow and cluster again?
-3078this.render();
-3079
-3080if((params.moved&&options.moveable)||(params.zoomed&&options.zoomable)){
-3081// fire a rangechanged event
-3082this.trigger('rangechanged');
-3083}
-3084}
-3085}
-3086};
-3087
-3088/**
-3089 * Double click event occurred for an item
-3090 * @param {Event} event
-3091 */
-3092links.Timeline.prototype.onDblClick=function(event){
-3093varparams=this.eventParams,
-3094options=this.options,
-3095dom=this.dom,
-3096size=this.size;
-3097event=event||window.event;
-3098
-3099if(params.itemIndex!=undefined){
-3100varitem=this.items[params.itemIndex];
-3101if(item&&this.isEditable(item)){
-3102// fire the edit event
-3103this.trigger('edit');
-3104}
-3105}
-3106else{
-3107if(options.editable){
-3108// create a new item
-3109
-3110// get mouse position
-3111params.mouseX=links.Timeline.getPageX(event);
-3112params.mouseY=links.Timeline.getPageY(event);
-3113varx=params.mouseX-links.Timeline.getAbsoluteLeft(dom.content);
-3114vary=params.mouseY-links.Timeline.getAbsoluteTop(dom.content);
-3115
-3116// create a new event at the current mouse position
-3117varxstart=this.screenToTime(x);
-3118if(options.snapEvents){
-3119this.step.snap(xstart);
-3120}
-3121
-3122varcontent=options.NEW;
-3123vargroup=this.getGroupFromHeight(y);// (group may be undefined)
-3124varpreventRender=true;
-3125this.addItem({
-3126'start':xstart,
-3127'content':content,
-3128'group':this.getGroupName(group)
-3129},preventRender);
-3130params.itemIndex=(this.items.length-1);
-3131this.selectItem(params.itemIndex);
-3132
-3133this.applyAdd=true;
-3134
-3135// fire an add event.
-3136// Note that the change can be canceled from within an event listener if
-3137// this listener calls the method cancelAdd().
-3138this.trigger('add');
-3139
-3140if(this.applyAdd){
-3141// render and select the item
-3142this.render({animate:false});
-3143this.selectItem(params.itemIndex);
-3144}
-3145else{
-3146// undo an add
-3147this.deleteItem(params.itemIndex);
-3148}
-3149}
-3150}
-3151
-3152links.Timeline.preventDefault(event);
-3153};
-3154
-3155
-3156/**
-3157 * Event handler for mouse wheel event, used to zoom the timeline
-3158 * Code from http://adomas.org/javascript-mouse-wheel/
-3159 * @param {Event} event The event
-3160 */
-3161links.Timeline.prototype.onMouseWheel=function(event){
-3162if(!this.options.zoomable)
-3163return;
-3164
-3165if(!event){/* For IE. */
-3166event=window.event;
-3167}
-3168
-3169// retrieve delta
-3170vardelta=0;
-3171if(event.wheelDelta){/* IE/Opera. */
-3172delta=event.wheelDelta/120;
-3173}elseif(event.detail){/* Mozilla case. */
-3174// In Mozilla, sign of delta is different than in IE.
-3175// Also, delta is multiple of 3.
-3176delta=-event.detail/3;
-3177}
-3178
-3179// If delta is nonzero, handle it.
-3180// Basically, delta is now positive if wheel was scrolled up,
-3181// and negative, if wheel was scrolled down.
-3182if(delta){
-3183// TODO: on FireFox, the window is not redrawn within repeated scroll-events
-3184// -> use a delayed redraw? Make a zoom queue?
-3185
-3186vartimeline=this;
-3187varzoom=function(){
-3188// perform the zoom action. Delta is normally 1 or -1
-3189varzoomFactor=delta/5.0;
-3190varframeLeft=links.Timeline.getAbsoluteLeft(timeline.dom.content);
-3191varmouseX=links.Timeline.getPageX(event);
-3192varzoomAroundDate=
-3193(mouseX!=undefined&&frameLeft!=undefined)?
-3194timeline.screenToTime(mouseX-frameLeft):
-3195undefined;
-3196
-3197timeline.zoom(zoomFactor,zoomAroundDate);
-3198
-3199// fire a rangechange and a rangechanged event
-3200timeline.trigger("rangechange");
-3201timeline.trigger("rangechanged");
-3202};
-3203
-3204varscroll=function(){
-3205// Scroll the timeline
-3206timeline.move(delta*-0.2);
-3207timeline.trigger("rangechange");
-3208timeline.trigger("rangechanged");
-3209};
-3210
-3211if(event.shiftKey){
-3212scroll();
-3213}
-3214else{
-3215zoom();
-3216}
-3217}
-3218
-3219// Prevent default actions caused by mouse wheel.
-3220// That might be ugly, but we handle scrolls somehow
-3221// anyway, so don't bother here...
-3222links.Timeline.preventDefault(event);
-3223};
-3224
-3225
-3226/**
-3227 * Zoom the timeline the given zoomfactor in or out. Start and end date will
-3228 * be adjusted, and the timeline will be redrawn. You can optionally give a
-3229 * date around which to zoom.
-3230 * For example, try zoomfactor = 0.1 or -0.1
-3231 * @param {Number} zoomFactor Zooming amount. Positive value will zoom in,
-3232 * negative value will zoom out
-3233 * @param {Date} zoomAroundDate Date around which will be zoomed. Optional
-3234 */
-3235links.Timeline.prototype.zoom=function(zoomFactor,zoomAroundDate){
-3236// if zoomAroundDate is not provided, take it half between start Date and end Date
-3237if(zoomAroundDate==undefined){
-3238zoomAroundDate=newDate((this.start.valueOf()+this.end.valueOf())/2);
-3239}
-3240
-3241// prevent zoom factor larger than 1 or smaller than -1 (larger than 1 will
-3242// result in a start>=end )
-3243if(zoomFactor>=1){
-3244zoomFactor=0.9;
-3245}
-3246if(zoomFactor<=-1){
-3247zoomFactor=-0.9;
-3248}
-3249
-3250// adjust a negative factor such that zooming in with 0.1 equals zooming
-3251// out with a factor -0.1
-3252if(zoomFactor<0){
-3253zoomFactor=zoomFactor/(1+zoomFactor);
-3254}
-3255
-3256// zoom start Date and end Date relative to the zoomAroundDate
-3257varstartDiff=(this.start.valueOf()-zoomAroundDate);
-3258varendDiff=(this.end.valueOf()-zoomAroundDate);
-3259
-3260// calculate new dates
-3261varnewStart=newDate(this.start.valueOf()-startDiff*zoomFactor);
-3262varnewEnd=newDate(this.end.valueOf()-endDiff*zoomFactor);
-3263
-3264// only zoom in when interval is larger than minimum interval (to prevent
-3265// sliding to left/right when having reached the minimum zoom level)
-3266varinterval=(newEnd.valueOf()-newStart.valueOf());
-3267varzoomMin=Number(this.options.zoomMin)||10;
-3268if(zoomMin<10){
-3269zoomMin=10;
-3270}
-3271if(interval>=zoomMin){
-3272this.applyRange(newStart,newEnd,zoomAroundDate);
-3273this.render({
-3274animate:this.options.animate&&this.options.animateZoom
-3275});
-3276}
-3277};
-3278
-3279/**
-3280 * Move the timeline the given movefactor to the left or right. Start and end
-3281 * date will be adjusted, and the timeline will be redrawn.
-3282 * For example, try moveFactor = 0.1 or -0.1
-3283 * @param {Number} moveFactor Moving amount. Positive value will move right,
-3284 * negative value will move left
-3285 */
-3286links.Timeline.prototype.move=function(moveFactor){
-3287// zoom start Date and end Date relative to the zoomAroundDate
-3288vardiff=(this.end.valueOf()-this.start.valueOf());
-3289
-3290// apply new dates
-3291varnewStart=newDate(this.start.valueOf()+diff*moveFactor);
-3292varnewEnd=newDate(this.end.valueOf()+diff*moveFactor);
-3293this.applyRange(newStart,newEnd);
-3294
-3295this.render();// TODO: optimize, no need to reflow, only to recalc conversion and repaint
-3296};
-3297
-3298/**
-3299 * Apply a visible range. The range is limited to feasible maximum and minimum
-3300 * range.
-3301 * @param {Date} start
-3302 * @param {Date} end
-3303 * @param {Date} zoomAroundDate Optional. Date around which will be zoomed.
-3304 */
-3305links.Timeline.prototype.applyRange=function(start,end,zoomAroundDate){
-3306// calculate new start and end value
-3307varstartValue=start.valueOf();// number
-3308varendValue=end.valueOf();// number
-3309varinterval=(endValue-startValue);
-3310
-3311// determine maximum and minimum interval
-3312varoptions=this.options;
-3313varyear=1000*60*60*24*365;
-3314varzoomMin=Number(options.zoomMin)||10;
-3315if(zoomMin<10){
-3316zoomMin=10;
-3317}
-3318varzoomMax=Number(options.zoomMax)||10000*year;
-3319if(zoomMax>10000*year){
-3320zoomMax=10000*year;
-3321}
-3322if(zoomMax<zoomMin){
-3323zoomMax=zoomMin;
-3324}
-3325
-3326// determine min and max date value
-3327varmin=options.min?options.min.valueOf():undefined;// number
-3328varmax=options.max?options.max.valueOf():undefined;// number
-3329if(min!=undefined&&max!=undefined){
-3330if(min>=max){
-3331// empty range
-3332varday=1000*60*60*24;
-3333max=min+day;
-3334}
-3335if(zoomMax>(max-min)){
-3336zoomMax=(max-min);
-3337}
-3338if(zoomMin>(max-min)){
-3339zoomMin=(max-min);
-3340}
-3341}
-3342
-3343// prevent empty interval
-3344if(startValue>=endValue){
-3345endValue+=1000*60*60*24;
-3346}
-3347
-3348// prevent too small scale
-3349// TODO: IE has problems with milliseconds
-3350if(interval<zoomMin){
-3351vardiff=(zoomMin-interval);
-3352varf=zoomAroundDate?(zoomAroundDate.valueOf()-startValue)/interval:0.5;
-3353startValue-=Math.round(diff*f);
-3354endValue+=Math.round(diff*(1-f));
-3355}
-3356
-3357// prevent too large scale
-3358if(interval>zoomMax){
-3359vardiff=(interval-zoomMax);
-3360varf=zoomAroundDate?(zoomAroundDate.valueOf()-startValue)/interval:0.5;
-3361startValue+=Math.round(diff*f);
-3362endValue-=Math.round(diff*(1-f));
-3363}
-3364
-3365// prevent to small start date
-3366if(min!=undefined){
-3367vardiff=(startValue-min);
-3368if(diff<0){
-3369startValue-=diff;
-3370endValue-=diff;
-3371}
-3372}
-3373
-3374// prevent to large end date
-3375if(max!=undefined){
-3376vardiff=(max-endValue);
-3377if(diff<0){
-3378startValue+=diff;
-3379endValue+=diff;
-3380}
-3381}
-3382
-3383// apply new dates
-3384this.start=newDate(startValue);
-3385this.end=newDate(endValue);
-3386};
-3387
-3388/**
-3389 * Delete an item after a confirmation.
-3390 * The deletion can be cancelled by executing .cancelDelete() during the
-3391 * triggered event 'delete'.
-3392 * @param {int} index Index of the item to be deleted
-3393 */
-3394links.Timeline.prototype.confirmDeleteItem=function(index){
-3395this.applyDelete=true;
-3396
-3397// select the event to be deleted
-3398if(!this.isSelected(index)){
-3399this.selectItem(index);
-3400}
-3401
-3402// fire a delete event trigger.
-3403// Note that the delete event can be canceled from within an event listener if
-3404// this listener calls the method cancelChange().
-3405this.trigger('delete');
-3406
-3407if(this.applyDelete){
-3408this.deleteItem(index);
-3409}
-3410
-3411deletethis.applyDelete;
-3412};
-3413
-3414/**
-3415 * Delete an item
-3416 * @param {int} index Index of the item to be deleted
-3417 * @param {boolean} [preventRender=false] Do not re-render timeline if true
-3418 * (optimization for multiple delete)
-3419 */
-3420links.Timeline.prototype.deleteItem=function(index,preventRender){
-3421if(index>=this.items.length){
-3422throw"Cannot delete row, index out of range";
-3423}
-3424
-3425if(this.selection&&this.selection.index!==undefined){
-3426// adjust the selection
-3427if(this.selection.index==index){
-3428// item to be deleted is selected
-3429this.unselectItem();
-3430}
-3431elseif(this.selection.index>index){
-3432// update selection index
-3433this.selection.index--;
-3434}
-3435}
-3436
-3437// actually delete the item and remove it from the DOM
-3438varitem=this.items.splice(index,1)[0];
-3439this.renderQueue.hide.push(item);
-3440
-3441// delete the row in the original data table
-3442if(this.data){
-3443if(google&&google.visualization&&
-3444this.datainstanceofgoogle.visualization.DataTable){
-3445this.data.removeRow(index);
-3446}
-3447elseif(links.Timeline.isArray(this.data)){
-3448this.data.splice(index,1);
-3449}
-3450else{
-3451throw"Cannot delete row from data, unknown data type";
-3452}
-3453}
-3454
-3455// prepare data for clustering, by filtering and sorting by type
-3456if(this.options.cluster){
-3457this.clusterGenerator.updateData();
-3458}
-3459
-3460if(!preventRender){
-3461this.render();
-3462}
-3463};
-3464
-3465
-3466/**
-3467 * Delete all items
-3468 */
-3469links.Timeline.prototype.deleteAllItems=function(){
-3470this.unselectItem();
-3471
-3472// delete the loaded items
-3473this.clearItems();
-3474
-3475// delete the groups
-3476this.deleteGroups();
-3477
-3478// empty original data table
-3479if(this.data){
-3480if(google&&google.visualization&&
-3481this.datainstanceofgoogle.visualization.DataTable){
-3482this.data.removeRows(0,this.data.getNumberOfRows());
-3483}
-3484elseif(links.Timeline.isArray(this.data)){
-3485this.data.splice(0,this.data.length);
-3486}
-3487else{
-3488throw"Cannot delete row from data, unknown data type";
-3489}
-3490}
-3491
-3492// prepare data for clustering, by filtering and sorting by type
-3493if(this.options.cluster){
-3494this.clusterGenerator.updateData();
-3495}
-3496
-3497this.render();
-3498};
-3499
-3500
-3501/**
-3502 * Find the group from a given height in the timeline
-3503 * @param {Number} height Height in the timeline
-3504 * @return {Object | undefined} group The group object, or undefined if out
-3505 * of range
-3506 */
-3507links.Timeline.prototype.getGroupFromHeight=function(height){
-3508vari,
-3509group,
-3510groups=this.groups;
-3511
-3512if(groups.length){
-3513if(this.options.axisOnTop){
-3514for(i=groups.length-1;i>=0;i--){
-3515group=groups[i];
-3516if(height>group.top){
-3517returngroup;
-3518}
-3519}
-3520}
-3521else{
-3522for(i=0;i<groups.length;i++){
-3523group=groups[i];
-3524if(height>group.top){
-3525returngroup;
-3526}
-3527}
-3528}
-3529
-3530returngroup;// return the last group
-3531}
-3532
-3533returnundefined;
-3534};
-3535
-3536/**
-3537 * @constructor links.Timeline.Item
-3538 * @param {Object} data Object containing parameters start, end
-3539 * content, group, type, editable.
-3540 * @param {Object} [options] Options to set initial property values
-3541 * {Number} top
-3542 * {Number} left
-3543 * {Number} width
-3544 * {Number} height
-3545 */
-3546links.Timeline.Item=function(data,options){
-3547if(data){
-3548/* TODO: use parseJSONDate as soon as it is tested and working (in two directions)
-3549 this.start = links.Timeline.parseJSONDate(data.start);
-3550 this.end = links.Timeline.parseJSONDate(data.end);
-3551 */
-3552this.start=data.start;
-3553this.end=data.end;
-3554this.content=data.content;
-3555this.className=data.className;
-3556this.editable=data.editable;
-3557this.group=data.group;
-3558this.type=data.type;
-3559}
-3560this.top=0;
-3561this.left=0;
-3562this.width=0;
-3563this.height=0;
-3564this.lineWidth=0;
-3565this.dotWidth=0;
-3566this.dotHeight=0;
-3567
-3568this.rendered=false;// true when the item is draw in the Timeline DOM
-3569
-3570if(options){
-3571// override the default properties
-3572for(varoptioninoptions){
-3573if(options.hasOwnProperty(option)){
-3574this[option]=options[option];
-3575}
-3576}
-3577}
-3578
-3579};
-3580
-3581
-3582
-3583/**
-3584 * Reflow the Item: retrieve its actual size from the DOM
-3585 * @return {boolean} resized returns true if the axis is resized
-3586 */
-3587links.Timeline.Item.prototype.reflow=function(){
-3588// Should be implemented by sub-prototype
-3589returnfalse;
-3590};
-3591
-3592/**
-3593 * Append all image urls present in the items DOM to the provided array
-3594 * @param {String[]} imageUrls
-3595 */
-3596links.Timeline.Item.prototype.getImageUrls=function(imageUrls){
-3597if(this.dom){
-3598links.imageloader.filterImageUrls(this.dom,imageUrls);
-3599}
-3600};
-3601
-3602/**
-3603 * Select the item
-3604 */
-3605links.Timeline.Item.prototype.select=function(){
-3606// Should be implemented by sub-prototype
-3607};
-3608
-3609/**
-3610 * Unselect the item
-3611 */
-3612links.Timeline.Item.prototype.unselect=function(){
-3613// Should be implemented by sub-prototype
-3614};
-3615
-3616/**
-3617 * Creates the DOM for the item, depending on its type
-3618 * @return {Element | undefined}
-3619 */
-3620links.Timeline.Item.prototype.createDOM=function(){
-3621// Should be implemented by sub-prototype
-3622};
-3623
-3624/**
-3625 * Append the items DOM to the given HTML container. If items DOM does not yet
-3626 * exist, it will be created first.
-3627 * @param {Element} container
-3628 */
-3629links.Timeline.Item.prototype.showDOM=function(container){
-3630// Should be implemented by sub-prototype
-3631};
-3632
-3633/**
-3634 * Remove the items DOM from the current HTML container
-3635 * @param {Element} container
-3636 */
-3637links.Timeline.Item.prototype.hideDOM=function(container){
-3638// Should be implemented by sub-prototype
-3639};
-3640
-3641/**
-3642 * Update the DOM of the item. This will update the content and the classes
-3643 * of the item
-3644 */
-3645links.Timeline.Item.prototype.updateDOM=function(){
-3646// Should be implemented by sub-prototype
-3647};
-3648
-3649/**
-3650 * Reposition the item, recalculate its left, top, and width, using the current
-3651 * range of the timeline and the timeline options.
-3652 * @param {links.Timeline} timeline
-3653 */
-3654links.Timeline.Item.prototype.updatePosition=function(timeline){
-3655// Should be implemented by sub-prototype
-3656};
-3657
-3658/**
-3659 * Check if the item is drawn in the timeline (i.e. the DOM of the item is
-3660 * attached to the frame. You may also just request the parameter item.rendered
-3661 * @return {boolean} rendered
-3662 */
-3663links.Timeline.Item.prototype.isRendered=function(){
-3664returnthis.rendered;
-3665};
-3666
-3667/**
-3668 * Check if the item is located in the visible area of the timeline, and
-3669 * not part of a cluster
-3670 * @param {Date} start
-3671 * @param {Date} end
-3672 * @return {boolean} visible
-3673 */
-3674links.Timeline.Item.prototype.isVisible=function(start,end){
-3675// Should be implemented by sub-prototype
-3676returnfalse;
-3677};
-3678
-3679/**
-3680 * Reposition the item
-3681 * @param {Number} left
-3682 * @param {Number} right
-3683 */
-3684links.Timeline.Item.prototype.setPosition=function(left,right){
-3685// Should be implemented by sub-prototype
-3686};
-3687
-3688/**
-3689 * Calculate the left position of the item
-3690 * @param {links.Timeline} timeline
-3691 * @return {Number} left
-3692 */
-3693links.Timeline.Item.prototype.getLeft=function(timeline){
-3694// Should be implemented by sub-prototype
-3695return0;
-3696};
-3697
-3698/**
-3699 * Calculate the right position of the item
-3700 * @param {links.Timeline} timeline
-3701 * @return {Number} right
-3702 */
-3703links.Timeline.Item.prototype.getRight=function(timeline){
-3704// Should be implemented by sub-prototype
-3705return0;
-3706};
-3707
-3708/**
-3709 * Calculate the width of the item
-3710 * @param {links.Timeline} timeline
-3711 * @return {Number} width
-3712 */
-3713links.Timeline.Item.prototype.getWidth=function(timeline){
-3714// Should be implemented by sub-prototype
-3715returnthis.width||0;// last rendered width
-3716};
-3717
-3718
-3719/**
-3720 * @constructor links.Timeline.ItemBox
-3721 * @extends links.Timeline.Item
-3722 * @param {Object} data Object containing parameters start, end
-3723 * content, group, type, className, editable.
-3724 * @param {Object} [options] Options to set initial property values
-3725 * {Number} top
-3726 * {Number} left
-3727 * {Number} width
-3728 * {Number} height
-3729 */
-3730links.Timeline.ItemBox=function(data,options){
-3731links.Timeline.Item.call(this,data,options);
-3732};
-3733
-3734links.Timeline.ItemBox.prototype=newlinks.Timeline.Item();
-3735
-3736/**
-3737 * Reflow the Item: retrieve its actual size from the DOM
-3738 * @return {boolean} resized returns true if the axis is resized
-3739 * @override
-3740 */
-3741links.Timeline.ItemBox.prototype.reflow=function(){
-3742vardom=this.dom,
-3743dotHeight=dom.dot.offsetHeight,
-3744dotWidth=dom.dot.offsetWidth,
-3745lineWidth=dom.line.offsetWidth,
-3746resized=(
-3747(this.dotHeight!=dotHeight)||
-3748(this.dotWidth!=dotWidth)||
-3749(this.lineWidth!=lineWidth)
-3750);
-3751
-3752this.dotHeight=dotHeight;
-3753this.dotWidth=dotWidth;
-3754this.lineWidth=lineWidth;
-3755
-3756returnresized;
-3757};
-3758
-3759/**
-3760 * Select the item
-3761 * @override
-3762 */
-3763links.Timeline.ItemBox.prototype.select=function(){
-3764vardom=this.dom;
-3765links.Timeline.addClassName(dom,'timeline-event-selected ui-state-active');
-3766links.Timeline.addClassName(dom.line,'timeline-event-selected ui-state-active');
-3767links.Timeline.addClassName(dom.dot,'timeline-event-selected ui-state-active');
-3768};
-3769
-3770/**
-3771 * Unselect the item
-3772 * @override
-3773 */
-3774links.Timeline.ItemBox.prototype.unselect=function(){
-3775vardom=this.dom;
-3776links.Timeline.removeClassName(dom,'timeline-event-selected ui-state-active');
-3777links.Timeline.removeClassName(dom.line,'timeline-event-selected ui-state-active');
-3778links.Timeline.removeClassName(dom.dot,'timeline-event-selected ui-state-active');
-3779};
-3780
-3781/**
-3782 * Creates the DOM for the item, depending on its type
-3783 * @return {Element | undefined}
-3784 * @override
-3785 */
-3786links.Timeline.ItemBox.prototype.createDOM=function(){
-3787// background box
-3788vardivBox=document.createElement("DIV");
-3789divBox.style.position="absolute";
-3790divBox.style.left=this.left+"px";
-3791divBox.style.top=this.top+"px";
-3792
-3793// contents box (inside the background box). used for making margins
-3794vardivContent=document.createElement("DIV");
-3795divContent.className="timeline-event-content";
-3796divContent.innerHTML=this.content;
-3797divBox.appendChild(divContent);
-3798
-3799// line to axis
-3800vardivLine=document.createElement("DIV");
-3801divLine.style.position="absolute";
-3802divLine.style.width="0px";
-3803// important: the vertical line is added at the front of the list of elements,
-3804// so it will be drawn behind all boxes and ranges
-3805divBox.line=divLine;
-3806
-3807// dot on axis
-3808vardivDot=document.createElement("DIV");
-3809divDot.style.position="absolute";
-3810divDot.style.width="0px";
-3811divDot.style.height="0px";
-3812divBox.dot=divDot;
-3813
-3814this.dom=divBox;
-3815this.updateDOM();
-3816
-3817returndivBox;
-3818};
-3819
-3820/**
-3821 * Append the items DOM to the given HTML container. If items DOM does not yet
-3822 * exist, it will be created first.
-3823 * @param {Element} container
-3824 * @override
-3825 */
-3826links.Timeline.ItemBox.prototype.showDOM=function(container){
-3827vardom=this.dom;
-3828if(!dom){
-3829dom=this.createDOM();
-3830}
-3831
-3832if(dom.parentNode!=container){
-3833if(dom.parentNode){
-3834// container is changed. remove from old container
-3835this.hideDOM();
-3836}
-3837
-3838// append to this container
-3839container.appendChild(dom);
-3840container.insertBefore(dom.line,container.firstChild);
-3841// Note: line must be added in front of the this,
-3842// such that it stays below all this
-3843container.appendChild(dom.dot);
-3844this.rendered=true;
-3845}
-3846};
-3847
-3848/**
-3849 * Remove the items DOM from the current HTML container, but keep the DOM in
-3850 * memory
-3851 * @override
-3852 */
-3853links.Timeline.ItemBox.prototype.hideDOM=function(){
-3854vardom=this.dom;
-3855if(dom){
-3856if(dom.parentNode){
-3857dom.parentNode.removeChild(dom);
-3858}
-3859if(dom.line&&dom.line.parentNode){
-3860dom.line.parentNode.removeChild(dom.line);
-3861}
-3862if(dom.dot&&dom.dot.parentNode){
-3863dom.dot.parentNode.removeChild(dom.dot);
-3864}
-3865this.rendered=false;
-3866}
-3867};
-3868
-3869/**
-3870 * Update the DOM of the item. This will update the content and the classes
-3871 * of the item
-3872 * @override
-3873 */
-3874links.Timeline.ItemBox.prototype.updateDOM=function(){
-3875vardivBox=this.dom;
-3876if(divBox){
-3877vardivLine=divBox.line;
-3878vardivDot=divBox.dot;
-3879
-3880// update contents
-3881divBox.firstChild.innerHTML=this.content;
-3882
-3883// update class
-3884divBox.className="timeline-event timeline-event-box ui-widget ui-state-default";
-3885divLine.className="timeline-event timeline-event-line ui-widget ui-state-default";
-3886divDot.className="timeline-event timeline-event-dot ui-widget ui-state-default";
-3887
-3888if(this.isCluster){
-3889links.Timeline.addClassName(divBox,'timeline-event-cluster ui-widget-header');
-3890links.Timeline.addClassName(divLine,'timeline-event-cluster ui-widget-header');
-3891links.Timeline.addClassName(divDot,'timeline-event-cluster ui-widget-header');
-3892}
-3893
-3894// add item specific class name when provided
-3895if(this.className){
-3896links.Timeline.addClassName(divBox,this.className);
-3897links.Timeline.addClassName(divLine,this.className);
-3898links.Timeline.addClassName(divDot,this.className);
-3899}
-3900
-3901// TODO: apply selected className?
-3902}
-3903};
-3904
-3905/**
-3906 * Reposition the item, recalculate its left, top, and width, using the current
-3907 * range of the timeline and the timeline options.
-3908 * @param {links.Timeline} timeline
-3909 * @override
-3910 */
-3911links.Timeline.ItemBox.prototype.updatePosition=function(timeline){
-3912vardom=this.dom;
-3913if(dom){
-3914varleft=timeline.timeToScreen(this.start),
-3915axisOnTop=timeline.options.axisOnTop,
-3916axisTop=timeline.size.axis.top,
-3917axisHeight=timeline.size.axis.height,
-3918boxAlign=(timeline.options.box&&timeline.options.box.align)?
-3919timeline.options.box.align:undefined;
-3920
-3921dom.style.top=this.top+"px";
-3922if(boxAlign=='right'){
-3923dom.style.left=(left-this.width)+"px";
-3924}
-3925elseif(boxAlign=='left'){
-3926dom.style.left=(left)+"px";
-3927}
-3928else{// default or 'center'
-3929dom.style.left=(left-this.width/2)+"px";
-3930}
-3931
-3932varline=dom.line;
-3933vardot=dom.dot;
-3934line.style.left=(left-this.lineWidth/2)+"px";
-3935dot.style.left=(left-this.dotWidth/2)+"px";
-3936if(axisOnTop){
-3937line.style.top=axisHeight+"px";
-3938line.style.height=Math.max(this.top-axisHeight,0)+"px";
-3939dot.style.top=(axisHeight-this.dotHeight/2)+"px";
-3940}
-3941else{
-3942line.style.top=(this.top+this.height)+"px";
-3943line.style.height=Math.max(axisTop-this.top-this.height,0)+"px";
-3944dot.style.top=(axisTop-this.dotHeight/2)+"px";
-3945}
-3946}
-3947};
-3948
-3949/**
-3950 * Check if the item is visible in the timeline, and not part of a cluster
-3951 * @param {Date} start
-3952 * @param {Date} end
-3953 * @return {Boolean} visible
-3954 * @override
-3955 */
-3956links.Timeline.ItemBox.prototype.isVisible=function(start,end){
-3957if(this.cluster){
-3958returnfalse;
-3959}
-3960
-3961return(this.start>start)&&(this.start<end);
-3962};
-3963
-3964/**
-3965 * Reposition the item
-3966 * @param {Number} left
-3967 * @param {Number} right
-3968 * @override
-3969 */
-3970links.Timeline.ItemBox.prototype.setPosition=function(left,right){
-3971vardom=this.dom;
-3972
-3973dom.style.left=(left-this.width/2)+"px";
-3974dom.line.style.left=(left-this.lineWidth/2)+"px";
-3975dom.dot.style.left=(left-this.dotWidth/2)+"px";
-3976
-3977if(this.group){
-3978this.top=this.group.top;
-3979dom.style.top=this.top+'px';
-3980}
-3981};
-3982
-3983/**
-3984 * Calculate the left position of the item
-3985 * @param {links.Timeline} timeline
-3986 * @return {Number} left
-3987 * @override
-3988 */
-3989links.Timeline.ItemBox.prototype.getLeft=function(timeline){
-3990varboxAlign=(timeline.options.box&&timeline.options.box.align)?
-3991timeline.options.box.align:undefined;
-3992
-3993varleft=timeline.timeToScreen(this.start);
-3994if(boxAlign=='right'){
-3995left=left-width;
-3996}
-3997else{// default or 'center'
-3998left=(left-this.width/2);
-3999}
-4000
-4001returnleft;
-4002};
-4003
-4004/**
-4005 * Calculate the right position of the item
-4006 * @param {links.Timeline} timeline
-4007 * @return {Number} right
-4008 * @override
-4009 */
-4010links.Timeline.ItemBox.prototype.getRight=function(timeline){
-4011varboxAlign=(timeline.options.box&&timeline.options.box.align)?
-4012timeline.options.box.align:undefined;
-4013
-4014varleft=timeline.timeToScreen(this.start);
-4015varright;
-4016if(boxAlign=='right'){
-4017right=left;
-4018}
-4019elseif(boxAlign=='left'){
-4020right=(left+this.width);
-4021}
-4022else{// default or 'center'
-4023right=(left+this.width/2);
-4024}
-4025
-4026returnright;
-4027};
-4028
-4029/**
-4030 * @constructor links.Timeline.ItemRange
-4031 * @extends links.Timeline.Item
-4032 * @param {Object} data Object containing parameters start, end
-4033 * content, group, type, className, editable.
-4034 * @param {Object} [options] Options to set initial property values
-4035 * {Number} top
-4036 * {Number} left
-4037 * {Number} width
-4038 * {Number} height
-4039 */
-4040links.Timeline.ItemRange=function(data,options){
-4041links.Timeline.Item.call(this,data,options);
-4042};
-4043
-4044links.Timeline.ItemRange.prototype=newlinks.Timeline.Item();
-4045
-4046/**
-4047 * Select the item
-4048 * @override
-4049 */
-4050links.Timeline.ItemRange.prototype.select=function(){
-4051vardom=this.dom;
-4052links.Timeline.addClassName(dom,'timeline-event-selected ui-state-active');
-4053};
-4054
-4055/**
-4056 * Unselect the item
-4057 * @override
-4058 */
-4059links.Timeline.ItemRange.prototype.unselect=function(){
-4060vardom=this.dom;
-4061links.Timeline.removeClassName(dom,'timeline-event-selected ui-state-active');
-4062};
-4063
-4064/**
-4065 * Creates the DOM for the item, depending on its type
-4066 * @return {Element | undefined}
-4067 * @override
-4068 */
-4069links.Timeline.ItemRange.prototype.createDOM=function(){
-4070// background box
-4071vardivBox=document.createElement("DIV");
-4072divBox.style.position="absolute";
-4073
-4074// contents box
-4075vardivContent=document.createElement("DIV");
-4076divContent.className="timeline-event-content";
-4077divBox.appendChild(divContent);
-4078
-4079this.dom=divBox;
-4080this.updateDOM();
-4081
-4082returndivBox;
-4083};
-4084
-4085/**
-4086 * Append the items DOM to the given HTML container. If items DOM does not yet
-4087 * exist, it will be created first.
-4088 * @param {Element} container
-4089 * @override
-4090 */
-4091links.Timeline.ItemRange.prototype.showDOM=function(container){
-4092vardom=this.dom;
-4093if(!dom){
-4094dom=this.createDOM();
-4095}
-4096
-4097if(dom.parentNode!=container){
-4098if(dom.parentNode){
-4099// container changed. remove the item from the old container
-4100this.hideDOM();
-4101}
-4102
-4103// append to the new container
-4104container.appendChild(dom);
-4105this.rendered=true;
-4106}
-4107};
-4108
-4109/**
-4110 * Remove the items DOM from the current HTML container
-4111 * The DOM will be kept in memory
-4112 * @override
-4113 */
-4114links.Timeline.ItemRange.prototype.hideDOM=function(){
-4115vardom=this.dom;
-4116if(dom){
-4117if(dom.parentNode){
-4118dom.parentNode.removeChild(dom);
-4119}
-4120this.rendered=false;
-4121}
-4122};
-4123
-4124/**
-4125 * Update the DOM of the item. This will update the content and the classes
-4126 * of the item
-4127 * @override
-4128 */
-4129links.Timeline.ItemRange.prototype.updateDOM=function(){
-4130vardivBox=this.dom;
-4131if(divBox){
-4132// update contents
-4133divBox.firstChild.innerHTML=this.content;
-4134
-4135// update class
-4136divBox.className="timeline-event timeline-event-range ui-widget ui-state-default";
-4137
-4138if(this.isCluster){
-4139links.Timeline.addClassName(divBox,'timeline-event-cluster ui-widget-header');
-4140}
-4141
-4142// add item specific class name when provided
-4143if(this.className){
-4144links.Timeline.addClassName(divBox,this.className);
-4145}
-4146
-4147// TODO: apply selected className?
-4148}
-4149};
-4150
-4151/**
-4152 * Reposition the item, recalculate its left, top, and width, using the current
-4153 * range of the timeline and the timeline options. *
-4154 * @param {links.Timeline} timeline
-4155 * @override
-4156 */
-4157links.Timeline.ItemRange.prototype.updatePosition=function(timeline){
-4158vardom=this.dom;
-4159if(dom){
-4160varcontentWidth=timeline.size.contentWidth,
-4161left=timeline.timeToScreen(this.start),
-4162right=timeline.timeToScreen(this.end);
-4163
-4164// limit the width of the this, as browsers cannot draw very wide divs
-4165if(left<-contentWidth){
-4166left=-contentWidth;
-4167}
-4168if(right>2*contentWidth){
-4169right=2*contentWidth;
-4170}
-4171
-4172dom.style.top=this.top+"px";
-4173dom.style.left=left+"px";
-4174//dom.style.width = Math.max(right - left - 2 * this.borderWidth, 1) + "px"; // TODO: borderWidth
-4175dom.style.width=Math.max(right-left,1)+"px";
-4176}
-4177};
-4178
-4179/**
-4180 * Check if the item is visible in the timeline, and not part of a cluster
-4181 * @param {Number} start
-4182 * @param {Number} end
-4183 * @return {boolean} visible
-4184 * @override
-4185 */
-4186links.Timeline.ItemRange.prototype.isVisible=function(start,end){
-4187if(this.cluster){
-4188returnfalse;
-4189}
-4190
-4191return(this.end>start)
-4192&&(this.start<end);
-4193};
-4194
-4195/**
-4196 * Reposition the item
-4197 * @param {Number} left
-4198 * @param {Number} right
-4199 * @override
-4200 */
-4201links.Timeline.ItemRange.prototype.setPosition=function(left,right){
-4202vardom=this.dom;
-4203
-4204dom.style.left=left+'px';
-4205dom.style.width=(right-left)+'px';
-4206
-4207if(this.group){
-4208this.top=this.group.top;
-4209dom.style.top=this.top+'px';
-4210}
-4211};
-4212
-4213/**
-4214 * Calculate the left position of the item
-4215 * @param {links.Timeline} timeline
-4216 * @return {Number} left
-4217 * @override
-4218 */
-4219links.Timeline.ItemRange.prototype.getLeft=function(timeline){
-4220returntimeline.timeToScreen(this.start);
-4221};
-4222
-4223/**
-4224 * Calculate the right position of the item
-4225 * @param {links.Timeline} timeline
-4226 * @return {Number} right
-4227 * @override
-4228 */
-4229links.Timeline.ItemRange.prototype.getRight=function(timeline){
-4230returntimeline.timeToScreen(this.end);
-4231};
-4232
-4233/**
-4234 * Calculate the width of the item
-4235 * @param {links.Timeline} timeline
-4236 * @return {Number} width
-4237 * @override
-4238 */
-4239links.Timeline.ItemRange.prototype.getWidth=function(timeline){
-4240returntimeline.timeToScreen(this.end)-timeline.timeToScreen(this.start);
-4241};
-4242
-4243/**
-4244 * @constructor links.Timeline.ItemFloatingRange
-4245 * @extends links.Timeline.Item
-4246 * @param {Object} data Object containing parameters start, end
-4247 * content, group, type, className, editable.
-4248 * @param {Object} [options] Options to set initial property values
-4249 * {Number} top
-4250 * {Number} left
-4251 * {Number} width
-4252 * {Number} height
-4253 */
-4254links.Timeline.ItemFloatingRange=function(data,options){
-4255links.Timeline.Item.call(this,data,options);
-4256};
-4257
-4258links.Timeline.ItemFloatingRange.prototype=newlinks.Timeline.Item();
-4259
-4260/**
-4261 * Select the item
-4262 * @override
-4263 */
-4264links.Timeline.ItemFloatingRange.prototype.select=function(){
-4265vardom=this.dom;
-4266links.Timeline.addClassName(dom,'timeline-event-selected ui-state-active');
-4267};
-4268
-4269/**
-4270 * Unselect the item
-4271 * @override
-4272 */
-4273links.Timeline.ItemFloatingRange.prototype.unselect=function(){
-4274vardom=this.dom;
-4275links.Timeline.removeClassName(dom,'timeline-event-selected ui-state-active');
-4276};
-4277
-4278/**
-4279 * Creates the DOM for the item, depending on its type
-4280 * @return {Element | undefined}
-4281 * @override
-4282 */
-4283links.Timeline.ItemFloatingRange.prototype.createDOM=function(){
-4284// background box
-4285vardivBox=document.createElement("DIV");
-4286divBox.style.position="absolute";
-4287
-4288// contents box
-4289vardivContent=document.createElement("DIV");
-4290divContent.className="timeline-event-content";
-4291divBox.appendChild(divContent);
-4292
-4293this.dom=divBox;
-4294this.updateDOM();
-4295
-4296returndivBox;
-4297};
-4298
-4299/**
-4300 * Append the items DOM to the given HTML container. If items DOM does not yet
-4301 * exist, it will be created first.
-4302 * @param {Element} container
-4303 * @override
-4304 */
-4305links.Timeline.ItemFloatingRange.prototype.showDOM=function(container){
-4306vardom=this.dom;
-4307if(!dom){
-4308dom=this.createDOM();
-4309}
-4310
-4311if(dom.parentNode!=container){
-4312if(dom.parentNode){
-4313// container changed. remove the item from the old container
-4314this.hideDOM();
-4315}
-4316
-4317// append to the new container
-4318container.appendChild(dom);
-4319this.rendered=true;
-4320}
-4321};
-4322
-4323/**
-4324 * Remove the items DOM from the current HTML container
-4325 * The DOM will be kept in memory
-4326 * @override
-4327 */
-4328links.Timeline.ItemFloatingRange.prototype.hideDOM=function(){
-4329vardom=this.dom;
-4330if(dom){
-4331if(dom.parentNode){
-4332dom.parentNode.removeChild(dom);
-4333}
-4334this.rendered=false;
-4335}
-4336};
-4337
-4338/**
-4339 * Update the DOM of the item. This will update the content and the classes
-4340 * of the item
-4341 * @override
-4342 */
-4343links.Timeline.ItemFloatingRange.prototype.updateDOM=function(){
-4344vardivBox=this.dom;
-4345if(divBox){
-4346// update contents
-4347divBox.firstChild.innerHTML=this.content;
-4348
-4349// update class
-4350divBox.className="timeline-event timeline-event-range ui-widget ui-state-default";
-4351
-4352if(this.isCluster){
-4353links.Timeline.addClassName(divBox,'timeline-event-cluster ui-widget-header');
-4354}
-4355
-4356// add item specific class name when provided
-4357if(this.className){
-4358links.Timeline.addClassName(divBox,this.className);
-4359}
-4360
-4361// TODO: apply selected className?
-4362}
-4363};
-4364
-4365/**
-4366 * Reposition the item, recalculate its left, top, and width, using the current
-4367 * range of the timeline and the timeline options. *
-4368 * @param {links.Timeline} timeline
-4369 * @override
-4370 */
-4371links.Timeline.ItemFloatingRange.prototype.updatePosition=function(timeline){
-4372vardom=this.dom;
-4373if(dom){
-4374varcontentWidth=timeline.size.contentWidth,
-4375left=this.getLeft(timeline),// NH use getLeft
-4376right=this.getRight(timeline);// NH use getRight;
-4377
-4378// limit the width of the this, as browsers cannot draw very wide divs
-4379if(left<-contentWidth){
-4380left=-contentWidth;
-4381}
-4382if(right>2*contentWidth){
-4383right=2*contentWidth;
-4384}
-4385
-4386dom.style.top=this.top+"px";
-4387dom.style.left=left+"px";
-4388//dom.style.width = Math.max(right - left - 2 * this.borderWidth, 1) + "px"; // TODO: borderWidth
-4389dom.style.width=Math.max(right-left,1)+"px";
-4390}
-4391};
-4392
-4393/**
-4394 * Check if the item is visible in the timeline, and not part of a cluster
-4395 * @param {Number} start
-4396 * @param {Number} end
-4397 * @return {boolean} visible
-4398 * @override
-4399 */
-4400links.Timeline.ItemFloatingRange.prototype.isVisible=function(start,end){
-4401if(this.cluster){
-4402returnfalse;
-4403}
-4404
-4405// NH check for no end value
-4406if(this.end&&this.start){
-4407return(this.end>start)
-4408&&(this.start<end);
-4409}elseif(this.start){
-4410return(this.start<end);
-4411}elseif(this.end){
-4412return(this.end>start);
-4413}else{returntrue;}
-4414};
-4415
-4416/**
-4417 * Reposition the item
-4418 * @param {Number} left
-4419 * @param {Number} right
-4420 * @override
-4421 */
-4422links.Timeline.ItemFloatingRange.prototype.setPosition=function(left,right){
-4423vardom=this.dom;
-4424
-4425dom.style.left=left+'px';
-4426dom.style.width=(right-left)+'px';
-4427
-4428if(this.group){
-4429this.top=this.group.top;
-4430dom.style.top=this.top+'px';
-4431}
-4432};
-4433
-4434/**
-4435 * Calculate the left position of the item
-4436 * @param {links.Timeline} timeline
-4437 * @return {Number} left
-4438 * @override
-4439 */
-4440links.Timeline.ItemFloatingRange.prototype.getLeft=function(timeline){
-4441// NH check for no start value
-4442if(this.start){
-4443returntimeline.timeToScreen(this.start);
-4444}else{
-4445return0;
-4446}
-4447};
-4448
-4449/**
-4450 * Calculate the right position of the item
-4451 * @param {links.Timeline} timeline
-4452 * @return {Number} right
-4453 * @override
-4454 */
-4455links.Timeline.ItemFloatingRange.prototype.getRight=function(timeline){
-4456// NH check for no end value
-4457if(this.end){
-4458returntimeline.timeToScreen(this.end);
-4459}else{
-4460returntimeline.size.contentWidth;
-4461}
-4462};
-4463
-4464/**
-4465 * Calculate the width of the item
-4466 * @param {links.Timeline} timeline
-4467 * @return {Number} width
-4468 * @override
-4469 */
-4470links.Timeline.ItemFloatingRange.prototype.getWidth=function(timeline){
-4471returnthis.getRight(timeline)-this.getLeft(timeline);
-4472};
-4473
-4474/**
-4475 * @constructor links.Timeline.ItemDot
-4476 * @extends links.Timeline.Item
-4477 * @param {Object} data Object containing parameters start, end
-4478 * content, group, type, className, editable.
-4479 * @param {Object} [options] Options to set initial property values
-4480 * {Number} top
-4481 * {Number} left
-4482 * {Number} width
-4483 * {Number} height
-4484 */
-4485links.Timeline.ItemDot=function(data,options){
-4486links.Timeline.Item.call(this,data,options);
-4487};
-4488
-4489links.Timeline.ItemDot.prototype=newlinks.Timeline.Item();
-4490
-4491/**
-4492 * Reflow the Item: retrieve its actual size from the DOM
-4493 * @return {boolean} resized returns true if the axis is resized
-4494 * @override
-4495 */
-4496links.Timeline.ItemDot.prototype.reflow=function(){
-4497vardom=this.dom,
-4498dotHeight=dom.dot.offsetHeight,
-4499dotWidth=dom.dot.offsetWidth,
-4500contentHeight=dom.content.offsetHeight,
-4501resized=(
-4502(this.dotHeight!=dotHeight)||
-4503(this.dotWidth!=dotWidth)||
-4504(this.contentHeight!=contentHeight)
-4505);
-4506
-4507this.dotHeight=dotHeight;
-4508this.dotWidth=dotWidth;
-4509this.contentHeight=contentHeight;
-4510
-4511returnresized;
-4512};
-4513
-4514/**
-4515 * Select the item
-4516 * @override
-4517 */
-4518links.Timeline.ItemDot.prototype.select=function(){
-4519vardom=this.dom;
-4520links.Timeline.addClassName(dom,'timeline-event-selected ui-state-active');
-4521};
-4522
-4523/**
-4524 * Unselect the item
-4525 * @override
-4526 */
-4527links.Timeline.ItemDot.prototype.unselect=function(){
-4528vardom=this.dom;
-4529links.Timeline.removeClassName(dom,'timeline-event-selected ui-state-active');
-4530};
-4531
-4532/**
-4533 * Creates the DOM for the item, depending on its type
-4534 * @return {Element | undefined}
-4535 * @override
-4536 */
-4537links.Timeline.ItemDot.prototype.createDOM=function(){
-4538// background box
-4539vardivBox=document.createElement("DIV");
-4540divBox.style.position="absolute";
-4541
-4542// contents box, right from the dot
-4543vardivContent=document.createElement("DIV");
-4544divContent.className="timeline-event-content";
-4545divBox.appendChild(divContent);
-4546
-4547// dot at start
-4548vardivDot=document.createElement("DIV");
-4549divDot.style.position="absolute";
-4550divDot.style.width="0px";
-4551divDot.style.height="0px";
-4552divBox.appendChild(divDot);
-4553
-4554divBox.content=divContent;
-4555divBox.dot=divDot;
-4556
-4557this.dom=divBox;
-4558this.updateDOM();
-4559
-4560returndivBox;
-4561};
-4562
-4563/**
-4564 * Append the items DOM to the given HTML container. If items DOM does not yet
-4565 * exist, it will be created first.
-4566 * @param {Element} container
-4567 * @override
-4568 */
-4569links.Timeline.ItemDot.prototype.showDOM=function(container){
-4570vardom=this.dom;
-4571if(!dom){
-4572dom=this.createDOM();
-4573}
-4574
-4575if(dom.parentNode!=container){
-4576if(dom.parentNode){
-4577// container changed. remove it from old container first
-4578this.hideDOM();
-4579}
-4580
-4581// append to container
-4582container.appendChild(dom);
-4583this.rendered=true;
-4584}
-4585};
-4586
-4587/**
-4588 * Remove the items DOM from the current HTML container
-4589 * @override
-4590 */
-4591links.Timeline.ItemDot.prototype.hideDOM=function(){
-4592vardom=this.dom;
-4593if(dom){
-4594if(dom.parentNode){
-4595dom.parentNode.removeChild(dom);
-4596}
-4597this.rendered=false;
-4598}
-4599};
-4600
-4601/**
-4602 * Update the DOM of the item. This will update the content and the classes
-4603 * of the item
-4604 * @override
-4605 */
-4606links.Timeline.ItemDot.prototype.updateDOM=function(){
-4607if(this.dom){
-4608vardivBox=this.dom;
-4609vardivDot=divBox.dot;
-4610
-4611// update contents
-4612divBox.firstChild.innerHTML=this.content;
-4613
-4614// update classes
-4615divBox.className="timeline-event-dot-container";
-4616divDot.className="timeline-event timeline-event-dot ui-widget ui-state-default";
-4617
-4618if(this.isCluster){
-4619links.Timeline.addClassName(divBox,'timeline-event-cluster ui-widget-header');
-4620links.Timeline.addClassName(divDot,'timeline-event-cluster ui-widget-header');
-4621}
-4622
-4623// add item specific class name when provided
-4624if(this.className){
-4625links.Timeline.addClassName(divBox,this.className);
-4626links.Timeline.addClassName(divDot,this.className);
-4627}
-4628
-4629// TODO: apply selected className?
-4630}
-4631};
-4632
-4633/**
-4634 * Reposition the item, recalculate its left, top, and width, using the current
-4635 * range of the timeline and the timeline options. *
-4636 * @param {links.Timeline} timeline
-4637 * @override
-4638 */
-4639links.Timeline.ItemDot.prototype.updatePosition=function(timeline){
-4640vardom=this.dom;
-4641if(dom){
-4642varleft=timeline.timeToScreen(this.start);
-4643
-4644dom.style.top=this.top+"px";
-4645dom.style.left=(left-this.dotWidth/2)+"px";
-4646
-4647dom.content.style.marginLeft=(1.5*this.dotWidth)+"px";
-4648//dom.content.style.marginRight = (0.5 * this.dotWidth) + "px"; // TODO
-4649dom.dot.style.top=((this.height-this.dotHeight)/2)+"px";
-4650}
-4651};
-4652
-4653/**
-4654 * Check if the item is visible in the timeline, and not part of a cluster.
-4655 * @param {Date} start
-4656 * @param {Date} end
-4657 * @return {boolean} visible
-4658 * @override
-4659 */
-4660links.Timeline.ItemDot.prototype.isVisible=function(start,end){
-4661if(this.cluster){
-4662returnfalse;
-4663}
-4664
-4665return(this.start>start)
-4666&&(this.start<end);
-4667};
-4668
-4669/**
-4670 * Reposition the item
-4671 * @param {Number} left
-4672 * @param {Number} right
-4673 * @override
-4674 */
-4675links.Timeline.ItemDot.prototype.setPosition=function(left,right){
-4676vardom=this.dom;
-4677
-4678dom.style.left=(left-this.dotWidth/2)+"px";
-4679
-4680if(this.group){
-4681this.top=this.group.top;
-4682dom.style.top=this.top+'px';
-4683}
-4684};
-4685
-4686/**
-4687 * Calculate the left position of the item
-4688 * @param {links.Timeline} timeline
-4689 * @return {Number} left
-4690 * @override
-4691 */
-4692links.Timeline.ItemDot.prototype.getLeft=function(timeline){
-4693returntimeline.timeToScreen(this.start);
-4694};
-4695
-4696/**
-4697 * Calculate the right position of the item
-4698 * @param {links.Timeline} timeline
-4699 * @return {Number} right
-4700 * @override
-4701 */
-4702links.Timeline.ItemDot.prototype.getRight=function(timeline){
-4703returntimeline.timeToScreen(this.start)+this.width;
-4704};
-4705
-4706/**
-4707 * Retrieve the properties of an item.
-4708 * @param {Number} index
-4709 * @return {Object} itemData Object containing item properties:<br>
-4710 * {Date} start (required),
-4711 * {Date} end (optional),
-4712 * {String} content (required),
-4713 * {String} group (optional),
-4714 * {String} className (optional)
-4715 * {boolean} editable (optional)
-4716 * {String} type (optional)
-4717 */
-4718links.Timeline.prototype.getItem=function(index){
-4719if(index>=this.items.length){
-4720throw"Cannot get item, index out of range";
-4721}
-4722
-4723// take the original data as start, includes foreign fields
-4724vardata=this.data,
-4725itemData;
-4726if(google&&google.visualization&&
-4727datainstanceofgoogle.visualization.DataTable){
-4728// map the datatable columns
-4729varcols=links.Timeline.mapColumnIds(data);
-4730
-4731itemData={};
-4732for(varcolincols){
-4733if(cols.hasOwnProperty(col)){
-4734itemData[col]=this.data.getValue(index,cols[col]);
-4735}
-4736}
-4737}
-4738elseif(links.Timeline.isArray(this.data)){
-4739// read JSON array
-4740itemData=links.Timeline.clone(this.data[index]);
-4741}
-4742else{
-4743throw"Unknown data type. DataTable or Array expected.";
-4744}
-4745
-4746// override the data with current settings of the item (should be the same)
-4747varitem=this.items[index];
-4748
-4749itemData.start=newDate(item.start.valueOf());
-4750if(item.end){
-4751itemData.end=newDate(item.end.valueOf());
-4752}
-4753itemData.content=item.content;
-4754if(item.group){
-4755itemData.group=this.getGroupName(item.group);
-4756}
-4757if(item.className){
-4758itemData.className=item.className;
-4759}
-4760if(typeofitem.editable!=='undefined'){
-4761itemData.editable=item.editable;
-4762}
-4763if(item.type){
-4764itemData.type=item.type;
-4765}
-4766
-4767returnitemData;
-4768};
-4769
-4770
-4771/**
-4772 * Retrieve the properties of a cluster.
-4773 * @param {Number} index
-4774 * @return {Object} clusterdata Object containing cluster properties:<br>
-4775 * {Date} start (required),
-4776 * {String} type (optional)
-4777 * {Array} array with item data as is in getItem()
-4778 */
-4779links.Timeline.prototype.getCluster=function(index){
-4780if(index>=this.clusters.length){
-4781throw"Cannot get cluster, index out of range";
-4782}
-4783
-4784varclusterData={},
-4785cluster=this.clusters[index],
-4786clusterItems=cluster.items;
-4787
-4788clusterData.start=newDate(cluster.start.valueOf());
-4789if(cluster.type){
-4790clusterData.type=cluster.type;
-4791}
-4792
-4793// push cluster item data
-4794clusterData.items=[];
-4795for(vari=0;i<clusterItems.length;i++){
-4796for(varj=0;j<this.items.length;j++){
-4797// TODO could be nicer to be able to have the item index into the cluster
-4798if(this.items[j]==clusterItems[i])
-4799{
-4800clusterData.items.push(this.getItem(j));
-4801break;
-4802}
-4803
-4804}
-4805}
-4806
-4807returnclusterData;
-4808};
-4809
-4810/**
-4811 * Add a new item.
-4812 * @param {Object} itemData Object containing item properties:<br>
-4813 * {Date} start (required),
-4814 * {Date} end (optional),
-4815 * {String} content (required),
-4816 * {String} group (optional)
-4817 * {String} className (optional)
-4818 * {Boolean} editable (optional)
-4819 * {String} type (optional)
-4820 * @param {boolean} [preventRender=false] Do not re-render timeline if true
-4821 */
-4822links.Timeline.prototype.addItem=function(itemData,preventRender){
-4823varitemsData=[
-4824itemData
-4825];
-4826
-4827this.addItems(itemsData,preventRender);
-4828};
-4829
-4830/**
-4831 * Add new items.
-4832 * @param {Array} itemsData An array containing Objects.
-4833 * The objects must have the following parameters:
-4834 * {Date} start,
-4835 * {Date} end,
-4836 * {String} content with text or HTML code,
-4837 * {String} group (optional)
-4838 * {String} className (optional)
-4839 * {String} editable (optional)
-4840 * {String} type (optional)
-4841 * @param {boolean} [preventRender=false] Do not re-render timeline if true
-4842 */
-4843links.Timeline.prototype.addItems=function(itemsData,preventRender){
-4844vartimeline=this,
-4845items=this.items;
-4846
-4847// append the items
-4848itemsData.forEach(function(itemData){
-4849varindex=items.length;
-4850items.push(timeline.createItem(itemData));
-4851timeline.updateData(index,itemData);
-4852
-4853// note: there is no need to add the item to the renderQueue, that
-4854// will be done when this.render() is executed and all items are
-4855// filtered again.
-4856});
-4857
-4858// prepare data for clustering, by filtering and sorting by type
-4859if(this.options.cluster){
-4860this.clusterGenerator.updateData();
-4861}
-4862
-4863if(!preventRender){
-4864this.render({
-4865animate:false
-4866});
-4867}
-4868};
-4869
-4870/**
-4871 * Create an item object, containing all needed parameters
-4872 * @param {Object} itemData Object containing parameters start, end
-4873 * content, group.
-4874 * @return {Object} item
-4875 */
-4876links.Timeline.prototype.createItem=function(itemData){
-4877vartype=itemData.type||(itemData.end?'range':this.options.style);
-4878vardata=links.Timeline.clone(itemData);
-4879data.type=type;
-4880data.group=this.getGroup(itemData.group);
-4881// TODO: optimize this, when creating an item, all data is copied twice...
-4882
-4883// TODO: is initialTop needed?
-4884varinitialTop,
-4885options=this.options;
-4886if(options.axisOnTop){
-4887initialTop=this.size.axis.height+options.eventMarginAxis+options.eventMargin/2;
-4888}
-4889else{
-4890initialTop=this.size.contentHeight-options.eventMarginAxis-options.eventMargin/2;
-4891}
-4892
-4893if(typeinthis.itemTypes){
-4894returnnewthis.itemTypes[type](data,{'top':initialTop})
-4895}
-4896
-4897console.log('ERROR: Unknown event type "'+type+'"');
-4898returnnewlinks.Timeline.Item(data,{
-4899'top':initialTop
-4900});
-4901};
-4902
-4903/**
-4904 * Edit an item
-4905 * @param {Number} index
-4906 * @param {Object} itemData Object containing item properties:<br>
-4907 * {Date} start (required),
-4908 * {Date} end (optional),
-4909 * {String} content (required),
-4910 * {String} group (optional)
-4911 * @param {boolean} [preventRender=false] Do not re-render timeline if true
-4912 */
-4913links.Timeline.prototype.changeItem=function(index,itemData,preventRender){
-4914varoldItem=this.items[index];
-4915if(!oldItem){
-4916throw"Cannot change item, index out of range";
-4917}
-4918
-4919// replace item, merge the changes
-4920varnewItem=this.createItem({
-4921'start':itemData.hasOwnProperty('start')?itemData.start:oldItem.start,
-4922'end':itemData.hasOwnProperty('end')?itemData.end:oldItem.end,
-4923'content':itemData.hasOwnProperty('content')?itemData.content:oldItem.content,
-4924'group':itemData.hasOwnProperty('group')?itemData.group:this.getGroupName(oldItem.group),
-4925'className':itemData.hasOwnProperty('className')?itemData.className:oldItem.className,
-4926'editable':itemData.hasOwnProperty('editable')?itemData.editable:oldItem.editable,
-4927'type':itemData.hasOwnProperty('type')?itemData.type:oldItem.type
-4928});
-4929this.items[index]=newItem;
-4930
-4931// append the changes to the render queue
-4932this.renderQueue.hide.push(oldItem);
-4933this.renderQueue.show.push(newItem);
-4934
-4935// update the original data table
-4936this.updateData(index,itemData);
-4937
-4938// prepare data for clustering, by filtering and sorting by type
-4939if(this.options.cluster){
-4940this.clusterGenerator.updateData();
-4941}
-4942
-4943if(!preventRender){
-4944// redraw timeline
-4945this.render({
-4946animate:false
-4947});
-4948
-4949if(this.selection&&this.selection.index==index){
-4950newItem.select();
-4951}
-4952}
-4953};
-4954
-4955/**
-4956 * Delete all groups
-4957 */
-4958links.Timeline.prototype.deleteGroups=function(){
-4959this.groups=[];
-4960this.groupIndexes={};
-4961};
-4962
-4963
-4964/**
-4965 * Get a group by the group name. When the group does not exist,
-4966 * it will be created.
-4967 * @param {String} groupName the name of the group
-4968 * @return {Object} groupObject
-4969 */
-4970links.Timeline.prototype.getGroup=function(groupName){
-4971vargroups=this.groups,
-4972groupIndexes=this.groupIndexes,
-4973groupObj=undefined;
-4974
-4975vargroupIndex=groupIndexes[groupName];
-4976if(groupIndex==undefined&&groupName!=undefined){// not null or undefined
-4977groupObj={
-4978'content':groupName,
-4979'labelTop':0,
-4980'lineTop':0
-4981// note: this object will lateron get addition information,
-4982// such as height and width of the group
-4983};
-4984groups.push(groupObj);
-4985// sort the groups
-4986if(this.options.groupsOrder==true){
-4987groups=groups.sort(function(a,b){
-4988if(a.content>b.content){
-4989return1;
-4990}
-4991if(a.content<b.content){
-4992return-1;
-4993}
-4994return0;
-4995});
-4996}elseif(typeof(this.options.groupsOrder)=="function"){
-4997groups=groups.sort(this.options.groupsOrder)
-4998}
-4999
-5000// rebuilt the groupIndexes
-5001for(vari=0,iMax=groups.length;i<iMax;i++){
-5002groupIndexes[groups[i].content]=i;
-5003}
-5004}
-5005else{
-5006groupObj=groups[groupIndex];
-5007}
-5008
-5009returngroupObj;
-5010};
-5011
-5012/**
-5013 * Get the group name from a group object.
-5014 * @param {Object} groupObj
-5015 * @return {String} groupName the name of the group, or undefined when group
-5016 * was not provided
-5017 */
-5018links.Timeline.prototype.getGroupName=function(groupObj){
-5019returngroupObj?groupObj.content:undefined;
-5020};
-5021
-5022/**
-5023 * Cancel a change item
-5024 * This method can be called insed an event listener which catches the "change"
-5025 * event. The changed event position will be undone.
-5026 */
-5027links.Timeline.prototype.cancelChange=function(){
-5028this.applyChange=false;
-5029};
-5030
-5031/**
-5032 * Cancel deletion of an item
-5033 * This method can be called insed an event listener which catches the "delete"
-5034 * event. Deletion of the event will be undone.
-5035 */
-5036links.Timeline.prototype.cancelDelete=function(){
-5037this.applyDelete=false;
-5038};
-5039
-5040
-5041/**
-5042 * Cancel creation of a new item
-5043 * This method can be called insed an event listener which catches the "new"
-5044 * event. Creation of the new the event will be undone.
-5045 */
-5046links.Timeline.prototype.cancelAdd=function(){
-5047this.applyAdd=false;
-5048};
-5049
-5050
-5051/**
-5052 * Select an event. The visible chart range will be moved such that the selected
-5053 * event is placed in the middle.
-5054 * For example selection = [{row: 5}];
-5055 * @param {Array} selection An array with a column row, containing the row
-5056 * number (the id) of the event to be selected.
-5057 * @return {boolean} true if selection is succesfully set, else false.
-5058 */
-5059links.Timeline.prototype.setSelection=function(selection){
-5060if(selection!=undefined&&selection.length>0){
-5061if(selection[0].row!=undefined){
-5062varindex=selection[0].row;
-5063if(this.items[index]){
-5064varitem=this.items[index];
-5065this.selectItem(index);
-5066
-5067// move the visible chart range to the selected event.
-5068varstart=item.start;
-5069varend=item.end;
-5070varmiddle;// number
-5071if(end!=undefined){
-5072middle=(end.valueOf()+start.valueOf())/2;
-5073}else{
-5074middle=start.valueOf();
-5075}
-5076vardiff=(this.end.valueOf()-this.start.valueOf()),
-5077newStart=newDate(middle-diff/2),
-5078newEnd=newDate(middle+diff/2);
-5079
-5080this.setVisibleChartRange(newStart,newEnd);
-5081
-5082returntrue;
-5083}
-5084}
-5085}
-5086else{
-5087// unselect current selection
-5088this.unselectItem();
-5089}
-5090returnfalse;
-5091};
-5092
-5093/**
-5094 * Retrieve the currently selected event
-5095 * @return {Array} sel An array with a column row, containing the row number
-5096 * of the selected event. If there is no selection, an
-5097 * empty array is returned.
-5098 */
-5099links.Timeline.prototype.getSelection=function(){
-5100varsel=[];
-5101if(this.selection){
-5102if(this.selection.index!==undefined)
-5103{
-5104sel.push({"row":this.selection.index});
-5105}else{
-5106sel.push({"cluster":this.selection.cluster});
-5107}
-5108}
-5109returnsel;
-5110};
-5111
-5112
-5113/**
-5114 * Select an item by its index
-5115 * @param {Number} index
-5116 */
-5117links.Timeline.prototype.selectItem=function(index){
-5118this.unselectItem();
-5119
-5120this.selection=undefined;
-5121
-5122if(this.items[index]!=undefined){
-5123varitem=this.items[index],
-5124domItem=item.dom;
-5125
-5126this.selection={
-5127'index':index
-5128};
-5129
-5130if(item&&item.dom){
-5131// TODO: move adjusting the domItem to the item itself
-5132if(this.isEditable(item)){
-5133item.dom.style.cursor='move';
-5134}
-5135item.select();
-5136}
-5137this.repaintDeleteButton();
-5138this.repaintDragAreas();
-5139}
-5140};
-5141
-5142/**
-5143 * Select an cluster by its index
-5144 * @param {Number} index
-5145 */
-5146links.Timeline.prototype.selectCluster=function(index){
-5147this.unselectItem();
-5148
-5149this.selection=undefined;
-5150
-5151if(this.clusters[index]!=undefined){
-5152this.selection={
-5153'cluster':index
-5154};
-5155this.repaintDeleteButton();
-5156this.repaintDragAreas();
-5157}
-5158};
-5159
-5160/**
-5161 * Check if an item is currently selected
-5162 * @param {Number} index
-5163 * @return {boolean} true if row is selected, else false
-5164 */
-5165links.Timeline.prototype.isSelected=function(index){
-5166return(this.selection&&this.selection.index==index);
-5167};
-5168
-5169/**
-5170 * Unselect the currently selected event (if any)
-5171 */
-5172links.Timeline.prototype.unselectItem=function(){
-5173if(this.selection&&this.selection.index!==undefined){
-5174varitem=this.items[this.selection.index];
-5175
-5176if(item&&item.dom){
-5177vardomItem=item.dom;
-5178domItem.style.cursor='';
-5179item.unselect();
-5180}
-5181
-5182this.selection=undefined;
-5183this.repaintDeleteButton();
-5184this.repaintDragAreas();
-5185}
-5186};
-5187
-5188
-5189/**
-5190 * Stack the items such that they don't overlap. The items will have a minimal
-5191 * distance equal to options.eventMargin.
-5192 * @param {boolean | undefined} animate if animate is true, the items are
-5193 * moved to their new position animated
-5194 * defaults to false.
-5195 */
-5196links.Timeline.prototype.stackItems=function(animate){
-5197if(animate==undefined){
-5198animate=false;
-5199}
-5200
-5201// calculate the order and final stack position of the items
-5202varstack=this.stack;
-5203if(!stack){
-5204stack={};
-5205this.stack=stack;
-5206}
-5207stack.sortedItems=this.stackOrder(this.renderedItems);
-5208stack.finalItems=this.stackCalculateFinal(stack.sortedItems);
-5209
-5210if(animate||stack.timer){
-5211// move animated to the final positions
-5212vartimeline=this;
-5213varstep=function(){
-5214vararrived=timeline.stackMoveOneStep(stack.sortedItems,
-5215stack.finalItems);
-5216
-5217timeline.repaint();
-5218
-5219if(!arrived){
-5220stack.timer=setTimeout(step,30);
-5221}
-5222else{
-5223deletestack.timer;
-5224}
-5225};
-5226
-5227if(!stack.timer){
-5228stack.timer=setTimeout(step,30);
-5229}
-5230}
-5231else{
-5232// move immediately to the final positions
-5233this.stackMoveToFinal(stack.sortedItems,stack.finalItems);
-5234}
-5235};
-5236
-5237/**
-5238 * Cancel any running animation
-5239 */
-5240links.Timeline.prototype.stackCancelAnimation=function(){
-5241if(this.stack&&this.stack.timer){
-5242clearTimeout(this.stack.timer);
-5243deletethis.stack.timer;
-5244}
-5245};
-5246
-5247links.Timeline.prototype.getItemsByGroup=function(items){
-5248varitemsByGroup={};
-5249for(vari=0;i<items.length;++i){
-5250varitem=items[i];
-5251vargroup="undefined";
-5252
-5253if(item.group){
-5254if(item.group.content){
-5255group=item.group.content;
-5256}else{
-5257group=item.group;
-5258}
-5259}
-5260
-5261if(!itemsByGroup[group]){
-5262itemsByGroup[group]=[];
-5263}
-5264
-5265itemsByGroup[group].push(item);
-5266}
-5267
-5268returnitemsByGroup;
-5269};
-5270
-5271/**
-5272 * Order the items in the array this.items. The default order is determined via:
-5273 * - Ranges go before boxes and dots.
-5274 * - The item with the oldest start time goes first
-5275 * If a custom function has been provided via the stackorder option, then this will be used.
-5276 * @param {Array} items Array with items
-5277 * @return {Array} sortedItems Array with sorted items
-5278 */
-5279links.Timeline.prototype.stackOrder=function(items){
-5280// TODO: store the sorted items, to have less work later on
-5281varsortedItems=items.concat([]);
-5282
-5283//if a customer stack order function exists, use it.
-5284varf=this.options.customStackOrder&&(typeofthis.options.customStackOrder==='function')?this.options.customStackOrder:function(a,b)
-5285{
-5286if((ainstanceoflinks.Timeline.ItemRange||ainstanceoflinks.Timeline.ItemFloatingRange)&&
-5287!(binstanceoflinks.Timeline.ItemRange||binstanceoflinks.Timeline.ItemFloatingRange)){
-5288return-1;
-5289}
-5290
-5291if(!(ainstanceoflinks.Timeline.ItemRange||ainstanceoflinks.Timeline.ItemFloatingRange)&&
-5292(binstanceoflinks.Timeline.ItemRange||binstanceoflinks.Timeline.ItemFloatingRange)){
-5293return1;
-5294}
-5295
-5296return(a.left-b.left);
-5297};
-5298
-5299sortedItems.sort(f);
-5300
-5301returnsortedItems;
-5302};
-5303
-5304/**
-5305 * Adjust vertical positions of the events such that they don't overlap each
-5306 * other.
-5307 * @param {timeline.Item[]} items
-5308 * @return {Object[]} finalItems
-5309 */
-5310links.Timeline.prototype.stackCalculateFinal=function(items){
-5311varsize=this.size,
-5312options=this.options,
-5313axisOnTop=options.axisOnTop,
-5314eventMargin=options.eventMargin,
-5315eventMarginAxis=options.eventMarginAxis,
-5316groupBase=(axisOnTop)
-5317?size.axis.height+eventMarginAxis+eventMargin/2
-5318:size.contentHeight-eventMarginAxis-eventMargin/2,
-5319groupedItems,groupFinalItems,finalItems=[];
-5320
-5321groupedItems=this.getItemsByGroup(items);
-5322
-5323//
-5324// groupedItems contains all items by group, plus it may contain an
-5325// additional "undefined" group which contains all items with no group. We
-5326// first process the grouped items, and then the ungrouped
-5327//
-5328for(j=0;j<this.groups.length;++j){
-5329vargroup=this.groups[j];
-5330
-5331if(!groupedItems[group.content]){
-5332if(axisOnTop){
-5333groupBase+=options.groupMinHeight+eventMargin;
-5334}else{
-5335groupBase-=(options.groupMinHeight+eventMargin);
-5336}
-5337continue;
-5338}
-5339
-5340// initialize final positions and fill finalItems
-5341groupFinalItems=this.finalItemsPosition(groupedItems[group.content],groupBase,group);
-5342groupFinalItems.forEach(function(item){
-5343finalItems.push(item);
-5344});
-5345
-5346if(axisOnTop){
-5347groupBase+=group.itemsHeight+eventMargin;
-5348}else{
-5349groupBase-=(group.itemsHeight+eventMargin);
-5350}
-5351}
-5352
-5353//
-5354// Ungrouped items' turn now!
-5355//
-5356if(groupedItems["undefined"]){
-5357// initialize final positions and fill finalItems
-5358groupFinalItems=this.finalItemsPosition(groupedItems["undefined"],groupBase);
-5359groupFinalItems.forEach(function(item){
-5360finalItems.push(item);
-5361});
-5362}
-5363
-5364returnfinalItems;
-5365};
-5366
-5367links.Timeline.prototype.finalItemsPosition=function(items,groupBase,group){
-5368vari,
-5369iMax,
-5370options=this.options,
-5371axisOnTop=options.axisOnTop,
-5372eventMargin=options.eventMargin,
-5373groupFinalItems;
-5374
-5375// initialize final positions and fill finalItems
-5376groupFinalItems=this.initialItemsPosition(items,groupBase);
-5377
-5378// calculate new, non-overlapping positions
-5379for(i=0,iMax=groupFinalItems.length;i<iMax;i++){
-5380varfinalItem=groupFinalItems[i];
-5381varcollidingItem=null;
-5382
-5383if(this.options.stackEvents){
-5384do{
-5385// TODO: optimize checking for overlap. when there is a gap without items,
-5386// you only need to check for items from the next item on, not from zero
-5387collidingItem=this.stackItemsCheckOverlap(groupFinalItems,i,0,i-1);
-5388if(collidingItem!=null){
-5389// There is a collision. Reposition the event above the colliding element
-5390if(axisOnTop){
-5391finalItem.top=collidingItem.top+collidingItem.height+eventMargin;
-5392}
-5393else{
-5394finalItem.top=collidingItem.top-finalItem.height-eventMargin;
-5395}
-5396finalItem.bottom=finalItem.top+finalItem.height;
-5397}
-5398}while(collidingItem);
-5399}
-5400
-5401if(group){
-5402if(axisOnTop){
-5403group.itemsHeight=(group.itemsHeight)
-5404?Math.max(group.itemsHeight,finalItem.bottom-groupBase)
-5405:finalItem.height+eventMargin;
-5406}else{
-5407group.itemsHeight=(group.itemsHeight)
-5408?Math.max(group.itemsHeight,groupBase-finalItem.top)
-5409:finalItem.height+eventMargin;
-5410}
-5411}
-5412}
-5413
-5414returngroupFinalItems;
-5415};
-5416
-5417links.Timeline.prototype.initialItemsPosition=function(items,groupBase){
-5418varoptions=this.options,
-5419axisOnTop=options.axisOnTop,
-5420finalItems=[];
-5421
-5422for(vari=0,iMax=items.length;i<iMax;++i){
-5423varitem=items[i],
-5424top,
-5425bottom,
-5426height=item.height,
-5427width=item.getWidth(this),
-5428right=item.getRight(this),
-5429left=right-width;
-5430
-5431top=(axisOnTop)?groupBase
-5432:groupBase-height;
-5433
-5434bottom=top+height;
-5435
-5436finalItems.push({
-5437'left':left,
-5438'top':top,
-5439'right':right,
-5440'bottom':bottom,
-5441'height':height,
-5442'item':item
-5443});
-5444}
-5445
-5446returnfinalItems;
-5447};
-5448
-5449/**
-5450 * Move the events one step in the direction of their final positions
-5451 * @param {Array} currentItems Array with the real items and their current
-5452 * positions
-5453 * @param {Array} finalItems Array with objects containing the final
-5454 * positions of the items
-5455 * @return {boolean} arrived True if all items have reached their final
-5456 * location, else false
-5457 */
-5458links.Timeline.prototype.stackMoveOneStep=function(currentItems,finalItems){
-5459vararrived=true;
-5460
-5461// apply new positions animated
-5462for(vari=0,iMax=finalItems.length;i<iMax;i++){
-5463varfinalItem=finalItems[i],
-5464item=finalItem.item;
-5465
-5466vartopNow=parseInt(item.top);
-5467vartopFinal=parseInt(finalItem.top);
-5468vardiff=(topFinal-topNow);
-5469if(diff){
-5470varstep=(topFinal==topNow)?0:((topFinal>topNow)?1:-1);
-5471if(Math.abs(diff)>4)step=diff/4;
-5472vartopNew=parseInt(topNow+step);
-5473
-5474if(topNew!=topFinal){
-5475arrived=false;
-5476}
-5477
-5478item.top=topNew;
-5479item.bottom=item.top+item.height;
-5480}
-5481else{
-5482item.top=finalItem.top;
-5483item.bottom=finalItem.bottom;
-5484}
-5485
-5486item.left=finalItem.left;
-5487item.right=finalItem.right;
-5488}
-5489
-5490returnarrived;
-5491};
-5492
-5493
-5494
-5495/**
-5496 * Move the events from their current position to the final position
-5497 * @param {Array} currentItems Array with the real items and their current
-5498 * positions
-5499 * @param {Array} finalItems Array with objects containing the final
-5500 * positions of the items
-5501 */
-5502links.Timeline.prototype.stackMoveToFinal=function(currentItems,finalItems){
-5503// Put the events directly at there final position
-5504for(vari=0,iMax=finalItems.length;i<iMax;i++){
-5505varfinalItem=finalItems[i],
-5506current=finalItem.item;
-5507
-5508current.left=finalItem.left;
-5509current.top=finalItem.top;
-5510current.right=finalItem.right;
-5511current.bottom=finalItem.bottom;
-5512}
-5513};
-5514
-5515
-5516
-5517/**
-5518 * Check if the destiny position of given item overlaps with any
-5519 * of the other items from index itemStart to itemEnd.
-5520 * @param {Array} items Array with items
-5521 * @param {int} itemIndex Number of the item to be checked for overlap
-5522 * @param {int} itemStart First item to be checked.
-5523 * @param {int} itemEnd Last item to be checked.
-5524 * @return {Object} colliding item, or undefined when no collisions
-5525 */
-5526links.Timeline.prototype.stackItemsCheckOverlap=function(items,itemIndex,
-5527itemStart,itemEnd){
-5528vareventMargin=this.options.eventMargin,
-5529collision=this.collision;
-5530
-5531// we loop from end to start, as we suppose that the chance of a
-5532// collision is larger for items at the end, so check these first.
-5533varitem1=items[itemIndex];
-5534for(vari=itemEnd;i>=itemStart;i--){
-5535varitem2=items[i];
-5536if(collision(item1,item2,eventMargin)){
-5537if(i!=itemIndex){
-5538returnitem2;
-5539}
-5540}
-5541}
-5542
-5543returnundefined;
-5544};
-5545
-5546/**
-5547 * Test if the two provided items collide
-5548 * The items must have parameters left, right, top, and bottom.
-5549 * @param {Element} item1 The first item
-5550 * @param {Element} item2 The second item
-5551 * @param {Number} margin A minimum required margin. Optional.
-5552 * If margin is provided, the two items will be
-5553 * marked colliding when they overlap or
-5554 * when the margin between the two is smaller than
-5555 * the requested margin.
-5556 * @return {boolean} true if item1 and item2 collide, else false
-5557 */
-5558links.Timeline.prototype.collision=function(item1,item2,margin){
-5559// set margin if not specified
-5560if(margin==undefined){
-5561margin=0;
-5562}
-5563
-5564// calculate if there is overlap (collision)
-5565return(item1.left-margin<item2.right&&
-5566item1.right+margin>item2.left&&
-5567item1.top-margin<item2.bottom&&
-5568item1.bottom+margin>item2.top);
-5569};
-5570
-5571
-5572/**
-5573 * fire an event
-5574 * @param {String} event The name of an event, for example "rangechange" or "edit"
-5575 */
-5576links.Timeline.prototype.trigger=function(event){
-5577// built up properties
-5578varproperties=null;
-5579switch(event){
-5580case'rangechange':
-5581case'rangechanged':
-5582properties={
-5583'start':newDate(this.start.valueOf()),
-5584'end':newDate(this.end.valueOf())
-5585};
-5586break;
-5587
-5588case'timechange':
-5589case'timechanged':
-5590properties={
-5591'time':newDate(this.customTime.valueOf())
-5592};
-5593break;
-5594}
-5595
-5596// trigger the links event bus
-5597links.events.trigger(this,event,properties);
-5598
-5599// trigger the google event bus
-5600if(google&&google.visualization){
-5601google.visualization.events.trigger(this,event,properties);
-5602}
-5603};
-5604
-5605
-5606/**
-5607 * Cluster the events
-5608 */
-5609links.Timeline.prototype.clusterItems=function(){
-5610if(!this.options.cluster){
-5611return;
-5612}
-5613
-5614varclusters=this.clusterGenerator.getClusters(this.conversion.factor,this.options.clusterMaxItems);
-5615if(this.clusters!=clusters){
-5616// cluster level changed
-5617varqueue=this.renderQueue;
-5618
-5619// remove the old clusters from the scene
-5620if(this.clusters){
-5621this.clusters.forEach(function(cluster){
-5622queue.hide.push(cluster);
-5623
-5624// unlink the items
-5625cluster.items.forEach(function(item){
-5626item.cluster=undefined;
-5627});
-5628});
-5629}
-5630
-5631// append the new clusters
-5632clusters.forEach(function(cluster){
-5633// don't add to the queue.show here, will be done in .filterItems()
-5634
-5635// link all items to the cluster
-5636cluster.items.forEach(function(item){
-5637item.cluster=cluster;
-5638});
-5639});
-5640
-5641this.clusters=clusters;
-5642}
-5643};
-5644
-5645/**
-5646 * Filter the visible events
-5647 */
-5648links.Timeline.prototype.filterItems=function(){
-5649varqueue=this.renderQueue,
-5650window=(this.end-this.start),
-5651start=newDate(this.start.valueOf()-window),
-5652end=newDate(this.end.valueOf()+window);
-5653
-5654functionfilter(arr){
-5655arr.forEach(function(item){
-5656varrendered=item.rendered;
-5657varvisible=item.isVisible(start,end);
-5658if(rendered!=visible){
-5659if(rendered){
-5660queue.hide.push(item);// item is rendered but no longer visible
-5661}
-5662if(visible&&(queue.show.indexOf(item)==-1)){
-5663queue.show.push(item);// item is visible but neither rendered nor queued up to be rendered
-5664}
-5665}
-5666});
-5667}
-5668
-5669// filter all items and all clusters
-5670filter(this.items);
-5671if(this.clusters){
-5672filter(this.clusters);
-5673}
-5674};
-5675
-5676/** ------------------------------------------------------------------------ **/
-5677
-5678/**
-5679 * @constructor links.Timeline.ClusterGenerator
-5680 * Generator which creates clusters of items, based on the visible range in
-5681 * the Timeline. There is a set of cluster levels which is cached.
-5682 * @param {links.Timeline} timeline
-5683 */
-5684links.Timeline.ClusterGenerator=function(timeline){
-5685this.timeline=timeline;
-5686this.clear();
-5687};
-5688
-5689/**
-5690 * Clear all cached clusters and data, and initialize all variables
-5691 */
-5692links.Timeline.ClusterGenerator.prototype.clear=function(){
-5693// cache containing created clusters for each cluster level
-5694this.items=[];
-5695this.groups={};
-5696this.clearCache();
-5697};
-5698
-5699/**
-5700 * Clear the cached clusters
-5701 */
-5702links.Timeline.ClusterGenerator.prototype.clearCache=function(){
-5703// cache containing created clusters for each cluster level
-5704this.cache={};
-5705this.cacheLevel=-1;
-5706this.cache[this.cacheLevel]=[];
-5707};
-5708
-5709/**
-5710 * Set the items to be clustered.
-5711 * This will clear cached clusters.
-5712 * @param {Item[]} items
-5713 * @param {Object} [options] Available options:
-5714 * {boolean} applyOnChangedLevel
-5715 * If true (default), the changed data is applied
-5716 * as soon the cluster level changes. If false,
-5717 * The changed data is applied immediately
-5718 */
-5719links.Timeline.ClusterGenerator.prototype.setData=function(items,options){
-5720this.items=items||[];
-5721this.dataChanged=true;
-5722this.applyOnChangedLevel=true;
-5723if(options&&options.applyOnChangedLevel){
-5724this.applyOnChangedLevel=options.applyOnChangedLevel;
-5725}
-5726// console.log('clustergenerator setData applyOnChangedLevel=' + this.applyOnChangedLevel); // TODO: cleanup
-5727};
-5728
-5729/**
-5730 * Update the current data set: clear cache, and recalculate the clustering for
-5731 * the current level
-5732 */
-5733links.Timeline.ClusterGenerator.prototype.updateData=function(){
-5734this.dataChanged=true;
-5735this.applyOnChangedLevel=false;
-5736};
-5737
-5738/**
-5739 * Filter the items per group.
-5740 * @private
-5741 */
-5742links.Timeline.ClusterGenerator.prototype.filterData=function(){
-5743// filter per group
-5744varitems=this.items||[];
-5745vargroups={};
-5746this.groups=groups;
-5747
-5748// split the items per group
-5749items.forEach(function(item){
-5750// put the item in the correct group
-5751vargroupName=item.group?item.group.content:'';
-5752vargroup=groups[groupName];
-5753if(!group){
-5754group=[];
-5755groups[groupName]=group;
-5756}
-5757group.push(item);
-5758
-5759// calculate the center of the item
-5760if(item.start){
-5761if(item.end){
-5762// range
-5763item.center=(item.start.valueOf()+item.end.valueOf())/2;
-5764}
-5765else{
-5766// box, dot
-5767item.center=item.start.valueOf();
-5768}
-5769}
-5770});
-5771
-5772// sort the items per group
-5773for(vargroupNameingroups){
-5774if(groups.hasOwnProperty(groupName)){
-5775groups[groupName].sort(function(a,b){
-5776return(a.center-b.center);
-5777});
-5778}
-5779}
-5780
-5781this.dataChanged=false;
-5782};
-5783
-5784/**
-5785 * Cluster the events which are too close together
-5786 * @param {Number} scale The scale of the current window,
-5787 * defined as (windowWidth / (endDate - startDate))
-5788 * @return {Item[]} clusters
-5789 */
-5790links.Timeline.ClusterGenerator.prototype.getClusters=function(scale,maxItems){
-5791varlevel=-1,
-5792granularity=2,// TODO: what granularity is needed for the cluster levels?
-5793timeWindow=0;// milliseconds
-5794
-5795if(scale>0){
-5796level=Math.round(Math.log(100/scale)/Math.log(granularity));
-5797timeWindow=Math.pow(granularity,level);
-5798}
-5799
-5800// clear the cache when and re-filter the data when needed.
-5801if(this.dataChanged){
-5802varlevelChanged=(level!=this.cacheLevel);
-5803varapplyDataNow=this.applyOnChangedLevel?levelChanged:true;
-5804if(applyDataNow){
-5805// TODO: currently drawn clusters should be removed! mark them as invisible?
-5806this.clearCache();
-5807this.filterData();
-5808// console.log('clustergenerator: cache cleared...'); // TODO: cleanup
-5809}
-5810}
-5811
-5812this.cacheLevel=level;
-5813varclusters=this.cache[level];
-5814if(!clusters){
-5815// console.log('clustergenerator: create cluster level ' + level); // TODO: cleanup
-5816clusters=[];
-5817
-5818// TODO: spit this method, it is too large
-5819for(vargroupNameinthis.groups){
-5820if(this.groups.hasOwnProperty(groupName)){
-5821varitems=this.groups[groupName];
-5822variMax=items.length;
-5823vari=0;
-5824while(i<iMax){
-5825// find all items around current item, within the timeWindow
-5826varitem=items[i];
-5827varneighbors=1;// start at 1, to include itself)
-5828
-5829// loop through items left from the current item
-5830varj=i-1;
-5831while(j>=0&&(item.center-items[j].center)<timeWindow/2){
-5832if(!items[j].cluster){
-5833neighbors++;
-5834}
-5835j--;
-5836}
-5837
-5838// loop through items right from the current item
-5839vark=i+1;
-5840while(k<items.length&&(items[k].center-item.center)<timeWindow/2){
-5841neighbors++;
-5842k++;
-5843}
-5844
-5845// loop through the created clusters
-5846varl=clusters.length-1;
-5847while(l>=0&&(item.center-clusters[l].center)<timeWindow/2){
-5848if(item.group==clusters[l].group){
-5849neighbors++;
-5850}
-5851l--;
-5852}
-5853
-5854// aggregate until the number of items is within maxItems
-5855if(neighbors>maxItems){
-5856// too busy in this window.
-5857varnum=neighbors-maxItems+1;
-5858varclusterItems=[];
-5859
-5860// append the items to the cluster,
-5861// and calculate the average start for the cluster
-5862varavg=undefined;// number. average of all start dates
-5863varmin=undefined;// number. minimum of all start dates
-5864varmax=undefined;// number. maximum of all start and end dates
-5865varcontainsRanges=false;
-5866varcount=0;
-5867varm=i;
-5868while(clusterItems.length<num&&m<items.length){
-5869varp=items[m];
-5870varstart=p.start.valueOf();
-5871varend=p.end?p.end.valueOf():p.start.valueOf();
-5872clusterItems.push(p);
-5873if(count){
-5874// calculate new average (use fractions to prevent overflow)
-5875avg=(count/(count+1))*avg+(1/(count+1))*p.center;
-5876}
-5877else{
-5878avg=p.center;
-5879}
-5880min=(min!=undefined)?Math.min(min,start):start;
-5881max=(max!=undefined)?Math.max(max,end):end;
-5882containsRanges=containsRanges||(pinstanceoflinks.Timeline.ItemRange||pinstanceoflinks.Timeline.ItemFloatingRange);
-5883count++;
-5884m++;
-5885}
-5886
-5887varcluster;
-5888vartitle='Cluster containing '+count+
-5889' events. Zoom in to see the individual events.';
-5890varcontent='<div title="'+title+'">'+count+' events</div>';
-5891vargroup=item.group?item.group.content:undefined;
-5892if(containsRanges){
-5893// boxes and/or ranges
-5894cluster=this.timeline.createItem({
-5895'start':newDate(min),
-5896'end':newDate(max),
-5897'content':content,
-5898'group':group
-5899});
-5900}
-5901else{
-5902// boxes only
-5903cluster=this.timeline.createItem({
-5904'start':newDate(avg),
-5905'content':content,
-5906'group':group
-5907});
-5908}
-5909cluster.isCluster=true;
-5910cluster.items=clusterItems;
-5911cluster.items.forEach(function(item){
-5912item.cluster=cluster;
-5913});
-5914
-5915clusters.push(cluster);
-5916i+=num;
-5917}
-5918else{
-5919deleteitem.cluster;
-5920i+=1;
-5921}
-5922}
-5923}
-5924}
-5925
-5926this.cache[level]=clusters;
-5927}
-5928
-5929returnclusters;
-5930};
-5931
-5932
-5933/** ------------------------------------------------------------------------ **/
-5934
-5935
-5936/**
-5937 * Event listener (singleton)
-5938 */
-5939links.events=links.events||{
-5940'listeners':[],
-5941
-5942/**
-5943 * Find a single listener by its object
-5944 * @param {Object} object
-5945 * @return {Number} index -1 when not found
-5946 */
-5947'indexOf':function(object){
-5948varlisteners=this.listeners;
-5949for(vari=0,iMax=this.listeners.length;i<iMax;i++){
-5950varlistener=listeners[i];
-5951if(listener&&listener.object==object){
-5952returni;
-5953}
-5954}
-5955return-1;
-5956},
-5957
-5958/**
-5959 * Add an event listener
-5960 * @param {Object} object
-5961 * @param {String} event The name of an event, for example 'select'
-5962 * @param {function} callback The callback method, called when the
-5963 * event takes place
-5964 */
-5965'addListener':function(object,event,callback){
-5966varindex=this.indexOf(object);
-5967varlistener=this.listeners[index];
-5968if(!listener){
-5969listener={
-5970'object':object,
-5971'events':{}
-5972};
-5973this.listeners.push(listener);
-5974}
-5975
-5976varcallbacks=listener.events[event];
-5977if(!callbacks){
-5978callbacks=[];
-5979listener.events[event]=callbacks;
-5980}
-5981
-5982// add the callback if it does not yet exist
-5983if(callbacks.indexOf(callback)==-1){
-5984callbacks.push(callback);
-5985}
-5986},
-5987
-5988/**
-5989 * Remove an event listener
-5990 * @param {Object} object
-5991 * @param {String} event The name of an event, for example 'select'
-5992 * @param {function} callback The registered callback method
-5993 */
-5994'removeListener':function(object,event,callback){
-5995varindex=this.indexOf(object);
-5996varlistener=this.listeners[index];
-5997if(listener){
-5998varcallbacks=listener.events[event];
-5999if(callbacks){
-6000varindex=callbacks.indexOf(callback);
-6001if(index!=-1){
-6002callbacks.splice(index,1);
-6003}
-6004
-6005// remove the array when empty
-6006if(callbacks.length==0){
-6007deletelistener.events[event];
-6008}
-6009}
-6010
-6011// count the number of registered events. remove listener when empty
-6012varcount=0;
-6013varevents=listener.events;
-6014for(vareinevents){
-6015if(events.hasOwnProperty(e)){
-6016count++;
-6017}
-6018}
-6019if(count==0){
-6020deletethis.listeners[index];
-6021}
-6022}
-6023},
-6024
-6025/**
-6026 * Remove all registered event listeners
-6027 */
-6028'removeAllListeners':function(){
-6029this.listeners=[];
-6030},
-6031
-6032/**
-6033 * Trigger an event. All registered event handlers will be called
-6034 * @param {Object} object
-6035 * @param {String} event
-6036 * @param {Object} properties (optional)
-6037 */
-6038'trigger':function(object,event,properties){
-6039varindex=this.indexOf(object);
-6040varlistener=this.listeners[index];
-6041if(listener){
-6042varcallbacks=listener.events[event];
-6043if(callbacks){
-6044for(vari=0,iMax=callbacks.length;i<iMax;i++){
-6045callbacks[i](properties);
-6046}
-6047}
-6048}
-6049}
-6050};
-6051
-6052
-6053/** ------------------------------------------------------------------------ **/
-6054
-6055/**
-6056 * @constructor links.Timeline.StepDate
-6057 * The class StepDate is an iterator for dates. You provide a start date and an
-6058 * end date. The class itself determines the best scale (step size) based on the
-6059 * provided start Date, end Date, and minimumStep.
-6060 *
-6061 * If minimumStep is provided, the step size is chosen as close as possible
-6062 * to the minimumStep but larger than minimumStep. If minimumStep is not
-6063 * provided, the scale is set to 1 DAY.
-6064 * The minimumStep should correspond with the onscreen size of about 6 characters
-6065 *
-6066 * Alternatively, you can set a scale by hand.
-6067 * After creation, you can initialize the class by executing start(). Then you
-6068 * can iterate from the start date to the end date via next(). You can check if
-6069 * the end date is reached with the function end(). After each step, you can
-6070 * retrieve the current date via get().
-6071 * The class step has scales ranging from milliseconds, seconds, minutes, hours,
-6072 * days, to years.
-6073 *
-6074 * Version: 1.2
-6075 *
-6076 * @param {Date} start The start date, for example new Date(2010, 9, 21)
-6077 * or new Date(2010, 9, 21, 23, 45, 00)
-6078 * @param {Date} end The end date
-6079 * @param {Number} minimumStep Optional. Minimum step size in milliseconds
-6080 */
-6081links.Timeline.StepDate=function(start,end,minimumStep){
-6082
-6083// variables
-6084this.current=newDate();
-6085this._start=newDate();
-6086this._end=newDate();
-6087
-6088this.autoScale=true;
-6089this.scale=links.Timeline.StepDate.SCALE.DAY;
-6090this.step=1;
-6091
-6092// initialize the range
-6093this.setRange(start,end,minimumStep);
-6094};
-6095
-6096/// enum scale
-6097links.Timeline.StepDate.SCALE={
-6098MILLISECOND:1,
-6099SECOND:2,
-6100MINUTE:3,
-6101HOUR:4,
-6102DAY:5,
-6103WEEKDAY:6,
-6104MONTH:7,
-6105YEAR:8
-6106};
-6107
-6108
-6109/**
-6110 * Set a new range
-6111 * If minimumStep is provided, the step size is chosen as close as possible
-6112 * to the minimumStep but larger than minimumStep. If minimumStep is not
-6113 * provided, the scale is set to 1 DAY.
-6114 * The minimumStep should correspond with the onscreen size of about 6 characters
-6115 * @param {Date} start The start date and time.
-6116 * @param {Date} end The end date and time.
-6117 * @param {int} minimumStep Optional. Minimum step size in milliseconds
-6118 */
-6119links.Timeline.StepDate.prototype.setRange=function(start,end,minimumStep){
-6120if(!(startinstanceofDate)||!(endinstanceofDate)){
-6121//throw "No legal start or end date in method setRange";
-6122return;
-6123}
-6124
-6125this._start=(start!=undefined)?newDate(start.valueOf()):newDate();
-6126this._end=(end!=undefined)?newDate(end.valueOf()):newDate();
-6127
-6128if(this.autoScale){
-6129this.setMinimumStep(minimumStep);
-6130}
-6131};
-6132
-6133/**
-6134 * Set the step iterator to the start date.
-6135 */
-6136links.Timeline.StepDate.prototype.start=function(){
-6137this.current=newDate(this._start.valueOf());
-6138this.roundToMinor();
-6139};
-6140
-6141/**
-6142 * Round the current date to the first minor date value
-6143 * This must be executed once when the current date is set to start Date
-6144 */
-6145links.Timeline.StepDate.prototype.roundToMinor=function(){
-6146// round to floor
-6147// IMPORTANT: we have no breaks in this switch! (this is no bug)
-6148//noinspection FallthroughInSwitchStatementJS
-6149switch(this.scale){
-6150caselinks.Timeline.StepDate.SCALE.YEAR:
-6151this.current.setFullYear(this.step*Math.floor(this.current.getFullYear()/this.step));
-6152this.current.setMonth(0);
-6153caselinks.Timeline.StepDate.SCALE.MONTH:this.current.setDate(1);
-6154caselinks.Timeline.StepDate.SCALE.DAY:// intentional fall through
-6155caselinks.Timeline.StepDate.SCALE.WEEKDAY:this.current.setHours(0);
-6156caselinks.Timeline.StepDate.SCALE.HOUR:this.current.setMinutes(0);
-6157caselinks.Timeline.StepDate.SCALE.MINUTE:this.current.setSeconds(0);
-6158caselinks.Timeline.StepDate.SCALE.SECOND:this.current.setMilliseconds(0);
-6159//case links.Timeline.StepDate.SCALE.MILLISECOND: // nothing to do for milliseconds
-6160}
-6161
-6162if(this.step!=1){
-6163// round down to the first minor value that is a multiple of the current step size
-6164switch(this.scale){
-6165caselinks.Timeline.StepDate.SCALE.MILLISECOND:this.current.setMilliseconds(this.current.getMilliseconds()-this.current.getMilliseconds()%this.step);break;
-6166caselinks.Timeline.StepDate.SCALE.SECOND:this.current.setSeconds(this.current.getSeconds()-this.current.getSeconds()%this.step);break;
-6167caselinks.Timeline.StepDate.SCALE.MINUTE:this.current.setMinutes(this.current.getMinutes()-this.current.getMinutes()%this.step);break;
-6168caselinks.Timeline.StepDate.SCALE.HOUR:this.current.setHours(this.current.getHours()-this.current.getHours()%this.step);break;
-6169caselinks.Timeline.StepDate.SCALE.WEEKDAY:// intentional fall through
-6170caselinks.Timeline.StepDate.SCALE.DAY:this.current.setDate((this.current.getDate()-1)-(this.current.getDate()-1)%this.step+1);break;
-6171caselinks.Timeline.StepDate.SCALE.MONTH:this.current.setMonth(this.current.getMonth()-this.current.getMonth()%this.step);break;
-6172caselinks.Timeline.StepDate.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()-this.current.getFullYear()%this.step);break;
-6173default:break;
-6174}
-6175}
-6176};
-6177
-6178/**
-6179 * Check if the end date is reached
-6180 * @return {boolean} true if the current date has passed the end date
-6181 */
-6182links.Timeline.StepDate.prototype.end=function(){
-6183return(this.current.valueOf()>this._end.valueOf());
-6184};
-6185
-6186/**
-6187 * Do the next step
-6188 */
-6189links.Timeline.StepDate.prototype.next=function(){
-6190varprev=this.current.valueOf();
-6191
-6192// Two cases, needed to prevent issues with switching daylight savings
-6193// (end of March and end of October)
-6194if(this.current.getMonth()<6){
-6195switch(this.scale){
-6196caselinks.Timeline.StepDate.SCALE.MILLISECOND:
-6197
-6198this.current=newDate(this.current.valueOf()+this.step);break;
-6199caselinks.Timeline.StepDate.SCALE.SECOND:this.current=newDate(this.current.valueOf()+this.step*1000);break;
-6200caselinks.Timeline.StepDate.SCALE.MINUTE:this.current=newDate(this.current.valueOf()+this.step*1000*60);break;
-6201caselinks.Timeline.StepDate.SCALE.HOUR:
-6202this.current=newDate(this.current.valueOf()+this.step*1000*60*60);
-6203// in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
-6204varh=this.current.getHours();
-6205this.current.setHours(h-(h%this.step));
-6206break;
-6207caselinks.Timeline.StepDate.SCALE.WEEKDAY:// intentional fall through
-6208caselinks.Timeline.StepDate.SCALE.DAY:this.current.setDate(this.current.getDate()+this.step);break;
-6209caselinks.Timeline.StepDate.SCALE.MONTH:this.current.setMonth(this.current.getMonth()+this.step);break;
-6210caselinks.Timeline.StepDate.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()+this.step);break;
-6211default:break;
-6212}
-6213}
-6214else{
-6215switch(this.scale){
-6216caselinks.Timeline.StepDate.SCALE.MILLISECOND:this.current=newDate(this.current.valueOf()+this.step);break;
-6217caselinks.Timeline.StepDate.SCALE.SECOND:this.current.setSeconds(this.current.getSeconds()+this.step);break;
-6218caselinks.Timeline.StepDate.SCALE.MINUTE:this.current.setMinutes(this.current.getMinutes()+this.step);break;
-6219caselinks.Timeline.StepDate.SCALE.HOUR:this.current.setHours(this.current.getHours()+this.step);break;
-6220caselinks.Timeline.StepDate.SCALE.WEEKDAY:// intentional fall through
-6221caselinks.Timeline.StepDate.SCALE.DAY:this.current.setDate(this.current.getDate()+this.step);break;
-6222caselinks.Timeline.StepDate.SCALE.MONTH:this.current.setMonth(this.current.getMonth()+this.step);break;
-6223caselinks.Timeline.StepDate.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()+this.step);break;
-6224default:break;
-6225}
-6226}
-6227
-6228if(this.step!=1){
-6229// round down to the correct major value
-6230switch(this.scale){
-6231caselinks.Timeline.StepDate.SCALE.MILLISECOND:if(this.current.getMilliseconds()<this.step)this.current.setMilliseconds(0);break;
-6232caselinks.Timeline.StepDate.SCALE.SECOND:if(this.current.getSeconds()<this.step)this.current.setSeconds(0);break;
-6233caselinks.Timeline.StepDate.SCALE.MINUTE:if(this.current.getMinutes()<this.step)this.current.setMinutes(0);break;
-6234caselinks.Timeline.StepDate.SCALE.HOUR:if(this.current.getHours()<this.step)this.current.setHours(0);break;
-6235caselinks.Timeline.StepDate.SCALE.WEEKDAY:// intentional fall through
-6236caselinks.Timeline.StepDate.SCALE.DAY:if(this.current.getDate()<this.step+1)this.current.setDate(1);break;
-6237caselinks.Timeline.StepDate.SCALE.MONTH:if(this.current.getMonth()<this.step)this.current.setMonth(0);break;
-6238caselinks.Timeline.StepDate.SCALE.YEAR:break;// nothing to do for year
-6239default:break;
-6240}
-6241}
-6242
-6243// safety mechanism: if current time is still unchanged, move to the end
-6244if(this.current.valueOf()==prev){
-6245this.current=newDate(this._end.valueOf());
-6246}
-6247};
-6248
-6249
-6250/**
-6251 * Get the current datetime
-6252 * @return {Date} current The current date
-6253 */
-6254links.Timeline.StepDate.prototype.getCurrent=function(){
-6255returnthis.current;
-6256};
-6257
-6258/**
-6259 * Set a custom scale. Autoscaling will be disabled.
-6260 * For example setScale(SCALE.MINUTES, 5) will result
-6261 * in minor steps of 5 minutes, and major steps of an hour.
-6262 *
-6263 * @param {links.Timeline.StepDate.SCALE} newScale
-6264 * A scale. Choose from SCALE.MILLISECOND,
-6265 * SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
-6266 * SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
-6267 * SCALE.YEAR.
-6268 * @param {Number} newStep A step size, by default 1. Choose for
-6269 * example 1, 2, 5, or 10.
-6270 */
-6271links.Timeline.StepDate.prototype.setScale=function(newScale,newStep){
-6272this.scale=newScale;
-6273
-6274if(newStep>0){
-6275this.step=newStep;
-6276}
-6277
-6278this.autoScale=false;
-6279};
-6280
-6281/**
-6282 * Enable or disable autoscaling
-6283 * @param {boolean} enable If true, autoascaling is set true
-6284 */
-6285links.Timeline.StepDate.prototype.setAutoScale=function(enable){
-6286this.autoScale=enable;
-6287};
-6288
-6289
-6290/**
-6291 * Automatically determine the scale that bests fits the provided minimum step
-6292 * @param {Number} minimumStep The minimum step size in milliseconds
-6293 */
-6294links.Timeline.StepDate.prototype.setMinimumStep=function(minimumStep){
-6295if(minimumStep==undefined){
-6296return;
-6297}
-6298
-6299varstepYear=(1000*60*60*24*30*12);
-6300varstepMonth=(1000*60*60*24*30);
-6301varstepDay=(1000*60*60*24);
-6302varstepHour=(1000*60*60);
-6303varstepMinute=(1000*60);
-6304varstepSecond=(1000);
-6305varstepMillisecond=(1);
-6306
-6307// find the smallest step that is larger than the provided minimumStep
-6308if(stepYear*1000>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=1000;}
-6309if(stepYear*500>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=500;}
-6310if(stepYear*100>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=100;}
-6311if(stepYear*50>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=50;}
-6312if(stepYear*10>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=10;}
-6313if(stepYear*5>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=5;}
-6314if(stepYear>minimumStep){this.scale=links.Timeline.StepDate.SCALE.YEAR;this.step=1;}
-6315if(stepMonth*3>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MONTH;this.step=3;}
-6316if(stepMonth>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MONTH;this.step=1;}
-6317if(stepDay*5>minimumStep){this.scale=links.Timeline.StepDate.SCALE.DAY;this.step=5;}
-6318if(stepDay*2>minimumStep){this.scale=links.Timeline.StepDate.SCALE.DAY;this.step=2;}
-6319if(stepDay>minimumStep){this.scale=links.Timeline.StepDate.SCALE.DAY;this.step=1;}
-6320if(stepDay/2>minimumStep){this.scale=links.Timeline.StepDate.SCALE.WEEKDAY;this.step=1;}
-6321if(stepHour*4>minimumStep){this.scale=links.Timeline.StepDate.SCALE.HOUR;this.step=4;}
-6322if(stepHour>minimumStep){this.scale=links.Timeline.StepDate.SCALE.HOUR;this.step=1;}
-6323if(stepMinute*15>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MINUTE;this.step=15;}
-6324if(stepMinute*10>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MINUTE;this.step=10;}
-6325if(stepMinute*5>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MINUTE;this.step=5;}
-6326if(stepMinute>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MINUTE;this.step=1;}
-6327if(stepSecond*15>minimumStep){this.scale=links.Timeline.StepDate.SCALE.SECOND;this.step=15;}
-6328if(stepSecond*10>minimumStep){this.scale=links.Timeline.StepDate.SCALE.SECOND;this.step=10;}
-6329if(stepSecond*5>minimumStep){this.scale=links.Timeline.StepDate.SCALE.SECOND;this.step=5;}
-6330if(stepSecond>minimumStep){this.scale=links.Timeline.StepDate.SCALE.SECOND;this.step=1;}
-6331if(stepMillisecond*200>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MILLISECOND;this.step=200;}
-6332if(stepMillisecond*100>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MILLISECOND;this.step=100;}
-6333if(stepMillisecond*50>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MILLISECOND;this.step=50;}
-6334if(stepMillisecond*10>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MILLISECOND;this.step=10;}
-6335if(stepMillisecond*5>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MILLISECOND;this.step=5;}
-6336if(stepMillisecond>minimumStep){this.scale=links.Timeline.StepDate.SCALE.MILLISECOND;this.step=1;}
-6337};
-6338
-6339/**
-6340 * Snap a date to a rounded value. The snap intervals are dependent on the
-6341 * current scale and step.
-6342 * @param {Date} date the date to be snapped
-6343 */
-6344links.Timeline.StepDate.prototype.snap=function(date){
-6345if(this.scale==links.Timeline.StepDate.SCALE.YEAR){
-6346varyear=date.getFullYear()+Math.round(date.getMonth()/12);
-6347date.setFullYear(Math.round(year/this.step)*this.step);
-6348date.setMonth(0);
-6349date.setDate(0);
-6350date.setHours(0);
-6351date.setMinutes(0);
-6352date.setSeconds(0);
-6353date.setMilliseconds(0);
-6354}
-6355elseif(this.scale==links.Timeline.StepDate.SCALE.MONTH){
-6356if(date.getDate()>15){
-6357date.setDate(1);
-6358date.setMonth(date.getMonth()+1);
-6359// important: first set Date to 1, after that change the month.
-6360}
-6361else{
-6362date.setDate(1);
-6363}
-6364
-6365date.setHours(0);
-6366date.setMinutes(0);
-6367date.setSeconds(0);
-6368date.setMilliseconds(0);
-6369}
-6370elseif(this.scale==links.Timeline.StepDate.SCALE.DAY||
-6371this.scale==links.Timeline.StepDate.SCALE.WEEKDAY){
-6372switch(this.step){
-6373case5:
-6374case2:
-6375date.setHours(Math.round(date.getHours()/24)*24);break;
-6376default:
-6377date.setHours(Math.round(date.getHours()/12)*12);break;
-6378}
-6379date.setMinutes(0);
-6380date.setSeconds(0);
-6381date.setMilliseconds(0);
-6382}
-6383elseif(this.scale==links.Timeline.StepDate.SCALE.HOUR){
-6384switch(this.step){
-6385case4:
-6386date.setMinutes(Math.round(date.getMinutes()/60)*60);break;
-6387default:
-6388date.setMinutes(Math.round(date.getMinutes()/30)*30);break;
-6389}
-6390date.setSeconds(0);
-6391date.setMilliseconds(0);
-6392}elseif(this.scale==links.Timeline.StepDate.SCALE.MINUTE){
-6393switch(this.step){
-6394case15:
-6395case10:
-6396date.setMinutes(Math.round(date.getMinutes()/5)*5);
-6397date.setSeconds(0);
-6398break;
-6399case5:
-6400date.setSeconds(Math.round(date.getSeconds()/60)*60);break;
-6401default:
-6402date.setSeconds(Math.round(date.getSeconds()/30)*30);break;
-6403}
-6404date.setMilliseconds(0);
-6405}
-6406elseif(this.scale==links.Timeline.StepDate.SCALE.SECOND){
-6407switch(this.step){
-6408case15:
-6409case10:
-6410date.setSeconds(Math.round(date.getSeconds()/5)*5);
-6411date.setMilliseconds(0);
-6412break;
-6413case5:
-6414date.setMilliseconds(Math.round(date.getMilliseconds()/1000)*1000);break;
-6415default:
-6416date.setMilliseconds(Math.round(date.getMilliseconds()/500)*500);break;
-6417}
-6418}
-6419elseif(this.scale==links.Timeline.StepDate.SCALE.MILLISECOND){
-6420varstep=this.step>5?this.step/2:1;
-6421date.setMilliseconds(Math.round(date.getMilliseconds()/step)*step);
-6422}
-6423};
-6424
-6425/**
-6426 * Check if the current step is a major step (for example when the step
-6427 * is DAY, a major step is each first day of the MONTH)
-6428 * @return {boolean} true if current date is major, else false.
-6429 */
-6430links.Timeline.StepDate.prototype.isMajor=function(){
-6431switch(this.scale){
-6432caselinks.Timeline.StepDate.SCALE.MILLISECOND:
-6433return(this.current.getMilliseconds()==0);
-6434caselinks.Timeline.StepDate.SCALE.SECOND:
-6435return(this.current.getSeconds()==0);
-6436caselinks.Timeline.StepDate.SCALE.MINUTE:
-6437return(this.current.getHours()==0)&&(this.current.getMinutes()==0);
-6438// Note: this is no bug. Major label is equal for both minute and hour scale
-6439caselinks.Timeline.StepDate.SCALE.HOUR:
-6440return(this.current.getHours()==0);
-6441caselinks.Timeline.StepDate.SCALE.WEEKDAY:// intentional fall through
-6442caselinks.Timeline.StepDate.SCALE.DAY:
-6443return(this.current.getDate()==1);
-6444caselinks.Timeline.StepDate.SCALE.MONTH:
-6445return(this.current.getMonth()==0);
-6446caselinks.Timeline.StepDate.SCALE.YEAR:
-6447returnfalse;
-6448default:
-6449returnfalse;
-6450}
-6451};
-6452
-6453
-6454/**
-6455 * Returns formatted text for the minor axislabel, depending on the current
-6456 * date and the scale. For example when scale is MINUTE, the current time is
-6457 * formatted as "hh:mm".
-6458 * @param {Object} options
-6459 * @param {Date} [date] custom date. if not provided, current date is taken
-6460 */
-6461links.Timeline.StepDate.prototype.getLabelMinor=function(options,date){
-6462if(date==undefined){
-6463date=this.current;
-6464}
-6465
-6466switch(this.scale){
-6467caselinks.Timeline.StepDate.SCALE.MILLISECOND:returnString(date.getMilliseconds());
-6468caselinks.Timeline.StepDate.SCALE.SECOND:returnString(date.getSeconds());
-6469caselinks.Timeline.StepDate.SCALE.MINUTE:
-6470returnthis.addZeros(date.getHours(),2)+":"+this.addZeros(date.getMinutes(),2);
-6471caselinks.Timeline.StepDate.SCALE.HOUR:
-6472returnthis.addZeros(date.getHours(),2)+":"+this.addZeros(date.getMinutes(),2);
-6473caselinks.Timeline.StepDate.SCALE.WEEKDAY:returnoptions.DAYS_SHORT[date.getDay()]+' '+date.getDate();
-6474caselinks.Timeline.StepDate.SCALE.DAY:returnString(date.getDate());
-6475caselinks.Timeline.StepDate.SCALE.MONTH:returnoptions.MONTHS_SHORT[date.getMonth()];// month is zero based
-6476caselinks.Timeline.StepDate.SCALE.YEAR:returnString(date.getFullYear());
-6477default:return"";
-6478}
-6479};
-6480
-6481
-6482/**
-6483 * Returns formatted text for the major axislabel, depending on the current
-6484 * date and the scale. For example when scale is MINUTE, the major scale is
-6485 * hours, and the hour will be formatted as "hh".
-6486 * @param {Object} options
-6487 * @param {Date} [date] custom date. if not provided, current date is taken
-6488 */
-6489links.Timeline.StepDate.prototype.getLabelMajor=function(options,date){
-6490if(date==undefined){
-6491date=this.current;
-6492}
-6493
-6494switch(this.scale){
-6495caselinks.Timeline.StepDate.SCALE.MILLISECOND:
-6496returnthis.addZeros(date.getHours(),2)+":"+
-6497this.addZeros(date.getMinutes(),2)+":"+
-6498this.addZeros(date.getSeconds(),2);
-6499caselinks.Timeline.StepDate.SCALE.SECOND:
-6500returndate.getDate()+" "+
-6501options.MONTHS[date.getMonth()]+" "+
-6502this.addZeros(date.getHours(),2)+":"+
-6503this.addZeros(date.getMinutes(),2);
-6504caselinks.Timeline.StepDate.SCALE.MINUTE:
-6505returnoptions.DAYS[date.getDay()]+" "+
-6506date.getDate()+" "+
-6507options.MONTHS[date.getMonth()]+" "+
-6508date.getFullYear();
-6509caselinks.Timeline.StepDate.SCALE.HOUR:
-6510returnoptions.DAYS[date.getDay()]+" "+
-6511date.getDate()+" "+
-6512options.MONTHS[date.getMonth()]+" "+
-6513date.getFullYear();
-6514caselinks.Timeline.StepDate.SCALE.WEEKDAY:
-6515caselinks.Timeline.StepDate.SCALE.DAY:
-6516returnoptions.MONTHS[date.getMonth()]+" "+
-6517date.getFullYear();
-6518caselinks.Timeline.StepDate.SCALE.MONTH:
-6519returnString(date.getFullYear());
-6520default:
-6521return"";
-6522}
-6523};
-6524
-6525/**
-6526 * Add leading zeros to the given value to match the desired length.
-6527 * For example addZeros(123, 5) returns "00123"
-6528 * @param {int} value A value
-6529 * @param {int} len Desired final length
-6530 * @return {string} value with leading zeros
-6531 */
-6532links.Timeline.StepDate.prototype.addZeros=function(value,len){
-6533varstr=""+value;
-6534while(str.length<len){
-6535str="0"+str;
-6536}
-6537returnstr;
-6538};
-6539
-6540
-6541
-6542/** ------------------------------------------------------------------------ **/
-6543
-6544/**
-6545 * Image Loader service.
-6546 * can be used to get a callback when a certain image is loaded
-6547 *
-6548 */
-6549links.imageloader=(function(){
-6550varurls={};// the loaded urls
-6551varcallbacks={};// the urls currently being loaded. Each key contains
-6552// an array with callbacks
-6553
-6554/**
-6555 * Check if an image url is loaded
-6556 * @param {String} url
-6557 * @return {boolean} loaded True when loaded, false when not loaded
-6558 * or when being loaded
-6559 */
-6560functionisLoaded(url){
-6561if(urls[url]==true){
-6562returntrue;
-6563}
-6564
-6565varimage=newImage();
-6566image.src=url;
-6567if(image.complete){
-6568returntrue;
-6569}
-6570
-6571returnfalse;
-6572}
-6573
-6574/**
-6575 * Check if an image url is being loaded
-6576 * @param {String} url
-6577 * @return {boolean} loading True when being loaded, false when not loading
-6578 * or when already loaded
-6579 */
-6580functionisLoading(url){
-6581return(callbacks[url]!=undefined);
-6582}
-6583
-6584/**
-6585 * Load given image url
-6586 * @param {String} url
-6587 * @param {function} callback
-6588 * @param {boolean} sendCallbackWhenAlreadyLoaded optional
-6589 */
-6590functionload(url,callback,sendCallbackWhenAlreadyLoaded){
-6591if(sendCallbackWhenAlreadyLoaded==undefined){
-6592sendCallbackWhenAlreadyLoaded=true;
-6593}
-6594
-6595if(isLoaded(url)){
-6596if(sendCallbackWhenAlreadyLoaded){
-6597callback(url);
-6598}
-6599return;
-6600}
-6601
-6602if(isLoading(url)&&!sendCallbackWhenAlreadyLoaded){
-6603return;
-6604}
-6605
-6606varc=callbacks[url];
-6607if(!c){
-6608varimage=newImage();
-6609image.src=url;
-6610
-6611c=[];
-6612callbacks[url]=c;
-6613
-6614image.onload=function(event){
-6615urls[url]=true;
-6616deletecallbacks[url];
-6617
-6618for(vari=0;i<c.length;i++){
-6619c[i](url);
-6620}
-6621}
-6622}
-6623
-6624if(c.indexOf(callback)==-1){
-6625c.push(callback);
-6626}
-6627}
-6628
-6629/**
-6630 * Load a set of images, and send a callback as soon as all images are
-6631 * loaded
-6632 * @param {String[]} urls
-6633 * @param {function } callback
-6634 * @param {boolean} sendCallbackWhenAlreadyLoaded
-6635 */
-6636functionloadAll(urls,callback,sendCallbackWhenAlreadyLoaded){
-6637// list all urls which are not yet loaded
-6638varurlsLeft=[];
-6639urls.forEach(function(url){
-6640if(!isLoaded(url)){
-6641urlsLeft.push(url);
-6642}
-6643});
-6644
-6645if(urlsLeft.length){
-6646// there are unloaded images
-6647varcountLeft=urlsLeft.length;
-6648urlsLeft.forEach(function(url){
-6649load(url,function(){
-6650countLeft--;
-6651if(countLeft==0){
-6652// done!
-6653callback();
-6654}
-6655},sendCallbackWhenAlreadyLoaded);
-6656});
-6657}
-6658else{
-6659// we are already done!
-6660if(sendCallbackWhenAlreadyLoaded){
-6661callback();
-6662}
-6663}
-6664}
-6665
-6666/**
-6667 * Recursively retrieve all image urls from the images located inside a given
-6668 * HTML element
-6669 * @param {Node} elem
-6670 * @param {String[]} urls Urls will be added here (no duplicates)
-6671 */
-6672functionfilterImageUrls(elem,urls){
-6673varchild=elem.firstChild;
-6674while(child){
-6675if(child.tagName=='IMG'){
-6676varurl=child.src;
-6677if(urls.indexOf(url)==-1){
-6678urls.push(url);
-6679}
-6680}
-6681
-6682filterImageUrls(child,urls);
-6683
-6684child=child.nextSibling;
-6685}
-6686}
-6687
-6688return{
-6689'isLoaded':isLoaded,
-6690'isLoading':isLoading,
-6691'load':load,
-6692'loadAll':loadAll,
-6693'filterImageUrls':filterImageUrls
-6694};
-6695})();
-6696
-6697
-6698/** ------------------------------------------------------------------------ **/
-6699
-6700
-6701/**
-6702 * Add and event listener. Works for all browsers
-6703 * @param {Element} element An html element
-6704 * @param {string} action The action, for example "click",
-6705 * without the prefix "on"
-6706 * @param {function} listener The callback function to be executed
-6707 * @param {boolean} useCapture
-6708 */
-6709links.Timeline.addEventListener=function(element,action,listener,useCapture){
-6710if(element.addEventListener){
-6711if(useCapture===undefined)
-6712useCapture=false;
-6713
-6714if(action==="mousewheel"&&navigator.userAgent.indexOf("Firefox")>=0){
-6715action="DOMMouseScroll";// For Firefox
-6716}
-6717
-6718element.addEventListener(action,listener,useCapture);
-6719}else{
-6720element.attachEvent("on"+action,listener);// IE browsers
-6721}
-6722};
-6723
-6724/**
-6725 * Remove an event listener from an element
-6726 * @param {Element} element An html dom element
-6727 * @param {string} action The name of the event, for example "mousedown"
-6728 * @param {function} listener The listener function
-6729 * @param {boolean} useCapture
-6730 */
-6731links.Timeline.removeEventListener=function(element,action,listener,useCapture){
-6732if(element.removeEventListener){
-6733// non-IE browsers
-6734if(useCapture===undefined)
-6735useCapture=false;
-6736
-6737if(action==="mousewheel"&&navigator.userAgent.indexOf("Firefox")>=0){
-6738action="DOMMouseScroll";// For Firefox
-6739}
-6740
-6741element.removeEventListener(action,listener,useCapture);
-6742}else{
-6743// IE browsers
-6744element.detachEvent("on"+action,listener);
-6745}
-6746};
-6747
-6748
-6749/**
-6750 * Get HTML element which is the target of the event
-6751 * @param {Event} event
-6752 * @return {Element} target element
-6753 */
-6754links.Timeline.getTarget=function(event){
-6755// code from http://www.quirksmode.org/js/events_properties.html
-6756if(!event){
-6757event=window.event;
-6758}
-6759
-6760vartarget;
-6761
-6762if(event.target){
-6763target=event.target;
-6764}
-6765elseif(event.srcElement){
-6766target=event.srcElement;
-6767}
-6768
-6769if(target.nodeType!=undefined&&target.nodeType==3){
-6770// defeat Safari bug
-6771target=target.parentNode;
-6772}
-6773
-6774returntarget;
-6775};
-6776
-6777/**
-6778 * Stop event propagation
-6779 */
-6780links.Timeline.stopPropagation=function(event){
-6781if(!event)
-6782event=window.event;
-6783
-6784if(event.stopPropagation){
-6785event.stopPropagation();// non-IE browsers
-6786}
-6787else{
-6788event.cancelBubble=true;// IE browsers
-6789}
-6790};
-6791
-6792
-6793/**
-6794 * Cancels the event if it is cancelable, without stopping further propagation of the event.
-6795 */
-6796links.Timeline.preventDefault=function(event){
-6797if(!event)
-6798event=window.event;
-6799
-6800if(event.preventDefault){
-6801event.preventDefault();// non-IE browsers
-6802}
-6803else{
-6804event.returnValue=false;// IE browsers
-6805}
-6806};
-6807
-6808
-6809/**
-6810 * Retrieve the absolute left value of a DOM element
-6811 * @param {Element} elem A dom element, for example a div
-6812 * @return {number} left The absolute left position of this element
-6813 * in the browser page.
-6814 */
-6815links.Timeline.getAbsoluteLeft=function(elem){
-6816vardoc=document.documentElement;
-6817varbody=document.body;
-6818
-6819varleft=elem.offsetLeft;
-6820vare=elem.offsetParent;
-6821while(e!=null&&e!=body&&e!=doc){
-6822left+=e.offsetLeft;
-6823left-=e.scrollLeft;
-6824e=e.offsetParent;
-6825}
-6826returnleft;
-6827};
-6828
-6829/**
-6830 * Retrieve the absolute top value of a DOM element
-6831 * @param {Element} elem A dom element, for example a div
-6832 * @return {number} top The absolute top position of this element
-6833 * in the browser page.
-6834 */
-6835links.Timeline.getAbsoluteTop=function(elem){
-6836vardoc=document.documentElement;
-6837varbody=document.body;
-6838
-6839vartop=elem.offsetTop;
-6840vare=elem.offsetParent;
-6841while(e!=null&&e!=body&&e!=doc){
-6842top+=e.offsetTop;
-6843top-=e.scrollTop;
-6844e=e.offsetParent;
-6845}
-6846returntop;
-6847};
-6848
-6849/**
-6850 * Get the absolute, vertical mouse position from an event.
-6851 * @param {Event} event
-6852 * @return {Number} pageY
-6853 */
-6854links.Timeline.getPageY=function(event){
-6855if(('targetTouches'inevent)&&event.targetTouches.length){
-6856event=event.targetTouches[0];
-6857}
-6858
-6859if('pageY'inevent){
-6860returnevent.pageY;
-6861}
-6862
-6863// calculate pageY from clientY
-6864varclientY=event.clientY;
-6865vardoc=document.documentElement;
-6866varbody=document.body;
-6867returnclientY+
-6868(doc&&doc.scrollTop||body&&body.scrollTop||0)-
-6869(doc&&doc.clientTop||body&&body.clientTop||0);
-6870};
-6871
-6872/**
-6873 * Get the absolute, horizontal mouse position from an event.
-6874 * @param {Event} event
-6875 * @return {Number} pageX
-6876 */
-6877links.Timeline.getPageX=function(event){
-6878if(('targetTouches'inevent)&&event.targetTouches.length){
-6879event=event.targetTouches[0];
-6880}
-6881
-6882if('pageX'inevent){
-6883returnevent.pageX;
-6884}
-6885
-6886// calculate pageX from clientX
-6887varclientX=event.clientX;
-6888vardoc=document.documentElement;
-6889varbody=document.body;
-6890returnclientX+
-6891(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-
-6892(doc&&doc.clientLeft||body&&body.clientLeft||0);
-6893};
-6894
-6895/**
-6896 * Adds one or more className's to the given elements style
-6897 * @param {Element} elem
-6898 * @param {String} className
-6899 */
-6900links.Timeline.addClassName=function(elem,className){
-6901varclasses=elem.className.split(' ');
-6902varclassesToAdd=className.split(' ');
-6903
-6904varadded=false;
-6905for(vari=0;i<classesToAdd.length;i++){
-6906if(classes.indexOf(classesToAdd[i])==-1){
-6907classes.push(classesToAdd[i]);// add the class to the array
-6908added=true;
-6909}
-6910}
-6911
-6912if(added){
-6913elem.className=classes.join(' ');
-6914}
-6915};
-6916
-6917/**
-6918 * Removes one or more className's from the given elements style
-6919 * @param {Element} elem
-6920 * @param {String} className
-6921 */
-6922links.Timeline.removeClassName=function(elem,className){
-6923varclasses=elem.className.split(' ');
-6924varclassesToRemove=className.split(' ');
-6925
-6926varremoved=false;
-6927for(vari=0;i<classesToRemove.length;i++){
-6928varindex=classes.indexOf(classesToRemove[i]);
-6929if(index!=-1){
-6930classes.splice(index,1);// remove the class from the array
-6931removed=true;
-6932}
-6933}
-6934
-6935if(removed){
-6936elem.className=classes.join(' ');
-6937}
-6938};
-6939
-6940/**
-6941 * Check if given object is a Javascript Array
-6942 * @param {*} obj
-6943 * @return {Boolean} isArray true if the given object is an array
-6944 */
-6945// See http://stackoverflow.com/questions/2943805/javascript-instanceof-typeof-in-gwt-jsni
-6946links.Timeline.isArray=function(obj){
-6947if(objinstanceofArray){
-6948returntrue;
-6949}
-6950return(Object.prototype.toString.call(obj)==='[object Array]');
-6951};
-6952
-6953/**
-6954 * Shallow clone an object
-6955 * @param {Object} object
-6956 * @return {Object} clone
-6957 */
-6958links.Timeline.clone=function(object){
-6959varclone={};
-6960for(varpropinobject){
-6961if(object.hasOwnProperty(prop)){
-6962clone[prop]=object[prop];
-6963}
-6964}
-6965returnclone;
-6966};
-6967
-6968/**
-6969 * parse a JSON date
-6970 * @param {Date | String | Number} date Date object to be parsed. Can be:
-6971 * - a Date object like new Date(),
-6972 * - a long like 1356970529389,
-6973 * an ISO String like "2012-12-31T16:16:07.213Z",
-6974 * or a .Net Date string like
-6975 * "\/Date(1356970529389)\/"
-6976 * @return {Date} parsedDate
-6977 */
-6978links.Timeline.parseJSONDate=function(date){
-6979if(date==undefined){
-6980returnundefined;
-6981}
-6982
-6983//test for date
-6984if(dateinstanceofDate){
-6985returndate;
-6986}
-6987
-6988// test for MS format.
-6989// FIXME: will fail on a Number
-6990varm=date.match(/\/Date\((-?\d+)([-\+]?\d{2})?(\d{2})?\)\//i);
-6991if(m){
-6992varoffset=m[2]
-6993?(3600000*m[2])// hrs offset
-6994+(60000*m[3]*(m[2]/Math.abs(m[2])))// mins offset
-6995:0;
-6996
-6997returnnewDate(
-6998(1*m[1])// ticks
-6999+offset
-7000);
-7001}
-7002
-7003// failing that, try to parse whatever we've got.
-7004returnDate.parse(date);
-7005};
-7006
\ No newline at end of file
diff --git a/static/lib/timeline/doc/prettify/lang-apollo.js b/static/lib/timeline/doc/prettify/lang-apollo.js
deleted file mode 100644
index bfc0014c..00000000
--- a/static/lib/timeline/doc/prettify/lang-apollo.js
+++ /dev/null
@@ -1,2 +0,0 @@
-PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
-null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])
\ No newline at end of file
diff --git a/static/lib/timeline/doc/prettify/lang-css.js b/static/lib/timeline/doc/prettify/lang-css.js
deleted file mode 100644
index 61157f38..00000000
--- a/static/lib/timeline/doc/prettify/lang-css.js
+++ /dev/null
@@ -1,2 +0,0 @@
-PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
-["com",/^(?:
-
-
-
-
-
-
-