[Timeline] Group height mode (#3670)

* add heightMode option

* add documentation

* improve documentation

docs/timeline/index.html

@@ -469,6 +469,12 @@ var groups = [
       <td>no</td>
       <td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNested</code> is defaulted to <code>true</code>.</td>
     </tr>
+    <tr>
+      <td>heightMode</td>
+      <td>String</td>
+      <td>no</td>
+      <td>This field is optional. Can be 'auto' (default) or 'fixed'. If set this overrides the global <code>groupHeightMode</code> configuration option for this group.</td>
+    </tr>
   </table>
 
 
@@ -664,6 +670,13 @@ function (option, path) {
       <td>If true, groups can be dragged to change their order. Only applicable when the Timeline has groups. For this option to work properly the groupOrder and groupOrderSwap options have to be set as well.</td>
     </tr>
 
+    <tr>
+      <td>groupHeightMode</td>
+      <td>String</td>
+      <td>'auto'</td>
+      <td>Specifies how the height of a group is calculated. Choose from 'auto' and 'fixed'. If it is set to 'auto' the height will be calculated based on the visible items. While if it is set to 'fixed' the group will keep the same height even if there are no visible items in the window.</td>
+    </tr>
+
     <tr>
       <td>groupOrder</td>
       <td>String or Function</td>

lib/timeline/component/Group.js

@@ -44,6 +44,12 @@ function Group (groupId, data, itemSet) {
     }
   }
 
+  if (data && data.heightMode) {
+    this.heightMode = data.heightMode;
+  } else {
+    this.heightMode = itemSet.options.groupHeightMode;
+  }
+
   this.nestedInGroup = null;
 
   this.dom = {};
@@ -535,12 +541,19 @@ Group.prototype._isGroupVisible = function (range, margin) {
  */
 Group.prototype._calculateHeight = function (margin) {
   // recalculate the height of the group
-  var height;
-  var itemsInRange = this.visibleItems;
-  if (itemsInRange.length > 0) {
-    var min = itemsInRange[0].top;
-    var max = itemsInRange[0].top + itemsInRange[0].height;
-    util.forEach(itemsInRange, function (item) {
+  var height, items;
+
+  if (this.heightMode === 'fixed') {
+    items = util.toArray(this.items);
+  } else {
+    // default or 'auto'
+    items = this.visibleItems;
+  }
+
+  if (items.length > 0) {
+    var min = items[0].top;
+    var max = items[0].top + items[0].height;
+    util.forEach(items, function (item) {
       min = Math.min(min, item.top);
       max = Math.max(max, (item.top + item.height));
     });
@@ -548,7 +561,7 @@ Group.prototype._calculateHeight = function (margin) {
       // there is an empty gap between the lowest item and the axis
       var offset = min - margin.axis;
       max -= offset;
-      util.forEach(itemsInRange, function (item) {
+      util.forEach(items, function (item) {
         item.top -= offset;
       });
     }

lib/timeline/component/ItemSet.js

@@ -371,7 +371,7 @@ ItemSet.prototype.setOptions = function(options) {
     var fields = [
       'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect',
       'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
-      'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime', 'onTimeout'
+      'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime', 'groupHeightMode', 'onTimeout'
     ];
     util.selectiveExtend(fields, this.options, options);
 

lib/timeline/optionsTimeline.js

@@ -79,6 +79,7 @@ let allOptions = {
     __type__: {object}
   },
   moment: {'function': 'function'},
+  groupHeightMode: {string},  
   groupOrder: {string, 'function': 'function'},
   groupEditable: {
     add: { 'boolean': bool, 'undefined': 'undefined'},
@@ -213,7 +214,7 @@ let configureOptions = {
         year:       ''
       }
     },
-
+    groupHeightMode: ['auto', 'fixed'],
     //groupOrder: {string, 'function': 'function'},
     groupsDraggable: false,
     height: '',