Add basic movement of popups.

2 files changed, 27 insertions, 0 deletions

diff --git a/static/script.js b/static/script.js
index 008cc1e2..af0fba8f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -324,6 +324,28 @@ window.onload = function () {
         }
     }
 
+    for (let nav of document.getElementsByClassName("popup-control")) {
+        nav.onmousedown = function (e) {
+            if (e.target != nav) return;
+            nav.style.cursor = "grabbing";
+            nav.dataset.grabbed = "true";
+            nav.dataset.grabPoint = e.layerX + ";" + e.layerY;
+        }
+        nav.onmousemove = function (e) {
+            if (nav.dataset.grabbed) {
+                let [x, y] = nav.dataset.grabPoint.split(";").map(Number);
+                let popup = nav.closest(".popup-container");
+
+                popup.style.left = popup.offsetLeft + (e.layerX - x) + "px";
+                popup.style.top = popup.offsetTop + (e.layerY - y) + "px";
+            }
+        }
+        nav.onmouseup = function () {
+            nav.dataset.grabbed = "";
+            nav.style.cursor = "";
+        }
+    }
+
     for (let el of document.getElementsByClassName("event")) {
         /* Popup script replaces need for anchors to events.
            On mobile they also have the problem that they make
diff --git a/static/style.css b/static/style.css
index 88342c75..abb4f8c7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -644,6 +644,9 @@ along with their colors.
     display: none;
     position: absolute;
     z-index: 10;
+
+    left: 10px;
+    top: -50px;
 }
 
 .popup-container.visible {
@@ -680,6 +683,8 @@ along with their colors.
     /* not needed, but the icons aren't text
        and should therefor not be copied */
     user-select: none;
+
+    cursor: grab;
 }
 
 .popup-control .btn {