HTML only start creating events on actual drag.

1 files changed, 43 insertions, 25 deletions

diff --git a/static/script.js b/static/script.js
index 984afc28..adfd44de 100644
--- a/static/script.js
+++ b/static/script.js
@@ -40,41 +40,55 @@ let end_time = new Date();
 /* dynamicly created event when dragging */
 let event;
 
+let event_start = { x: NaN, y: NaN };
+
 function create_event_down (e) {
-    /* only allow start of dragging on background */
-    if (e.target != this) return;
+    event_start.x = e.clientX;
+    event_start.y = e.clientY;
+}
+
+function create_event_move (e) {
 
-    /* only on left click */
     if (e.buttons != 1) return;
 
-    /* [0, 1) -- where are we in the container */
-    time = round_time(24 * (e.offsetY / this.clientHeight),
-                      .25)
+    /* Create event when we start moving the mouse. */
+    if (! event) {
+        /* Small deadzone so tiny click and drags aren't registered */
+        if (abs(event_start.x - e.clientX) < 10
+            && abs(event_start.y - e.clientY) < 5)
+        { return; }
 
-    event = document.createElement("div");
-    event.style.top = time * 100/24 + "%";
-    event.dataset.time1 = time;
-    event.dataset.time2 = time;
+        /* only allow start of dragging on background */
+        if (e.target != this) return;
 
-    event.className = "event generated";
-    event.style.pointerEvents = "none";
-    event.style.width = "calc(100% * var(--editmode))";
-    event.innerText = "New Event";
+        /* only on left click */
+        if (e.buttons != 1) return;
 
-    event.dataset.date = this.id;
+        /* [0, 1) -- where are we in the container */
+        time = round_time(24 * (e.offsetY / this.clientHeight),
+                          .25)
 
-    /* Makes all current events transparent when dragging over them.
-       Without this weird stuff happens when moving over them
-    */
-    for (let e of this.children) {
-        e.style.pointerEvents = "none";
-    }
+        event = document.createElement("div");
+        event.style.top = time * 100/24 + "%";
+        event.dataset.time1 = time;
+        event.dataset.time2 = time;
 
-    this.appendChild(event);
-}
+        event.className = "event generated";
+        event.style.pointerEvents = "none";
+        event.style.width = "calc(100% * var(--editmode))";
+        event.innerText = "New Event";
 
-function create_event_move (e) {
-    if (! event) return;
+        event.dataset.date = this.id;
+
+        /* Makes all current events transparent when dragging over them.
+           Without this weird stuff happens when moving over them
+        */
+        for (let e of this.children) {
+            e.style.pointerEvents = "none";
+        }
+
+        this.appendChild(event);
+    }
 
     time2 = event.dataset.time2 =
         round_time(24 * (e.offsetY / event.parentElement.clientHeight),
@@ -165,6 +179,10 @@ function max(a, b) {
     return a > b ? a : b;
 }
 
+function abs(n) {
+    return n < 0 ? - n : n;
+}
+
 function setVar(str, val) {
 	document.documentElement.style.setProperty("--" + str, val);
 }