Browse Source

Implemented field `style` for both items and groups, to set a custom style for individual items.

v3_develop
jos 10 years ago
parent
commit
807921b3cb
5 changed files with 43 additions and 13 deletions
  1. +2
    -0
      HISTORY.md
  2. +22
    -3
      docs/timeline.html
  3. +10
    -0
      lib/timeline/component/Group.js
  4. +7
    -7
      lib/timeline/component/item/Item.js
  5. +2
    -3
      test/timeline.html

+ 2
- 0
HISTORY.md View File

@ -17,6 +17,8 @@ http://visjs.org
### Timeline
- Implemented field `style` for both items and groups, to set a custom style for
individual items.
- Fixed height of BackgroundItems not being 100% when timeline has a fixed height.
- Fixed width of BackgroundItems not being reduced to 0 when zooming out.

+ 22
- 3
docs/timeline.html View File

@ -149,7 +149,8 @@ The constructor accepts four parameters:
The Timeline uses regular Arrays and Objects as data format.
Data items can contain the properties <code>start</code>,
<code>end</code> (optional), <code>content</code>,
<code>group</code> (optional), and <code>className</code> (optional).
<code>group</code> (optional), <code>className</code> (optional),
and <code>style</code> (optional).
</p>
<p>
@ -162,7 +163,7 @@ var items = [
start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional
content: 'Trajectory A'
// Optional: fields 'id', 'type', 'group', 'className'
// Optional: fields 'id', 'type', 'group', 'className', 'style'
}
// more items...
]);
@ -235,6 +236,15 @@ var items = [
<td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
</tr>
<tr>
<td>style</td>
<td>String</td>
<td>no</td>
<td>
A css text string to apply custom styling for an individual item, for
example <code>"color: red; background-color: pink;"</code>.
</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
@ -272,7 +282,7 @@ var groups = [
{
id: 1,
content: 'Group 1'
// Optional: a field 'className'
// Optional: a field 'className', 'style'
}
// more groups...
]);
@ -320,6 +330,15 @@ var groups = [
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>style</td>
<td>String</td>
<td>no</td>
<td>
A css text string to apply custom styling for an individual group label, for
example <code>"color: red; background-color: pink;"</code>.
</td>
</tr>
<tr>
<td>title</td>
<td>String</td>

+ 10
- 0
lib/timeline/component/Group.js View File

@ -110,6 +110,16 @@ Group.prototype.setData = function(data) {
util.addClassName(this.dom.axis, className);
this.className = className;
}
// update style
if (this.style) {
util.removeCssText(this.dom.label, this.style);
this.style = null;
}
if (data && data.style) {
util.addCssText(this.dom.label, data.style);
this.style = data.style;
}
};
/**

+ 7
- 7
lib/timeline/component/item/Item.js View File

@ -238,14 +238,14 @@ Item.prototype._updateTitle = function (element) {
* @private
*/
Item.prototype._updateStyle = function(element) {
// update style
if (this.data.style) {
if (this.style) {
// remove old styles
util.removeCssText(element, this.style);
}
// remove old styles
if (this.style) {
util.removeCssText(element, this.style);
this.style = null;
}
// append new styles
// append new styles
if (this.data.style) {
util.addCssText(element, this.data.style);
this.style = this.data.style;
}

+ 2
- 3
test/timeline.html View File

@ -69,11 +69,10 @@
fieldId: '_id'
});
items.add([
{_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!', style: 'color: red;'},
//{_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
{_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
{_id: '1', content: 'item 1<br>start', start: now.clone().add(4, 'days').toDate()},
{_id: 2, content: 'item 2', start: now.clone().add(-2, 'days').toDate() },
{_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate()},
{_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
{
_id: 4, content: 'item 4 ',
start: now.clone().add(0, 'days').toDate(),

Loading…
Cancel
Save