Browse Source

[Timeline] Group height mode (#3670)

* add heightMode option

* add documentation

* improve documentation
develop
Francesco Stefanini 7 years ago
committed by Yotam Berkowitz
parent
commit
9ae7d62a00
4 changed files with 36 additions and 9 deletions
  1. +13
    -0
      docs/timeline/index.html
  2. +20
    -7
      lib/timeline/component/Group.js
  3. +1
    -1
      lib/timeline/component/ItemSet.js
  4. +2
    -1
      lib/timeline/optionsTimeline.js

+ 13
- 0
docs/timeline/index.html View File

@ -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>

+ 20
- 7
lib/timeline/component/Group.js View File

@ -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;
});
}

+ 1
- 1
lib/timeline/component/ItemSet.js View File

@ -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);

+ 2
- 1
lib/timeline/optionsTimeline.js View File

@ -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: '',

Loading…
Cancel
Save