Browse Source

removed updating the groups in groupOrderSwap, started docs

kamadaKawai
Martin Fischer 9 years ago
parent
commit
584f266414
2 changed files with 74 additions and 8 deletions
  1. +64
    -2
      docs/timeline/index.html
  2. +10
    -6
      lib/timeline/component/ItemSet.js

+ 64
- 2
docs/timeline/index.html View File

@ -585,12 +585,50 @@ function (option, path) {
</td> </td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','groupEditable', this);">
<td><span parent="groupEditable" class="right-caret"></span> groupEditable</td>
<td>boolean or Object</td>
<td><code>false</code></td>
<td>If true, the groups in the timeline can be manipulated. See also the callbacks <code>onAddGroup</code>, <code>onMoveGroup</code>, and <code>onRemoveGroup</code>. When <code>groupEditable</code> is an object, one can enable or disable individual manipulation actions.
The editing of groups follows the same principles as for items, see section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</tr>
<tr parent="groupEditable" class="hidden">
<td class="indent">groupEditable.add</td>
<td>boolean</td>
<td><code>false</code></td>
<td>If true, new groups can be created in the Timeline. For now adding new groups is done by the user.</td>
</tr>
<tr parent="groupEditable" class="hidden">
<td class="indent">groupEditable.remove</td>
<td>boolean</td>
<td><code>false</code></td>
<td>If true, groups can be deleted. For now removing new groups is done by the user.</td>
</tr>
<tr parent="groupEditable" class="hidden">
<td class="indent">groupEditable.order</td>
<td>boolean</td>
<td><code>false</code></td>
<td>If true, groups can be dragged to change their order. Only applicable when the Timeline has groups.</td>
</tr>
<tr> <tr>
<td>groupOrder</td> <td>groupOrder</td>
<td>String or Function</td> <td>String or Function</td>
<td>none</td>
<td>'order'</td>
<td>Order the groups by a field name or custom sort function. <td>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 <code>order</code> (if set).
</td>
</tr>
<tr>
<td>groupOrderSwap</td>
<td>Function</td>
<td>none</td>
<td>Swaps the positions of two groups. If groups have a custom order (via <code>groupOrder</code>) and groups are configured to be reorderable (via <code>groupEditable.order</code>), 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 <code>order</code> which values are changed. The signature of the <code>groupOrderWap</code> function is:
<pre class="prettyprint lang-js">function groupOrderSwap(fromGroup: Object, toGroup: Object, groups: DataSet)</pre>
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.
</td> </td>
</tr> </tr>
@ -728,6 +766,14 @@ function (option, path) {
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>. <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
</td> </td>
</tr> </tr>
<tr>
<td>onAddGroup</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
</td>
</tr>
<tr> <tr>
<td>onUpdate</td> <td>onUpdate</td>
@ -744,6 +790,14 @@ function (option, path) {
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>. <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
</td> </td>
</tr> </tr>
<tr>
<td>onMoveGroup</td>
<td>function</td>
<td>none</td>
<td>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 <code>onMove</code>.
</td>
</tr>
<tr> <tr>
<td>onMoving</td> <td>onMoving</td>
@ -760,6 +814,14 @@ function (option, path) {
<td>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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>. <td>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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
</td> </td>
</tr> </tr>
<tr>
<td>onRemoveGroup</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
</td>
</tr>
<tr> <tr>
<td>order</td> <td>order</td>

+ 10
- 6
lib/timeline/component/ItemSet.js View File

@ -34,12 +34,10 @@ function ItemSet(body, options) {
}, },
align: 'auto', // alignment of box items align: 'auto', // alignment of box items
stack: true, 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', groupOrder: 'order',
@ -1478,6 +1476,8 @@ ItemSet.prototype._onGroupDrag = function (event) {
// switch groups // switch groups
if (draggedGroup && targetGroup) { if (draggedGroup && targetGroup) {
this.options.groupOrderSwap(draggedGroup, targetGroup, this.groupsData); this.options.groupOrderSwap(draggedGroup, targetGroup, this.groupsData);
this.groupsData.update(draggedGroup);
this.groupsData.update(targetGroup);
} }
// fetch current order of groups // fetch current order of groups
@ -1525,6 +1525,8 @@ ItemSet.prototype._onGroupDrag = function (event) {
var switchGroup = groupsData.get(newOrder[curPos+newOffset]); var switchGroup = groupsData.get(newOrder[curPos+newOffset]);
var shouldBeGroup = groupsData.get(origOrder[curPos+orgOffset]); var shouldBeGroup = groupsData.get(origOrder[curPos+orgOffset]);
this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData); this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData);
groupsData.update(switchGroup);
groupsData.update(shouldBeGroup);
var switchGroupId = newOrder[curPos+newOffset]; var switchGroupId = newOrder[curPos+newOffset];
newOrder[curPos+newOffset] = origOrder[curPos+orgOffset]; newOrder[curPos+newOffset] = origOrder[curPos+orgOffset];
@ -1583,6 +1585,8 @@ ItemSet.prototype._onGroupDragEnd = function (event) {
var switchGroup = dataset.get(newOrder[curPos]); var switchGroup = dataset.get(newOrder[curPos]);
var shouldBeGroup = dataset.get(origOrder[curPos]); var shouldBeGroup = dataset.get(origOrder[curPos]);
me.options.groupOrderSwap(switchGroup, shouldBeGroup, dataset); me.options.groupOrderSwap(switchGroup, shouldBeGroup, dataset);
groupsData.update(switchGroup);
groupsData.update(shouldBeGroup);
var switchGroupId = newOrder[curPos]; var switchGroupId = newOrder[curPos];
newOrder[curPos] = origOrder[curPos]; newOrder[curPos] = origOrder[curPos];

Loading…
Cancel
Save