Browse Source

Added support for title for both items and groups

css_transitions
jos 10 years ago
parent
commit
5374721fd6
9 changed files with 103 additions and 64 deletions
  1. +65
    -49
      docs/timeline.html
  2. +10
    -11
      examples/graph2d/index.html
  3. +3
    -0
      src/timeline/component/Group.js
  4. +1
    -0
      src/timeline/component/ItemSet.js
  5. +6
    -0
      src/timeline/component/item/ItemBox.js
  6. +6
    -0
      src/timeline/component/item/ItemPoint.js
  7. +6
    -0
      src/timeline/component/item/ItemRange.js
  8. +4
    -3
      test/timeline.html
  9. +2
    -1
      test/timeline_groups.html

+ 65
- 49
docs/timeline.html View File

@ -174,18 +174,27 @@ var items = [
<th>Description</th>
</tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>className</td>
<td>String</td>
<td>no</td>
<td>An id for the item. Using an id is not required but highly
recommended. An id is needed when dynamically adding, updating,
and removing items in a DataSet.</td>
<td>This field is optional. A className can be used to give items
an individual css style. For example, when an item has className
'red', one can define a css style like:
<pre class="prettyprint lang-css">
.vis.timeline .red {
color: white;
background-color: red;
border-color: darkred;
}</pre>
More details on how to style items can be found in the section
<a href="#Styles">Styles</a>.
</td>
</tr>
<tr>
<td>start</td>
<td>Date</td>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
<td>The contents of the item. This can be plain text or html code.</td>
</tr>
<tr>
<td>end</td>
@ -195,20 +204,6 @@ var items = [
If end date is provided, the item is displayed as a range.
If not, the item is displayed as a box.</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the item. This can be plain text or html code.</td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', or 'range'.
Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
</td>
</tr>
<tr>
<td>group</td>
<td>any type</td>
@ -221,20 +216,33 @@ var items = [
</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>id</td>
<td>String | Number</td>
<td>no</td>
<td>This field is optional. A className can be used to give items
an individual css style. For example, when an item has className
'red', one can define a css style like:
<pre class="prettyprint lang-css">
.vis.timeline .red {
color: white;
background-color: red;
border-color: darkred;
}</pre>
More details on how to style items can be found in the section
<a href="#Styles">Styles</a>.
<td>An id for the item. Using an id is not required but highly
recommended. An id is needed when dynamically adding, updating,
and removing items in a DataSet.</td>
</tr>
<tr>
<td>start</td>
<td>Date</td>
<td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>none</td>
<td>Add a title for the item, displayed when holding the mouse on the item.
The title can only contain plain text.
</td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', or 'range'.
Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
</td>
</tr>
</table>
@ -276,20 +284,6 @@ var groups = [
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>yes</td>
<td>An id for the group. The group will display all items having a
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the group. This can be plain text or html code.</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
@ -306,6 +300,28 @@ var groups = [
<a href="#Styles">Styles</a>.
</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the group. This can be plain text or html code.</td>
</tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>yes</td>
<td>An id for the group. The group will display all items having a
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>none</td>
<td>A title for the group, displayed when holding the mouse the groups label.
The title can only contain plain text.
</td>
</tr>
</table>

+ 10
- 11
examples/graph2d/index.html View File

@ -1,21 +1,20 @@
<html>
<head>
<link rel='stylesheet' href='default.css' type='text/css'>
<link rel='stylesheet' href='default.css' type='text/css'>
</head>
<body>
<div id="container">
<h1>Graph2d Examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_bars.html">02_bars.html</a></p>
<p><a href="03_groups.html">03_groups.html</a></p>
<p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
<p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
<p><a href="06_interpolation.html">06_interpolation.html</a></p>
<p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
<p><a href="08_performance.html">08_performance.html</a></p>
<h1>Graph2d Examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_bars.html">02_bars.html</a></p>
<p><a href="03_groups.html">03_groups.html</a></p>
<p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
<p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
<p><a href="06_interpolation.html">06_interpolation.html</a></p>
<p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
<p><a href="08_performance.html">08_performance.html</a></p>
</div>
</body>

+ 3
- 0
src/timeline/component/Group.js View File

@ -81,6 +81,9 @@ Group.prototype.setData = function(data) {
this.dom.inner.innerHTML = this.groupId;
}
// update title
this.dom.label.title = data && data.title || '';
if (!this.dom.inner.firstChild) {
util.addClassName(this.dom.inner, 'hidden');
}

+ 1
- 0
src/timeline/component/ItemSet.js View File

@ -1317,3 +1317,4 @@ ItemSet.itemSetFromTarget = function(event) {
return null;
};

+ 6
- 0
src/timeline/component/item/ItemBox.js View File

@ -112,6 +112,12 @@ ItemBox.prototype.redraw = function() {
this.dirty = true;
}
// update title
if (this.data.title != this.title) {
dom.box.title = this.data.title;
this.title = this.data.title;
}
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' selected' : '');

+ 6
- 0
src/timeline/component/item/ItemPoint.js View File

@ -102,6 +102,12 @@ ItemPoint.prototype.redraw = function() {
this.dirty = true;
}
// update title
if (this.data.title != this.title) {
dom.point.title = this.data.title;
this.title = this.data.title;
}
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' selected' : '');

+ 6
- 0
src/timeline/component/item/ItemRange.js View File

@ -96,6 +96,12 @@ ItemRange.prototype.redraw = function() {
this.dirty = true;
}
// update title
if (this.data.title != this.title) {
dom.box.title = this.data.title;
this.title = this.data.title;
}
// update class
var className = (this.data.className ? (' ' + this.data.className) : '') +
(this.selected ? ' selected' : '');

+ 4
- 3
test/timeline.html View File

@ -65,16 +65,17 @@
fieldId: '_id'
});
items.add([
{_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate()},
{_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate(), title: 'hello title!'},
{_id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
{_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
{_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
{
_id: 4, content: 'item 4 ',
start: now.clone().add('days', 0).toDate(),
end: now.clone().add('days', 7).toDate()
end: now.clone().add('days', 7).toDate(),
title: 'hello title!'
},
{_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
{_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point', title: 'hello title!'},
{_id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
]);

+ 2
- 1
test/timeline_groups.html View File

@ -51,7 +51,7 @@
var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
groups.add({id: g, content: names[g], title: 'Title of group ' + g});
}
// create a dataset with items
@ -65,6 +65,7 @@
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
title: 'Title for item ' + i,
type: 'box'
});
}

Loading…
Cancel
Save