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(),