Timeline Basics
A timeline (live samples at right) contains one or more bands, which can be panned infinitely by dragging with the mouse pointer. A band can be configured to synchronize with another band such that panning one band also scrolls the other.
A timeline is implemented as a div
element that contains inner div
elements as its bands (right). The band divs
are cropped and positioned relative to the timeline
div.
A band div itself contains several inner elements that implements various parts of the band. For example, the two timelines above show labels for days, weeks, months, and years. The bands also have different background colors, and the weekly band of the second timeline has weekend markings. All of these visual elements are "painted" by adding HTML elements to the band divs at the appropriate positions.
As a band is panned, its div is shifted horizontally or vertically, carrying all of its visual elements along. When either end of the band div approaches the visible (non-cropped) area, the band div is re-centered, its coordinate origin is changed, and then its various visual elements are re-"painted" relative to the new coordinate origin. All of this "paging" is done as seamlessly as possible so that the user experiences smooth, infinite panning.
A band is responsible for supporting panning as well as coordinating its various sub-components:
- an ether, whose sole responsibility is mapping between pixel coordinates and dates/times;
- an ether painter, which paints date/time labels and the background of the band as well as the highlight (the lighter part of the lower band in the first timeline above);
- zero or more decorators, which further decorate the background of the band; and
- an event painter, which paints the events.