Fixed ordering of groups

src/timeline/Timeline.js

@@ -398,7 +398,7 @@ Timeline.prototype.setGroups = function(groupSet) {
 
     // remove itemset if existing
     if (this.itemSet) {
-      this.itemSet.hide(); // TODO: not so nice having to hide here
+      //this.itemSet.hide(); // TODO: not so nice having to hide here
       this.contentPanel.removeChild(this.itemSet);
       this.itemSet.setItems(); // disconnect from itemset
       this.itemSet = null;

src/timeline/component/Component.js

@@ -70,36 +70,6 @@ Component.prototype.repaint = function repaint() {
   return false;
 };
 
-/**
- * Hide the component from the DOM
- * @return {Boolean} changed
- */
-// TODO: remove hide and show
-Component.prototype.hide = function hide() {
-  if (this.frame && this.frame.parentNode) {
-    this.frame.parentNode.removeChild(this.frame);
-    return true;
-  }
-  else {
-    return false;
-  }
-};
-
-/**
- * Show the component in the DOM (when not already visible).
- * A repaint will be executed when the component is not visible
- * @return {Boolean} changed
- */
-// TODO: remove hide and show
-Component.prototype.show = function show() {
-  if (!this.frame || !this.frame.parentNode) {
-    return this.repaint();
-  }
-  else {
-    return false;
-  }
-};
-
 /**
  * Test whether the component is resized since the last time _isResized() was
  * called.

src/timeline/component/Group.js

@@ -1,16 +1,16 @@
 /**
  * @constructor Group
- * @param {Panel} contentPanel
- * @param {Panel} labelPanel
+ * @param {Panel} contentPanel  // TODO: replace with a HTML Element
+ * @param {Element} labelFrame
  * @param {Number | String} groupId
  * @param {Object} [options]  Options to set initial property values
  *                            // TODO: describe available options
  * @extends Component
  */
-function Group (contentPanel, labelPanel, groupId, options) {
+function Group (contentPanel, labelFrame, groupId, options) {
   this.id = util.randomUUID();
   this.contentPanel = contentPanel;
-  this.labelPanel = labelPanel;
+  this.labelFrame = labelFrame;
 
   this.groupId = groupId;
   this.itemSet = null;    // ItemSet
@@ -54,14 +54,6 @@ Group.prototype._create = function() {
   this.dom.inner = inner;
 };
 
-/**
- * Get the HTML DOM label of this group
- * @returns {Element} label
- */
-Group.prototype.getLabel = function getLabel() {
-  return this.dom.label;
-};
-
 /**
  * Set the group data for this group
  * @param {Object} data   Group data, can contain properties content and className
@@ -94,7 +86,6 @@ Group.prototype.setData = function setData(data) {
 Group.prototype.setItems = function setItems(itemSet) {
   if (this.itemSet) {
     // remove current item set
-    this.itemSet.hide();
     this.itemSet.setItems();
     this.contentPanel.removeChild(this.itemSet);
     this.itemSet = null;
@@ -119,11 +110,28 @@ Group.prototype.setItems = function setItems(itemSet) {
   }
 };
 
+/**
+ * hide the group, detach from DOM if needed
+ */
+Group.prototype.show = function show() {
+  if (!this.dom.label.parentNode) {
+    this.labelFrame.appendChild(this.dom.label);
+  }
+
+  if (!this.contentPanel.hasChild(this.itemSet)) {
+    this.contentPanel.appendChild(this.itemSet);
+  }
+};
+
 /**
  * hide the group, detach from DOM if needed
  */
 Group.prototype.hide = function hide() {
-  if (this.itemSet) this.itemSet.hide();
+  if (this.dom.label.parentNode) {
+    this.dom.label.parentNode.removeChild(this.dom.label);
+  }
+
+  this.contentPanel.removeChild(this.itemSet);
 };
 
 /**
@@ -160,6 +168,8 @@ Group.prototype.getSelection = function getSelection() {
  * @return {boolean} Returns true if the component is resized
  */
 Group.prototype.repaint = function repaint() {
+  this.show();
+
   var resized = this.itemSet.repaint();
 
   // TODO: top is redundant, cleanup

src/timeline/component/GroupSet.js

@@ -245,7 +245,6 @@ GroupSet.prototype.repaint = function repaint() {
       options = this.options,
       orientation = this.getOption('orientation'),
       groupSet = this.dom.groupSet,
-      labelSet = this.labelSet,
       resized = false,
       me = this,
       queue = this.queue,
@@ -273,7 +272,7 @@ GroupSet.prototype.repaint = function repaint() {
 
             // TODO: do not recreate the group with every update
 
-            group = new Group(me.contentPanel, me.labelPanel, id, groupOptions);
+            group = new Group(me.contentPanel, me.labelSet.frame, id, groupOptions);
             group.on('change', me.emit.bind(me, 'change')); // propagate change event
             group.setRange(me.range);
             group.setItems(me.itemsData); // attach items data
@@ -290,6 +289,7 @@ GroupSet.prototype.repaint = function repaint() {
 
         case 'remove':
           if (group) {
+            group.hide();
             group.setItems(); // detach items data
             delete groups[id];
           }
@@ -306,22 +306,10 @@ GroupSet.prototype.repaint = function repaint() {
       order: this.options.groupOrder
     });
 
-    // (re)create the labels
-    // TODO: move label creation to Group
-    while (labelSet.frame.firstChild) {
-      labelSet.frame.removeChild(labelSet.firstChild);
-    }
-    for (i = 0; i < this.groupIds.length; i++) {
-      id = this.groupIds[i];
-      label = this.groups[id].getLabel();
-      labelSet.frame.appendChild(label);
-    }
-
     // hide the groups now, they will be repainted later in this function
     // in correct order
     this.groupIds.forEach(function (id) {
-      // TODO: hide group here
-      //groups[id].hide();
+      groups[id].hide();
     });
 
     resized = true;
@@ -392,27 +380,15 @@ GroupSet.prototype.getLabelsWidth = function getLabelsWidth() {
  * Hide the component from the DOM
  */
 GroupSet.prototype.hide = function hide() {
-  this.labelPanel.appendChild(this.labelSet);
+  // hide labelset
+  this.labelPanel.removeChild(this.labelSet);
 
+  // TODO: replace the following with a panel holding all itemsets, do not hide groups individually
   for (var groupId in this.groups) {
     if (this.groups.hasOwnProperty(groupId)) {
-      this.groups.hide();
+      this.groups[groupId].hide();
     }
   }
-
-  // TODO: hide labelSet as well
-
-  /* TODO: cleanup
-  var frame = this.dom.frame;
-  if (frame && frame.parentNode) {
-    frame.parentNode.removeChild(frame);
-  }
-
-  var labels = this.dom.labels;
-  if (labels && labels.parentNode) {
-    labels.parentNode.removeChild(labels.parentNode);
-  }
-  */
 };
 
 /**
@@ -421,11 +397,16 @@ GroupSet.prototype.hide = function hide() {
  * @return {Boolean} changed
  */
 GroupSet.prototype.show = function show() {
-  if (!this.dom.frame || !this.dom.frame.parentNode) {
-    return this.repaint();
+  // show label set
+  if (!this.labelPanel.hasChild(this.labelSet)) {
+    this.labelPanel.removeChild(this.labelSet);
   }
-  else {
-    return false;
+
+  // TODO: replace the following with a panel holding all itemsets, do not show groups individually
+  for (var groupId in this.groups) {
+    if (this.groups.hasOwnProperty(groupId)) {
+      this.groups[groupId].show();
+    }
   }
 };
 

src/timeline/component/ItemSet.js

@@ -371,21 +371,6 @@ ItemSet.prototype.getAxis = function getAxis() {
   return this.dom.axis;
 };
 
-/**
- * Hide this component from the DOM
- */
-ItemSet.prototype.hide = function hide() {
-  // remove the DOM
-  if (this.frame && this.frame.parentNode) {
-    this.frame.parentNode.removeChild(this.frame);
-  }
-  /* TODO: cleanup
-  if (this.dom.axis && this.dom.axis.parentNode) {
-    this.dom.axis.parentNode.removeChild(this.dom.axis);
-  }
-  */
-};
-
 /**
  * Set items
  * @param {vis.DataSet | null} items

src/timeline/component/Panel.js

@@ -54,10 +54,17 @@ Panel.prototype.appendChild = function (child) {
   this.childs.push(child);
   child.parent = this;
 
-  var frame = child.getFrame();
+  if (!child.getFrame) {
+    console.log(child);
+
+  }
 
   // attach to the DOM
+  var frame = child.getFrame();
   if (frame) {
+    if (frame.parentNode) {
+      frame.parentNode.removeChild(frame);
+    }
     this.frame.appendChild(frame);
   }
 };
@@ -72,6 +79,15 @@ Panel.prototype.insertBefore = function (child, beforeChild) {
   if (index != -1) {
     this.childs.splice(index, 0, child);
     child.parent = this;
+
+    // attach to the DOM
+    var frame = child.getFrame();
+    if (frame) {
+      if (frame.parentNode) {
+        frame.parentNode.removeChild(frame);
+      }
+      this.frame.appendChild(frame);
+    }
   }
 };
 
@@ -83,15 +99,13 @@ Panel.prototype.removeChild = function (child) {
   var index = this.childs.indexOf(child);
   if (index != -1) {
     this.childs.splice(index, 1);
-
-    var frame = child.getFrame();
+    child.parent = null;
 
     // remove from the DOM
+    var frame = child.getFrame();
     if (frame && frame.parentNode) {
       this.frame.removeChild(frame);
     }
-
-    child.parent = null;
   }
 };