From 807921b3cbc67918f9c82d2cf0b17a25a15c5dee Mon Sep 17 00:00:00 2001
From: jos
Date: Tue, 30 Sep 2014 16:36:15 +0200
Subject: [PATCH] Implemented field `style` for both items and groups, to set a
custom style for individual items.
---
HISTORY.md | 2 ++
docs/timeline.html | 25 ++++++++++++++++++++++---
lib/timeline/component/Group.js | 10 ++++++++++
lib/timeline/component/item/Item.js | 14 +++++++-------
test/timeline.html | 5 ++---
5 files changed, 43 insertions(+), 13 deletions(-)
diff --git a/HISTORY.md b/HISTORY.md
index 4afe6bab..dfbc35cb 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -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.
diff --git a/docs/timeline.html b/docs/timeline.html
index 284839aa..ef1c57ca 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -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 start
,
end
(optional), content
,
- group
(optional), and className
(optional).
+ group
(optional), className
(optional),
+ and style
(optional).
@@ -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 = [
yes |
The start date of the item, for example new Date(2010,9,23) . |
+
+ style |
+ String |
+ no |
+
+ A css text string to apply custom styling for an individual item, for
+ example "color: red; background-color: pink;" .
+ |
+
title |
String |
@@ -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 group
which matches the id
of the group.
+
+ style |
+ String |
+ no |
+
+ A css text string to apply custom styling for an individual group label, for
+ example "color: red; background-color: pink;" .
+ |
+
title |
String |
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index 0f731795..e83eeb2c 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -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;
+ }
};
/**
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 7ba58975..85df5c75 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -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;
}
diff --git a/test/timeline.html b/test/timeline.html
index 66dc705d..b441bdb8 100644
--- a/test/timeline.html
+++ b/test/timeline.html
@@ -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
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(),