Simplified component relations in timeline

src/component/groupset.js

@@ -280,12 +280,14 @@ GroupSet.prototype.reflow = function reflow() {
         options = this.options,
         update = util.updateProperty,
         asNumber = util.option.asNumber,
+        asSize = util.option.asSize,
         frame = this.frame;
 
     if (frame) {
         var maxHeight = asNumber(options.maxHeight);
+        var fixedHeight = (asSize(options.height) != null);
         var height;
-        if (options.height != null) {
+        if (fixedHeight) {
             height = frame.offsetHeight;
         }
         else {

src/component/itemset.js

@@ -317,6 +317,7 @@ ItemSet.prototype.reflow = function reflow () {
         marginItem = options.margin && options.margin.item || this.defaultOptions.margin.item,
         update = util.updateProperty,
         asNumber = util.option.asNumber,
+        asSize = util.option.asSize,
         frame = this.frame;
 
     if (frame) {
@@ -331,8 +332,9 @@ ItemSet.prototype.reflow = function reflow () {
         this.stack.update();
 
         var maxHeight = asNumber(options.maxHeight);
+        var fixedHeight = (asSize(options.height) != null);
         var height;
-        if (options.height != null) {
+        if (fixedHeight) {
             height = frame.offsetHeight;
         }
         else {

src/visualization/timeline.js

@@ -28,6 +28,16 @@ function Timeline (container, items, options) {
         throw new Error('No container element provided');
     }
     var mainOptions = Object.create(this.options);
+    mainOptions.height = function () {
+        if (me.options.height) {
+            // fixed height
+            return me.options.height;
+        }
+        else {
+            // auto height
+            return me.timeaxis.height + me.content.height;
+        }
+    };
     this.main = new RootPanel(container, mainOptions);
     this.controller.add(this.main);
 
@@ -82,58 +92,6 @@ Timeline.prototype.setOptions = function (options) {
         util.extend(this.options, options);
     }
 
-    var itemsTop,
-        itemsHeight,
-        mainHeight,
-        maxHeight,
-        me = this;
-
-    if (this.options.orientation == 'top') {
-        itemsTop = function () {
-            return me.timeaxis.height;
-        }
-    }
-    else {
-        itemsTop = function () {
-            return me.main.height - me.timeaxis.height - me.content.height;
-        }
-    }
-
-    if (this.options.height) {
-        // fixed height
-        mainHeight = this.options.height;
-        itemsHeight = function () {
-            return me.main.height - me.timeaxis.height;
-        };
-    }
-    else {
-        // auto height
-        mainHeight = function () {
-            return me.timeaxis.height + me.content.height;
-        };
-        itemsHeight = null;
-    }
-
-    // TODO: maxHeight should be a string in px or % (currently only accepts a number)
-    if (this.options.maxHeight) {
-        if (!util.isNumber(this.options.maxHeight)) {
-            throw new TypeError('Number expected for property maxHeight');
-        }
-        maxHeight = function () {
-            return me.options.maxHeight - me.timeaxis.height;
-        }
-    }
-
-    this.main.setOptions({
-        height: mainHeight
-    });
-
-    this.content.setOptions({
-        top: itemsTop,
-        height: itemsHeight,
-        maxHeight: maxHeight
-    });
-
     this.controller.repaint();
 };
 
@@ -199,6 +157,7 @@ Timeline.prototype.setItems = function(items) {
  * @param {vis.DataSet | Array | DataTable} groups
  */
 Timeline.prototype.setGroups = function(groups) {
+    var me = this;
     this.groupsData = groups;
 
     // switch content type between ItemSet or GroupSet when needed
@@ -217,7 +176,36 @@ Timeline.prototype.setGroups = function(groups) {
         }
 
         // create new content set
-        this.content = new type(this.main, [this.timeaxis]);
+        var options = {
+            top: function () {
+                if (me.options.orientation == 'top') {
+                    return me.timeaxis.height;
+                }
+                else {
+                    return me.main.height - me.timeaxis.height - me.content.height;
+                }
+            },
+            height: function () {
+                if (me.options.height) {
+                    return me.main.height - me.timeaxis.height;
+                }
+                else {
+                    return null;
+                }
+            },
+            maxHeight: function () {
+                if (me.options.maxHeight) {
+                    if (!util.isNumber(me.options.maxHeight)) {
+                        throw new TypeError('Number expected for property maxHeight');
+                    }
+                    return me.options.maxHeight - me.timeaxis.height;
+                }
+                else {
+                    return null;
+                }
+            }
+        };
+        this.content = new type(this.main, [this.timeaxis], options);
         if (this.content.setRange) {
             this.content.setRange(this.range);
         }
@@ -228,7 +216,6 @@ Timeline.prototype.setGroups = function(groups) {
             this.content.setGroups(this.groupsData);
         }
         this.controller.add(this.content);
-        this.setOptions(this.options);
     }
 };
 

test/timeline.html

@@ -64,7 +64,7 @@
             //end: now.clone().add('days', 7).valueOf(),
             min: moment('2013-01-01').valueOf(),
             max: moment('2013-12-31').valueOf(),
-            //maxHeight: 150,
+            //maxHeight: 200,
             zoomMin: 1000 * 60 * 60 * 24,            // 1 day
             zoomMax: 1000 * 60 * 60 * 24 * 30 * 6    // 6 months
         };

vis.js

@@ -4884,6 +4884,7 @@ ItemSet.prototype.reflow = function reflow () {
         marginItem = options.margin && options.margin.item || this.defaultOptions.margin.item,
         update = util.updateProperty,
         asNumber = util.option.asNumber,
+        asSize = util.option.asSize,
         frame = this.frame;
 
     if (frame) {
@@ -4898,8 +4899,9 @@ ItemSet.prototype.reflow = function reflow () {
         this.stack.update();
 
         var maxHeight = asNumber(options.maxHeight);
+        var fixedHeight = (asSize(options.height) != null);
         var height;
-        if (options.height != null) {
+        if (fixedHeight) {
             height = frame.offsetHeight;
         }
         else {
@@ -6380,12 +6382,14 @@ GroupSet.prototype.reflow = function reflow() {
         options = this.options,
         update = util.updateProperty,
         asNumber = util.option.asNumber,
+        asSize = util.option.asSize,
         frame = this.frame;
 
     if (frame) {
         var maxHeight = asNumber(options.maxHeight);
+        var fixedHeight = (asSize(options.height) != null);
         var height;
-        if (options.height != null) {
+        if (fixedHeight) {
             height = frame.offsetHeight;
         }
         else {
@@ -6510,6 +6514,16 @@ function Timeline (container, items, options) {
         throw new Error('No container element provided');
     }
     var mainOptions = Object.create(this.options);
+    mainOptions.height = function () {
+        if (me.options.height) {
+            // fixed height
+            return me.options.height;
+        }
+        else {
+            // auto height
+            return me.timeaxis.height + me.content.height;
+        }
+    };
     this.main = new RootPanel(container, mainOptions);
     this.controller.add(this.main);
 
@@ -6564,58 +6578,6 @@ Timeline.prototype.setOptions = function (options) {
         util.extend(this.options, options);
     }
 
-    var itemsTop,
-        itemsHeight,
-        mainHeight,
-        maxHeight,
-        me = this;
-
-    if (this.options.orientation == 'top') {
-        itemsTop = function () {
-            return me.timeaxis.height;
-        }
-    }
-    else {
-        itemsTop = function () {
-            return me.main.height - me.timeaxis.height - me.content.height;
-        }
-    }
-
-    if (this.options.height) {
-        // fixed height
-        mainHeight = this.options.height;
-        itemsHeight = function () {
-            return me.main.height - me.timeaxis.height;
-        };
-    }
-    else {
-        // auto height
-        mainHeight = function () {
-            return me.timeaxis.height + me.content.height;
-        };
-        itemsHeight = null;
-    }
-
-    // TODO: maxHeight should be a string in px or % (currently only accepts a number)
-    if (this.options.maxHeight) {
-        if (!util.isNumber(this.options.maxHeight)) {
-            throw new TypeError('Number expected for property maxHeight');
-        }
-        maxHeight = function () {
-            return me.options.maxHeight - me.timeaxis.height;
-        }
-    }
-
-    this.main.setOptions({
-        height: mainHeight
-    });
-
-    this.content.setOptions({
-        top: itemsTop,
-        height: itemsHeight,
-        maxHeight: maxHeight
-    });
-
     this.controller.repaint();
 };
 
@@ -6681,6 +6643,7 @@ Timeline.prototype.setItems = function(items) {
  * @param {vis.DataSet | Array | DataTable} groups
  */
 Timeline.prototype.setGroups = function(groups) {
+    var me = this;
     this.groupsData = groups;
 
     // switch content type between ItemSet or GroupSet when needed
@@ -6699,7 +6662,36 @@ Timeline.prototype.setGroups = function(groups) {
         }
 
         // create new content set
-        this.content = new type(this.main, [this.timeaxis]);
+        var options = {
+            top: function () {
+                if (me.options.orientation == 'top') {
+                    return me.timeaxis.height;
+                }
+                else {
+                    return me.main.height - me.timeaxis.height - me.content.height;
+                }
+            },
+            height: function () {
+                if (me.options.height) {
+                    return me.main.height - me.timeaxis.height;
+                }
+                else {
+                    return null;
+                }
+            },
+            maxHeight: function () {
+                if (me.options.maxHeight) {
+                    if (!util.isNumber(me.options.maxHeight)) {
+                        throw new TypeError('Number expected for property maxHeight');
+                    }
+                    return me.options.maxHeight - me.timeaxis.height;
+                }
+                else {
+                    return null;
+                }
+            }
+        };
+        this.content = new type(this.main, [this.timeaxis], options);
         if (this.content.setRange) {
             this.content.setRange(this.range);
         }
@@ -6710,7 +6702,6 @@ Timeline.prototype.setGroups = function(groups) {
             this.content.setGroups(this.groupsData);
         }
         this.controller.add(this.content);
-        this.setOptions(this.options);
     }
 };