diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 79487509..5eaf4a90 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -585,12 +585,50 @@ function (option, path) {
+
+ | groupEditable |
+ boolean or Object |
+ false |
+ If true, the groups in the timeline can be manipulated. See also the callbacks onAddGroup, onMoveGroup, and onRemoveGroup. When groupEditable is an object, one can enable or disable individual manipulation actions.
+ The editing of groups follows the same principles as for items, see section Editing Items for a detailed explanation.
+ |
+
+
+ | groupEditable.add |
+ boolean |
+ false |
+ If true, new groups can be created in the Timeline. For now adding new groups is done by the user. |
+
+
+ | groupEditable.remove |
+ boolean |
+ false |
+ If true, groups can be deleted. For now removing new groups is done by the user. |
+
+
+ | groupEditable.order |
+ boolean |
+ false |
+ If true, groups can be dragged to change their order. Only applicable when the Timeline has groups. |
+
+
| groupOrder |
String or Function |
- none |
+ 'order' |
Order the groups by a field name or custom sort function.
- By default, groups are not ordered.
+ By default, groups are ordered by an attribute order (if set).
+ |
+
+
+
+ | groupOrderSwap |
+ Function |
+ none |
+ Swaps the positions of two groups. If groups have a custom order (via groupOrder) and groups are configured to be reorderable (via groupEditable.order), the user has to provide a function that swaps the positions of two given groups.
+ If this option is not set, the default implementation assumes that groups hold an attribute order which values are changed. The signature of the groupOrderWap function is:
+ function groupOrderSwap(fromGroup: Object, toGroup: Object, groups: DataSet)
+ The first to arguments hold the groups of which the positions are to be swapped and the third argument holds the DataSet with all groups.
|
@@ -728,6 +766,14 @@ function (option, path) {
Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.add are set true |
+
+
+ | onAddGroup |
+ function |
+ none |
+ Callback function triggered when a group is about to be added. The signature and semantics are the same as for onAdd.
+ |
+
| onUpdate |
@@ -744,6 +790,14 @@ function (option, path) {
Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true |
+
+
+ | onMoveGroup |
+ function |
+ none |
+ Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for onMove.
+ |
+
| onMoving |
@@ -760,6 +814,14 @@ function (option, path) {
Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options selectable and editable.remove are set true |
+
+
+ | onRemoveGroup |
+ function |
+ none |
+ Callback function triggered when a group is about to be removed. The signature and semantics are the same as for onRemove.
+ |
+
| order |
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 6ce7f6f8..72b54f83 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -34,12 +34,10 @@ function ItemSet(body, options) {
},
align: 'auto', // alignment of box items
stack: true,
- groupOrderSwap: function(draggedGroup, targetGroup, groups) {
- var targetOrder = targetGroup.order;
- targetGroup.order = draggedGroup.order;
- draggedGroup.order = targetOrder;
- groups.update(draggedGroup);
- groups.update(targetGroup);
+ groupOrderSwap: function(fromGroup, toGroup, groups) {
+ var targetOrder = toGroup.order;
+ toGroup.order = fromGroup.order;
+ fromGroup.order = targetOrder;
},
groupOrder: 'order',
@@ -1478,6 +1476,8 @@ ItemSet.prototype._onGroupDrag = function (event) {
// switch groups
if (draggedGroup && targetGroup) {
this.options.groupOrderSwap(draggedGroup, targetGroup, this.groupsData);
+ this.groupsData.update(draggedGroup);
+ this.groupsData.update(targetGroup);
}
// fetch current order of groups
@@ -1525,6 +1525,8 @@ ItemSet.prototype._onGroupDrag = function (event) {
var switchGroup = groupsData.get(newOrder[curPos+newOffset]);
var shouldBeGroup = groupsData.get(origOrder[curPos+orgOffset]);
this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData);
+ groupsData.update(switchGroup);
+ groupsData.update(shouldBeGroup);
var switchGroupId = newOrder[curPos+newOffset];
newOrder[curPos+newOffset] = origOrder[curPos+orgOffset];
@@ -1583,6 +1585,8 @@ ItemSet.prototype._onGroupDragEnd = function (event) {
var switchGroup = dataset.get(newOrder[curPos]);
var shouldBeGroup = dataset.get(origOrder[curPos]);
me.options.groupOrderSwap(switchGroup, shouldBeGroup, dataset);
+ groupsData.update(switchGroup);
+ groupsData.update(shouldBeGroup);
var switchGroupId = newOrder[curPos];
newOrder[curPos] = origOrder[curPos];