diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index b6ac97ab..52d5ded3 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -34,7 +34,14 @@ function ItemSet(body, options) { }, align: 'auto', // alignment of box items stack: true, - groupOrder: null, + groupsDraggable: false, + groupOrder: function(a,b) { + if (a.order != undefined && b.order != undefined) { + return (a.order - b.order); + } else { + return 0; + } + }, selectable: true, multiselect: false, @@ -127,6 +134,7 @@ function ItemSet(body, options) { this.stackDirty = true; // if true, all items will be restacked on next redraw this.touchParams = {}; // stores properties while dragging + this.groupTouchParams = {}; // create the HTML DOM this._create(); @@ -209,6 +217,12 @@ ItemSet.prototype._create = function(){ // add item on doubletap this.hammer.on('doubletap', this._onAddItem.bind(this)); + this.groupHammer = new Hammer(this.body.dom.leftContainer); + this.groupHammer.on('panstart', this._onGroupDragStart.bind(this)); + this.groupHammer.on('panmove', this._onGroupDrag.bind(this)); + this.groupHammer.on('panend', this._onGroupDragEnd.bind(this)); + this.groupHammer.get('pan').set({threshold:5, direction:30}); + // attach to the DOM this.show(); }; @@ -280,7 +294,7 @@ ItemSet.prototype._create = function(){ ItemSet.prototype.setOptions = function(options) { if (options) { // copy all options that we know - var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template','groupTemplate','hide', 'snap']; + var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupsDraggable']; util.selectiveExtend(fields, this.options, options); if ('orientation' in options) { @@ -1389,6 +1403,43 @@ ItemSet.prototype._onDragEnd = function (event) { } }; +ItemSet.prototype._onGroupDragStart = function (event) { + if (this.options.groupsDraggable) { + this.groupTouchParams.group = this.groupFromTarget(event); + if (this.groupTouchParams.group) { + event.stopPropagation(); + } + } +} + +ItemSet.prototype._onGroupDrag = function (event) { + if (this.options.groupsDraggable && this.groupTouchParams.group) { + event.stopPropagation(); + + // drag from one group to another + var group = this.groupFromTarget(event); + if (group && group != this.groupTouchParams.group) { + var groupsData = this.groupsData; + var draggedGroup = groupsData.get(this.groupTouchParams.group.groupId); + var targetGroup = groupsData.get(group.groupId); + + if (draggedGroup && targetGroup) { + var targetOrder = targetGroup.order; + targetGroup.order = draggedGroup.order; + groupsData.update(targetGroup); + draggedGroup.order = targetOrder; + groupsData.update(draggedGroup); + } + } + } +} + +ItemSet.prototype._onGroupDragEnd = function (event) { + if (this.options.groupsDraggable) { + this.body.emitter.emit('groupDragged'); + } +} + /** * Handle selecting/deselecting an item when tapping it * @param {Event} event diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index da4c4803..12644c2a 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -63,6 +63,7 @@ let allOptions = { __type__: {object} }, groupOrder: {string, 'function': 'function'}, + groupsDraggable: {boolean}, height: {string, number}, hiddenDates: {object, array}, locale:{string}, @@ -157,6 +158,7 @@ let configureOptions = { }, //groupOrder: {string, 'function': 'function'}, + groupsDraggable: false, height: '', //hiddenDates: {object, array}, locale: '',