Added a test example for groups. Added ContentPanel (not yet in use)

src/timeline/component/ContentPanel.js

@@ -0,0 +1,113 @@
+/**
+ * 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
+ * @return {Boolean} changed
+ */
+ContentPanel.prototype.repaint = function () {
+    var changed = 0,
+        update = util.updateProperty,
+        asSize = util.option.asSize,
+        options = this.options,
+        frame = this.frame;
+    if (!frame) {
+        frame = document.createElement('div');
+        frame.className = 'content-panel';
+
+        var className = options.className;
+        if (className) {
+            if (typeof className == 'function') {
+                util.addClassName(frame, String(className()));
+            }
+            else {
+                util.addClassName(frame, String(className));
+            }
+        }
+
+        this.frame = frame;
+        changed += 1;
+    }
+    if (!frame.parentNode) {
+        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);
+        changed += 1;
+    }
+
+    changed += update(frame.style, 'top',    asSize(options.top, '0px'));
+    changed += update(frame.style, 'left',   asSize(options.left, '0px'));
+    changed += update(frame.style, 'width',  asSize(options.width, '100%'));
+    changed += update(frame.style, 'height', asSize(options.height, '100%'));
+
+    return (changed > 0);
+};
+
+/**
+ * Reflow the component
+ * @return {Boolean} resized
+ */
+ContentPanel.prototype.reflow = function () {
+    var changed = 0,
+        update = util.updateProperty,
+        frame = this.frame;
+
+    if (frame) {
+        changed += update(this, 'top', frame.offsetTop);
+        changed += update(this, 'left', frame.offsetLeft);
+        changed += update(this, 'width', frame.offsetWidth);
+        changed += update(this, 'height', frame.offsetHeight);
+    }
+    else {
+        changed += 1;
+    }
+
+    return (changed > 0);
+};

src/timeline/component/TimeAxis.js

@@ -360,8 +360,8 @@ TimeAxis.prototype._repaintLine = function() {
         line.style.top = this.props.lineTop + 'px';
     }
     else {
-        if (line && axis.parentElement) {
-            frame.removeChild(axis.line);
+        if (line && line.parentElement) {
+            frame.removeChild(line.line);
             delete this.dom.line;
         }
     }

src/timeline/component/item/ItemBox.js

@@ -66,31 +66,33 @@ ItemBox.prototype.repaint = function repaint() {
         if (!this.parent) {
             throw new Error('Cannot repaint item: no parent attached');
         }
-        var foreground = this.parent.getForeground();
-        if (!foreground) {
-            throw new Error('Cannot repaint time axis: ' +
-                'parent has no foreground container element');
-        }
-        var background = this.parent.getBackground();
-        if (!background) {
-            throw new Error('Cannot repaint time axis: ' +
-                'parent has no background container element');
-        }
-        var axis = this.parent.getAxis();
-        if (!background) {
-            throw new Error('Cannot repaint time axis: ' +
-                'parent has no axis container element');
-        }
 
         if (!dom.box.parentNode) {
+            var foreground = this.parent.getForeground();
+            if (!foreground) {
+                throw new Error('Cannot repaint time axis: ' +
+                    'parent has no foreground container element');
+            }
             foreground.appendChild(dom.box);
             changed = true;
         }
+
         if (!dom.line.parentNode) {
+            var background = this.parent.getBackground();
+            if (!background) {
+                throw new Error('Cannot repaint time axis: ' +
+                    'parent has no background container element');
+            }
             background.appendChild(dom.line);
             changed = true;
         }
+
         if (!dom.dot.parentNode) {
+            var axis = this.parent.getAxis();
+            if (!background) {
+                throw new Error('Cannot repaint time axis: ' +
+                    'parent has no axis container element');
+            }
             axis.appendChild(dom.dot);
             changed = true;
         }

test/timeline_groups.html

@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | Group example</title>
+
+    <style>
+        body, html {
+            font-family: arial, sans-serif;
+            font-size: 11pt;
+        }
+
+        #visualization {
+            box-sizing: border-box;
+            width: 100%;
+            height: 300px;
+        }
+    </style>
+
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
+
+    <script src="../vis.js"></script>
+</head>
+<body>
+
+<div>
+    <label for="orientation">Orientation</label>
+    <select id="orientation">
+        <option value="top">top</option>
+        <option value="bottom" selected>bottom</option>
+    </select>
+</div>
+<script>
+    var orientation = document.getElementById('orientation');
+    orientation.onchange = function () {
+        timeline.setOptions({
+            orientation: orientation.value
+        });
+    };
+</script>
+<br>
+
+<div id="visualization"></div>
+
+<script>
+    var now = moment().minutes(0).seconds(0).milliseconds(0);
+    var groupCount = 3;
+    var itemCount = 20;
+
+    // create a data set with groups
+    var names = ['John', 'Alston', 'Lee', 'Grant'];
+    var groups = new vis.DataSet();
+    for (var g = 0; g < groupCount; g++) {
+        groups.add({id: g, content: names[g]});
+    }
+
+    // create a dataset with items
+    var items = new vis.DataSet();
+    for (var i = 0; i < itemCount; i++) {
+        var start = now.clone().add('hours', Math.random() * 200);
+        var group = Math.floor(Math.random() * groupCount);
+        items.add({
+            id: i,
+            group: group,
+            content: 'item ' + i +
+                    ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
+            start: start,
+            type: 'box'
+        });
+    }
+
+    // create visualization
+    var container = document.getElementById('visualization');
+    var options = {
+        //height: 200,
+        groupOrder: 'content'
+    };
+
+    var timeline = new vis.Timeline(container);
+    timeline.setOptions(options);
+    timeline.setGroups(groups);
+    timeline.setItems(items);
+
+</script>
+</body>
+</html>