Browse Source

Support for 'style' added for Items

v3_develop
jos 10 years ago
parent
commit
c87ef9819c
7 changed files with 84 additions and 1 deletions
  1. +1
    -0
      lib/timeline/component/item/BackgroundItem.js
  2. +2
    -0
      lib/timeline/component/item/BoxItem.js
  3. +20
    -0
      lib/timeline/component/item/Item.js
  4. +1
    -0
      lib/timeline/component/item/PointItem.js
  5. +1
    -0
      lib/timeline/component/item/RangeItem.js
  6. +57
    -0
      lib/util.js
  7. +2
    -1
      test/timeline.html

+ 1
- 0
lib/timeline/component/item/BackgroundItem.js View File

@ -97,6 +97,7 @@ BackgroundItem.prototype.redraw = function() {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle(this.dom.content); this._updateTitle(this.dom.content);
this._updateDataAttributes(this.dom.content); this._updateDataAttributes(this.dom.content);
this._updateStyle(this.dom.box);
// update class // update class
var className = (this.data.className ? (' ' + this.data.className) : '') + var className = (this.data.className ? (' ' + this.data.className) : '') +

+ 2
- 0
lib/timeline/component/item/BoxItem.js View File

@ -1,4 +1,5 @@
var Item = require('./Item'); var Item = require('./Item');
var util = require('../../../util');
/** /**
* @constructor BoxItem * @constructor BoxItem
@ -107,6 +108,7 @@ BoxItem.prototype.redraw = function() {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle(this.dom.box); this._updateTitle(this.dom.box);
this._updateDataAttributes(this.dom.box); this._updateDataAttributes(this.dom.box);
this._updateStyle(this.dom.box);
// update class // update class
var className = (this.data.className? ' ' + this.data.className : '') + var className = (this.data.className? ' ' + this.data.className : '') +

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

@ -1,4 +1,5 @@
var Hammer = require('../../../module/hammer'); var Hammer = require('../../../module/hammer');
var util = require('../../../util');
/** /**
* @constructor Item * @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; module.exports = Item;

+ 1
- 0
lib/timeline/component/item/PointItem.js View File

@ -97,6 +97,7 @@ PointItem.prototype.redraw = function() {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle(this.dom.point); this._updateTitle(this.dom.point);
this._updateDataAttributes(this.dom.point); this._updateDataAttributes(this.dom.point);
this._updateStyle(this.dom.point);
// update class // update class
var className = (this.data.className? ' ' + this.data.className : '') + var className = (this.data.className? ' ' + this.data.className : '') +

+ 1
- 0
lib/timeline/component/item/RangeItem.js View File

@ -92,6 +92,7 @@ RangeItem.prototype.redraw = function() {
this._updateContents(this.dom.content); this._updateContents(this.dom.content);
this._updateTitle(this.dom.box); this._updateTitle(this.dom.box);
this._updateDataAttributes(this.dom.box); this._updateDataAttributes(this.dom.box);
this._updateStyle(this.dom.box);
// update class // update class
var className = (this.data.className ? (' ' + this.data.className) : '') + var className = (this.data.className ? (' ' + this.data.className) : '') +

+ 57
- 0
lib/util.js View File

@ -926,6 +926,63 @@ exports.RGBToHSV = function(red,green,blue) {
return {h:hue,s:saturation,v:value}; 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 * https://gist.github.com/mjijackson/5311256

+ 2
- 1
test/timeline.html View File

@ -69,7 +69,8 @@
fieldId: '_id' fieldId: '_id'
}); });
items.add([ 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: '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: 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()},

Loading…
Cancel
Save