move some stuff to a new JS file

2026-06-14 08:13:30 -04:00
parent 65ed53c5d1
commit 7d1be226b6
2 changed files with 58 additions and 56 deletions
@@ -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);
+});