From 4c52dcb8a09d0260e16aba2e8fb76155709051f3 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Wed, 28 Jun 2023 22:12:32 +0200
Subject: [PATCH] Make dialogs draggable

---
 ui/media/js/image-modifiers.js               |  1 +
 ui/media/js/main.js                          |  1 +
 ui/media/js/utils.js                         | 45 ++++++++++++++++++++
 ui/plugins/ui/tiled-image-download.plugin.js |  1 +
 4 files changed, 48 insertions(+)

diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index a5de2949..c4c9a814 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -566,4 +566,5 @@ modifierSettingsCloseBtn.addEventListener("click", (e) => {
 })
 
 modalDialogCloseOnBackdropClick(modifierSettingsDialog)
+makeDialogDraggable(modifierSettingsDialog)
 
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 5aecf73d..279feddb 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1507,6 +1507,7 @@ clearAllPreviewsBtn.addEventListener("click", (e) => {
 showDownloadDialogBtn.addEventListener("click", (e) => { saveAllImagesDialog.showModal() }) 
 saveAllImagesCloseBtn.addEventListener("click", (e) => { saveAllImagesDialog.close() })
 modalDialogCloseOnBackdropClick(saveAllImagesDialog)
+makeDialogDraggable(saveAllImagesDialog)
 
 saveAllZipToggle.addEventListener("change", (e) => {
     if (saveAllZipToggle.checked) {
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index a47114e3..21c4afd1 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -1066,3 +1066,48 @@ function modalDialogCloseOnBackdropClick(dialog) {
         }
     })
 }
+
+function makeDialogDraggable(element) {
+    element.querySelector(".dialog-header").addEventListener('mousedown', (function() {
+        let deltaX=0
+        let deltaY=0
+        let dragStartX=0
+        let dragStartY=0
+        let oldTop=0
+        let oldLeft=0
+
+        function dlgDragStart(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            dragStartX = e.clientX;
+            dragStartY = e.clientY;
+            oldTop = parseInt(d.style.top)
+            oldLeft = parseInt(d.style.left)
+            if (isNaN(oldTop)) { oldTop=0 }
+            if (isNaN(oldLeft)) { oldLeft=0 }
+            console.log(oldTop, oldLeft)
+            document.addEventListener('mouseup', dlgDragClose);
+            document.addEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDragClose(e) {
+            document.removeEventListener('mouseup', dlgDragClose);
+            document.removeEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDrag(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            deltaX = dragStartX - e.clientX;
+            deltaY = dragStartY - e.clientY;
+            d.style.left = `${oldLeft-2*deltaX}px`
+            d.style.top  = `${oldTop-2*deltaY}px`
+        }
+
+        return dlgDragStart
+    })() )
+}
+
+
diff --git a/ui/plugins/ui/tiled-image-download.plugin.js b/ui/plugins/ui/tiled-image-download.plugin.js
index fbc9fd28..34f17de8 100644
--- a/ui/plugins/ui/tiled-image-download.plugin.js
+++ b/ui/plugins/ui/tiled-image-download.plugin.js
@@ -140,6 +140,7 @@
     document.getElementById("dti-cancel").addEventListener("click", (e) => downloadTiledImageDialog.close())
     document.getElementById("downnload-tiled-close-button").addEventListener("click", (e) => downloadTiledImageDialog.close())
     modalDialogCloseOnBackdropClick(downloadTiledImageDialog)
+    makeDialogDraggable(downloadTiledImageDialog)
 
     // ---- Stylesheet
     const styleSheet = document.createElement("style")