Allow dragging the message box (#1274)

* Allow dragging the message box

- Allows the message box to be dragged to any position on the screen, so the user can set it to their wishes.
- Something as discussed in #1270.

* Use CSS to prevent user select

* Remove whitespace

* Imagine wasted new lines

* Make it more niece

* Remove unnecessary check

* Fix calculation code

* cursor: move;

* fixup

* Don't declare variable here

* Cap the move to 30px in each side

* I should pay attention to my english lessons

Co-authored-by: tophf <tophf@gmx.com>

js/dlg/message-box.css

@@ -72,6 +72,9 @@
   position: relative;
   min-height: 42px;
   box-sizing: border-box;
+  cursor: move;
+  user-select: none;
+  -moz-user-select: none;
 }
 
 #message-box-title::before {

js/dlg/message-box.js

@@ -43,6 +43,7 @@ messageBox.show = async ({
   bindGlobalListeners();
   createElement();
   document.body.appendChild(messageBox.element);
+  bindElementLiseners();
 
   messageBox._originalFocus = document.activeElement;
   // focus the first focusable child but skip the first external link which is usually `feedback`
@@ -67,7 +68,15 @@ messageBox.show = async ({
     messageBox._resolve = resolve;
   });
 
+  function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+
   function initOwnListeners() {
+    let listening = false;
+    let offsetX = 0;
+    let offsetY = 0;
+    let clickX, clickY;
     messageBox.listeners = {
       closeIcon() {
         resolveWith({button: -1});
@@ -102,6 +111,37 @@ messageBox.show = async ({
       scroll() {
         scrollTo(messageBox._blockScroll.x, messageBox._blockScroll.y);
       },
+      mouseDown(event) {
+        if (event.button !== 0) {
+          return;
+        }
+        if (!listening) {
+          window.on('mouseup', messageBox.listeners.mouseUp, {passive: true});
+          window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
+          listening = true;
+        }
+        clickX = event.clientX - offsetX;
+        clickY = event.clientY - offsetY;
+      },
+      mouseUp(event) {
+        if (event.button !== 0) {
+          return;
+        }
+        window.off('mouseup', messageBox.listeners.mouseUp);
+        window.off('mousemove', messageBox.listeners.mouseMove);
+        listening = false;
+      },
+      mouseMove(event) {
+        const x = clamp(event.clientX, 30, innerWidth - 30) - clickX;
+        const y = clamp(event.clientY, 30, innerHeight - 30) - clickY;
+
+        offsetX = x;
+        offsetY = y;
+
+        $('#message-box > div').style.transform =
+          `translateX(${x}px) 
+          translateY(${y}px)`;
+      },
     };
   }
 
@@ -151,9 +191,16 @@ messageBox.show = async ({
     window.on('keydown', messageBox.listeners.key, true);
   }
 
+  function bindElementLiseners() {
+    $('#message-box-title').on('mousedown', messageBox.listeners.mouseDown, {passive: true});
+  }
+
   function unbindGlobalListeners() {
     window.off('keydown', messageBox.listeners.key, true);
     window.off('scroll', messageBox.listeners.scroll);
+    window.off('mouseup', messageBox.listeners.mouseUp);
+    window.off('mousemove', messageBox.listeners.mouseMove);
+    $('#message-box-title').off('mousedown', messageBox.listeners.mouseDown);
   }
 
   function removeSelf() {