Browse Source

Group Dragging in Timeline

kamadaKawai
Martin Fischer 9 years ago
parent
commit
b68030a546
2 changed files with 55 additions and 2 deletions
  1. +53
    -2
      lib/timeline/component/ItemSet.js
  2. +2
    -0
      lib/timeline/optionsTimeline.js

+ 53
- 2
lib/timeline/component/ItemSet.js View File

@ -34,7 +34,14 @@ function ItemSet(body, options) {
}, },
align: 'auto', // alignment of box items align: 'auto', // alignment of box items
stack: true, 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, selectable: true,
multiselect: false, multiselect: false,
@ -127,6 +134,7 @@ function ItemSet(body, options) {
this.stackDirty = true; // if true, all items will be restacked on next redraw this.stackDirty = true; // if true, all items will be restacked on next redraw
this.touchParams = {}; // stores properties while dragging this.touchParams = {}; // stores properties while dragging
this.groupTouchParams = {};
// create the HTML DOM // create the HTML DOM
this._create(); this._create();
@ -209,6 +217,12 @@ ItemSet.prototype._create = function(){
// add item on doubletap // add item on doubletap
this.hammer.on('doubletap', this._onAddItem.bind(this)); 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 // attach to the DOM
this.show(); this.show();
}; };
@ -280,7 +294,7 @@ ItemSet.prototype._create = function(){
ItemSet.prototype.setOptions = function(options) { ItemSet.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // 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); util.selectiveExtend(fields, this.options, options);
if ('orientation' in 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 * Handle selecting/deselecting an item when tapping it
* @param {Event} event * @param {Event} event

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

@ -63,6 +63,7 @@ let allOptions = {
__type__: {object} __type__: {object}
}, },
groupOrder: {string, 'function': 'function'}, groupOrder: {string, 'function': 'function'},
groupsDraggable: {boolean},
height: {string, number}, height: {string, number},
hiddenDates: {object, array}, hiddenDates: {object, array},
locale:{string}, locale:{string},
@ -157,6 +158,7 @@ let configureOptions = {
}, },
//groupOrder: {string, 'function': 'function'}, //groupOrder: {string, 'function': 'function'},
groupsDraggable: false,
height: '', height: '',
//hiddenDates: {object, array}, //hiddenDates: {object, array},
locale: '', locale: '',

Loading…
Cancel
Save