Fixed #167: property `className` of groups not being applied to related contents and background elements, and not being updated once applied.

HISTORY.md

@@ -2,7 +2,7 @@
 http://visjs.org
 
 
-## 2014-06-06, version 1.1.1
+## not yet released, version 1.1.1
 
 ### Timeline
 
@@ -10,6 +10,8 @@ http://visjs.org
 - Implemented options `zoomable` and `moveable`.
 - Changed default value of option `showCurrentTime` to true.
 - Internal refactoring and simplification of the code.
+- Fixed property `className` of groups not being applied to related contents and 
+  background elements, and not being updated once applied.
 
 ### Graph
 

src/timeline/component/Group.js

@@ -16,6 +16,7 @@ function Group (groupId, data, itemSet) {
       height: 0
     }
   };
+  this.className = null;
 
   this.items = {};        // items filtered by groupId of this group
   this.visibleItems = []; // items currently visible in window
@@ -49,8 +50,10 @@ Group.prototype._create = function() {
   this.dom.foreground = foreground;
 
   this.dom.background = document.createElement('div');
+  this.dom.background.className = 'group';
 
   this.dom.axis = document.createElement('div');
+  this.dom.axis.className = 'group';
 
   // create a hidden marker to detect when the Timelines container is attached
   // to the DOM, or the style of a parent of the Timeline is changed from
@@ -86,9 +89,18 @@ Group.prototype.setData = function(data) {
   }
 
   // update className
-  var className = data && data.className;
-  if (className) {
+  var className = data && data.className || null;
+  if (className != this.className) {
+    if (this.className) {
+      util.removeClassName(this.dom.label, className);
+      util.removeClassName(this.dom.foreground, className);
+      util.removeClassName(this.dom.background, className);
+      util.removeClassName(this.dom.axis, className);
+    }
     util.addClassName(this.dom.label, className);
+    util.addClassName(this.dom.foreground, className);
+    util.addClassName(this.dom.background, className);
+    util.addClassName(this.dom.axis, className);
   }
 };
 

src/timeline/component/css/itemset.css

@@ -14,10 +14,6 @@
   height: 100%;
 }
 
-.vis.timeline .itemset.foreground {
-  overflow: hidden;
-}
-
 .vis.timeline .axis {
   position: absolute;
   width: 100%;
@@ -26,12 +22,12 @@
   z-index: 1;
 }
 
-.vis.timeline  .group {
+.vis.timeline  .foreground .group {
   position: relative;
   box-sizing: border-box;
   border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline  .group:last-child {
+.vis.timeline  .foreground .group:last-child {
   border-bottom: none;
 }