Merge branch 'develop'

Author: Darnell Andries

demo/index.js

@@ -5,4 +5,6 @@ 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);
+
+
 };

gulpfile.js

@@ -9,7 +9,8 @@ var babel = require('gulp-babel');
 gulp.task('bundle', function() {
   return gulp.src('src/**/*.js')
     .pipe(babel({
-      presets: ['es2015']
+      presets: ['es2015'],
+      plugins: ['transform-runtime']
     }))
     .pipe(gulp.dest("dist"));
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drag-timetable",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Simple, customizable draggable timetable.",
   "main": "dist/app.js",
   "scripts": {
@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/DJAndries/drag-timetable#readme",
   "devDependencies": {
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.1.8",
     "babel-preset-es2015": "^6.22.0",
     "babelify": "^7.3.0",
@@ -35,5 +36,7 @@
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "babel-runtime": "^6.23.0"
+  }
 }

src/drag.js

@@ -11,8 +11,9 @@ class TimetableDraggable {
 
   onTouchStart(ev) {
     this.isDragging = true;
-    this.startOffsetX = ev.offsetX;
-    this.startOffsetY = ev.offsetY;
+    const boundingRect = ev.currentTarget.getBoundingClientRect();
+    this.startOffsetX = ev.clientX - boundingRect.left;
+    this.startOffsetY = ev.clientY - boundingRect.top;
     this.currentGhostElement = this.element.cloneNode(true);
     this.currentGhostElement.style.position = 'absolute';
     this.currentGhostElement.style.left = (ev.pageX - this.startOffsetX) + "px";
@@ -28,7 +29,7 @@ class TimetableDraggable {
     if (this.isDragging) {
       this.isDragging = false;
       if (this.currentGhostElement) {
-        this.currentGhostElement.remove();
+        this.currentGhostElement.outerHTML = '';
         this.currentGhostElement = null;
       }
       this.dragManager.spacer.moveEnd(this.taskId);
@@ -41,7 +42,7 @@ class TimetableDraggable {
         this.currentGhostElement.style.left = (ev.pageX - this.startOffsetX) + "px";
         this.currentGhostElement.style.top = (ev.pageY - this.startOffsetY) + "px";
       }
-      this.dragManager.spacer.moveUpdate(ev.pageY - this.startOffsetY - window.scrollY, this.taskId);
+      this.dragManager.spacer.moveUpdate(ev.pageY - this.startOffsetY - document.documentElement.scrollTop, this.taskId);
     }
   }
 }

src/instance.js

@@ -20,8 +20,8 @@ export default class TimetableInstance {
   }
 
   removeTask(taskId) {
-    this.contextObj.tasks[taskId] = undefined;
     this.contextObj.spacer.removeFromTable(this.contextObj.tasks[taskId]);
+    this.contextObj.tasks[taskId] = undefined;
   }
 
   onTaskTimeUpdate(taskId, startTime, endTime) {

src/spacer.js

@@ -87,6 +87,7 @@ export default class TimetableSpacer {
       const spacerId = this.timeToSpacerMap[i];
       this.timeToSpacerMap[i] = {taskId: task.id, boundary: [this.timeToSpacerMap[taskStart], this.timeToSpacerMap[taskEnd - 0.25]], availableValue: spacerId};
       if (i == taskStart) {
+        this.spacerIdToElementArray[spacerId].style.display = '';
         this.spacerIdToElementArray[spacerId].appendChild(task.element);
         this.spacerIdToElementArray[spacerId].setAttribute('rowspan', '' + (endSpacerId - startSpacerId + 1));
       } else {
@@ -106,7 +107,7 @@ export default class TimetableSpacer {
       this.timeToSpacerMap[i] = spacerObj.availableValue;
       const spacerId = spacerObj.availableValue;
       if (i == task.start) {
-        this.spacerIdToElementArray[spacerId].innerHTML = '';
+        this.spacerIdToElementArray[spacerId].removeChild(this.spacerIdToElementArray[spacerId].firstChild);
         this.spacerIdToElementArray[spacerId].setAttribute('rowspan', '1');
       } else {
         this.spacerIdToElementArray[spacerId].style.display = '';
@@ -115,11 +116,16 @@ export default class TimetableSpacer {
   }
 
   _initSpacers() {
+    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
     for (let i = 0.0 + this.hourStart; i < this.hourEnd; i += 0.25) {
       const rowElement = document.createElement('tr');
       const spaceElement = document.createElement('td');
       rowElement.style.height = this.unitHeight;
       spaceElement.setAttribute('class', 'dragtimetable-spacer');
+      if (isFirefox) {
+        spaceElement.style.height = '100%';
+      }
       this.spacerIdToElementArray.push(spaceElement);
       this.timeToSpacerMap[i] = this.spacerIdToElementArray.length - 1;
       this.spacerToTimeMap[this.spacerIdToElementArray.length - 1] = i;

src/task.js

@@ -35,7 +35,7 @@ export default class TimetableTask {
 
   getTimeElement() {
     const timeElement = document.createElement('div');
-    timeElement.innerHTML = '⏰ ' + TimetableUtil.getHourText(this.start) + ' - ' + TimetableUtil.getHourText(this.end);
+    timeElement.innerHTML = '🕐 ' + TimetableUtil.getHourText(this.start) + ' - ' + TimetableUtil.getHourText(this.end);
     timeElement.style.position = 'absolute';
     timeElement.style.bottom = '0px';
     timeElement.style.paddingBottom = '3px';