1. Overview
A panel collection is responsible for accommodating one or more panels and placing them in a given order. It is associated with DOM elements (e.g., div elements) on a Web page, and HuTime will be displayed on that page. In addition, you can place multiple panel collections in a single Web page, by associating them with different elements on the Web page. In this case, when a user changes the displayed range in one panel collection, the displayed ranges of the other panel collections are also changed accordingly.
2. Creating an Object
Constructor
HuTime.PanelCollection([vBreadth [, tLength]])
- vBreadth
- Type: Number
- Default value: null
- The length in the v-axis direction (in pixels). The vBreadth setting is reflected to the length of the v axis, together with vBreadthMode and other setting values.
- tLength
- Type: Number
- Default value: 600
- The length in the t-axis direction (in pixels). The tLength setting is reflected to the length of the t axis, together with tLengthMode and other setting values.
3. Adding a Panel Collection
You can add a panel collection using the appendPanelCollection method of an application root object.
ht.appendPanelCollection(panelCollection, targetElement)
- Return value
- None
- ht
- Type: HuTime
- The HuTime root object to which the panel collection is added.
- panelCollection
- Type: HuTime.PanelCollection
- The panel collection that is added to the HuTime root object.
- targetElement
- Type: HTMLElement
- The DOM element with which the panel collection is associated.
Sample code (click here for a running example). In this sample, a panel collection (variable pnls) is added to the application root object (variable ht). In this process, a div element, id="timeline," is specified as a DOM element in the page with which the panel collection is associated. By means of a property described later in Formatting, the background color of the panel collection is changed to pink.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
<title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
var ht = new HuTime();
var pnls = new HuTime.PanelCollection();
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
pnls.style.backgroundColor = "pink";
ht.redraw();
</script>
</body>
</html>
4. Specifying the Display Mode
You specify a display mode by using the displayMode property of the panel collection.
- displayMode
- Type: Number
- Default value: 0
- Reflected: After redrawing
-
displayMode Value t Axis Direction 0 Left to right 1 Right to left 2 Top to bottom 3 Bottom to top
5. Specifying the Size
The display size of the panel collection is determined by the position and size of the DOM element (hereafter referred to as a "parent element") with which the panel collection is associated when added to the application root, and by the properties below. Moreover, each property is reflected differently depending on the display mode.
Properties
- tLengthMode
- Type: Number
- Default value: 1
- How the display width in the t-axis direction is determined (in pixels).
0 Specified value 1 The width of the associated DOM element is used. - vBreadthMode
- Type: Number
- Default value: 2
- How the display width in the v-axis direction is determined (in pixels).
0 Specified value 1 The width of the associated DOM element is used. 2 The width of the panel that the panel collection contains is used.
In Horizontal Display Mode:
Width of the t Axis (in Pixels)
| tLengthMode | tLength | Parent Element Width | t Axis Width |
|---|---|---|---|
| 0 | null | Specified | Default value (600) |
| Not specified | Default value (600) | ||
| Value | Specified | tLength value | |
| Not specified | tLength value | ||
| 1 | null | Specified | Width of the parent element |
| Not specified | Width of the parent element (changes together with the change in the width of the parent element upon a change in the window size) | ||
| Value | Specified | Width of the parent element | |
| Not specified | Width of the parent element (changes together with the change in the width of the parent element upon a change in the window size) |
Width of the v Axis (in Pixels)
| vBreadthMode | vBreadth | Parent Element Height | v Axis Width |
|---|---|---|---|
| 0 | null | Specified | Default value (150) |
| Not specified | Default value (150) | ||
| Value | Specified | vBreadth value | |
| Not specified | vBreadth value | ||
| 1 | null | Specified | Height of the parent element |
| Not specified | Default value (150) | ||
| Value | Specified | Height of the parent element | |
| Not specified | Default value (150) | ||
| 2 | null | Specified | Height of the panel the panel collection contains* |
| Not specified | Height of the panel the panel collection contains* | ||
| Value | Specified | Height of the panel the panel collection contains* | |
| Not specified | Height of the panel the panel collection contains* |
* If the panel collection contains no panels, the height is set to the default value (150).
In Vertical Display Mode:
Width of the t Axis (in Pixels)
| tLengthMode | tLength | Parent Element Height | t Axis Width |
|---|---|---|---|
| 0 | null | Specified | Default value (600) |
| Not specified | Default value (600) | ||
| Value | Specified | tLength value | |
| Not specified | tLength value | ||
| 1 | null | Specified | Height of the parent element |
| Not specified | Default value (600) | ||
| Value | Specified | Height of the parent element | |
| Not specified | Default value (600) |
Width of the v Axis (in Pixels)
| vBreadthMode | vBreadth | Parent Element Width | v Axis Width |
|---|---|---|---|
| 0 | null | Specified | Default value (150) |
| Not specified | Default value (150) | ||
| Value | Specified | vBreadth value | |
| Not specified | vBreadth value | ||
| 1 | null | Specified | Width of the parent element |
| Not specified | Width of the parent element (changes together with the change in the width of the parent element upon a change in the window size) | ||
| Value | Specified | Width of the parent element | |
| Not specified | Width of the parent element (changes together with the change in the width of the parent element upon a change in the window size) | ||
| 2 | null | Specified | Width of the panel the panel collection contains* |
| Not specified | Width of the panel the panel collection contains* | ||
| Value | Specified | Width of the panel the panel collection contains* | |
| Not specified | Width of the panel the panel collection contains* |
* If the panel collection contains no panels, the width is set to the default value (150).
6. Formatting
You can use the style property to format the panel collection. The value specified for the style property is reflected to the style attribute of the DOM element (div element) that the panel collection has. In the example shown in "3. Adding a Panel Collection," the background color (style.backgroundColor) is set to pink. Usually, panels are displayed over the panel collection, therefore you cannot see its format. You can identify the format of the panel collection only through a part of it that is not covered by any panels. (In the sample code, you can see the entire panel collection because there are no panels on it.)
7. Other Key Properties and Methods
A panel collection has properties for controlling the behavior of panels in it.
Properties
- id
- Type: String
- Default value: null
- The ID for uniquely identifying the panel collection.
- name
- Type: String
- Default value: null
- The name of the panel collection.
- visible
- Type: Boolean
- Default value: true
- Value is applied: After redrawing
- Specify whether the panel collection is visible or invisible. If true, it is visible.
- mouseEventCapture
- Type: Number
- Default value: 3
- The range to capture mouse events: 0: Not captured; 1: Panel collection only; 2: Contained panels only; 3: Both panel collection and contained panels
- dragSensitivity
- Type: Number
- Default value: 5
- The minimum movement of the mouse for drag detection (in pixels).
- vScrollable
- Type: Boolean
- Default value: true
- Reflected: Immediately
- Whether or not a panel can be scrolled in the v-axis direction. If true, it can be scrolled.
- wheelZoomRatio
- Type: Number
- Default value: 0.02
- How much the t axis is zoomed in or out per a turning operation of the wheel. A value 0 or less reverses the relationship between the rotation direction of the wheel and the zoom-in or zoom-out operation.
Methods
redraw()
Redraws the panel collection. Panels that are contained in it are also redrawn recursively.
- Return value
- None
clear()
Clears what is displayed on the panel collection.
- Return value
- None
