From 7d1be226b6dd8a96733d42c6f106ecc2ba172f2a Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Sun, 14 Jun 2026 08:13:30 -0400
Subject: [PATCH] move some stuff to a new JS file

---
 src/pages/profile_page.html                | 62 +++-------------------
 static/javascript/resize_photo_dialouge.js | 52 ++++++++++++++++++
 2 files changed, 58 insertions(+), 56 deletions(-)
 create mode 100644 static/javascript/resize_photo_dialouge.js

diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index 8968999..defd8db 100644
--- a/src/pages/profile_page.html
+++ b/src/pages/profile_page.html
@@ -178,11 +178,16 @@
     </div>
 </div>
 
+<script src="/static/javascript/cursor.js" type="text/javascript"></script>
+<script
+    src="/static/javascript/resize_photo_dialouge.js"
+    type="text/javascript"
+></script>
+
 <script type="text/javascript">
     const button = document.getElementById("edit_picture_button");
     const fileInput = document.getElementById("file_input");
     const confirm_change = document.getElementById("confirm_change");
-    const resize_photo_box = document.getElementById("resize_photo_box");
     const new_profile_image = document.getElementById("new_profile_image");
 
     button.addEventListener("click", () => {
@@ -190,8 +195,6 @@
     });
 </script>
 
-<script src="/static/javascript/cursor.js" type="text/javascript"></script>
-
 <script type="text/javascript">
     var currentPreviewURL = null,
         image = null,
@@ -261,59 +264,6 @@
         img.src = image;
         currentPreviewURL = image;
     });
-
-    var startXOffset = 0,
-        startYOffset = 0;
-
-    function calculateOffsets() {
-        const yOffset = startYOffset + (currentY - y_start);
-        const xOffset = startXOffset + (currentX - x_start);
-
-        var top = bitmap.height / 2 - yOffset - 175;
-        if (top > 0) top = 0;
-
-        var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
-        if (bottom < 0) bottom = 0;
-
-        var left = bitmap.width / 2 - xOffset - 175;
-        if (left > 0) left = 0;
-
-        var right = -(bitmap.width / 2) - xOffset + 10 + 175;
-        if (right < 0) right = 0;
-        return { x: xOffset + left + right, y: yOffset + top + bottom };
-    }
-
-    var mouseClicked = false;
-    resize_photo_box.addEventListener("mousemove", () => {
-        if (!mouseClicked) return;
-
-        offsets = calculateOffsets();
-
-        y_top = new_profile_image.style.setProperty(
-            "--x-offset",
-            offsets.x + "px",
-        );
-        new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
-    });
-
-    resize_photo_box.addEventListener("mousedown", () => {
-        x_start = currentX;
-        y_start = currentY;
-        mouseClicked = true;
-        set_cursor_state(CURSOR_GRABBING);
-    });
-
-    resize_photo_box.addEventListener("mouseup", () => {
-        offsets = calculateOffsets();
-
-        startXOffset = offsets.x;
-        startYOffset = offsets.y;
-    });
-
-    document.body.addEventListener("mouseup", () => {
-        mouseClicked = false;
-        set_cursor_state(CURSOR_NORMAL);
-    });
 </script>
 
 <script src="/static/error/error.js" type="text/javascript"></script>
diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
new file mode 100644
index 0000000..5aa7497
--- /dev/null
+++ b/static/javascript/resize_photo_dialouge.js
@@ -0,0 +1,52 @@
+const resize_photo_box = document.getElementById("resize_photo_box");
+
+// Drag handling
+var startXOffset = 0,
+  startYOffset = 0;
+
+function calculateOffsets() {
+  const yOffset = startYOffset + (currentY - y_start);
+  const xOffset = startXOffset + (currentX - x_start);
+
+  var top = bitmap.height / 2 - yOffset - 175;
+  if (top > 0) top = 0;
+
+  var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
+  if (bottom < 0) bottom = 0;
+
+  var left = bitmap.width / 2 - xOffset - 175;
+  if (left > 0) left = 0;
+
+  var right = -(bitmap.width / 2) - xOffset + 10 + 175;
+  if (right < 0) right = 0;
+  return { x: xOffset + left + right, y: yOffset + top + bottom };
+}
+
+var mouseClicked = false;
+resize_photo_box.addEventListener("mousemove", () => {
+  if (!mouseClicked) return;
+
+  offsets = calculateOffsets();
+
+  y_top = new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
+  new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
+});
+
+resize_photo_box.addEventListener("mousedown", () => {
+  x_start = currentX;
+  y_start = currentY;
+  mouseClicked = true;
+  set_cursor_state(CURSOR_GRABBING);
+});
+
+resize_photo_box.addEventListener("mouseup", () => {
+  offsets = calculateOffsets();
+
+  startXOffset = offsets.x;
+  startYOffset = offsets.y;
+});
+
+document.body.addEventListener("mouseup", () => {
+  mouseClicked = false;
+  set_cursor_state(CURSOR_NORMAL);
+});