Support for 'style' added for Items

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) : '') +

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 : '') +

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;

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 : '') +

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) : '') +

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

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