1 files changed, 43 insertions, 0 deletions
diff --git a/static/dragable.ts b/static/dragable.ts
new file mode 100644
index 00000000..6eb0b999
--- /dev/null
+++ b/static/dragable.ts
@@ -0,0 +1,43 @@
+/*
+  Apply to a given component to make it draggable.
+  Drag area (usually a title bar) should be be the only argument.
+  It is REQUIRED that the object which should be moved have the class
+  'popup-container';
+*/
+
+
+/*
+  Given the navbar of a popup, make it dragable.
+ */
+function bind_popup_control (nav) {
+
+    if (! nav.closest('.popup-container')) {
+        throw TypeError('not a popup container');
+    }
+
+    nav.onmousedown = function (e) {
+        /* Ignore mousedown on children */
+        if (e.target != nav) return;
+        nav.style.cursor = "grabbing";
+        nav.dataset.grabbed = "true";
+        nav.dataset.grabPoint = e.clientX + ";" + e.clientY;
+        // let popup = nav.closest(".popup-container");
+        let popup = nav.closest("popup-element");
+        nav.dataset.startPoint = popup.offsetLeft + ";" + popup.offsetTop;
+    }
+    window.addEventListener('mousemove', function (e) {
+        if (nav.dataset.grabbed) {
+            let [x, y] = nav.dataset.grabPoint.split(";").map(Number);
+            let [startX, startY] = nav.dataset.startPoint.split(";").map(Number);
+            // let popup = nav.closest(".popup-container");
+            let popup = nav.closest("popup-element");
+
+            popup.style.left = startX + (e.clientX - x) + "px";
+            popup.style.top = startY + (e.clientY - y) + "px";
+        }
+    });
+    window.addEventListener('mouseup', function () {
+        nav.dataset.grabbed = "";
+        nav.style.cursor = "";
+    });
+}