Group labels start to work again

src/timeline/Timeline.js

@@ -85,17 +85,14 @@ function Timeline (container, items, options) {
     bottom: null,
     left: '0',
     rigth: null,
-    height: null,
+    height: '100%',
     width: function () {
-      /* TODO: dynamically determine the width of the label panel
-       if (me.content && typeof me.content.getLabelsWidth === 'function') {
-       return me.content.getLabelsWidth();
-       }
-       else {
-       return 0;
-       }
-       */
-      return 200;
+      if (me.groupSet) {
+        return me.groupSet.getLabelsWidth();
+      }
+      else {
+        return 0;
+      }
     }
   });
   this.labelPanel = new Panel(labelOptions);

src/timeline/component/ContentPanel.js

@@ -1,70 +0,0 @@
-/**
- * A content panel can contain a groupset or an itemset, and can handle
- * vertical scrolling
- * @param {Component} [parent]
- * @param {Component[]} [depends]   Components on which this components depends
- *                                  (except for the parent)
- * @param {Object} [options]    Available parameters:
- *                              {String | Number | function} [left]
- *                              {String | Number | function} [top]
- *                              {String | Number | function} [width]
- *                              {String | Number | function} [height]
- *                              {String | function} [className]
- * @constructor ContentPanel
- * @extends Panel
- */
-function ContentPanel(parent, depends, options) {
-  this.id = util.randomUUID();
-  this.parent = parent;
-  this.depends = depends;
-
-  this.options = options || {};
-}
-
-ContentPanel.prototype = new Component();
-
-/**
- * Set options. Will extend the current options.
- * @param {Object} [options]    Available parameters:
- *                              {String | function} [className]
- *                              {String | Number | function} [left]
- *                              {String | Number | function} [top]
- *                              {String | Number | function} [width]
- *                              {String | Number | function} [height]
- */
-ContentPanel.prototype.setOptions = Component.prototype.setOptions;
-
-/**
- * Get the container element of the panel, which can be used by a child to
- * add its own widgets.
- * @returns {HTMLElement} container
- */
-ContentPanel.prototype.getContainer = function () {
-  return this.frame;
-};
-
-/**
- * Repaint the component
- */
-ContentPanel.prototype.repaint = function () {
-  var asString = util.option.asString,
-      options = this.options,
-      frame = this.frame;
-
-  // create frame
-  if (!frame) {
-    frame = document.createElement('div');
-    this.frame = frame;
-
-    if (!this.parent) throw new Error('Cannot repaint panel: no parent attached');
-    var parentContainer = this.parent.getContainer();
-    if (!parentContainer) throw new Error('Cannot repaint panel: parent has no container element');
-    parentContainer.appendChild(frame);
-  }
-
-  // update className
-  frame.className = 'content-panel' + (options.className ? (' ' + asString(options.className)) : '');
-
-  // update frame size
-  this._updateSize();
-};

src/timeline/component/GroupSet.js

@@ -223,35 +223,24 @@ GroupSet.prototype.repaint = function repaint() {
     var parentContainer = this.parent.getContainer();
     if (!parentContainer) throw new Error('Cannot repaint GroupSet: parent has no container element');
     parentContainer.appendChild(frame);
-  }
 
-  // update classname
-  frame.className = 'groupset' + (options.className ? (' ' + asString(options.className)) : '');
+    // create labels
+    var labelContainer = this.labelPanel.getContainer();
+    if (!labelContainer) throw new Error('Cannot repaint groupset: option "labelContainer" not defined');
 
-  /* TODO: labels
-  // create labels
-  var labelContainer = asElement(options.labelContainer);
-  if (!labelContainer) {
-    throw new Error('Cannot repaint groupset: option "labelContainer" not defined');
-  }
-  if (!labels) {
     labels = document.createElement('div');
     labels.className = 'labels';
+    labelContainer.appendChild(labels);
     this.dom.labels = labels;
-  }
-  if (!labelSet) {
+
     labelSet = document.createElement('div');
     labelSet.className = 'label-set';
     labels.appendChild(labelSet);
     this.dom.labelSet = labelSet;
   }
-  if (!labels.parentNode || labels.parentNode != labelContainer) {
-    if (labels.parentNode) {
-      labels.parentNode.removeChild(labels.parentNode);
-    }
-    labelContainer.appendChild(labels);
-  }
-  */
+
+  // update classname
+  frame.className = 'groupset' + (options.className ? (' ' + asString(options.className)) : '');
 
   var me = this,
       queue = this.queue,
@@ -302,9 +291,6 @@ GroupSet.prototype.repaint = function repaint() {
       }
     });
 
-    // the groupset depends on each of the groups
-    //this.depends = this.groups; // TODO: gives a circular reference through the parent
-
     // update the top positions of the groups in the correct order
     var orderedGroups = this.groupsData.getIds({
       order: this.options.groupOrder
@@ -323,7 +309,6 @@ GroupSet.prototype.repaint = function repaint() {
       })(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
     }
 
-    /* TODO
     // (re)create the labels
     while (labelSet.firstChild) {
       labelSet.removeChild(labelSet.firstChild);
@@ -333,7 +318,6 @@ GroupSet.prototype.repaint = function repaint() {
       label = this._createLabel(id);
       labelSet.appendChild(label);
     }
-    */
   }
 
   // repaint all groups
@@ -389,11 +373,9 @@ GroupSet.prototype.repaint = function repaint() {
   this.width = frame.offsetWidth;
   this.height = frame.offsetHeight;
 
-  /* TODO
   // reposition labels
   labelSet.style.top = asSize(options.top, '0');
   labelSet.style.height = fixedHeight ? asSize(options.height) : this.height + 'px';
-  */
 };
 
 /**
@@ -446,15 +428,16 @@ GroupSet.prototype.getLabelsWidth = function getContainer() {
 
 /**
  * Hide the component from the DOM
- * @return {Boolean} changed
  */
 GroupSet.prototype.hide = function hide() {
-  if (this.dom.frame && this.dom.frame.parentNode) {
-    this.dom.frame.parentNode.removeChild(this.dom.frame);
-    return true;
+  var frame = this.dom.frame;
+  if (frame && frame.parentNode) {
+    frame.parentNode.removeChild(frame);
   }
-  else {
-    return false;
+
+  var labels = this.dom.labels;
+  if (labels && labels.parentNode) {
+    labels.parentNode.removeChild(labels.parentNode);
   }
 };
 

src/timeline/component/RootPanel.js

@@ -119,7 +119,7 @@ RootPanel.prototype._watch = function () {
         me.lastWidth = me.frame.clientWidth;
         me.lastHeight = me.frame.clientHeight;
         me.repaint();
-        // TODO: emit a resize event
+        // TODO: emit a resize event instead?
       }
     }
   };

src/timeline/component/css/groupset.css

@@ -34,6 +34,9 @@
 
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+
+  -webkit-transition: height .4s ease-in-out;
+  transition:         height .4s ease-in-out;
 }
 
 .vis.timeline .labels .label-set .vlabel {
@@ -45,6 +48,9 @@
 
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+
+  -webkit-transition: top .4s ease-in-out, height .4s ease-in-out;
+  transition:         top .4s ease-in-out, height .4s ease-in-out;
 }
 
 .vis.timeline.top .labels .label-set .vlabel,

src/timeline/component/css/panel.css

@@ -7,6 +7,7 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 
+  /* FIXME: there is an issue with the height of the items when panel height is animated */
   -webkit-transition: height .4s ease-in-out;
   transition:         height .4s ease-in-out;
 }