diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 55c0c8d1..505155d8 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -469,6 +469,12 @@ var groups = [ no Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The showNested is defaulted to true. + + heightMode + String + no + This field is optional. Can be 'auto' (default) or 'fixed'. If set this overrides the global groupHeightMode configuration option for this group. + @@ -664,6 +670,13 @@ function (option, path) { 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. + + groupHeightMode + String + 'auto' + 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. + + groupOrder String or Function diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js index 8b748735..1a914c60 100644 --- a/lib/timeline/component/Group.js +++ b/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; }); } diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index bb0e4014..a5b0b688 100644 --- a/lib/timeline/component/ItemSet.js +++ b/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); diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index ab7d147b..dc9b3518 100644 --- a/lib/timeline/optionsTimeline.js +++ b/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: '',