display profile picture image

src/pages/profile_page.html

@@ -102,8 +102,11 @@
 </div>
 
 <div id="resize_photo_dialouge" class="card static_center hidden">
+    <div id="image_container">
+        <img id="new_profile_image" alt="new-profile-image" />
+        <div id="darken_part"></div>
+    </div>
     <div id="resize_photo_box"></div>
-    <img id="new_profile_image" alt="new-profile-image" />
     <button id="confirm_change">Confirm Change</button>
 </div>
 
@@ -178,9 +181,11 @@
     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", () => {
-        fileInput.click(); // opens file picker
+        fileInput.click();
     });
 </script>
 
@@ -189,6 +194,9 @@
         image = null,
         file = null;
 
+    var x_start = 0,
+        y_start = 0;
+
     fileInput.addEventListener("change", async () => {
         document.getElementById("popup_background").classList.remove("hidden");
 
@@ -207,16 +215,15 @@
         image = URL.createObjectURL(file);
         const bitmap = await createImageBitmap(file);
 
-        var new_profile_image = document.getElementById("new_profile_image");
         new_profile_image.src = image;
-        var resize_photo_box = document.getElementById("resize_photo_box");
 
-        resize_photo_box.style.setProperty("--img-width", bitmap.width + "px");
         resize_photo_box.style.setProperty(
-            "--img-height",
-            bitmap.height + "px",
+            "--image-width",
+            bitmap.width + "px",
         );
-        return;
+
+        new_profile_image.style.setProperty("--x-offset", "0px");
+        new_profile_image.style.setProperty("--y-offset", "0px");
     });
 
     confirm_change.addEventListener("click", async () => {
@@ -248,9 +255,37 @@
         img.src = image;
         currentPreviewURL = image;
     });
+
+    // var mouseClicked = false;
+    // resize_photo_box.addEventListener("mousemove", () => {
+    //     if (!mouseClicked) return;
+    //     pos_difference_x = currentX - x_start;
+    //     pos_difference_y = currentY - y_start;
+
+    //     resize_photo_box.style.setProperty(
+    //         "--x-offset",
+    //         pos_difference_x + "px",
+    //     );
+    //     resize_photo_box.style.setProperty(
+    //         "--y-offset",
+    //         pos_difference_y + "px",
+    //     );
+    // });
+
+    // resize_photo_box.addEventListener("mousedown", () => {
+    //     x_start = currentX;
+    //     y_start = currentY;
+    //     mouseClicked = true;
+    //     console.log("fdsfsd");
+    // });
+
+    // resize_photo_box.addEventListener("mouseup", () => {
+    //     mouseClicked = false;
+    // });
 </script>
 
 <script src="/static/error/error.js" type="text/javascript"></script>
+<script src="/static/javascript/cursor.js" type="text/javascript"></script>
 <script
     src="/static/javascript/password_strength.js"
     type="text/javascript"