diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js index 4b56392b..cc3f577d 100644 --- a/lib/timeline/component/item/BackgroundItem.js +++ b/lib/timeline/component/item/BackgroundItem.js @@ -97,6 +97,7 @@ BackgroundItem.prototype.redraw = function() { this._updateContents(this.dom.content); this._updateTitle(this.dom.content); this._updateDataAttributes(this.dom.content); + this._updateStyle(this.dom.box); // update class var className = (this.data.className ? (' ' + this.data.className) : '') + diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js index 6952cd3c..f04cd6cd 100644 --- a/lib/timeline/component/item/BoxItem.js +++ b/lib/timeline/component/item/BoxItem.js @@ -1,4 +1,5 @@ var Item = require('./Item'); +var util = require('../../../util'); /** * @constructor BoxItem @@ -107,6 +108,7 @@ BoxItem.prototype.redraw = function() { this._updateContents(this.dom.content); this._updateTitle(this.dom.box); this._updateDataAttributes(this.dom.box); + this._updateStyle(this.dom.box); // update class var className = (this.data.className? ' ' + this.data.className : '') + diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index 12746f20..7ba58975 100644 --- a/lib/timeline/component/item/Item.js +++ b/lib/timeline/component/item/Item.js @@ -1,4 +1,5 @@ var Hammer = require('../../../module/hammer'); +var util = require('../../../util'); /** * @constructor Item @@ -231,4 +232,23 @@ Item.prototype._updateTitle = function (element) { } }; +/** + * Update custom styles of the element + * @param element + * @private + */ +Item.prototype._updateStyle = function(element) { + // update style + if (this.data.style) { + if (this.style) { + // remove old styles + util.removeCssText(element, this.style); + } + + // append new styles + util.addCssText(element, this.data.style); + this.style = this.data.style; + } +}; + module.exports = Item; diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js index a3edf640..8ec6db21 100644 --- a/lib/timeline/component/item/PointItem.js +++ b/lib/timeline/component/item/PointItem.js @@ -97,6 +97,7 @@ PointItem.prototype.redraw = function() { this._updateContents(this.dom.content); this._updateTitle(this.dom.point); this._updateDataAttributes(this.dom.point); + this._updateStyle(this.dom.point); // update class var className = (this.data.className? ' ' + this.data.className : '') + diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js index c1b7452f..206017e9 100644 --- a/lib/timeline/component/item/RangeItem.js +++ b/lib/timeline/component/item/RangeItem.js @@ -92,6 +92,7 @@ RangeItem.prototype.redraw = function() { this._updateContents(this.dom.content); this._updateTitle(this.dom.box); this._updateDataAttributes(this.dom.box); + this._updateStyle(this.dom.box); // update class var className = (this.data.className ? (' ' + this.data.className) : '') + diff --git a/lib/util.js b/lib/util.js index 7032f3a6..3e890b8d 100644 --- a/lib/util.js +++ b/lib/util.js @@ -926,6 +926,63 @@ exports.RGBToHSV = function(red,green,blue) { return {h:hue,s:saturation,v:value}; }; +var cssUtil = { + // split a string with css styles into an object with key/values + split: function (cssText) { + var styles = {}; + + cssText.split(';').forEach(function (style) { + if (style.trim() != '') { + var parts = style.split(':'); + var key = parts[0].trim(); + var value = parts[1].trim(); + styles[key] = value; + } + }); + + return styles; + }, + + // build a css text string from an object with key/values + join: function (styles) { + return Object.keys(styles) + .map(function (key) { + return key + ': ' + styles[key]; + }) + .join('; '); + } +}; + +/** + * Append a string with css styles to an element + * @param {Element} element + * @param {String} cssText + */ +exports.addCssText = function (element, cssText) { + var currentStyles = cssUtil.split(element.style.cssText); + var newStyles = cssUtil.split(cssText); + var styles = exports.extend(currentStyles, newStyles); + + element.style.cssText = cssUtil.join(styles); +}; + +/** + * Remove a string with css styles from an element + * @param {Element} element + * @param {String} cssText + */ +exports.removeCssText = function (element, cssText) { + var styles = cssUtil.split(element.style.cssText); + var removeStyles = cssUtil.split(cssText); + + for (var key in removeStyles) { + if (removeStyles.hasOwnProperty(key)) { + delete styles[key]; + } + } + + element.style.cssText = cssUtil.join(styles); +}; /** * https://gist.github.com/mjijackson/5311256 diff --git a/test/timeline.html b/test/timeline.html index 3f092ee1..66dc705d 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -69,7 +69,8 @@ fieldId: '_id' }); items.add([ - {_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!', style: 'color: red;'}, + //{_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()},