Merge branch 'develop'

README.md

@@ -47,14 +47,19 @@ var options = {
   taskAreaSize: '150px', // width of the task column
   quarterHourAreaSize: '17px', // height of a 15 minute segment
   hourStart = 8, // starting time of timetable, 0 to 23
-  hourEnd = 16 // ending time of timetable, 0 to 23
+  hourEnd = 16, // ending time of timetable, 0 to 23
+  clickThreshold = 200, // max. time in ms between mousedown and mouseup for click event
 };
 ```
 
 #### `dragcontext.setMoveCallback(moveCallback)`
 
 Sets the callback which is invoked whenever a task is moved. The updated task object will be passed into the callback.
 
+#### `dragcontext.setClickCallback(clickCallback)`
+
+Sets the callback which is invoked whenever a task is clicked. The updated task object will be passed into the callback.
+
 #### `dragcontext.addTask(task, isAddingToTimetable)`
 
 Attaches a task to the timetable. If `isAddingToTimetable` is true, the task will be added to the timetable DOM (just set this to true for now).

demo/index.js

@@ -6,5 +6,11 @@ window.onload = function() {
   instance.addTask({id: 1, start: 9, end: 11, text: 'Task 1 - Get this stuff done!'}, true);
   instance.addTask({id: 2, start: 12, end: 13, text: 'Task 2 - Get that stuff done!'}, true);
 
+  instance.setMoveCallback(function(task) {
+    console.log('task moved: ' + task.id);
+  });
 
+  instance.setClickCallback(function(task) {
+    console.log('task clicked: ' + task.id);
+  });
 };

src/app.js

@@ -60,16 +60,16 @@ class DragTimetable {
       optionsObj.quarterHourAreaSize = options.quarterHourAreaSize;
     }
 
-    optionsObj.dragulaBag = 'task-bag';
-    if (options.dragulaBag) {
-      optionsObj.dragulaBag = options.dragulaBag;
-    }
-
     optionsObj.is24Clock = false;
     if (options.is24Clock) {
       optionsObj.is24Clock = options.is24Clock;
     }
 
+    optionsObj.clickThreshold = 200;
+    if (options.clickThreshold) {
+      optionsObj.clickThreshold = options.clickThreshold;
+    }
+
     return TimetableCreator.create(container, optionsObj);
   }
 }

src/create.js

@@ -107,7 +107,10 @@ class TimetableCreator {
   }
 
   _initDrag(instance) {
-    instance.contextObj.dragManager = new TimetableDragManager(instance.quarterHourAreaSize, instance.contextObj.spacer, instance.contextObj.taskAreaSize);
+    const callbacks = {
+      onTaskClick: instance.onTaskClick.bind(instance)
+    };
+    instance.contextObj.dragManager = new TimetableDragManager(instance.quarterHourAreaSize, instance.contextObj.spacer, callbacks, instance.contextObj.clickThreshold);
   }
 
 }

src/drag.js

@@ -1,5 +1,5 @@
 class TimetableDraggable {
-  constructor(taskId, element, dragManager) {
+  constructor(taskId, element, dragManager, callbacks) {
     this.taskId = taskId;
     this.element = element;
     this.dragManager = dragManager;
@@ -14,6 +14,7 @@ class TimetableDraggable {
     const boundingRect = ev.currentTarget.getBoundingClientRect();
     this.startOffsetX = ev.clientX - boundingRect.left;
     this.startOffsetY = ev.clientY - boundingRect.top;
+    this.startTouchTime = new Date().getTime();
     this.currentGhostElement = this.element.cloneNode(true);
     this.currentGhostElement.style.position = 'absolute';
     this.currentGhostElement.style.left = (ev.pageX - this.startOffsetX) + "px";
@@ -28,6 +29,9 @@ class TimetableDraggable {
   onTouchEnd(ev) {
     if (this.isDragging) {
       this.isDragging = false;
+      if ((new Date().getTime() - this.startTouchTime) < this.dragManager.clickThreshold) {
+        this.dragManager.callbacks.onTaskClick(this.taskId);
+      }
       if (this.currentGhostElement) {
         this.currentGhostElement.outerHTML = '';
         this.currentGhostElement = null;
@@ -49,9 +53,11 @@ class TimetableDraggable {
 
 export default class TimetableDragManager {
 
-  constructor(unitHeight, spacer) {
+  constructor(unitHeight, spacer, callbacks, clickThreshold) {
+    this.callbacks = callbacks;
     this.unitHeight = unitHeight;
     this.spacer = spacer;
+    this.clickThreshold = clickThreshold;
     this.taskElements = {};
   }
 

src/instance.js

@@ -9,6 +9,10 @@ export default class TimetableInstance {
     this.moveCallback = moveCallback;
   }
 
+  setClickCallback(clickCallback) {
+    this.clickCallback = clickCallback;
+  }
+
   addTask(task, isAddingToTimetable) {
     const newTask = new TimetableTask(task, this.contextObj.taskAreaSize);
     this.contextObj.tasks[task.id] = newTask;
@@ -33,6 +37,12 @@ export default class TimetableInstance {
     this.contextObj.tasks[taskId].updateTaskUI();
   }
 
+  onTaskClick(taskId) {
+    if (this.clickCallback) {
+      this.clickCallback(this.contextObj.tasks[taskId]);
+    }
+  }
+
   getTask(taskId) {
     return this.contextObj.tasks[taskId];
   }